Adding Firebase to your Web Service

Add Firebase to your GCP 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.7 App and complete all the steps leading up to this one.
If you already have a GCP 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_python37/building-an-app/building-an-app-1
```

Adding Firebase to your GCP project

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

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

Note that when you add Firebase to a GCP project with billing enabled, you are required to confirm the Blaze billing plan for Firebase. However, web authentication is included for free on Firebase.
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:
```
GCP_PROJECT_ID.appspot.com
```
where GCP_PROJECT_ID is the ID of your GCP project.

Adding Firebase to your web service

Now that Firebase is enabled in your GCP project, you can add a Firebase to your web service using your Firebase project's custom code snippet, as well as Firebase JavaScript and CSS files.

To add Firebase to your web service, complete the following:

Go to the Firebase console and select your project.
From the project overview page, click Add Firebase to your web app to display the customized code snippet.
Click Copy.

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

Add your customized code snippet in the <head> tag of your templates/index.html file. For example, your custom code looks similar to this mock snippet:

<!-- MOCK SNIPPET: DO NOT COPY -->
<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script>
<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>

Add the following lines in the <head> tag of your templates/index.html file to import the Firebase JavaScript and CSS files:

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

View on GitHub
```
<script src="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.css">
```

Replace the current body of your index.html file with the following code, which you will use later in this guide to display authenticated user data:

appengine/standard_python37/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 GCP project and your web service, you're ready to add code to your web service to enable it to authenticate users.

Was this page helpful? Let us know how we did:

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

Last updated July 8, 2019.

Adding Firebase to your Web Service

Before you begin

Adding Firebase to your GCP project

Adding Firebase to your web service

Next Steps

Send feedback about...