Yandex Cloud
Search
Contact UsGet started
  • Blog
  • Pricing
  • Documentation
  • All Services
  • System Status
    • Featured
    • Infrastructure & Network
    • Data Platform
    • Containers
    • Developer tools
    • Serverless
    • Security
    • Monitoring & Resources
    • ML & AI
    • Business tools
  • All Solutions
    • By industry
    • By use case
    • Economics and Pricing
    • Security
    • Technical Support
    • Customer Stories
    • Gateway to Russia
    • Cloud for Startups
    • Education and Science
  • Blog
  • Pricing
  • Documentation
Yandex project
© 2025 Yandex.Cloud LLC
Tutorials
    • All tutorials
    • URL shortener
    • Entering data into storage systems
    • Storing application runtime logs
    • Deploying a web application using the Java Servlet API
    • Developing a Slack bot
    • Developing a Telegram bot
    • Developing a custom integration in API Gateway
    • Developing CRUD APIs for movie services
    • Building a CI/CD pipeline in GitLab
    • Working with an API gateway via WebSocket
    • Creating an interactive serverless application using WebSocket
    • Automatically copying objects from one Object Storage bucket to another
    • Visualizing logs in Grafana using the Cloud Logging plugin
    • Canary release of a Cloud Functions function
    • Interactive debugging of Cloud Functions functions
    • Creating a Node.js function using TypeScript
    • Running a containerized app in Serverless Containers
    • Streaming Yandex Cloud Postbox events to Data Streams and analyzing them using DataLens
    • Using API Gateway to set up speech synthesis in SpeechKit
    • Connecting to YDB from a Cloud Functions function in Python
    • Connecting to a YDB database from a Cloud Functions function in Node.js
    • API Gateway protection with Smart Web Security
    • Deploying a web app with JWT authorization in API Gateway and authentication in Firebase
    • Automatic data upload to Yandex SpeechSense using Yandex Workflows
    • Configuring responses in Cloud Logging and Yandex Cloud Functions
    • Setting up Workflows integration with Tracker, YandexGPT, and Yandex Cloud Postbox
    • Developing functions in Functions Framework and deploying them to Yandex Serverless Containers

In this article:

  • Prepare your cloud
  • Required paid resources
  • Create a project and set up Google OAuth in Google Cloud
  • Set up authentication in Firebase
  • Complete Google resource configuration
  • Create an API gateway
  • Create web app files
  • Deploy Yandex Cloud resources and upload the web app to an Object Storage bucket
  • Test the created app
  • How to delete the resources you created
  1. Serverless technologies
  2. Deploying a web app with JWT authorization in API Gateway and authentication in Firebase

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

Written by
Yandex Cloud
Updated at May 7, 2025
  • Prepare your cloud
    • Required paid resources
  • Create a project and set up Google OAuth in Google Cloud
  • Set up authentication in Firebase
  • Complete Google resource configuration
  • Create an API gateway
  • Create web app files
  • Deploy Yandex Cloud resources and upload the web app to an Object Storage bucket
  • Test the created app
  • How to delete the resources you created

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. Your web app will consist of:

  • 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 environment.
  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 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 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

Management console
CLI
Terraform
API
  1. In the management console, select the folder where you want to create an API gateway.

  2. In the services list, select API Gateway.

  3. Click Create API gateway.

  4. In the Name field, enter jwt-api-gw.

  5. In the Specification section, add the specification:

    openapi: 3.0.0
    info:
      title: Sample API
      version: 1.0.0
    
    paths:
      /:
        get:
          x-yc-apigateway-integration:
            type: http
            url: https://oauth2.googleapis.com/tokeninfo
            method: GET
            query:
              id_token: '{token}'
          parameters:
            - name: token
              in: query
              required: true
              schema:
                type: string
          security:
            - OpenIdAuthorizerScheme: [ ]
    
    components:
      securitySchemes:
        OpenIdAuthorizerScheme:
          type: openIdConnect
          x-yc-apigateway-authorizer:
            type: jwt
            jwksUri: https://www.googleapis.com/oauth2/v3/certs
            identitySource:
              in: query
              name: token
            issuers:
              - https://accounts.google.com
            requiredClaims:
              - email
    
  6. Click Create.

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

The folder specified when creating the CLI profile is used by default. To change the default folder, use the yc config set folder-id <folder_ID> command. You can specify a different folder using the --folder-name or --folder-id parameter.

  1. Save the following specification to the jwt-auth.yaml file:

    openapi: 3.0.0
    info:
      title: Sample API
      version: 1.0.0
    
    paths:
      /:
        get:
          x-yc-apigateway-integration:
            type: http
            url: https://oauth2.googleapis.com/tokeninfo
            method: GET
            query:
              id_token: '{token}'
          parameters:
            - name: token
              in: query
              required: true
              schema:
                type: string
          security:
            - OpenIdAuthorizerScheme: [ ]
    
    components:
      securitySchemes:
        OpenIdAuthorizerScheme:
          type: openIdConnect
          x-yc-apigateway-authorizer:
            type: jwt
            jwksUri: https://www.googleapis.com/oauth2/v3/certs
            identitySource:
              in: query
              name: token
            issuers:
              - https://accounts.google.com
            requiredClaims:
              - email
    
  2. Run this command:

    yc serverless api-gateway create \
      --name jwt-api-gw \
      --spec=jwt-auth.yaml
    

    Where:

    • --name: API gateway name.
    • --spec: Specification file.

    Result:

    done (29s)
    id: d5dug9gkmu187i********
    folder_id: b1g55tflru0ek7********
    created_at: "2020-06-17T09:20:22.929Z"
    name: jwt-api-gw
    status: ACTIVE
    domain: d5dm1lba80md********.i9******.apigw.yandexcloud.net
    log_group_id: ckghq1hm19********
    

If you do not have Terraform yet, install it and configure its Yandex Cloud provider.

  1. In the configuration file, describe the API gateway parameters:

    resource "yandex_api_gateway" "jwt-api-gateway" {
      name        = "jwt-api-gw"
      spec        = <<-EOT
        openapi: 3.0.0
        info:
          title: Sample API
          version: 1.0.0
        paths:
          /:
            get:
              x-yc-apigateway-integration:
                type: http
                url: https://oauth2.googleapis.com/tokeninfo
                method: GET
                query:
                  id_token: '{token}'
              parameters:
                - name: token
                  in: query
                  required: true
                  schema:
                    type: string
              security:
                - OpenIdAuthorizerScheme: [ ] 
        components:
          securitySchemes:
            OpenIdAuthorizerScheme:
              type: openIdConnect
              x-yc-apigateway-authorizer:
                type: jwt
                jwksUri: https://www.googleapis.com/oauth2/v3/certs
                identitySource:
                  in: query
                  name: token
                issuers:
                  - https://accounts.google.com
                requiredClaims:
                  - email
      EOT
    }
    

    Where:

    • name: API gateway name.
    • spec: API gateway specification.

    For more information about the yandex_api_gateway resource parameters in Terraform, see the relevant 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 an API gateway in the specified folder.

To create an API gateway, use the create REST API method for the ApiGateway resource or the ApiGatewayService/Create gRPC API call.

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 CLI yet, install and initialize it.

    The folder specified when creating the CLI profile is used by default. To change the default folder, use the yc config set folder-id <folder_ID> command. You can specify a different folder 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 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 do not have Terraform yet, install it and configure its 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.
      • --description: Bucket description:
        • bucket: Bucket name.
        • acl: Bucket access settings.

      For more information about the yandex_storage_bucket resource parameters in Terraform, see the relevant 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 CLI yet, install and initialize it.

    The folder specified when creating the CLI profile is used by default. To change the default folder, use the yc config set folder-id <folder_ID> command. 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 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 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 created resources:

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

Was the article helpful?

Previous
API Gateway protection with Smart Web Security
Next
Automatic data upload to Yandex SpeechSense using Yandex Workflows
Yandex project
© 2025 Yandex.Cloud LLC