Configure the case study application
Work with Firebase
App Dev: Adding User Authentication to your Application - Python
This lab shows you how to add authentication to your application using Firebase. This authorization identifies who you are, and determines what you can do. For more information, see Authentication Overview.
Firebase is a comprehensive framework that allows you to create web and mobile applications. It integrates with Google Cloud so that you can import a Google Cloud project into a Firebase project. For more information about Firebase, see Cloud Functions and Firebase.
The application used in this lab is an online Quiz application. You add Firebase authentication and then configure authentication to use a simple email address and password credential, and ensure that users must register and log in before taking a quiz.
In this lab, you perform the following tasks:
Register a Google Cloud project with Firebase.
Add Firebase configuration to a client-side web application.
Write Python code to integrate Firebase Authentication into a client-side web application.
Setup and requirements
Before you click the Start Lab button
Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources will be made available to you.
This hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.
To complete this lab, you need:
- Access to a standard internet browser (Chrome browser recommended).
- Time to complete the lab---remember, once you start, you cannot pause a lab.
How to start your lab and sign in to the Google Cloud Console
Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is the Lab Details panel with the following:
- The Open Google Console button
- Time remaining
- The temporary credentials that you must use for this lab
- Other information, if needed, to step through this lab
Click Open Google Console. The lab spins up resources, and then opens another tab that shows the Sign in page.
Tip: Arrange the tabs in separate windows, side-by-side.
Note: If you see the Choose an account dialog, click Use Another Account.
If necessary, copy the Username from the Lab Details panel and paste it into the Sign in dialog. Click Next.
Copy the Password from the Lab Details panel and paste it into the Welcome dialog. Click Next.
Important: You must use the credentials from the left panel. Do not use your Google Cloud Skills Boost credentials. Note: Using your own Google Cloud account for this lab may incur extra charges.
Click through the subsequent pages:
- Accept the terms and conditions.
- Do not add recovery options or two-factor authentication (because this is a temporary account).
- Do not sign up for free trials.
After a few moments, the Cloud Console opens in this tab.
Activate Cloud Shell
Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud. Cloud Shell provides command-line access to your Google Cloud resources.
- In the Cloud Console, in the top right toolbar, click the Activate Cloud Shell button.
- Click Continue.
It takes a few moments to provision and connect to the environment. When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. The output contains a line that declares the PROJECT_ID for this session:
gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.
(Optional) You can list the active account name with this command:
(Optional) You can list the project ID with this command:
gcloud, in Google Cloud, Cloud SDK documentation, see the gcloud command-line tool overview.
Launch the Cloud Shell code editor
From Cloud Shell toolbar, move Cloud Shell to a new window by clickin the Open in a new window icon , then click Open Editor icon to launch the code editor.
In the Cloud Shell terminal, run the following command to configure your Project ID, replacing
YOUR-PROJECT-ID with your lab Project ID:
Authorize Cloud Shell.
Prepare the case study application
For the sake of time, you'll clone the application skeleton from a repository on GitHub.com.
Clone source code in Cloud Shell
Clone the repository from GitHub.com:
Create a soft link as a shortcut to the working directory.
Configure and run the case study application
- Change to the directory that contains the sample files for this lab:
Configure the application:
This script file:
- Creates an App Engine application.
- Creates a Cloud Storage bucket named
- Exports two environment variables:
> pip install -r requirements.txt.
- Creates entities in Cloud Datastore.
- Prints out the Project ID.
Click Check my progress to verify the objective.
Run the application:
Start the case study application
In Cloud Shell, click Web preview > Preview on port 8080 to preview the Quiz application.
Leave this window open because you need the Cloud Shell Web preview domain later in this lab.
Examine the case study application code
In this lab you'll view and edit files. You can use the shell editors that are installed on Cloud Shell, such as
vim or the Cloud Shell code editor.
This lab uses the Cloud Shell code editor to review the Quiz application code.
Review the client application
In the Cloud Shell Editor, Navigate to the
/training_data_analyst/courses/developingapps/v1.2/python/firebase/startfolder using the file browser panel on the left side of the code editor.
Continue navigating. Open
...quiz/webapp/static/client/. Click on the
This file is the single page in the AngularJS Single Page Application (SPA). It contains
<script></script>tags for the application libraries and code, and markup where the SPA renders dynamic output.
qiq-login-template.htmlfile in the
This file contains the AngularJS template for the Login component. Notice how it contains a couple of textboxes and a button. The button has an event handler that runs code when it is clicked.
Still in this folder, select the
This file contains an AngularJS component. It allows the user to log in to the application or to navigate to a registration page.
Work with Firebase
Next, create a Firebase project for your Google Cloud project and enable the Authentication feature.
Create a Firebase project
Open a new browser tab and navigate to Firebase Console.
You may need to sign in again using your lab username and password.
On the Welcome to Firebase! page, click Add project.
In the Enter your project name dialog, select your project name.
Check I accept the Firebase terms. Click Continue.
In the Confirm Firebase billing plan dialog, click Confirm Plan.
In the A few things to remember when adding Firebase to a Google Cloud project dialog, click Continue.
In the Google Analytics for your Firebase project dialog, click Continue.
In the Configure Google Analytics dialog:
Uncheck Use the default settings for sharing Google Analytics for Firebase data.
Check to accept the Measurement Controller-Controller Data Protection terms and acknowledge you are subject to the EU End User Consent Policy.
Check I accept the Google Analytics terms.
Click Add Firebase.
When your new project is ready, click Continue.
Configure Firebase Authentication
In the left pane of the Firebase page, click Build > Authentication.
On the Authentication overview page, click on Get started.
On the Sign-in method tab, hover over the Email/Password provider, and then click the pencil.
Click Enable to allow users to sign up using their email address and password, and then click Save.
Under Authorized Domains, click Add Domain.
Return to your running Quiz application and copy the domain.
Return to the Firebase console, paste the domain into the Domain text box, and then click Add.
Integrate a client-side web application with Firebase
Now apply your Firebase configuration to your client-side web application.
Apply Firebase configuration to a web application
In the Firebase UI, click Project Overview in the upper-left corner of the Firebase console.
Click the web icon.
Register your app - give your app a nick name, then click Register app.
Click Check my progress to verify the objective.
Copy Firebase SDK scripts.
In the Cloud Shell code editor, open the
Paste the Firebase configuration markup just before the other
<script></script>tags at the bottom of the page.
Add the following Firebase library below the
firebase-app.jsline in the Firebase configuration you just added:
index.htmlfile, then close the file.
Run the application
Return to the Quiz application and refresh your browser.
In the navigation bar, click Take Test.
In the navigation bar, click GCP, People, or Places.
You should not be able to take a test without being logged in.
In the navigation bar, click Register.
Enter any email address and password into the form fields, and then click Register.
You should now be logged in and redirected to the Google Cloud quiz.
- In the navigation bar, click Logout.
You should be logged out and redirected to the Quiz homepage.
This conclude the self-paced lab, App Dev: Adding User Authentication to Your Application - Python. You used Firebase to add authentication to your quiz application.
Finish your Quest
This self-paced lab is part of the Application Development - Python and Cloud Development Quests. A Quest is a series of related labs that form a learning path. Completing this Quest earns you the badge above, to recognize your achievement. You can make your badge (or badges) public and link to them in your online resume or social media account. Enroll in a Quest and get immediate completion credit if you've taken this lab. See other available Quests.
Next steps / learn more
Check out other features provided by Firebase can be used, see Google Cloud operations suite documentation.
Learn more about Deployment Manager, see Firebase & Google Cloud.
Manual last updated October 18, 2021
Lab last tested March 25, 2021
Copyright 2022 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.