Checkpoints
Enable Firebase on your project
/ 50
Add a Firebase web app
/ 30
Send image from Firebase web app
/ 20
Firebase Web
GSP065
Overview
In this lab you will learn how to use Firebase to easily create web applications by implementing and deploying a chat client using Firebase products and services.
What you'll learn
In this lab, you will learn how to:
- Sync data using the Cloud Firestore and Cloud Storage for Firebase.
- Authenticate your users using Firebase Auth.
- Deploy your web app on Firebase Hosting.
- Send notifications with Firebase Cloud Messaging.
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.
- Click Activate Cloud Shell
at the top of the Google Cloud console.
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:
-
Click Authorize.
-
Your output should now look like this:
Output:
-
(Optional) You can list the project ID with this command:
Output:
Example output:
gcloud
, in Google Cloud, refer to the gcloud CLI overview guide.
Task 1. Upgrade node version
-
In Cloud Shell, check which version of Node you have:
-
If the output of the previous command is
v16.1.0
or lower, run the following commands to upgrade Node:
Task 2. Get the sample code
-
In Cloud Shell command line, clone the GitHub repository:
The friendlychat-web
repository contains sample projects for multiple platforms. This lab uses only two repositories:
- web-start: The starting code that you'll build upon in this lab.
- web: The complete code for the finished sample app.
Task 3. View the starter application
Throughout this lab you will be modifying files in the friendlychat-web
directory. You can use text editors that come pre-installed in Cloud Shell (like nano
or vim
), but this lab will use the Cloud Shell code editor.
- To view
friendlychat-web
, click the Open Editor icon.
-
This opens a new browser window with the Cloud Shell tab.
-
Navigate to
friendlychat-web/web-start
in the left pane to view the application files and code in the right pane. In this lab, navigation is relative tofriendlychat-web/web-start
. Thefriendlychat-web/web-start
directory contains the starting code for this lab, which consists of a fully functional Chat Web App.
Task 4. Set up your Firebase project
Now that your files are opened up in the Cloud Shell code editor, get Firebase set up. The application you build in this lab uses the whole set of Firebase products available on the web:
-
Firebase Authentication to easily let your users sign-in your app.
-
Cloud Firestore to save structured data on the cloud and get instant notification when data changes.
-
Cloud Storage for Firebase to save files in the cloud.
-
Firebase Hosting to host and serve your assets.
-
Firebase Cloud Messaging to send push notifications and display browser popup notifications.
Task 5. Enable Firebase on your project
- Open the Firebase console in a new tab.
- In the Firebase console, click Add project.
- In the Enter your project name dialog, select your project name.
-
Check I accept the Firebase terms.
-
Check I confirm that I will use Firebase exclusively for purposes relating to my trade, business, craft, or profession. Click Continue.
-
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 data.
- Check Google Products and Services.
- 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.
Click Check my progress to verify the objective.
Task 6. Add a Firebase web app
- Click the web icon to create a new Firebase web app.
- Register the app with the nickname Friendly Chat, then check the box next to "Also set up Firebase Hosting for this app". Click Register app.
-
Click through the remaining steps. You don't need to follow the instructions now, these will be covered in later steps.
Enable Google sign-in for Firebase Authentication
Now enable Google Authentication to allow users to sign in to the web app with their Google accounts.
- Click on the Build tile.
- Navigate to Authentication > Get started > Sign-in method.
- In the Additional Providers section, click the Google button.
- Move the toggle to Enable.
- Give the project the public-facing name
Friendly Chat
. - Click in the project support email field, select your lab email.
- Then click Save.
Now a user can sign into the app with their Google account credentials.
Enable Cloud Firestore
The app uses Cloud Firestore to save the chat messages and receive new chat messages.
-
To enable Cloud Firestore on your Firebase project, select Firestore Database from the left menu.
-
Then, click Create database under Cloud Firestore.
-
Select the Start in test mode option.
-
Then, click Next.
-
Leave the default Cloud Firestore location, click Enable.
Click Check my progress to verify the objective.
Task 7. Install the Firebase command line interface
Cloud Shell comes with the firebase
command line interface (CLI) already installed.
-
In Cloud Shell, check what version of Firebase is installed with the following command:
The output should show a version above 6.0.0.
-
Authorize the Firebase CLI:
The --no-localhost
option is used because you are on a remote shell.
-
When asked if you should Allow Firebase to collect CLI usage and error reporting information?, type "Y".
-
Copy the link in the output into a new tab.
-
Select your lab username.
-
Then, click Allow.
-
On Sign in to the Firebase CLI page, click
Yes I just ran the command
and then clickYes, this if my session ID
. -
Copy the verification code from the browser and enter it in the Cloud Shell prompt.
-
Still in Cloud Shell command line, navigate to
friendlychat-web
>web-start
directory by running:
-
Now set up the Firebase CLI to use your Firebase Project:
You'll be asked which project to add.
-
Use the arrow keys to select your Project ID, then press Enter.
-
When asked What alias do you want to use for this project? (e.g. staging), type
staging
and press Enter.
firebase use <alias_name>.
Task 8. Deploy and run the starter app
Now that you have imported and configured your project you are ready to run the app for the first time.
-
In Cloud Shell run the following command:
Output:
You're using the Firebase hosting emulator to serve the application locally. The web app should now be available from http://localhost:5000
.
- Click the URL in your output to open it. You should see your app's (not yet!) functioning UI:
-
Stop the app by pressing Ctrl + C. This lab has laid out only the UI for you so far. Now you will build a realtime chat!
Task 9. Import and configure Firebase
Import the Firebase SDK
In a production environment the Firebase SDK must be imported into your application. There are multiple ways to do this that are described in the Add Firebase to your JavaScript project documentation.
You're going to get the Firebase SDK from npm and use Webpack to bundle your code. You're doing this so that Webpack can remove any unneccessary code, keeping your JS bundle size small to make sure your app loads as quickly as possible.
For this codelab, a web-start/package.json
file that includes the Firebase SDK as a dependency has already been created, as well as imported the needed functions at the top of web-start/src/index.js
.
During this lab, you’re going to use Firebase Auth, Cloud Firestore, Cloud Storage, and Cloud Messaging, so you’re importing all of their libraries. In your future apps, make sure that you’re only importing the parts of Firebase that you need in order to shorten the load time of your app.
Install the Firebase SDK and start your Webpack build
-
In your Cloud Shell terminal, ensure you are in the
web-start
directory:
-
Run
npm install
to download the Firebase SDK:
-
Run
npm run start
to start up Webpack. Webpack will now continually rebuild your source code for the rest of the codelab.
Configure Firebase
You also need to configure the Firebase SDK to tell it which Firebase project that you're using.
-
Go to your project setting in the Firebase console.
-
Select the tile with your project ID.
-
Scroll down to the "Your apps" card and select the Friendly Chat web app.
-
Under SDK setup and configuration, select Config.
-
Copy the config object snippet, then add it to
web-start/src/firebase-config.js
ensuring the object name remainsconfig
.
sample firebase-config.js:
-
Next, open
web-start/src/index.js
in your code editor. -
At the bottom of the file, add the
initializeApp
call under thefirebaseAppConfig
variable:
firebaseAppConfig
variable.
Task 10. Set up user sign in
The Firebase SDK was imported and initialized in the index.html
file, so it's ready to use. Next, implement user sign-in using Firebase Auth.
Set up app's OAuth consent screen
The OAuth consent screen allows users to choose whether they want to grant access to their private data as well as gives them a link to your terms of service. For this lab, you'll use the "internal" setting for simplicity. Read through this page to understand what to provide for your production environment.
-
In the Cloud Console, from Navigation menu click on APIs & Services > OAuth consent screen.
-
For User type, Click Make Internal.
-
Then click Confirm.
Authenticate your users with Google Sign-In
When the user clicks the Sign in with Google button, the signIn
function is triggered (this is already set up for you). Authorize Firebase to use Google as the Identity Provider. Users will sign in using a popup.
-
In the
web-start
directory, in the subdirectorysrc/
, openindex.js
. -
Find the function
signIn
. -
Replace the entire function with the following code:
The signOutUser
function is triggered when the user clicks the Sign out button.
-
Go back to the file
src/index.js
. -
Find the function
signOutUser
. -
Replace the entire function with the following code:
Track the auth state
To update the UI accordingly, you need a way to check if the user is signed-in or signed-out. With Firebase Auth, you can register an observer on the authentication state which will be triggered each time the auth state changes.
-
Go back to the file
src/index.js
. -
Find the function
initFirebaseAuth
. -
Replace the entire function with the following code:
This registers the function authStateObserver
as the observer. It triggers every time there is a change in the auth state - when the user signs in or signs out. This function updates the UI to display or hide the Sign-in button, the Sign-out button, and the signed in user's profile picture.
Display the signed in user information
In Firebase, the signed-in user's data is always available in the firebase.auth().currentUser
object. The authStateObserver
function will call the getProfilePicUrl
and getUserName
when triggered.
-
Go back to the file
src/index.js
. -
Find the functions
getProfilePicUrl
andgetUserName
. -
Replace both functions with the following code:
If the user tries to send a messages when they are not signed in, the app should display an error message. To detect if the user is actually signed in, you will change the isUserSignedIn
function.
-
Go back to the file
src/index.js
. -
Find the function
isUserSignedIn
. -
Replace the entire function with the following code:
-
Save
src/index.js
.
Test signing-in to the app
-
Return to your Cloud Shell terminal. It should still be running the Webpack process.
-
Open a new Cloud Shell tab by pressing the + button.
-
In your new tab, change to the
web-start
directory:
-
Check which version of Node you have:
-
If the output of the previous command is
v16.1.0
or lower, run the command:
-
Redeploy your app:
-
Click on the Hosting URL to open the application in your browser.
-
Sign in using the Sign-In with Google button. Remember to use your lab credentials!
After Signing in the profile pic and name of the user will be displayed:
Task 11. Write messages to Cloud Firestore
Next you'll write some data to Cloud Firestore so that you can populate the app's UI. This can be done manually in the Firebase console, but for this lab you'll do it in the app itself to demonstrate basic Cloud Firestore write.
Data model
Firestore data is split into collections, documents, fields, and subcollections. Each message of the chat is stored as a document in a top-level collection called messages
.
Add messages to Firestore
In this section you’ll add the functionality to let users write new messages to Cloud Firestore. A user clicking the SEND button will trigger the code snippet below. It adds a message object with the contents of the message fields to your Firestore instance in the messages
collection.
The add()
method adds a new document with an automatically generated ID to the collection.
-
Go back to the file
src/index.js
. -
Find the function
saveMessage
. -
Replace the entire function with the following code:
Test sending messages
-
Redeploy your app:
-
Click on the Hosting URL to open the application in your browser, or paste the URL into a new browser (not incongnito or guest mode).
-
After signing-in, enter a message such as “Hi there!”, then click SEND.
This will write the message into Firestore. However, you won't yet see the data in your actual web app because you still need to implement retrieving the data (the next section of the lab).
You can see the newly added message in your Firebase Console.
- In the Build section, click on Firestore Database and you should see the messages collection with your newly added message:
Task 12. Read messages
Synchronize messages
To read messages on the application, add listeners that trigger when changes are made to the data then creates a UI element that shows new messages.
You'll add code that listens for newly added messages from the app. In this code, you'll register the listener that listens for changes made to the data. You'll only display the last 12 messages of the chat to avoid displaying a very long history upon loading.
-
Go back to the file
src/index.js
. -
Find the function
loadMessages
. -
Replace the entire function with the following code:
To listen to messages in the database, create a query on a collection by using the .collection
function to specify in which collection is the data you want to listen to.
Above, you're listening to the changes under the messages
collection, which is where the messages are stored. You're also applying a limit and only listening to the last 12 messages using .limitToLast(12)
and ordering the messages by date using .orderBy('timestamp','desc')
to get the 12 newest messages.
The .onSnapshot
function takes one parameter: a callback function. The callback function will be triggered when there are any changes to documents that match the query. This could be if a message gets deleted, or modified, or added.
Test message sync
-
Redeploy your app:
- Click on the Hosting URL to open the application in your browser.
The messages you typed earlier and saw in the database should be displayed in the Friendly Chat UI. You can also write a new message, it should appear instantly. You can also try manually deleting, modifying, or adding new messages directly in the Firestore section of the Firebase Console, the changes should reflect in the UI.
Congratulations, you are reading database entries in your app!
Task 13. Send images
Now add a feature that shares images.
While the Cloud Firestore is good to store structured data, files are better stored in Cloud Storage. Cloud Storage for Firebase is a file/blob storage service. Use it to store the images the user shares.
In order to do this, you will need to grant access to your Firebase Service Management Service Account
and configure security rules for Firebase Storage.
Grant access to service account
-
First, give your
Firebase Service Management Service Account
theStorage Admin
role:
This will give Firebase services full access to your Google Cloud Storage resources.
Next, you will define Cloud Storage rules for Firebase.
Cloud storage security rules
Cloud Storage for Firebase uses a specific rules language to define access rights, security, and data validations.
When setting up the Firebase project at the beginning of this lab, default Cloud Storage security rules were used that restrict access to Cloud Storage. In the Firebase console, in the Storage section's Rules tab, you can view and modify the default rules, which should look like this:
You'll update the rules to allow any authenticated user to read and write from storage.
- In the Firebase Console, go to the Storage section from the left navigation, then click the Rules tab.
- Replace the default rules with the following rules:
-
Click Publish.
Save images to Cloud Storage
There's already a button in the UI that triggers a file picker dialog. After selecting an image file, the saveImageMessage
function is triggered and you get a reference to the selected file. You'll add code to the file that:
- Creates a "placeholder" chat message into the chat feed, so that users see a "Loading" animation while we upload the image.
- Upload the image file to Cloud Storage to the path:
/<uid>/<messageId>/<file_name>
. - Generate a publicly readable URL for the image file.
- Update the chat message with the newly uploaded image file's URL in lieu of the temporary loading image.
Now actually add the functionality.
-
Go back to the file
src/index.js
. -
Find the function
saveImageMessage
. -
Replace the entire function with the following code:
Test sending images
-
Redeploy your app:
-
Click on the Hosting URL to open the application in your browser.
-
Click the image upload button
and select an image file from your computer using the file picker. If you’re looking for an image, feel free to use this nice pic of a coffee cup.
A new message should be visible in the app UI with your selected image:
If you try adding an image while not signed in, you will see a Toast telling you that you must sign in to add images.
Click Check my progress to verify the objective.
Task 14. Show notifications
Now add support for browser notifications so users receive a notification when a new message has been posted in the chat. Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages and notifications at no cost.
Whitelist the GCM Sender ID
- In the web app manifest, specify the
gcm_sender_id
, a hard-coded value,and indicate that FCM is authorized to send messages to this app.
Friendly Chat already has a manifest.json
configuration file.
-
In the Cloud Shell code editor, navigate to
friendlychat-web
>web-start
>public
and open themanifest.json
file. Update the browser sender ID exactly as shown (do not change the value):
Add the FCM service worker
The web app needs a Service Worker that receives and displays web notifications.
-
From the
web-start
directory, in thesrc
directory, openfirebase-messaging-sw.js
. -
Add the following content to that file:
The service worker needs to load and initialize the Firebase Cloud Messaging SDK, which will take care of displaying notifications.
Get FCM device tokens
When notifications are enabled on a device or browser, you'll be given a device token. This device token is used to send a notification to a particular device or browser.
When the user signs in, the saveMessagingDeviceToken
function is called. That's where you'll get the FCM device token and save it to the Cloud Firestore.
-
Go back to the file
src/index.js
. -
Find the function
saveMessagingDeviceToken
. -
Replace the entire function with the following code:
- Save the file.
For your app to be able to retrieve the device token, the user needs to grant your app permission to show notifications. You'll set that up next.
Request permissions to show notifications
To show notifications the user must give permission by calling the firebase.messaging().requestPermission()
method, which will display a browser dialog asking for this permission in supported browsers:
-
Go back to the file
src/index.js
. -
Find the function
requestNotificationsPermissions
. -
Replace the entire function with the following code:
-
Save the file.
Get your device token
-
Redeploy your app:
- Click on the Hosting URL to open the application in your browser.
After signing in, you should see the Notifications permission dialog being displayed:
-
Click Allow.
-
Open the JavaScript console of your browser (If you are using Chrome, go to More tools > Developer tools > Javascript Console.) You should see a message that reads:
-
Copy and save your device token, you will need it for the next step.
Send a notification to your device
Now that you have your device token, you can send a notification.
- Open the Cloud Messaging tab of the Firebase console.
- Select your project ID.
- Click Send your first message.
- Enter notification test for the Notification Title.
- Enter Hello for the Notification Text.
- On the right side of the screen, click send test message.
- Paste the device token you copied from the JavaScript console of your browser, then click the plus ("+") sign.
- Click Test.
If your app is in the foreground, you'll see the notification in the JavaScript console.
If your app is in the background, a notification should appear in your browser, as in this example:
You may not see a notification if running in incognito mode or something similar. You can verify the message was received in the Javascript console of your Friendly Chat app browser tab.
Task 15. Cloud Firestore security rules (optional)
The Cloud Firestore uses specific rules language to define access rights, security, and data validations.
When setting up your Firebase project at the beginning of this lab, you chose to use "Test mode" default security rules that do not restrict access to the database.
In the Firebase console, in the Firestore Database section's Rules tab, you can view and modify these rules.
- Go there now to see the default rules:
-
When you update the rules to restrict access, use the following:
There are two ways to edit the database security rules; in the Firebase console or from a local file deployed using the Firebase CLI.
Pick one of the following ways to update the rules.
1) Update security rules in the Firebase console
- Go to Firestore Database in the left navigation and click on the Rules tab.
- Replace the default rules with the rules above.
- Click Publish.
request.auth
rule variable is a special variable containing information about the user if authenticated. The request.resources
rule variable points to the new data being written. More information can be found in the Understand Firebase Realtime Database Rules documentation.
2) Update security rules from a local file
-
In the
web-start
directory, create a file calledfirestore.rules
. -
Add the rules shown above.
-
From the
web-start
directory, openfirebase.json
. -
Add the
firestore.rules
attribute, as shown below. (Thehosting
attribute should already be in the file.)
-
Deploy the security rules using the Firebase CLI by running the following command:
Output:
Task 16. Deploy your app using Firebase hosting
Firebase comes with a hosting service to serve your web app. You deploy your files to Firebase Hosting using the Firebase CLI.
- Before deploying you need to specify which files will be deployed in your
firebase.json
file.
This has already been done for you because it was required to serve the file for development through this lab. These settings are specified under the hosting
attribute:
This tells the CLI that you want to deploy all files in the ./public
directory ( "public": "./"
).
-
Confirm that you are still in you app's local
web-start
directory, then deploy your files to Firebase project by running:
Output:
-
Visit your web app hosted on Firebase Hosting on
https://<project-id>.web.app
. -
Go to the Hosting section in the Firebase console to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.
Congratulations!
You used Firebase to easily build a real-time chat application. You covered:
-
Authorizing Firebase
-
Cloud Firestore
-
Firebase SDK for Cloud Storage
-
Firebase Cloud Messaging
-
Firebase Hosting
Finish your quest
This self-paced lab is part of the Quest Deploying Applications. A quest is a series of related labs that form a learning path. Completing this quest earns you a badge 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 this Quest and get immediate completion credit if you've taken this lab. See the Google Cloud Skills Boost catalog to see all available quests.
Take your next lab
Continue your quest with:
Next steps
-
Learn more about Firebase tools.
-
To learn more about the Firestore data model, read about documents and collections in the documentation.
Google Cloud training and certification
...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.
Manual Last Updated July 15, 2022
Lab Last Tested June 13, 2022
Copyright 2023 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.