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 with OAuth 2.0 and OpenID Connect in your web app. For authentication, you will use Google OAuth and Firebase. API Gateway will manage authorization using a JWT authorizer. Your web app will consist of:

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

To deploy your web app:

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

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

Get your cloud readyGet your cloud ready

Sign up in Yandex Cloud and create a billing account:

1. Navigate to the management console and log in to Yandex Cloud or register a new account.
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 and link a cloud to it.

If you have an active billing account, you can navigate 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 a web app includes:

• Fee for data storage in a bucket and data operations (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 a name for your app 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. Go to API & Services → Credentials, 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 your selection.
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 setting up your Google resourcesComplete setting up your Google resources

Google Console:

1. Go to API & Services → Credentials and click the name of the created client.
2. Add the Callback URL from Firebase you saved earlier 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 a name for your app and click Register App.
3. Save the app configuration generated under firebaseConfig.

Create an API gatewayCreate an API gateway

Get the web app files readyGet the web app files ready

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 properties:

   • firebaseConfig: Firebase configuration you saved when completing the Google resource setup.
   • 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 npm. npm comes bundled with Node.js.

4. In your app folder:

   1. Install react-scripts in your project and include it under devDependencies in package.json:

      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 your web app to an Object Storage bucketDeploy Yandex Cloud resources and upload your 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 where you want to create a bucket.
   2. Select Object Storage.
   3. Click Create bucket.
   4. On the bucket creation page:
      1. Enter the bucket name: 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 CLI yet, install and initialize it.

   By default, the CLI uses the folder specified when creating the profile. To change the default folder, use the yc config set folder-id <folder_ID> command. You can also set a different folder for any specific command using the --folder-name or --folder-id parameter.

   1. Run this command:

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

      Where:

      • --name: Bucket name.
      • --public-read: Flag to enable public read access to 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 do not have Terraform yet, install it and configure its Yandex Cloud provider.

   1. In the configuration file, define the resource properties:

      ...
      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 yandex_storage_bucket properties, see this Terraform article.

   2. Create the resources:

      1. In the terminal, go to the directory where you edited the configuration file.

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

         terraform validate
         

         If the configuration is correct, you will get this message:

         Success! The configuration is valid.
         

      3. Run this command:

         terraform plan
         

         You will see a detailed list of resources. No changes will be made at this step. If the configuration contains any errors, Terraform will show them.

      4. Apply the changes:

         terraform apply
         

      5. Type yes and press Enter to confirm the changes.

   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 where you want to upload your objects.
   2. Select Object Storage.
   3. Click bucket-for-tutorial.
   4. Click Upload and select the objects you previously generated in the build folder.
   5. The management console will display all the objects you selected for uploading and prompt you to select a storage class. The bucket configuration determines the default storage class.
   6. Click Upload.
   7. Refresh the page.

   In the management console, the information about the number of objects and storage space used in the bucket 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 website home page file, 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. Copy your website's URL from the Link field.

   If you do not have the Yandex Cloud CLI yet, install and initialize it.

   By default, the CLI uses the folder specified when creating the profile. To change the default folder, use the yc config set folder-id <folder_ID> command. You can also set a different folder for any specific command using the --folder-name or --folder-id parameter.

   1. Create a file named setup.json with hosting settings:

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

      Where:

      • index: Absolute path to the website home page file.
      • 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 do not have Terraform yet, install it and configure its Yandex Cloud provider.

   To set up a redirect for all requests:

   1. Open the Terraform configuration file and add the redirect_all_requests_to property to the yandex_storage_bucket 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 settings:
        • index_document: Absolute path to the website home page file. This is a required setting.
        • error_document: Absolute path to the file the user will see in case of 4xx errors. This is an optional setting.

      For more information about yandex_storage_bucket properties, see this Terraform article.

   2. Create the resources:

      1. In the terminal, go to the directory where you edited the configuration file.

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

         terraform validate
         

         If the configuration is correct, you will get this message:

         Success! The configuration is valid.
         

      3. Run this command:

         terraform plan
         

         You will see a detailed list of resources. No changes will be made at this step. If the configuration contains any errors, Terraform will show them.

      4. Apply the changes:

         terraform apply
         

      5. Type yes and press Enter to confirm the changes.

   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 appTest the app

1. Access the static website via the URL obtained when setting up website hosting and click Call API Gateway without logging in. 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 logged in, click Call API Gateway again. Make sure your call succeeds and the response contains authenticated user data.

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.