Deploying a web app with JWT authorization in Yandex API Gateway and authentication in Firebase

In this tutorial, you will learn how to implement authentication and authorization based on OAuth 2.0 and OpenID Connect protocols in your web app. For authentication, we will use Google OAuth and Firebase. Authorization will be performed on the API Gateway side using a JWT authorizer. A web app will include:

• Firebase external authentication service.
• Simple REST API deployed as API Gateway.
• Static website deployed in a Yandex Object Storage bucket.

To deploy your web app:

1. Prepare your cloud.
2. Create a project and set up Google OAuth in Google Cloud.
3. Set up authentication in Firebase.
4. Complete Google resource configuration.
5. Create an API gateway.
6. Create web app files.
7. Deploy Yandex Cloud resources and upload the web app to a bucket.
8. Test the created app.

If you no longer need the resources you created, delete them.

Prepare your cloudPrepare your cloud

Sign up for Yandex Cloud and create a billing account:

1. Go to the management console and log in to Yandex Cloud or create an account if you do not have one yet.
2. On the Yandex Cloud Billing page, make sure you have a billing account linked and it has the ACTIVE or TRIAL_ACTIVE status. If you do not have a billing account, create one.

If you have an active billing account, you can go to the cloud page to create or select a folder for your infrastructure to operate in.

Learn more about clouds and folders.

Required paid resourcesRequired paid resources

The infrastructure support cost for running the web app includes:

• Fee for data storage in a bucket and operations with data (see Object Storage pricing).
• Fee for using the API gateway (see API Gateway pricing).

Create a project and set up Google OAuth in Google CloudCreate a project and set up Google OAuth in Google Cloud

Set up Google OAuth:

1. Log in to the Google Cloud Console and create a new project.
2. Go to API & Services → OAuth consent screen, select External as the app type, and click Create.
3. Under OAuth consent screen, enter the app name and your email address in the User support email and Developer contact information fields. Click Save and continue.
4. Under Scopes, click Add or Remove Scopes and add the openid, /auth/userinfo.email, and /auth/userinfo.profile scopes. Click Update → Save and continue.
5. Under Test users, specify your email address. Finish creating your app.
6. In the API & Services → Credentials tab, click Create credential and select OAuth client ID. Specify Web application as the app type.
7. Confirm the app creation and save the Client ID and Client secret.

Set up authentication in FirebaseSet up authentication in Firebase

1. Log in to the Firebase Console and create a new project.
2. Go to Authentication → Sign-in method → Custom providers and select OpenID Connect.
3. Confirm the selection of OpenID Connect.
4. Enter the provider name as well as the Client ID and Client secret you obtained in the previous step. Fill in the Issuer field (for Google OAuth, specify https://accounts.google.com).
5. Save the Callback URL and complete the OpenID setup.

Complete Google resource configurationComplete Google resource configuration

Google Console:

1. In the API & Services → Credentials tab, click the name of the created client.
2. Add the Callback URL from Firebase you obtained in the previous step to the Authorized redirect URIs list. Save your changes.

Firebase:

1. Go to Project Overview → Project settings.
2. Create a web app in the General tab. Specify the app name and click Register App.
3. Save the app configuration generated under firebaseConfig.

Create an API gatewayCreate an API gateway

Create web app filesCreate web app files

1. Clone the repository with the app source code:

   git clone https://github.com/yandex-cloud-examples/yc-serverless-apigw-jwt-authorizer-firebase.git
   

2. Open the src/App.js file using a text editor and specify the following parameters:

   • firebaseConfig: Firebase configuration for your app that you saved when completing Google resource configuration.
   • providerId: ID of the OpenID Connect provider previously created in Firebase, in oidc.<provider_name> format.
   • apiGwDomain: Service domain of the API gateway you created earlier.

3. Install Node.js and the npm package manager: The package manager will be installed automatically during Node.js installation.

4. In the folder with your app:

   1. Install react-scripts in your project and add it to devDependencies in the package.json file:

      npm install react-scripts --save-dev
      

   2. Run your app build:

      npm run build
      

      Result:

      File sizes after gzip:
      
        96.05 kB  build\static\js\main.de7af71f.js
        672 B     build\static\css\main.021818e9.css
      
      The project was built assuming it is hosted at /.
      You can control this with the homepage field in your package.json.
      
      The build folder is ready to be deployed.
      

Deploy Yandex Cloud resources and upload the web app to an Object Storage bucketDeploy Yandex Cloud resources and upload the web app to an Object Storage bucket

Deploy a static website.

1. Create an Object Storage bucket:

   Management console

   CLI

   Terraform

   API

   1. In the management console, select the folder you want to create a bucket in.
   2. Select Object Storage.
   3. Click Create bucket.
   4. On the bucket creation page:
      1. Enter a name for the bucket: bucket-for-tutorial.
      2. In the Object read access field, select Public.
      3. Click Create bucket to complete the operation.

   If you do not have the Yandex Cloud command line interface yet, install and initialize it.

   The folder specified in the CLI profile is used by default. You can specify a different folder using the --folder-name or --folder-id parameter.

   1. Run the following command:

      yc storage bucket create \
        --name bucket-for-tutorial \
        --public-read
      

      Where:

      • --name: Bucket name.
      • --public-read: Flag to enable public access to read bucket objects.

      Result:

      name: bucket-for-tutorial
      folder_id: b1gmit33********
      anonymous_access_flags:
      ...
      versioning: VERSIONING_DISABLED
      acl: {}
      created_at: "2023-06-08T11:57:49.898024Z"
      

   If you don't have Terraform, install it and configure the Yandex Cloud provider.

   1. In the configuration file, describe the resource parameters:

      ...
      resource "yandex_iam_service_account" "sa" {
        name = "<service_account_name>"
      }
      
      resource "yandex_resourcemanager_folder_iam_member" "sa-editor" {
        folder_id = "<folder_ID>"
        role      = "storage.editor"
        member    = "serviceAccount:${yandex_iam_service_account.sa.id}"
      }
      
      resource "yandex_iam_service_account_static_access_key" "sa-static-key" {
        service_account_id = yandex_iam_service_account.sa.id
        description        = "static access key for object storage"
      }
      
      resource "yandex_storage_bucket" "test" {
        access_key = yandex_iam_service_account_static_access_key.sa-static-key.access_key
        secret_key = yandex_iam_service_account_static_access_key.sa-static-key.secret_key
        bucket     = "bucket-for-tutorial"
        acl        = "public-read"
      }
      ...
      

      Where:

      • yandex_iam_service_account: Description of the service account to create and use the bucket:
        • name: Service account name.
      • yandex_storage_bucket: Bucket description:
        • bucket: Bucket name.
        • acl: Bucket access settings.

      For more information about the yandex_storage_bucket resource parameters in Terraform, see the provider documentation.

   2. Create resources:

      1. In the terminal, change to the folder where you edited the configuration file.

      2. Make sure the configuration file is correct using the command:

         terraform validate
         

         If the configuration is correct, the following message is returned:

         Success! The configuration is valid.
         

      3. Run the command:

         terraform plan
         

         The terminal will display a list of resources with parameters. No changes are made at this step. If the configuration contains errors, Terraform will point them out.

      4. Apply the configuration changes:

         terraform apply
         

      5. Confirm the changes: type yes in the terminal and press Enter.

   This will create a bucket in the specified folder.

   To create a bucket, use the create REST API method for the Bucket resource, the BucketService/Create gRPC API call, or the create S3 API method.

2. Upload objects to the Object Storage bucket:

   Management console

   1. In the management console, select the folder to upload objects to.
   2. Select Object Storage.
   3. Click bucket-for-tutorial.
   4. Click Upload and select the previously generated objects in the build folder.
   5. The management console displays all the objects selected for uploading and prompts you to select a storage class. The default storage class is defined in the bucket settings.
   6. Click Upload.
   7. Refresh the page.

   In the management console, the information about the number of objects in the bucket and used up space is updated with a few minutes delay.

3. Set up static website hosting:

   Management console

   CLI

   Terraform

   API

   1. In the management console, go to bucket-for-tutorial.
   2. In the left-hand panel, select Settings.
   3. On the Website tab:
      • Select Hosting.
      • In the Home page field, specify the absolute path to the file of the website home page, index.html.
      • In the Error page field, specify the absolute path to the file to display in case of 4xx errors, error.html.
   4. Click Save.
   5. In the Link field, copy your website's URL.

   If you do not have the Yandex Cloud command line interface yet, install and initialize it.

   The folder specified in the CLI profile is used by default. You can specify a different folder using the --folder-name or --folder-id parameter.

   1. Create the setup.json file with hosting settings in JSON format.

      {
        "index": "index.html",
        "error": "error404.html"
      }
      

      Where:

      • index: Absolute path to the file of the website home page.
      • error: Absolute path to the file the user will see in case of 4xx errors.

   2. Run this command:

      yc storage bucket update --name bucket-for-tutorial \
        --website-settings-from-file setup.json
      

      Where:

      • --name: Bucket name.
      • --website-settings-from-file: Path to the redirect configuration file.

      Result:

      name: my-bucket
      folder_id: b1gjs8dck********
      default_storage_class: STANDARD
      versioning: VERSIONING_SUSPENDED
      max_size: "10737418240"
      acl: {}
      created_at: "2022-12-14T08:42:16.273717Z"
      

   If you don't have Terraform, install it and configure the Yandex Cloud provider.

   To set up a redirect for all requests:

   1. Open the Terraform configuration file and add the redirect_all_requests_to parameter to the yandex_storage_bucket resource description:

      ...
      resource "yandex_storage_bucket" "test" {
        access_key = yandex_iam_service_account_static_access_key.sa-static-key.access_key
        secret_key = yandex_iam_service_account_static_access_key.sa-static-key.secret_ke
        bucket     = "bucket-for-tutorial"
        acl        = "public-read"
      
        website {
          index_document = "index.html"
          error_document = "error.html"
        }
      }
      ...
      

      Where:

      • website: Website parameters:
        • index_document: Absolute path to the website home page file. This is a required parameter.
        • error_document: Absolute path to the file the user will see in case of 4xx errors. This is an optional parameter.

      For more information about the yandex_storage_bucket resource parameters in Terraform, see the provider documentation.

   2. Create resources:

      1. In the terminal, change to the folder where you edited the configuration file.

      2. Make sure the configuration file is correct using the command:

         terraform validate
         

         If the configuration is correct, the following message is returned:

         Success! The configuration is valid.
         

      3. Run the command:

         terraform plan
         

         The terminal will display a list of resources with parameters. No changes are made at this step. If the configuration contains errors, Terraform will point them out.

      4. Apply the configuration changes:

         terraform apply
         

      5. Confirm the changes: type yes in the terminal and press Enter.

   This will set up hosting in the bucket.

   To set up hosting for a static website, use the update REST API method for the Bucket resource, the BucketService/Update gRPC API call, or the upload S3 API method.

4. Add this URL to the list of authorized domains in Firebase:

   1. Go to Authentication → Settings → Authorized domains.
   2. Click Add domain and paste the copied URL.

Test the created appTest the created app

1. Access the static website via the URL obtained when setting up website hosting and click Call API Gateway without authorization. Make sure the response is Got error: Request failed with status code 401.
2. To log in to the website, click Log in.
3. Once authorized, click Call API Gateway again. Make sure your call is processed successfully and you get information about the authorized user.

How to delete the resources you createdHow to delete the resources you created

To stop paying for the resources you created:

1. Delete the Object Storage bucket.
2. Delete the API gateway.
3. Delete the project in Firebase.
4. Delete the project in Google Cloud.