1. Overview

In this codelab, you'll learn some of the basics ofFirebase to create interactive web applications. You'll build an event RSVP and guestbook chat app using several Firebase products.

What you'll learn

• Authenticate users with Firebase Authentication and FirebaseUI.
• Sync data using Cloud Firestore.
• Write Firebase Security Rules to secure a database.

What you'll need

• A browser of your choice, such as Chrome.
• Access tostackblitz.com (no account or sign-in necessary).
• A Google account, like a gmail account. We recommend the email account that you already use for your GitHub account. This allows you to use advanced features in StackBlitz.
• The codelab's sample code. See the next step for how to get the code.

2. Get the starting code

In this codelab, you build an app usingStackBlitz, an online editor that has several Firebase workflows integrated into it. Stackblitz requires no software installation or special StackBlitz account.

StackBlitz lets you share projects with others. Other people who have your StackBlitz project URL can see your code and fork your project, but they can't edit your StackBlitz project.

1. Go to this URL for the starting code:https://stackblitz.com/edit/firebase-gtk-web-start
2. At the top of the StackBlitz page, clickFork:

You now have a copy of the starting code as your own StackBlitz project, which has a unique name, along with a unique URL. All of your files and changes are saved in this StackBlitz project.

5. Add and configure Firebase

Now that you have your Firebase project created and some services enabled, you need to tell the code that you want to use Firebase, as well as which Firebase project to use.

Add the Firebase libraries

For your app to use Firebase, you need to add the Firebase libraries to the app. There are multiple ways to do this, asdescribed in the Firebase documentation. For example, you can add the libraries from Google's CDN, or you can install them locally using npm and then package them in your app if you're using Browserify.

StackBlitz provides automatic bundling, so you can add the Firebase libraries using import statements. You will be using the modular (v9) versions of the libraries, which help reduce the overall size of the webpage though a process called "tree shaking". You can learn more about the modular SDKsin the docs.

To build this app, you use the Firebase Authentication, FirebaseUI, and Cloud Firestore libraries. For this codelab, the following import statements are already included at the top of theindex.js file, and we'll be importing more methods from each Firebase library as we go:

//Importstylesheetsimport'./style.css';//FirebaseApp(thecoreFirebaseSDK)isalwaysrequiredimport{initializeApp}from'firebase/app';//AddtheFirebaseproductsandmethodsthatyouwanttouseimport{}from'firebase/auth';import{}from'firebase/firestore';import*asfirebaseuifrom'firebaseui';

Add a Firebase web app to your Firebase project

1. Back in the Firebase console, navigate to your project's overview page by clickingProject Overview in the top left.
2. In the center of your project's overview page, click the web iconto create a new Firebase web app.
   
   
   
   
3. Register the app with the nicknameWeb App.
4. For this codelab, do NOT check the box next toAlso set up Firebase Hosting for this app. You'll use StackBlitz's preview pane for now.
5. ClickRegister app.

   Stackblitz manages your dependencies for you, so you can skip thenpm install firebase step that's displayed in the console.

   
   
   
   
   
6. Copy theFirebase configuration object to your clipboard.
   
   
   
   
7. ClickContinue to console.Add the Firebase configuration object to your app:
8. Back in StackBlitz, go to theindex.js file.
9. Locate theAdd Firebase project configuration object here comment line, then paste your configuration snippet just below the comment.
10. Add theinitializeApp function call to set up Firebase using your unique Firebase project configuration.

    //...//AddFirebaseprojectconfigurationobjecthereconstfirebaseConfig={apiKey:"random-unique-string",authDomain:"your-projectId.firebaseapp.com",databaseURL:"https://your-projectId.firebaseio.com",projectId:"your-projectId",storageBucket:"your-projectId.firebasestorage.app",messagingSenderId:"random-unique-string",appId:"random-unique-string",};//InitializeFirebaseinitializeApp(firebaseConfig);

7. Write messages to Cloud Firestore

Knowing that users are coming is great, but let's give the guests something else to do in the app. What if they could leave messages in a guestbook? They can share why they're excited to come or who they hope to meet.

To store the chat messages that users write in the app, you'll useCloud Firestore.

Data model

Cloud Firestore is a NoSQL database, and data stored in the database is split into collections, documents, fields, and subcollections. You will store each message of the chat as a document in a top-level collection calledguestbook.

Tip: To learn more about the Cloud Firestore data model, read about documents and collections inthe Cloud Firestore documentation. You can also watch agreat series of videos that describe the Cloud Firestore NoSQL data model, queries, and other cool things that you can do with Cloud Firestore.

Add messages to Firestore

In this section, you'll add the functionality for users to write new messages to the database. First, you add the HTML for the UI elements (message field and send button). Then, you add the code that hooks these elements up to the database.

To add the UI elements of a message field and a send button:

1. In StackBlitz, go to theindex.html file.
2. Locate theguestbook-container, then add the following HTML to create a form with the message input field and the send button.

   <!--...--><sectionid="guestbook-container"><h2>Discussion</h2><formid="leave-message"><label>Leaveamessage:</label><inputtype="text"id="message"><buttontype="submit"><iclass="material-icons">send</i><span>SEND</span></button></form></section><!--...-->

App preview

A user clicking theSEND button will trigger the code snippet below. It adds the contents of the message input field to theguestbook collection of the database. Specifically, theaddDoc method adds the message content to a new document (with an automatically generated ID) to theguestbook collection.

1. In StackBlitz, go to theindex.js file.
2. At the top, locate thefirebase/firestore import statement, then addgetFirestore,addDoc, andcollection, like so:

   //...//AddtheFirebaseproductsandmethodsthatyouwanttouseimport{getAuth,EmailAuthProvider,signOut,onAuthStateChanged}from'firebase/auth';import{getFirestore,addDoc,collection}from'firebase/firestore';

3. Now we'll save a reference to the Firestoredb object right afterinitializeApp:

   initializeApp(firebaseConfig);auth = getAuth();db = getFirestore();

4. At the bottom of themain() function, add the following code.
   
   Note thatauth.currentUser.uid is a reference to the auto-generated unique ID that Firebase Authentication gives for all logged-in users.

   asyncfunctionmain(){//...//Listentotheformsubmissionform.addEventListener('submit',asynce=>{//Preventthedefaultformredirecte.preventDefault();//Writeanewmessagetothedatabasecollection"guestbook"addDoc(collection(db,'guestbook'),{text:input.value,timestamp:Date.now(),name:auth.currentUser.displayName,userId:auth.currentUser.uid});//clearmessageinputfieldinput.value='';//Returnfalsetoavoidredirectreturnfalse;});}main();

Show the guestbook only to signed-in users

You don't want justanybody to see the guests' chat. One thing that you can do to secure the chat is to allow only signed-in users to view the guestbook. That said, for your own apps, you'll want to also secure your database withFirebase Security Rules. (There's more information on security rules later in the codelab.)

1. In StackBlitz, go to theindex.js file.
2. Edit theonAuthStateChanged listener to hide and show the guestbook.

   // ...// Listen to the current Auth stateonAuthStateChanged(auth,user=>{if(user){startRsvpButton.textContent='LOGOUT';// Show guestbook to logged-in usersguestbookContainer.style.display='block';}else{startRsvpButton.textContent='RSVP';// Hide guestbook for non-logged-in usersguestbookContainer.style.display='none';}});

Test sending messages

1. Make sure that you're signed in to the app.
2. Enter a message such as "Hey there!", then clickSEND.

This action writes the message to your Cloud Firestore database. However, you won't yet see the message in your actual web app because you still need to implement retrieving the data. You'll do that next.

But you can see the newly added message in the Firebase console.

In the Firebase console, in theFirestore Database dashboard, you should see theguestbook collection with your newly added message. If you keep sending messages, your guestbook collection will contain many documents, like this:

Firebase console

Are you stuck or think that you might be off track? Here's a StackBlitz link that's updated with all of the code added up to this point of the codelab:https://stackblitz.com/edit/firebase-gtk-web-checkpoint2

Make sure that you do two things at this checkpoint:

1. Fork the project so that it's your own.
2. Add your Firebase project configuration object from the Firebase console.

8. Read messages

Synchronize messages

It's lovely that guests can write messages to the database, but they can't see them in the app yet.

To display messages, you'll need to add listeners that trigger when data changes, then create a UI element that shows new messages.

You'll add code that listens for newly added messages from the app. First, add a section in the HTML to show messages:

1. In StackBlitz, go to theindex.html file.
2. Inguestbook-container, add a new section with the ID ofguestbook.

   <!-- ... -->  <section>   <h2>Discussion</h2>   <form><!-- ... --></form>   <section></section> </section><!-- ... -->

Next, register the listener that listens for changes made to the data:

1. In StackBlitz, go to theindex.js file.
2. At the top, locate thefirebase/firestore import statement, then addquery,orderBy, andonSnapshot, like so:

   //...import{getFirestore,addDoc,collection,query,orderBy,onSnapshot}from'firebase/firestore';

3. At the bottom of themain() function, add the following code to loop through all the documents (guestbook messages) in the database. To learn more about what's happening in this code, read the information below the snippet.

   asyncfunctionmain(){//...//Createqueryformessagesconstq=query(collection(db,'guestbook'),orderBy('timestamp','desc'));onSnapshot(q,snaps=>{//Resetpageguestbook.innerHTML='';//Loopthroughdocumentsindatabasesnaps.forEach(doc=>{//CreateanHTMLentryforeachdocumentandaddittothechatconstentry=document.createElement('p');entry.textContent=doc.data().name+': '+doc.data().text;guestbook.appendChild(entry);});});}main();

To listen to messages in the database, you've created a query on a specific collection by using thecollection function. The code above listens to the changes in theguestbook collection, which is where the chat messages are stored. The messages are also ordered by date, usingorderBy('timestamp', 'desc') to display the newest messages at the top.

TheonSnapshot function takes two parameters: the query to use and a callback function. The callback function is triggered when there are any changes to documents that match the query. This could be if a message gets deleted, modified, or added. For more information, see theCloud Firestore documentation.

Tip: For a faster refresh, you can update only the changed documents, instead of the whole list. Learn more in theCloud Firestore documentation.

Test synchronizing messages

Cloud Firestore automatically and instantly synchronizes data with clients subscribed to the database.

• The messages that you created earlier in the database should be displayed in the app. Feel free to write new messages; they should appear instantly.
• If you open your workspace in multiple windows or tabs, messages will sync in real time across tabs.
• (Optional) You can try manually deleting, modifying, or adding new messages directly in theDatabase section of the Firebase console; any changes should appear in the UI.

Congratulations! You're reading Cloud Firestore documents in your app!

App preview

Are you stuck or think that you might be off track? Here's a StackBlitz link that's updated with all of the code added up to this point of the codelab:https://stackblitz.com/edit/firebase-gtk-web-checkpoint3

Make sure that you do two things at this checkpoint:

1. Fork the project so that it's your own.
2. Add your Firebase project configuration object from the Firebase console.

9. Set up basic security rules

You initially set up Cloud Firestore to use test mode, meaning that your database is open for reads and writes. However, you should only use test mode during very early stages of development. As a best practice, you should set up security rules for your database as you develop your app. Security should be integral to your app's structure and behavior.

Security Rules allow you to control access to documents and collections in your database. The flexible rules syntax allows you to create rules that match anything from all writes to the entire database to operations on a specific document.

You can write security rules for Cloud Firestore in the Firebase console:

1. In the Firebase console'sBuild section, clickFirestore Database, then select theRules tab (orclick here to go directly to theRules tab).
2. You should see the following default security rules, with a public-access time limit a couple of weeks from today.

Check out theFirebase Security Rules documentation or thisYouTube playlist to learn more about security rules.

Identify collections

First, identify the collections to which the app writes data.

1. Delete the existingmatch /{document=**} clause, so your rules look like this:

   rules_version = '2';service cloud.firestore {  match /databases/{database}/documents {  }}

2. Inmatch /databases/{database}/documents, identify the collection that you want to secure:

   rules_version = '2';service cloud.firestore {  match /databases/{database}/documents {    match /guestbook/{entry} {     // You'll add rules here in the next step.  }}

Add security rules

Because you used the Authentication UID as a field in each guestbook document, you can get the Authentication UID and verify that anyone attempting to write to the document has a matching Authentication UID.

1. Add the read and write rules to your rule set as shown below:

   rules_version='2';servicecloud.firestore{match/databases/{database}/documents{match/guestbook/{entry}{allowread:ifrequest.auth.uid!=null;allowcreate:ifrequest.auth.uid==request.resource.data.userId;}}}

2. ClickPublish to deploy your new rules.Now, for the guestbook, only signed-in users can read messages (any message!), but you can only create a message using your user ID. We also don't allow messages to be edited or deleted.

Add validation rules

1. Add data validation to make sure that all of the expected fields are present in the document:

   rules_version='2';servicecloud.firestore{match/databases/{database}/documents{match/guestbook/{entry}{allowread:ifrequest.auth.uid!=null;allowcreate:ifrequest.auth.uid==request.resource.data.userId          &&"name"inrequest.resource.data          &&"text"inrequest.resource.data          &&"timestamp"inrequest.resource.data;}}}

2. ClickPublish to deploy your new rules.

Reset listeners

Because your app now only allows authenticated users to log in, you should move the guestbookfirestore query inside the Authentication listener. Otherwise, permission errors will occur and the app will be disconnected when the user logs out.

1. In StackBlitz, go to theindex.js file.
2. Pull the guestbook collectiononSnapshot listener into a new function calledsubscribeGuestbook. Also, assign the results of theonSnapshot function to theguestbookListener variable.
   
   The FirestoreonSnapshot listenerreturns an unsubscribe function that you'll be able to use to cancel the snapshot listener later.

   //...//ListentoguestbookupdatesfunctionsubscribeGuestbook(){constq=query(collection(db,'guestbook'),orderBy('timestamp','desc'));guestbookListener=onSnapshot(q,snaps=>{//Resetpageguestbook.innerHTML='';//Loopthroughdocumentsindatabasesnaps.forEach(doc=>{//CreateanHTMLentryforeachdocumentandaddittothechatconstentry=document.createElement('p');entry.textContent=doc.data().name+': '+doc.data().text;guestbook.appendChild(entry);});});}

3. Add a new function underneath calledunsubscribeGuestbook. Check whether theguestbookListener variable is not null, then call the function to cancel the listener.

   // ...// Unsubscribe from guestbook updatesfunctionunsubscribeGuestbook(){if(guestbookListener!=null){guestbookListener();guestbookListener=null;}}

Finally, add the new functions to theonAuthStateChanged callback.

4. AddsubscribeGuestbook() at the bottom ofif (user).
5. AddunsubscribeGuestbook() at the bottom of theelse statement.

   // ...// Listen to the current Auth stateonAuthStateChanged(auth,user=>{if(user){startRsvpButton.textContent='LOGOUT';// Show guestbook to logged-in usersguestbookContainer.style.display='block';// Subscribe to the guestbook collectionsubscribeGuestbook();}else{startRsvpButton.textContent='RSVP';// Hide guestbook for non-logged-in usersguestbookContainer.style.display='none';// Unsubscribe from the guestbook collectionunsubscribeGuestbook();}});

Are you stuck or think that you might be off track? Here's a StackBlitz link that's updated with all of the code added up to this point of the codelab:https://stackblitz.com/edit/firebase-gtk-web-checkpoint4

Make sure that you do two things at this checkpoint:

1. Fork the project so that it's your own.
2. Add your Firebase project configuration object from the Firebase console.

10. Bonus step: Practice what you've learned

Record an attendee's RSVP status

Right now, your app just allows people to start chatting if they're interested in the event. Also, the only way you know if someone's coming is if they post it in the chat. Let's get organized and let people know how many people are coming.

You'll add a toggle to register people who want to attend the event, then collect a count of how many people are coming.

1. In StackBlitz, go to theindex.html file.
2. Inguestbook-container, add a set ofYES andNO buttons, like so:

   <!-- ... -->  <section>   <h2>Are you attending?</h2>     <button>YES</button>     <button>NO</button>   <h2>Discussion</h2>   <!-- ... --> </section><!-- ... -->

App preview

Next, register the listener for button clicks. If the user clicksYES, then use their Authentication UID to save the response to the database.

1. In StackBlitz, go to theindex.js file.
2. At the top, locate thefirebase/firestore import statement, then adddoc,setDoc, andwhere, like so:

   //...//AddtheFirebaseproductsandmethodsthatyouwanttouseimport{getFirestore,addDoc,collection,query,orderBy,onSnapshot,doc,setDoc,where}from'firebase/firestore';

3. At the bottom of themain() function, add the following code to listen to the RSVP status:

   async function main() {  // ...  // Listen to RSVP responses  rsvpYes.onclick = async () => {  };  rsvpNo.onclick = async () => {  };}main();

4. Next, create a new collection calledattendees, then register a document reference if either RSVP button is clicked. Set that reference totrue orfalse depending on which button is clicked.
   
   First, forrsvpYes:

   //...//ListentoRSVPresponsesrsvpYes.onclick=async()=>{//Getareferencetotheuser's document in the attendees collectionconstuserRef=doc(db,'attendees',auth.currentUser.uid);//IftheyRSVP'd yes, save a document with attendi()ng: truetry{awaitsetDoc(userRef,{attending:true});}catch(e){console.error(e);}};

   Then, the same forrsvpNo, but with the valuefalse:

   rsvpNo.onclick=async()=>{//Getareferencetotheuser's document in the attendees collectionconstuserRef=doc(db,'attendees',auth.currentUser.uid);//IftheyRSVP'd yes, save a document with attending: truetry{awaitsetDoc(userRef,{attending:false});}catch(e){console.error(e);}};

Update your Security Rules

Because you already have some rules set up, the new data that you're adding with the buttons is going to be rejected.

Allow additions to theattendees collection

You'll need to update the rules to allow adding to theattendees collection.

1. For theattendees collection, since you used the Authentication UID as the document name, you can grab it and verify that the submitter'suid is the same as the document they are writing. You'll allow everyone to read the attendees list (since there is no private data there), but only the creator should be able to update it.

   rules_version='2';servicecloud.firestore{match/databases/{database}/documents{//...//match/attendees/{userId}{allowread:iftrue;allowwrite:ifrequest.auth.uid==userId;}}}

2. ClickPublish to deploy your new rules.

Add validation rules

1. Add some data validation rules to make sure that all of the expected fields are present in the document:

   rules_version='2';servicecloud.firestore{match/databases/{database}/documents{//...//match/attendees/{userId}{allowread:iftrue;allowwrite:ifrequest.auth.uid==userId          &&"attending"inrequest.resource.data;}}}

2. Don't forget to clickPublish to deploy your rules!
   

(Optional) You can now view the results of clicking the buttons. Go to your Cloud Firestore dashboard in the Firebase console.

Read RSVP status

Now that you've recorded the responses, let's see who's coming and reflect it in the UI.

1. In StackBlitz, go to theindex.html file.
2. Indescription-container, add a new element with the ID ofnumber-attending.

   <!-- ... --> <section>     <!-- ... -->     <p></p> </section><!-- ... -->

Next, register the listener for theattendees collection and count the number ofYES responses:

3. In StackBlitz, go to theindex.js file.
4. At the bottom of themain() function, add the following code to listen to the RSVP status and countYES clicks.

   asyncfunctionmain(){//...//ListenforattendeelistconstattendingQuery=query(collection(db,'attendees'),where('attending','==',true));constunsubscribe=onSnapshot(attendingQuery,snap=>{constnewAttendeeCount=snap.docs.length;numberAttending.innerHTML=newAttendeeCount+' people going';});}main();

Finally, let's highlight the button corresponding to the current status.

5. Create a function that checks whether the current Authentication UID has an entry in theattendees collection, then set the button class toclicked.

   //...//ListenforattendeelistfunctionsubscribeCurrentRSVP(user){constref=doc(db,'attendees',user.uid);rsvpListener=onSnapshot(ref,doc=>{if(doc &&doc.data()){constattendingResponse=doc.data().attending;//Updatecssclassesforbuttonsif(attendingResponse){rsvpYes.className='clicked';rsvpNo.className='';}else{rsvpYes.className='';rsvpNo.className='clicked';}}});}

6. Also, let's make a function to unsubscribe. This will be used when the user logs out.

   // ...functionunsubscribeCurrentRSVP(){if(rsvpListener!=null){rsvpListener();rsvpListener=null;}rsvpYes.className='';rsvpNo.className='';}

7. Call the functions from the Authentication listener.

   // ...// Listen to the current Auth state// Listen to the current Auth stateonAuthStateChanged(auth,user=>{if(user){startRsvpButton.textContent='LOGOUT';// Show guestbook to logged-in usersguestbookContainer.style.display='block';// Subscribe to the guestbook collectionsubscribeGuestbook();// Subscribe to the user's RSVPsubscribeCurrentRSVP(user);}else{startRsvpButton.textContent='RSVP';// Hide guestbook for non-logged-in usersguestbookContainer.style.display='none';// Unsubscribe from the guestbook collectionunsubscribeGuestbook();// Unsubscribe from the guestbook collectionunsubscribeCurrentRSVP();}});

8. Try logging in as multiple users and see the count increase with each additionalYES button click.

App preview

Are you stuck or think that you might be off track? Here's a StackBlitz link that's updated with all of the code added up to this point of the codelab:https://stackblitz.com/edit/firebase-gtk-web-checkpoint5

Make sure that you do two things at this checkpoint:

1. Fork the project so that it's your own.
2. Add your Firebase project configuration object from the Firebase console.

11. Congratulations!

You've used Firebase to build an interactive, real-time web application!

What we've covered

• Firebase Authentication
• FirebaseUI
• Cloud Firestore
• Firebase Security Rules

Next steps

• Want to learn more the Firebase Developer Workflow? Check out theFirebase emulator codelab to learn about how to test and run your app completely locally.
• Want to learn more about other Firebase products? Maybe you want to store image files that users upload? Or send notifications to your users? Check out theFirebase web codelab for a codelab that goes into more depth on many more Firebase products for web.
• Want to learn more about Cloud Firestore? Maybe you want to learn about subcollections and transactions? Head over to theCloud Firestore web codelab for a codelab that goes into more depth on Cloud Firestore. Or check out thisYouTube series to get to know Cloud Firestore!

Learn more

• Firebase site:firebase.google.com
• Firebase YouTube channel

How did it go?

We would love your feedback! Please fill out a (very) short formhere.