Add Firebase to your web service

Region ID

TheREGION_ID is an abbreviated code that Google assignsbased on the region you select when you create your app. The code does notcorrespond to a country or province, even though some region IDs may appearsimilar to commonly used country and province codes. For apps created after February 2020,REGION_ID.r is included in App Engine URLs. For existing apps created before this date, the region ID is optional in the URL.

Learn moreabout region IDs.

Note: If you are deploying a new Python web service to Google Cloud,we recommend getting started withCloud Run.

Add Firebase to your Google Cloud project, configure your authenticationsettings, and then add Firebase to your web service.

Adding Firebase to your web service enables you to authenticate usersso that you can give each user a personalized experience.

Before you begin

If you have completed all the previous steps in this guide, skip this section.Otherwise, complete one of the following:

  • Start fromBuild a Python 3 Appand complete all the steps leading up to this one.

  • If you already have aGoogle Cloud project,you can continue by downloading a copy of the web service:

    1. Download the sample application repository usingGit:

      gitclonehttps://github.com/GoogleCloudPlatform/python-docs-samples

      Alternatively, you candownload the sample as a zip file and then extract it.

    2. Navigate to the directory that contains a copy of the files from theprevious step:

      cdpython-docs-samples/appengine/standard_python3/building-an-app/building-an-app-1

Add Firebase to your Google Cloud project

To use Firebase authentication with your web service, addFirebase to your Google Cloud project and configure your authenticationsettings.

  1. Add Firebase to your existing Google Cloud project using theAdd project tool in theFirebase console.

    You can also choose to use a Firebase account with a different name, notassociated with your existing Google Cloud project.

  2. Enable the authentication sign-on providers in theFirebase console. For thisweb service, you will enableEmail/Password andGoogle sign-inproviders:

    1. ClickBuild >Authentication >Sign-in method.

    2. UnderSign-in providers, selectEmail/Password.

    3. Toggle theEnable button to use email and password authentication,and clickSave.

      Tip: For more information about enabling other providers, see the "Before you begin"sections of theGoogle,Facebook,Twitter,andGitHub guides on Firebase.

  3. For Firebase to authenticate properly, your domain needs to be authorizedfor OAuth redirects. To authorize your domain:

    1. SelectBuild >Authentication >Settings.

    2. UnderAuthorized domains on theSettings page, clickAdd Domain.

    3. Enter the domain of your app on App Engine, excluding thehttp:// prefix:

      PROJECT_ID.REGION_ID.r.appspot.comwherePROJECT_ID is the ID of yourGoogle Cloud project.

Add Firebase to your web service

To add Firebase to your web service, copy your Firebase project's custom codesnippet, JavaScript and CSS files into your web service:

  1. Go to theFirebase console and select your project.

  2. From the project overview page, under the textGet started by addingFirebase to your app, selectweb. If you already have an app added tothe project, you may not see this text; instead, navigate to theProject Overview >Project settings >Generalpage of your existing app, scroll down, and selectAdd app.

  3. Once the app is registered, a customized code snippet will be displayed. Copythe contents of the snippet. To see this code snippet again later, navigateto theProject settings page for your Firebase app.

  4. Update yourtemplates/index.html file by completing the following:

    1. Add the following lines to the<head> tag:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script><link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. Add your customized code snippet to the<body> tag.

      For this tutorial, you can add the code to the top of the body, since theonly content intemplates/index.html is an example of Firebaseservices. In your production environment, we recommend that you add thecode snippet to the bottom of the body, but before you use any Firebaseservices.

      Your custom code will look similar to this mock snippet:

      <!--MOCKSNIPPET:DONOTCOPY--><!--ThecoreFirebaseJSSDKisalwaysrequiredandmustbelistedfirst--><scriptsrc="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script><!--TODO:AddSDKsforFirebaseproductsthatyouwanttousehttps://firebase.google.com/docs/web/setup#available-libraries --><script>varconfig={apiKey:"<API_KEY>",authDomain:"<PROJECT_ID>.firebaseapp.com",databaseURL:"https://<DATABASE_NAME>.firebaseio.com",projectId:"<PROJECT_ID>",storageBucket:"<BUCKET>.appspot.com",messagingSenderId:"<SENDER_ID>",};firebase.initializeApp(config);</script>

    3. Replace the TODO in the snippet above with the following script tag toenable the Authentication component of Firebase:

       <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>

      These script addresses are documented in theFirebase UI for Webdocumentation.

    4. Replace the rest of the body with the following code, which you will uselater in this guide to display authenticated user data:

      <div></div><button hidden=true>Sign Out</button><div hidden=true>  <h2>Login info:</h2>  {% if user_data %}    <dl>      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>      <dt>Last 10 visits</dt><dd>{% for time in times %}          <p>{{ time['timestamp'] }}</p>        {% endfor %} </dd>    </dl>  {% elif error_message %}    <p>Error: {{ error_message }}</p>  {% endif %}</div>

Next Steps

Now that you've added Firebase to your Google Cloud project and your webservice, you're ready to add code to your web service to enable it toauthenticate users.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-12-15 UTC.