Firebase Auth + Api Gateway + Cloud Function

API Gateway is a new product of the Google Cloud which is very similar to Cloud Endpoints but the main difference is that it’s serverless.

Pre-requisite for this tutorial: GCP account with Billing Enabled

The Architecture We are going to use

We are going to create a GCP Project, Create a python cloud function, and add an API Gateway to it. Then create a static site in firebase and add Firebase Auth to it. we will Call the cloud Function backend using API Gateway URL. API Gateway will automatically validate the JWT in the request header and forward the request to the cloud function if it's valid otherwise it will respond with 403 forbidden.

Let's start...

Steps

1. Create Project, enable billing & service APIs
2. Create & Deploy a Cloud Function
3. Create API in API Gateway
4. Create Service Account for API Gateway
5. Create OpenAPI Config in API Gateway
6. Create Gateway in API Gateway and Map the API with OpenAPI Config
7. Add firebase to the GCP project
8. Add Auth to Firebase Project from Firebase console
9. Add Firebase login form to the index.html
10. Final Testing
11. Create Project, enable billing & service APIs

gcloud projects create PROJECT-ID — set-as-default
Example
gcloud projects create api-gw-test-proj — set-as-default

Enable Billing for the project

gcloud alpha billing accounts list
gcloud alpha billing projects link my-project — billing-account 0X0X0X-0X0X0X-0X0X0X

Enable the required service APIs

gcloud services enable apigateway.googleapis.com
gcloud services enable servicemanagement.googleapis.com
gcloud services enable servicecontrol.googleapis.com
gcloud services enable cloudbuild.googleapis.com
gcloud services enable cloudfunctions.googleapis.com
gcloud services enable apigateway.googleapis.com

2. Create & Deploy a Cloud Function

cloud_functions/main.py

Deploy the function

cd cloud_functions
gcloud functions deploy hello_get — runtime python38 — trigger-http — no-allow-unauthenticated

Copy the URL & keep it somewhere we will need it later

3. Create API in API Gateway

gcloud api-gateway apis create my-api-name-id
Example:-
gcloud api-gateway apis create test-api

4. Create Service Account for API Gateway

gcloud iam service-accounts create api-gw-be-exe — description=”This service account is used by api-gateway to invoke backend”

Add Cloud Function invoker role to the service account

gcloud projects add-iam-policy-binding PROJECT_ID \ — member=”serviceAccount:SERVICE_ACCOUNT_ID@PROJECT_ID.iam.gserviceaccount.com” \ — role=”roles/cloudfunctions.invoker”
example:-
gcloud projects add-iam-policy-binding api-gw-test-proj — member=”serviceAccount:api-gw-be-exe@api-gw-test-proj.iam.gserviceaccount.com” — role=”roles/cloudfunctions.invoker”

We will attach this service account to the API Config in step 5

5. Create OpenAPI Config in API Gateway

As of now, API Gateway doesn’t support cors so you need to add the options method to all the routes if we want to call it from the browser.

Replace your Project-ID with your project-id & cloud function address with yours

Create api-gateway config:

gcloud api-gateway api-configs create CONFIG_ID \
 — api=API_ID — openapi-spec=API_DEFINITION \
 — backend-auth-service-account=SERVICE_ACCOUNT_EMAIL
Example:-
gcloud api-gateway api-configs create my-api-config — api=test-api — openapi-spec=openapi2-functions.yaml — backend-auth-service-account=api-gw-be-exe@api-gw-test-proj.iam.gserviceaccount.com

6. Create Gateway in API Gateway and Map the API with OpenAPI Config

Get api-id & api-config-id using the below list commands

gcloud api-gateway apis list
gcloud api-gateway api-configs list

Create Gateway

gcloud api-gateway gateways create GATEWAY_ID \
 — api=API_ID — api-config=CONFIG_ID \
 — location=GCP_REGION
Example:-
gcloud api-gateway gateways create my-gateway — api=test-api — api-config=my-api-config — location=us-east1

To get the Gateway Id

gcloud api-gateway gateways list

To get the Gateway URL (use the gateway-id)

gcloud api-gateway gateways describe GATEWAY_ID \
 — location=us-east1

This will give you the gateway URL, keep it somewhere, we will call it from the Web Browser later in the firebase site

7. Add firebase to the GCP project

firebase projects:addfirebase PROJECT-ID
Example:-
firebase projects:addfirebase api-gw-test-proj

Add Hosting

firebase init
select hosting
Use an existing project
What do you want to use as your public directory? public
Configure as a single-page app (rewrite all urls to /index.html)? No
Set up automatic builds and deploys with GitHub? No

8. Add Auth to Firebase Project from Firebase console

Go to https://console.firebase.google.com/

select your project

go to authentication

click on sign-in method and enable email/password

create a user by adding email and password

9. Add Firebase login form to the index.html

Add the below Code inside the <body> of public/index.html

Replace the API-GATEWAY-URL with yours

10. Final Testing

Now start the HTML in your local with the command

firebase serve

open the loaded URL in your browser.

There you will see a page like this

Enter the Email and password which you created in step 8

Then click Trigger Cloud Function, open chrome dev tools -> you can see the response of the backend in the console tab.

If you try clicking the Trigger Cloud Function button without login, you will get an error in the console.