Add a user sign-in flow to your web service that usesFirebase Authentication.

In this step of the guide, you update your web service to authenticate users andto retrieve and display a user's own information after they authenticate.Note that, for this step, the site request times will still be global rather thanuser-specific.

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 and adding Firebase:

  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-2

  3. Add Firebase to your Google Cloud project and web service.

Add Firebase authentication methods

Firebase provides JavaScript methods and variables that you can useto configure sign-in behavior for your web service. For this web service,add a sign out function, a variable that configures the sign in UI,and a function controlling what changes when a user signs in or out.

To add the behaviors required for an authentication flow, replace yourstatic/script.js file's current event listener method with the following code:

window.addEventListener('load',function(){document.getElementById('sign-out').onclick=function(){firebase.auth().signOut();};// FirebaseUI config.varuiConfig={signInSuccessUrl:'/',signInOptions:[// Comment out any lines corresponding to providers you did not check in// the Firebase console.firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.EmailAuthProvider.PROVIDER_ID,//firebase.auth.FacebookAuthProvider.PROVIDER_ID,//firebase.auth.TwitterAuthProvider.PROVIDER_ID,//firebase.auth.GithubAuthProvider.PROVIDER_ID,//firebase.auth.PhoneAuthProvider.PROVIDER_ID],// Terms of service url.tosUrl:'<your-tos-url>'};firebase.auth().onAuthStateChanged(function(user){if(user){// User is signed in, so display the "sign out" button and login info.document.getElementById('sign-out').hidden=false;document.getElementById('login-info').hidden=false;console.log(`Signed in as${user.displayName} (${user.email})`);user.getIdToken().then(function(token){// Add the token to the browser's cookies. The server will then be// able to verify the token against the API.// SECURITY NOTE: As cookies can easily be modified, only put the// token (which is verified server-side) in a cookie; do not add other// user information.document.cookie="token="+token;});}else{// User is signed out.// Initialize the FirebaseUI Widget using Firebase.varui=newfirebaseui.auth.AuthUI(firebase.auth());// Show the Firebase login button.ui.start('#firebaseui-auth-container',uiConfig);// Update the login state indicators.document.getElementById('sign-out').hidden=true;document.getElementById('login-info').hidden=true;// Clear the token cookie.document.cookie="token=";}},function(error){console.log(error);alert('Unable to log in: '+error)});});

Notice that theonAuthStateChanged() method, which controls what changeswhen a user signs in or out, stores the user's ID token as a cookie.This ID token is a unique token that Firebase generatesautomatically when a user successfully signs in, and is used by the serverto authenticate the user.

1. Retrieve, verify, and decrypt the token in theroot method of yourmain.py file:

   fromflaskimportFlask,render_template,requestfromgoogle.auth.transportimportrequestsfromgoogle.cloudimportdatastoreimportgoogle.oauth2.id_tokenfirebase_request_adapter=requests.Request()@app.route("/")defroot():# Verify Firebase auth.id_token=request.cookies.get("token")error_message=Noneclaims=Nonetimes=Noneifid_token:try:# Verify the token against the Firebase Auth API. This example# verifies the token on each page load. For improved performance,# some applications may wish to cache results in an encrypted# session store (see for instance# http://flask.pocoo.org/docs/1.0/quickstart/#sessions).claims=google.oauth2.id_token.verify_firebase_token(id_token,firebase_request_adapter)exceptValueErrorasexc:# This will be raised if the token is expired or any other# verification checks fail.error_message=str(exc)# Record and fetch the recent times a logged-in user has accessed# the site. This is currently shared amongst all users, but will be# individualized in a following step.store_time(datetime.datetime.now(tz=datetime.timezone.utc))times=fetch_times(10)returnrender_template("index.html",user_data=claims,error_message=error_message,times=times)

   Tip: Make sure to importrequest from Flask so that you can fetch thecookie containing the user's ID token.

2. Ensure that yourrequirements.txt file includes all necessary dependencies:

   Flask==3.0.0google-cloud-datastore==2.15.1google-auth==2.17.3requests==2.28.2

Test your web service

Test your web service by running it locally in a virtual environment:

1. Run the following commands in yourproject's main directory to install new dependencies and runyour web service.If you have not set up a virtual enviornment for local testing, seetesting your web service.

   pipinstall-rrequirements.txtpythonmain.py

2. Enter the following address in your web browser to view your web service:

   http://localhost:8080

gcloudappdeploy

For more information on managing versions,seeManaging Services and Versions.

View your service

To quickly launch your browser and access your web service athttps://PROJECT_ID.REGION_ID.r.appspot.com, run the followingcommand:

gcloudappbrowse

Next steps

Now that you've set up user authentication, you're ready to learn how to updateyour web service to personalize data for authenticated users.