Adding Firebase to your Web Service

Region ID

The REGION_ID is an abbreviated code that Google assigns based on the region you select when you create your app. The code does not correspond to a country or province, even though some region IDs may appear similar to commonly used country and province codes. Including REGION_ID.r in App Engine URLs is optional for existing apps and will soon be required for all new apps.

To ensure a smooth transition, we are slowly updating App Engine to use region IDs. If we haven't updated your Google Cloud project yet, you won't see a region ID for your app. Since the ID is optional for existing apps, you don't need to update URLs or make other changes once the region ID is available for your existing apps.

Learn more about region IDs.

Add Firebase to your Cloud project, configure your authentication settings, and then add Firebase to your web service.

Adding Firebase to your web service enables you to authenticate users so 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 from Building a Python 3 App and complete all the steps leading up to this one.
If you already have a Cloud project, you can continue by downloading a copy of the web service:
1. Download the sample application repository using Git:
```
git clone https://github.com/GoogleCloudPlatform/python-docs-samples
```
  Alternatively, you can download the sample as a zip file and then extract it.
2. Navigate to the directory that contains a copy of the files from the previous step:
```
cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-1
```

Adding Firebase to your Cloud project

To use Firebase authentication with your web service, add Firebase to your Cloud project and configure your authentication settings.

Add Firebase to your existing Cloud project using the Add project tool in the Firebase console.

You can also choose to use a Firebase account with a different name, not associated with your existing Cloud project.
Enable the authentication sign-on providers in the Firebase console. For this web service, you will enable Email/Password and Google sign-in providers:
1. Click Develop > Authentication > Sign-in method.
2. Under Sign-in providers, hover the cursor over the Email/Password provider and click the pencil icon.
3. Toggle the Enable button to use Email/Password authentication.
4. After enabling the provider, click Save.
5. Do the same thing for the sign-in provider Google.
  
  Tip: For more information about enabling other providers, see the "Before you begin" sections of the Facebook, Twitter, and GitHub guides on Firebase.
For Firebase to authenticate properly, your domain needs to be authorized for OAuth redirects. To authorize your domain, scroll down to Authorized Domains on the Sign-in method page, click Add Domain, and then enter the domain of your app on App Engine, excluding the http:// prefix:

PROJECT_ID. REGION_ID.r.appspot.com where PROJECT_ID is the ID of your Cloud project.

Adding Firebase to your web service

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

Go to the Firebase console and select your project.
From the project overview page, under the text Get started by adding Firebase to your app, select web. If you already have an app added to the project, you may not see this text; instead, navigate to the settings page of your existing app or select add app.
Once the app is registered, a customized code snippet will be displayed. Copy the contents of the snippet. To see this code snippet again later, navigate to the settings page for your Firebase app.

Update your templates/index.html file by completing the following:

Add the following lines to the <head> tag:

appengine/standard_python37/building-an-app/building-an-app-3/templates/index.html

View on GitHub

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

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

For this tutorial, you can add the code to the top of the body, since the only content in templates/index.html is an example of Firebase services. In your production environment, we recommend that you add the code snippet to the bottom of the body, but before you use any Firebase services.

Your custom code will look similar to this mock snippet:

<!-- MOCK SNIPPET: DO NOT COPY -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  var config = {
    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>

Replace the TODO in the snippet above with the following script tag to enable 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 the Firebase UI for Web documentation.

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

appengine/standard_python3/building-an-app/building-an-app-3/templates/index.html

View on GitHub

<h1>Datastore and Firebase Auth Example</h1>

<div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" 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 Cloud project and your web service, you're ready to add code to your web service to enable it to authenticate users.

Handling Data

Authenticating Users