I'm back with an updated Firebase Basics tutorial 🔥 Follow along with the full Firebase quickstart article https://fireship.io/lessons/firebase-quickstart

Source code: https://github.com/fireship-io/3.1-firebase-basics

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
2024-02-04T06:10:35.404Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
4e82ae8f-05c0-4bc7-8669-72305a415978
b65bdcd5d5ae11f7eb1ddfa8af5f25e524a639f28e46cb6fd0a0b05c088418b9
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Choosing the right tech stack for your product in a world of unlimited possibilities is extremely challenging.
Let's imagine you have an idea for the next $1,000,000,000 to do app.
You may have a vision for how the end user experience will work.
But behind the front end, you have a ton of technical decisions to make on the back end, like how do we authenticate users?
Which database should we use.
How do we run trusted code on a server?
How do we handle security, analytics, and scale up as our user base grows?
These decisions are hard to get right, and just thinking about them takes time, money, and energy that would be better spent focusing on the user experience.
When it comes to minimizing decision fatigue, there's nothing quite like Firebase.
It it contains everything most apps will need to build and run a production app at scale.
This is what we call a back end as a service, where the idea is that you, the developer, write and maintain as little back end code as possible.
It costs about $0 per month to run until your app builds active user base, and it's extremely developer friendly.
The tool that lets you use the whole vast without scaling, cutting, or gutting.
It's just that simple.
When writing code with Firebase, you'll find that the SDKs are extremely well documented and highly optimized to get features built quickly.
But, ultimately everything is a trade off.
I've been using Firebase for 5 years, and there are certainly some drawbacks to the platform that we'll talk about as well.
In today's beginner friendly tutorial, you'll learn everything you need to know about Firebase.
You'll learn how to deploy a full stack web application to the cloud.
The app will be able to authenticate users with their Google account, then allow that user to securely create data in the database.
And anytime that user's data changes, it will be automatically reflected in the UI in real time.
We'll we'll be using vanilla JavaScript for this tutorial.
However, most people using Firebase are using a front end framework, like React, Angular, Flutter, and so on.
I'll be releasing intro videos for those frameworks separately, so make sure to subscribe to catch those as well.
Even if you're using one of those frameworks, I highly recommend going through this tutorial as well to get a full understanding of how Firebase works at the base level.
With that being said, let's go ahead and jump right into things.
The first thing you'll need is to have Node.
Js installed on your local system.
You can see here that I've opened up PS code to an empty directory.
I'm entering the command node flag v to get the version of 10 dot 21.
Any version greater than 8 should work just fine.
If you don't have Node installed, I recommend using NVM or Node version manager to install the same version of Node that I'm using here.
The next step is to create a Firebase project.
You can sign in to Firebase with your Google account because Firebase is just an extension of Google Cloud Platform.
Firebase is a lot of different things, but at its core, it's an SDK or software development kit that makes it easy for your front end app to connect to back end cloud infrastructure on Google Cloud.
Now Now on GCP, all of your cloud infrastructure like databases, storage buckets, servers, and so on is organized into a project.
A project might be connected to multiple apps.
You might have a web app, iOS, and Android app that all share the same database and back end servers.
Go ahead and create a new project, and then let's take a tour of the Firebase console.
The console is simply awesome and basically serves as an admin area for all of your app infrastructure.
As developers, the main area that we'll be focused on is the develop category.
This is the actual cloud infrastructure that we need to build a full stack application.
This this is the most important area to focus on, especially in the early stages of architecting an app.
The next section is the quality category.
This is where you'll focus when your app is getting ready to go to production.
These tools help you optimize performance, detect crashes, and distribute your app to testers.
Once your app game's actual users you can analyze their behavior with analytics.
This data is extremely powerful, and you can use it to segment your user base and custom tailor the user experience.
You can use this analytics data to send push notifications or use remote config to change the actual appearance or behavior of your app based on the type user that's engaging with it.
It's really powerful stuff.
But to get to that point, you first need to create an app that people wanna use.
In our case, we're building a web app.
So the first thing we'll wanna in Firebase is go up here to the project settings and create a new web app.
A Firebase project can actually have multiple web apps, so we'll wanna give it a nickname.
When were finished.
It will give us a script tag that references the Firebase SDK and adds our Firebase project credentials to link the web app to this Firebase project in the cloud.
These credentials are perfectly okay to expose in your front end application, so don't worry about hiding them for security purposes.
We'll talk more about how security works in Firebase in a few minutes.
Go and copy the code snippet, then head back to Versus Code and create a public folder and add a file called index HTML to it.
In the HTML file, you can type an exclamation point and then hit tab to quickly scaffold out a basic HTML page.
Go ahead and paste the Firebase snippet in the head of the document.
Now you'll notice in the comments, it has a to do to add SDKs for the Firebase products that we want to use.
Firebase is modular, which means we can opt in or progressively enhance our app with the features that we want to use.
If we're not using a feature, we don't need to include that extra dead code in our application, which would degrade performance.
If we follow the link, we wanna find the CDN links for Firestore and Firebase auth.
Those are the 2 features that we'll be using in today's demo.
Go ahead and paste those script tags into the document.
Now to simplify the application.
I'm going to create an app dotjs file.
From there, I'll create a script tag that references this file, and we'll use the defer attribute to make sure the script loads after the body elements have loaded.
At this point, we can go into our app.
Js file and console log firebase, which should be available as a global variable on the window.
And now we can go into the browser and make sure everything's working as intended.
Right click on the index.
Html file and click copy path.
Then then open up a web browser and paste the file path as the URL.
You should get a blank HTML page, but if you open up the console using control shift j, you should see the Firebase SDK log there.
And on that object, you should see Firestore and auth if your SDK is loaded properly.
Okay.
So now that we have Firebase installed in our front end code.
The next thing I recommend doing is installing the Firebase command line tools and initializing this project which will connect your command line to the cloud.
The CLI has all kinds of awesome tools built in, and what we'll use it for right now is to serve and then deploy our app to a real URL on the Internet.
Go ahead and open up a terminal session and install the Firebase tools package using the global flag, making it globally available on your system.
Once that's finished, you can run firebase login from the command line to log in to your Firebase account in the cloud.
That'll bring up a pop up window for you to authenticate and you can now manage your Firebase project from the command line.
Now if you're also using Versus Code, I would highly recommend installing the Firebase Explorer extension.
This extension allows you to connect your Google account to Versus Code and manage all of your Firebase projects visually.
It's extremely useful to have quick access to your database, face your various projects, cloud functions, and so on.
So now that our command line is connected to Firebase, I'm going to go into our HTML and add a heading for my awesome app just so we have something to look at.
Next, we'll run the firebase init command to configure Firebase in this project.
1st, first it wants to know which features we plan on using.
For now, we'll go ahead and select hosting as well as emulators.
You can use the space bar to make your selections.
Hosting is where your front end web application will ultimately be deployed.
It's basically a storage bucket that's available on the Internet served over a CDN, making your web app very fast everywhere in the world.
Pricing is based on the number of gigabytes stored in your hosting account as well as the number of gigabytes that you transfer out to your users, which will, of course, increase with the amount of traffic that you have going to your site.
The CLI ask you to use a project.
Go ahead and use the project that you've already set up.
The public directory is where all of our distribution code lives.
Those are the files that the end user needs to view our application on the web.
In this case, we just have a single HTML file.
So we'll go ahead and set it up as a single page app.
Then we'll select no when asked to overwrite that file.
After that, it'll ask us a few questions for the emulator setup.
I have an advanced breakdown of the Firebase Emulator on Fireship IO, but, basically, it's just a way for you to simulate proliferate Firebase services locally on your system.
That means you can create database records and run Cloud functions without having to directly connect to the Cloud.
We'll go ahead and stick to default options for the remaining CLI questions here.
When it's finished, you'll notice it created 2 files here in the root of our project.
1st, the Firebase RC or resource config file just contains an identifier for our project in the cloud.
And we also have the Firebase JSON file, which is a file that you can modify to customize the behavior of various Firebase services.
When it comes to hosting, you can use this file to create redirects and rewrites to different URLs in your app, but that's beyond the scope of this video.
If you want to run your app locally, there's 2 ways you can do it.
You can open up the command line and run Firebase serve or you can run the Firebase emulators start command.
In either case, it will serve your app locally on localhost 5000.
You can now start developing your app and see the changes reflected here.
Firebase also makes it extremely easy to deploy your app to a production URL.
Go ahead and run the Firebase deploy command, and it will take the files in your public directory and upload them to a storage bucket in the cloud.
It will automatically provision a hosting URL at web.app.
If you follow that URL, you should now see your web app available on the real Internet.
So that's pretty awesome.
I don't think it can really get any easier than that.
If you go to the hosting tab on the Firebase console.
You can see the different versions that you've deployed there, and you can also connect your own custom domain here as well.
And now we're ready to start building something cool.
Let's start by getting a user logged into the application.
Head back over to the Firebase console and find the authentication tab.
Firebase auth is kind of like a read only database for your users.
Currently, we don't have any users, but that'll be changing soon.
If we wanted to add a user manually, we you could click the add user button and add one with an email and password here.
When a new user signs up with our app, they'll have a record added here, and every user has a unique user ID.
This UID is important because you'll often want to associate custom user data to it in your database, which we'll do in a few minutes here.
There's a whole bunch of built in ways to sign in a user, but the easiest to implement is Google, which we can do by simply clicking the enable button.
Now before we get back to our code, you might be wondering, how much is this going to cost me?
The answer is nothing.
Even if you have 10,000,000 users, the cost is 0, and that's pretty crazy, especially compared to other platforms.
Now let's head over to our application code and see how we can get a user logged in to our web app.
We'll start HTML and add some markup for the UI.
Basically, we have 2 sections here, one for when the user is signed out and one for when the user is signed in.
Each section will have a unique ID, and the signed in section will be hidden by default.
In the signed out section, we'll add a button to sign in with Google.
When the user clicks the button, it'll bring up a pop up window to sign in with their Google account.
When that's done successfully, we'll show the signed in section that will contain their user details along with a sign out button.
And just a little side note here, I'm using Bootstrap to give the UI a little more flavor.
That part's completely optional and keep in mind you can find the full source code for this project on GitHub.
Now we we can jump over to our JavaScript and start using the Firebase auth SDK.
To reference auth, we call Firebase auth, and this part of the gives us access to a whole bunch of different methods to manage users within our app.
What we wanna do here is sign a user in and then sign a user out when they click the corresponding buttons.
The first thing we'll wanna do here is grab the HTML elements that we wanna interact with, which we can do by calling document get element by ID.
This code is obviously pretty fully.
It's imperative, and it's one of the main reasons that people generally choose to use a framework like React, Angular, or Vue to get things done on the web.
But even if using a framework, it's important to understand how these low level browser APIs work.
Now in our case, we want the user to be able to log in with their Google account, and that's a functionality that's built into Firebase.
To use it, we first declare a variable and set it equal to a Firebase auth Google provider instance.
Next, we register a click handler for our sign in button.
This is just a function that calls the Firebase auth sign in with pop up method using that provider as the argument.
Many apps have multiple sign in providers like Facebook, Apple, etcetera, allowing you to reuse the same logic across multiple sign in providers.
Now let's go ahead and test it out.
When you open up your app on local host 5000, you should see the sign in button.
When clicked, it should prompt you to log in with your Google account.
At this point, you'll notice that nothing actually changes in our UI, but a couple of important things happened here and the user is, in fact, logged into the application at this point.
On the back end Firebase created something known as a JSON Web Token to manage the authentication state.
If you go into the application section of the browser's dev tools, you'll notice that Fire base saved a record here that has information about the logged in user, like an email address, user ID, and so on.
I'll show you how to access all these values in your application next.
And it's also worth noting that the Firebase user is created in the Firebase dashboard as well.
You can use that to manage the user, disable, or delete the account if you need to.
Now back in our JavaScript code, there's one thing you should understand.
The sign in and sign out methods are one off operations.
They return a promise, and once they're called, they they do something asynchronous and then they're done.
But the user authentication state is something that can change multiple times throughout the life cycle of the application.
And usually you want your app to react with changes to the UI when that happens.
The way you do that in Firebase is by listening to on off state changed.
Anytime the user signs in or signs out, the callback function passed to this method will be called.
The callback function gives you access to the currently logged in user, and that means you can provide traditional logic to show UI when the user's logged in or something else when the user's logged out.
When the user object is defined, we know the user signed in, in which case we'll want to show the signed in template, and then we can add some custom user details to the UI using that user object.
The user object is the same thing that we looked at in the browser's application tab just a minute ago.
In this case, we'll interpolate the user's display name and also their unique user ID.
If the user object is null, then we'll simply hide add the signed in template and set the user details to an empty string.
And now if we open up our web app and sign in, you'll see that the UI updates reactively.
As as you can see, it's showing my display name from Google as well as my unique user ID.
And when we click the sign out button, the UI goes back to its original state.
And that's pretty awesome because we just accomplished a lot with very little code.
And now we're ready to move on to what's probably the most important part of your application, the database.
Out of the box, Firebase provides 2 NoSQL databases, real time database, and Firestore.
In this video, we'll be focusing on Firestore, which tends to be the better option for most use cases.
It's very similar to MongoDB, which is a document oriented database.
Basically, you have a set of collections where each collection is a container for multiple documents and then you can make queries across all of the documents in a collection.
There's there's no schema, which means the database is very flexible and easy to use, but that's both a good and bad thing.
Unlike an SQL database where you do have a schema, it's a lot easier with something like Firestore to make mistakes with data modeling and things like that.
In fact, I've dedicated an entire course just to data modeling because it's such an important topic.
Now if if you're just getting started with Firebase, don't worry about that.
Just experiment and have fun with it.
Another awesome thing about Firestore is that it's real time by default.
When we integrate it into our front end application, everything will stay updated with the back end server database in real time without any effort on our part.
It's pretty awesome stuff.
Now Firestore is not a free service, although it does have a free quota that you can use every month.
When you go over the quota, you'll be charged primarily based on the number of reads, writes, and gigabytes transferred outside the network.
Let's get things started by enabling Firestore in this project.
Go ahead and start it in test mode, which means anybody can read or write to the database, and then we'll come back and set security rules for it later on.
Now that that's done, let's get familiar with the Firestore management console.
This is a place where you, the super admin developer, can manage any the data in the database.
The first thing we wanna do is create a new collection.
We'll give it a plural name like things.
And then inside that collection, we'll add the first document.
Every document in a collection needs to have a unique ID.
Firestore can create one automatically, or you can manually create one to handle different data modeling relationships.
Flips.
The document is where you store all of your data in a series of key value pairs, similar to a JavaScript object.
This document might have a name field where the value is a string and and await where the value is a number.
You can name these fields whatever you want, but it's important to keep that consistent across documents because that's what you use to query them.
For sample, if we have multiple documents in this database, we can find this upside down pyramid icon here in the collection.
This allows us to experiment with different queries.
If we go ahead and open up the panel, we first choose a field to filter by, which in this case is weight.
And then we have a number of different query operators we use to handle the filtering.
In this case, we want all the documents where the weight is greater than 5.
When we apply this query, you can see it filters out just the one document where the weight is greater than 5.
Now since one of these documents has a weight of 5, we can make this an inclusive query by saying greater than or equal to 5.
When we update the query, we now get both documents returned back to us.
Now that you know a little bit about how Firestore works, let's take a look at how we can associate data to a user in our application.
If we go into our HTML, you can see I have another section here with an unordered list where we'll show all the things that this currently logged in user has created.
We'll give the user a way to create a new random thing in the database by simply clicking on this button.
Here's a pro tip.
If you want to create random fake data in your application, check out this library called Faker JS.
It's a say really quick and easy way to generate fake random data for testing.
Now if we go back into our JavaScript, we'll first make a reference to the Firebase Firestore SDK as the variable DB.
Then we'll use browser APIs to grab our create thing button as well as the things list.
Now there are generally 2 things you need when accessing data from Firestore first store in real time.
The first thing is a reference to the document or collection that you wanna access, which will give a variable name of the things ref in this case.
The reference is a starting point to create, read, update, and delete data at a specific point in the database.
Now when it comes to reading data in real time, our front end UI will always react to changes that happen on the server.
And that means we'll be subscribed to stream of changes happening to the database, and, therefore, we want to set a second variable here called unsubscribe so we can tell the app when to stop listening to this real time stream.
If you don't unsubscribe from your data, it could lead to memory leaks and also unnecessary costs by reading and listening to documents that you don't actually need for the UI.
Now in this demo, we want our database records to only be accessible by the currently logged in user.
And that means before we make a reference to the database, we need to check the authentication state of the current user.
We can use the on auth state change callback just like we did in the previous section.
We'll set set everything up when the user is logged in.
And the first thing we'll do is create that reference to the database by calling db collection things.
Now that we have that reference, we can register event handler on the click event on our create thing button.
There are several different ways you can create data, but when you have a reference to a collection, the add method will simply add a new document to that collection and automatically generate the unique ID.
The add method takes a JavaScript object as its argument, and this is the actual data that will be saved on your document in the database.
Now the way we associate a document with a user is by making a reference to their user ID on the document itself.
That way we can query all of the documents that have the corresponding user ID.
From there, we'll add a name field to the document with just a random product name using faker.
Now now one other thing you might want to do is save a timestamp of when this document was created.
A common pitfall when doing front end development is to use a regular JavaScript date object.
But what you should understand is that the date object is not always consistent on every machine.
So what you should do for consistent time stamps is use the Firebase Firestore field value server timestamp.
This will be evaluated by Firestore to ensure that the date is always the same across all client devices.
At at this point, we're able to create data in our database from the front end application.
If we pull up the app, making sure that we're logged in and click on the create random item button, we should see that item created in the database instantaneously.
But the real magic of Firestore is being able to listen to these changes in real time in the front end UI, and and the way you do that is by making a query.
Now when you make a query in Firestore, it's going to return a function that you can use to unsubscribe from that query later on.
It's not required, but a very good idea to name that variable something like unsubscribe and then use it when the state of the app changes like when the user signs out.
Using reference, we can then make a query by calling where the user ID equals the current user's user ID.
That will give us only the documents that this particular user has created.
To get a real time stream of all the changes to this query we call on snapshot.
But if we only wanted to read this data once, we could use get instead.
With on snapshot, we provide a callback function that will be called anytime the underlying data changes.
It gives us access to the query snapshot, which is an object that contains an array of documents that we can use to update the UI with the most recent data.
The way I'll handle it in this case is by taking the array of documents and mapping it down to an array of list items that we can show in the HTML.
For each document that's returned in the query, we'll create a list item.
And then inside that list item, we can get the actual data on the document by calling doc data and then we'll reference the name field.
And then lastly, we'll update the HTML by setting the inner HTML of our things list few these items join together as a string.
Now when we go back to our demo, you can see that the things list is updated in the actual UI every time we create a new record.
Now cool thing about this is no matter where this data update takes place, whether it's on the server or some other application, it'll be updated in this UI as well.
You can see see when I delete all the documents here on the server, those changes are reflected instantaneously in the front end app as well.
So that was pretty easy, but it gets even easier when you use a front end framework.
Now before we move on, there's a couple of other things you should know about Firestore.
In many cases, you might want to make what's known as a compound query.
That's when you chain multiple operations together on the same query.
For example, we could do that here by adding the order by method to order by the created at field.
But when we do and go back to the application, you can see our data is no longer listed there.
And if we open the console, we get an error message saying that we need a composite put index.
In order to scale infinitely in the cloud, certain queries need a composite index.
So in this case, we can create it by simply following the link in the error message, and it will take us to the Firebase console to create the index to support that query.
Now the other thing to keep in mind that I've already mentioned is to make sure to unsubscribe from your data when it's no longer needed.
For for this feature, it would make sense to unsubscribe when the user is no longer logged in.
So we're already checking for the user authentication state, which means we can just add an else statement here and unsubscribe if that unsubscribe function is defined.
Now the final but most important thing to understand here is how security works.
So even even though we're filtering the items by the logged in user, they're still not secure.
Anybody could run this code and get the items that are privately owned by the logged in user.
If if you're building a serious application, you absolutely need to have full stack security rules in place to prevent things like this.
We can easily handle this by going to the rules tab from the Firestore console.
Pull.
Rules have their own special syntax and they're designed to make it really easy to implement security logic for your database.
The first thing we'll wanna do is secure the entire database by allowing rewrite to be false across the entire database and then we'll allow things selectively based on where they're needed.
From there, we'll reference the things collection and then use braces to represent every document in that collection as a wildcard with its document ID.
In order for a user to be able to write to this collection, their request auth user ID, which represents the user ID of the currently logged in user, needs to match the user ID that they want to save to the database.
If it's a mismatch, then Firestore will block that operation.
In other words, this security rule would prevent a user from creating a document for any other user.
When when it comes to reading documents, we have very similar security logic here.
But instead of looking at the request data, which represents the incoming data, we're looking at for resource data, which is the data that already exists on the database.
So in this case, a user can only read a document if it already contains their user ID.
And that's really all there is to it.
You've now built a full stack authenticated secure application.
If we go into our source code and try to change the user ID and then make it right to the database, you'll notice that Firestore blocks it.
We've already accomplished a lot, but we've barely scratched the surface of Firebase.
Let's finish this video by doing a rapid fire overview of some other things you'll want to check out.
When building a complex application, you likely won't be able to do everything on the front end.
You'll still need to write some server side code to interact with APIs, run background jobs and things like that.
And the tool you use to run server side code is cloud functions.
When you have something you want done on the server, maybe it's Python, Node.
Js, or Go, you can write play Cloud Function to get that work done.
In addition, your app might need to store raw files like videos and images.
Every Firebase project comes with a built print storage bucket, and it has an SDK that allows you to easily upload files from your front end application to the storage bucket.
If you you do upload files here, you might want to run some machine learning on them, like text recognition or image labeling.
Firebase has a ton of built in machine learning APIs is to handle stuff like that.
And another awesome thing to keep an eye on is Firebase extensions.
This is a relatively new feature that allows developers to extend the functionality of Firebase itself.
For example, Stripe payments just recently released its own extension to make it easier for developers to accept payments in their Firebase apps.
The bottom line here is that Firebase is an awesome tool if your goal is to get an app built quickly and efficiently.
Like I said earlier, there is nothing quite like it, and it's no surprise that it's the most popular back end as a service in the world.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe, and be looking out for more advanced and framework specific play Firebase content here in the near future.
Thanks for watching, and I will see you in the next one.

Speaker 0: Choosing the right tech stack for your product in a world of unlimited possibilities is extremely challenging. Let's imagine you have an idea for the next $1,000,000,000 to do app. You may have a vision for how the end user experience will work. But behind the front end, you have a ton of technical decisions to make on the back end, like how do we authenticate users? Which database should we use.

How do we run trusted code on a server? How do we handle security, analytics, and scale up as our user base grows? These decisions are hard to get right, and just thinking about them takes time, money, and energy that would be better spent focusing on the user experience. When it comes to minimizing decision fatigue, there's nothing quite like Firebase. It it contains everything most apps will need to build and run a production app at scale.

This is what we call a back end as a service, where the idea is that you, the developer, write and maintain as little back end code as possible. It costs about $0 per month to run until your app builds active user base, and it's extremely developer friendly. The tool that lets you use the whole vast without scaling, cutting, or gutting. It's just that simple. When writing code with Firebase, you'll find that the SDKs are extremely well documented and highly optimized to get features built quickly.

But, ultimately everything is a trade off. I've been using Firebase for 5 years, and there are certainly some drawbacks to the platform that we'll talk about as well. In today's beginner friendly tutorial, you'll learn everything you need to know about Firebase. You'll learn how to deploy a full stack web application to the cloud. The app will be able to authenticate users with their Google account, then allow that user to securely create data in the database.

And anytime that user's data changes, it will be automatically reflected in the UI in real time. We'll we'll be using vanilla JavaScript for this tutorial. However, most people using Firebase are using a front end framework, like React, Angular, Flutter, and so on. I'll be releasing intro videos for those frameworks separately, so make sure to subscribe to catch those as well. Even if you're using one of those frameworks, I highly recommend going through this tutorial as well to get a full understanding of how Firebase works at the base level.

With that being said, let's go ahead and jump right into things. The first thing you'll need is to have Node. Js installed on your local system. You can see here that I've opened up PS code to an empty directory. I'm entering the command node flag v to get the version of 10 dot 21.

Any version greater than 8 should work just fine. If you don't have Node installed, I recommend using NVM or Node version manager to install the same version of Node that I'm using here. The next step is to create a Firebase project. You can sign in to Firebase with your Google account because Firebase is just an extension of Google Cloud Platform. Firebase is a lot of different things, but at its core, it's an SDK or software development kit that makes it easy for your front end app to connect to back end cloud infrastructure on Google Cloud.

Now Now on GCP, all of your cloud infrastructure like databases, storage buckets, servers, and so on is organized into a project. A project might be connected to multiple apps. You might have a web app, iOS, and Android app that all share the same database and back end servers. Go ahead and create a new project, and then let's take a tour of the Firebase console. The console is simply awesome and basically serves as an admin area for all of your app infrastructure.

As developers, the main area that we'll be focused on is the develop category. This is the actual cloud infrastructure that we need to build a full stack application. This this is the most important area to focus on, especially in the early stages of architecting an app. The next section is the quality category. This is where you'll focus when your app is getting ready to go to production.

These tools help you optimize performance, detect crashes, and distribute your app to testers. Once your app game's actual users you can analyze their behavior with analytics. This data is extremely powerful, and you can use it to segment your user base and custom tailor the user experience. You can use this analytics data to send push notifications or use remote config to change the actual appearance or behavior of your app based on the type user that's engaging with it. It's really powerful stuff.

But to get to that point, you first need to create an app that people wanna use. In our case, we're building a web app. So the first thing we'll wanna in Firebase is go up here to the project settings and create a new web app. A Firebase project can actually have multiple web apps, so we'll wanna give it a nickname. When were finished.

It will give us a script tag that references the Firebase SDK and adds our Firebase project credentials to link the web app to this Firebase project in the cloud. These credentials are perfectly okay to expose in your front end application, so don't worry about hiding them for security purposes. We'll talk more about how security works in Firebase in a few minutes. Go and copy the code snippet, then head back to Versus Code and create a public folder and add a file called index HTML to it. In the HTML file, you can type an exclamation point and then hit tab to quickly scaffold out a basic HTML page.

Go ahead and paste the Firebase snippet in the head of the document. Now you'll notice in the comments, it has a to do to add SDKs for the Firebase products that we want to use. Firebase is modular, which means we can opt in or progressively enhance our app with the features that we want to use. If we're not using a feature, we don't need to include that extra dead code in our application, which would degrade performance. If we follow the link, we wanna find the CDN links for Firestore and Firebase auth.

Those are the 2 features that we'll be using in today's demo. Go ahead and paste those script tags into the document. Now to simplify the application. I'm going to create an app dotjs file. From there, I'll create a script tag that references this file, and we'll use the defer attribute to make sure the script loads after the body elements have loaded.

At this point, we can go into our app. Js file and console log firebase, which should be available as a global variable on the window. And now we can go into the browser and make sure everything's working as intended. Right click on the index. Html file and click copy path.

Then then open up a web browser and paste the file path as the URL. You should get a blank HTML page, but if you open up the console using control shift j, you should see the Firebase SDK log there. And on that object, you should see Firestore and auth if your SDK is loaded properly. Okay. So now that we have Firebase installed in our front end code.

The next thing I recommend doing is installing the Firebase command line tools and initializing this project which will connect your command line to the cloud. The CLI has all kinds of awesome tools built in, and what we'll use it for right now is to serve and then deploy our app to a real URL on the Internet. Go ahead and open up a terminal session and install the Firebase tools package using the global flag, making it globally available on your system. Once that's finished, you can run firebase login from the command line to log in to your Firebase account in the cloud. That'll bring up a pop up window for you to authenticate and you can now manage your Firebase project from the command line.

Now if you're also using Versus Code, I would highly recommend installing the Firebase Explorer extension. This extension allows you to connect your Google account to Versus Code and manage all of your Firebase projects visually. It's extremely useful to have quick access to your database, face your various projects, cloud functions, and so on. So now that our command line is connected to Firebase, I'm going to go into our HTML and add a heading for my awesome app just so we have something to look at. Next, we'll run the firebase init command to configure Firebase in this project.

1st, first it wants to know which features we plan on using. For now, we'll go ahead and select hosting as well as emulators. You can use the space bar to make your selections. Hosting is where your front end web application will ultimately be deployed. It's basically a storage bucket that's available on the Internet served over a CDN, making your web app very fast everywhere in the world.

Pricing is based on the number of gigabytes stored in your hosting account as well as the number of gigabytes that you transfer out to your users, which will, of course, increase with the amount of traffic that you have going to your site. The CLI ask you to use a project. Go ahead and use the project that you've already set up. The public directory is where all of our distribution code lives. Those are the files that the end user needs to view our application on the web.

In this case, we just have a single HTML file. So we'll go ahead and set it up as a single page app. Then we'll select no when asked to overwrite that file. After that, it'll ask us a few questions for the emulator setup. I have an advanced breakdown of the Firebase Emulator on Fireship IO, but, basically, it's just a way for you to simulate proliferate Firebase services locally on your system.

That means you can create database records and run Cloud functions without having to directly connect to the Cloud. We'll go ahead and stick to default options for the remaining CLI questions here. When it's finished, you'll notice it created 2 files here in the root of our project. 1st, the Firebase RC or resource config file just contains an identifier for our project in the cloud. And we also have the Firebase JSON file, which is a file that you can modify to customize the behavior of various Firebase services.

When it comes to hosting, you can use this file to create redirects and rewrites to different URLs in your app, but that's beyond the scope of this video. If you want to run your app locally, there's 2 ways you can do it. You can open up the command line and run Firebase serve or you can run the Firebase emulators start command. In either case, it will serve your app locally on localhost 5000. You can now start developing your app and see the changes reflected here.

Firebase also makes it extremely easy to deploy your app to a production URL. Go ahead and run the Firebase deploy command, and it will take the files in your public directory and upload them to a storage bucket in the cloud. It will automatically provision a hosting URL at web.app. If you follow that URL, you should now see your web app available on the real Internet. So that's pretty awesome.

I don't think it can really get any easier than that. If you go to the hosting tab on the Firebase console. You can see the different versions that you've deployed there, and you can also connect your own custom domain here as well. And now we're ready to start building something cool. Let's start by getting a user logged into the application.

Head back over to the Firebase console and find the authentication tab. Firebase auth is kind of like a read only database for your users. Currently, we don't have any users, but that'll be changing soon. If we wanted to add a user manually, we you could click the add user button and add one with an email and password here. When a new user signs up with our app, they'll have a record added here, and every user has a unique user ID.

This UID is important because you'll often want to associate custom user data to it in your database, which we'll do in a few minutes here. There's a whole bunch of built in ways to sign in a user, but the easiest to implement is Google, which we can do by simply clicking the enable button. Now before we get back to our code, you might be wondering, how much is this going to cost me? The answer is nothing. Even if you have 10,000,000 users, the cost is 0, and that's pretty crazy, especially compared to other platforms.

Now let's head over to our application code and see how we can get a user logged in to our web app. We'll start HTML and add some markup for the UI. Basically, we have 2 sections here, one for when the user is signed out and one for when the user is signed in. Each section will have a unique ID, and the signed in section will be hidden by default. In the signed out section, we'll add a button to sign in with Google.

When the user clicks the button, it'll bring up a pop up window to sign in with their Google account. When that's done successfully, we'll show the signed in section that will contain their user details along with a sign out button. And just a little side note here, I'm using Bootstrap to give the UI a little more flavor. That part's completely optional and keep in mind you can find the full source code for this project on GitHub. Now we we can jump over to our JavaScript and start using the Firebase auth SDK.

To reference auth, we call Firebase auth, and this part of the gives us access to a whole bunch of different methods to manage users within our app. What we wanna do here is sign a user in and then sign a user out when they click the corresponding buttons. The first thing we'll wanna do here is grab the HTML elements that we wanna interact with, which we can do by calling document get element by ID. This code is obviously pretty fully. It's imperative, and it's one of the main reasons that people generally choose to use a framework like React, Angular, or Vue to get things done on the web.

But even if using a framework, it's important to understand how these low level browser APIs work. Now in our case, we want the user to be able to log in with their Google account, and that's a functionality that's built into Firebase. To use it, we first declare a variable and set it equal to a Firebase auth Google provider instance. Next, we register a click handler for our sign in button. This is just a function that calls the Firebase auth sign in with pop up method using that provider as the argument.

Many apps have multiple sign in providers like Facebook, Apple, etcetera, allowing you to reuse the same logic across multiple sign in providers. Now let's go ahead and test it out. When you open up your app on local host 5000, you should see the sign in button. When clicked, it should prompt you to log in with your Google account. At this point, you'll notice that nothing actually changes in our UI, but a couple of important things happened here and the user is, in fact, logged into the application at this point.

On the back end Firebase created something known as a JSON Web Token to manage the authentication state. If you go into the application section of the browser's dev tools, you'll notice that Fire base saved a record here that has information about the logged in user, like an email address, user ID, and so on. I'll show you how to access all these values in your application next. And it's also worth noting that the Firebase user is created in the Firebase dashboard as well. You can use that to manage the user, disable, or delete the account if you need to.

Now back in our JavaScript code, there's one thing you should understand. The sign in and sign out methods are one off operations. They return a promise, and once they're called, they they do something asynchronous and then they're done. But the user authentication state is something that can change multiple times throughout the life cycle of the application. And usually you want your app to react with changes to the UI when that happens.

The way you do that in Firebase is by listening to on off state changed. Anytime the user signs in or signs out, the callback function passed to this method will be called. The callback function gives you access to the currently logged in user, and that means you can provide traditional logic to show UI when the user's logged in or something else when the user's logged out. When the user object is defined, we know the user signed in, in which case we'll want to show the signed in template, and then we can add some custom user details to the UI using that user object. The user object is the same thing that we looked at in the browser's application tab just a minute ago.

In this case, we'll interpolate the user's display name and also their unique user ID. If the user object is null, then we'll simply hide add the signed in template and set the user details to an empty string. And now if we open up our web app and sign in, you'll see that the UI updates reactively. As as you can see, it's showing my display name from Google as well as my unique user ID. And when we click the sign out button, the UI goes back to its original state.

And that's pretty awesome because we just accomplished a lot with very little code. And now we're ready to move on to what's probably the most important part of your application, the database. Out of the box, Firebase provides 2 NoSQL databases, real time database, and Firestore. In this video, we'll be focusing on Firestore, which tends to be the better option for most use cases. It's very similar to MongoDB, which is a document oriented database.

Basically, you have a set of collections where each collection is a container for multiple documents and then you can make queries across all of the documents in a collection. There's there's no schema, which means the database is very flexible and easy to use, but that's both a good and bad thing. Unlike an SQL database where you do have a schema, it's a lot easier with something like Firestore to make mistakes with data modeling and things like that. In fact, I've dedicated an entire course just to data modeling because it's such an important topic. Now if if you're just getting started with Firebase, don't worry about that.

Just experiment and have fun with it. Another awesome thing about Firestore is that it's real time by default. When we integrate it into our front end application, everything will stay updated with the back end server database in real time without any effort on our part. It's pretty awesome stuff. Now Firestore is not a free service, although it does have a free quota that you can use every month.

When you go over the quota, you'll be charged primarily based on the number of reads, writes, and gigabytes transferred outside the network. Let's get things started by enabling Firestore in this project. Go ahead and start it in test mode, which means anybody can read or write to the database, and then we'll come back and set security rules for it later on. Now that that's done, let's get familiar with the Firestore management console. This is a place where you, the super admin developer, can manage any the data in the database.

The first thing we wanna do is create a new collection. We'll give it a plural name like things. And then inside that collection, we'll add the first document. Every document in a collection needs to have a unique ID. Firestore can create one automatically, or you can manually create one to handle different data modeling relationships.

Flips. The document is where you store all of your data in a series of key value pairs, similar to a JavaScript object. This document might have a name field where the value is a string and and await where the value is a number. You can name these fields whatever you want, but it's important to keep that consistent across documents because that's what you use to query them. For sample, if we have multiple documents in this database, we can find this upside down pyramid icon here in the collection.

This allows us to experiment with different queries. If we go ahead and open up the panel, we first choose a field to filter by, which in this case is weight. And then we have a number of different query operators we use to handle the filtering. In this case, we want all the documents where the weight is greater than 5. When we apply this query, you can see it filters out just the one document where the weight is greater than 5.

Now since one of these documents has a weight of 5, we can make this an inclusive query by saying greater than or equal to 5. When we update the query, we now get both documents returned back to us. Now that you know a little bit about how Firestore works, let's take a look at how we can associate data to a user in our application. If we go into our HTML, you can see I have another section here with an unordered list where we'll show all the things that this currently logged in user has created. We'll give the user a way to create a new random thing in the database by simply clicking on this button.

Here's a pro tip. If you want to create random fake data in your application, check out this library called Faker JS. It's a say really quick and easy way to generate fake random data for testing. Now if we go back into our JavaScript, we'll first make a reference to the Firebase Firestore SDK as the variable DB. Then we'll use browser APIs to grab our create thing button as well as the things list.

Now there are generally 2 things you need when accessing data from Firestore first store in real time. The first thing is a reference to the document or collection that you wanna access, which will give a variable name of the things ref in this case. The reference is a starting point to create, read, update, and delete data at a specific point in the database. Now when it comes to reading data in real time, our front end UI will always react to changes that happen on the server. And that means we'll be subscribed to stream of changes happening to the database, and, therefore, we want to set a second variable here called unsubscribe so we can tell the app when to stop listening to this real time stream.

If you don't unsubscribe from your data, it could lead to memory leaks and also unnecessary costs by reading and listening to documents that you don't actually need for the UI. Now in this demo, we want our database records to only be accessible by the currently logged in user. And that means before we make a reference to the database, we need to check the authentication state of the current user. We can use the on auth state change callback just like we did in the previous section. We'll set set everything up when the user is logged in.

And the first thing we'll do is create that reference to the database by calling db collection things. Now that we have that reference, we can register event handler on the click event on our create thing button. There are several different ways you can create data, but when you have a reference to a collection, the add method will simply add a new document to that collection and automatically generate the unique ID. The add method takes a JavaScript object as its argument, and this is the actual data that will be saved on your document in the database. Now the way we associate a document with a user is by making a reference to their user ID on the document itself.

That way we can query all of the documents that have the corresponding user ID. From there, we'll add a name field to the document with just a random product name using faker. Now now one other thing you might want to do is save a timestamp of when this document was created. A common pitfall when doing front end development is to use a regular JavaScript date object. But what you should understand is that the date object is not always consistent on every machine.

So what you should do for consistent time stamps is use the Firebase Firestore field value server timestamp. This will be evaluated by Firestore to ensure that the date is always the same across all client devices. At at this point, we're able to create data in our database from the front end application. If we pull up the app, making sure that we're logged in and click on the create random item button, we should see that item created in the database instantaneously. But the real magic of Firestore is being able to listen to these changes in real time in the front end UI, and and the way you do that is by making a query.

Now when you make a query in Firestore, it's going to return a function that you can use to unsubscribe from that query later on. It's not required, but a very good idea to name that variable something like unsubscribe and then use it when the state of the app changes like when the user signs out. Using reference, we can then make a query by calling where the user ID equals the current user's user ID. That will give us only the documents that this particular user has created. To get a real time stream of all the changes to this query we call on snapshot.

But if we only wanted to read this data once, we could use get instead. With on snapshot, we provide a callback function that will be called anytime the underlying data changes. It gives us access to the query snapshot, which is an object that contains an array of documents that we can use to update the UI with the most recent data. The way I'll handle it in this case is by taking the array of documents and mapping it down to an array of list items that we can show in the HTML. For each document that's returned in the query, we'll create a list item.

And then inside that list item, we can get the actual data on the document by calling doc data and then we'll reference the name field. And then lastly, we'll update the HTML by setting the inner HTML of our things list few these items join together as a string. Now when we go back to our demo, you can see that the things list is updated in the actual UI every time we create a new record. Now cool thing about this is no matter where this data update takes place, whether it's on the server or some other application, it'll be updated in this UI as well. You can see see when I delete all the documents here on the server, those changes are reflected instantaneously in the front end app as well.

So that was pretty easy, but it gets even easier when you use a front end framework. Now before we move on, there's a couple of other things you should know about Firestore. In many cases, you might want to make what's known as a compound query. That's when you chain multiple operations together on the same query. For example, we could do that here by adding the order by method to order by the created at field.

But when we do and go back to the application, you can see our data is no longer listed there. And if we open the console, we get an error message saying that we need a composite put index. In order to scale infinitely in the cloud, certain queries need a composite index. So in this case, we can create it by simply following the link in the error message, and it will take us to the Firebase console to create the index to support that query. Now the other thing to keep in mind that I've already mentioned is to make sure to unsubscribe from your data when it's no longer needed.

For for this feature, it would make sense to unsubscribe when the user is no longer logged in. So we're already checking for the user authentication state, which means we can just add an else statement here and unsubscribe if that unsubscribe function is defined. Now the final but most important thing to understand here is how security works. So even even though we're filtering the items by the logged in user, they're still not secure. Anybody could run this code and get the items that are privately owned by the logged in user.

If if you're building a serious application, you absolutely need to have full stack security rules in place to prevent things like this. We can easily handle this by going to the rules tab from the Firestore console. Pull. Rules have their own special syntax and they're designed to make it really easy to implement security logic for your database. The first thing we'll wanna do is secure the entire database by allowing rewrite to be false across the entire database and then we'll allow things selectively based on where they're needed.

From there, we'll reference the things collection and then use braces to represent every document in that collection as a wildcard with its document ID. In order for a user to be able to write to this collection, their request auth user ID, which represents the user ID of the currently logged in user, needs to match the user ID that they want to save to the database. If it's a mismatch, then Firestore will block that operation. In other words, this security rule would prevent a user from creating a document for any other user. When when it comes to reading documents, we have very similar security logic here.

But instead of looking at the request data, which represents the incoming data, we're looking at for resource data, which is the data that already exists on the database. So in this case, a user can only read a document if it already contains their user ID. And that's really all there is to it. You've now built a full stack authenticated secure application. If we go into our source code and try to change the user ID and then make it right to the database, you'll notice that Firestore blocks it.

We've already accomplished a lot, but we've barely scratched the surface of Firebase. Let's finish this video by doing a rapid fire overview of some other things you'll want to check out. When building a complex application, you likely won't be able to do everything on the front end. You'll still need to write some server side code to interact with APIs, run background jobs and things like that. And the tool you use to run server side code is cloud functions.

When you have something you want done on the server, maybe it's Python, Node. Js, or Go, you can write play Cloud Function to get that work done. In addition, your app might need to store raw files like videos and images. Every Firebase project comes with a built print storage bucket, and it has an SDK that allows you to easily upload files from your front end application to the storage bucket. If you you do upload files here, you might want to run some machine learning on them, like text recognition or image labeling.

Firebase has a ton of built in machine learning APIs is to handle stuff like that. And another awesome thing to keep an eye on is Firebase extensions. This is a relatively new feature that allows developers to extend the functionality of Firebase itself. For example, Stripe payments just recently released its own extension to make it easier for developers to accept payments in their Firebase apps. The bottom line here is that Firebase is an awesome tool if your goal is to get an app built quickly and efficiently.

Like I said earlier, there is nothing quite like it, and it's no surprise that it's the most popular back end as a service in the world. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and be looking out for more advanced and framework specific play Firebase content here in the near future. Thanks for watching, and I will see you in the next one.
Choosing the right tech stack for your product in a world of unlimited possibilities is extremely challenging. Let's imagine you have an idea for the next $1,000,000,000 to do app. You may have a vision for how the end user experience will work. But behind the front end, you have a ton of technical decisions to make on the back end, like how do we authenticate users? Which database should we use. How do we run trusted code on a server? How do we handle security, analytics, and scale up as our user base grows? These decisions are hard to get right, and just thinking about them takes time, money, and energy that would be better spent focusing on the user experience.
databases
technology
data management
computers
customer support
When it comes to minimizing decision fatigue, there's nothing quite like Firebase. It it contains everything most apps will need to build and run a production app at scale. This is what we call a back end as a service, where the idea is that you, the developer, write and maintain as little back end code as possible. It costs about $0 per month to run until your app builds active user base, and it's extremely developer friendly. The tool that lets you use the whole vast without scaling, cutting, or gutting. It's just that simple. When writing code with Firebase, you'll find that the SDKs are extremely well documented and highly optimized to get features built quickly. But, ultimately everything is a trade off. I've been using Firebase for 5 years, and there are certainly some drawbacks to the platform that we'll talk about as well. In today's beginner friendly tutorial, you'll learn everything you need to know about Firebase. You'll learn how to deploy a full stack web application to the cloud.
The app will be able to authenticate users with their Google account, then allow that user to securely create data in the database. And anytime that user's data changes, it will be automatically reflected in the UI in real time. We'll we'll be using vanilla JavaScript for this tutorial. However, most people using Firebase are using a front end framework, like React, Angular, Flutter, and so on.
databases
I'll be releasing intro videos for those frameworks separately, so make sure to subscribe to catch those as well. Even if you're using one of those frameworks, I highly recommend going through this tutorial as well to get a full understanding of how Firebase works at the base level. With that being said, let's go ahead and jump right into things. The first thing you'll need is to have Node. Js installed on your local system. You can see here that I've opened up PS code to an empty directory. I'm entering the command node flag v to get the version of 10 dot 21. Any version greater than 8 should work just fine. If you don't have Node installed, I recommend using NVM or Node version manager to install the same version of Node that I'm using here. The next step is to create a Firebase project. You can sign in to Firebase with your Google account because Firebase is just an extension of Google Cloud Platform. Firebase is a lot of different things, but at its core, it's an SDK or software development kit that makes it easy for your front end app to connect to back end cloud infrastructure on Google Cloud.
Now Now on GCP, all of your cloud infrastructure like databases, storage buckets, servers, and so on is organized into a project. A project might be connected to multiple apps. You might have a web app, iOS, and Android app that all share the same database and back end servers. Go ahead and create a new project, and then let's take a tour of the Firebase console. The console is simply awesome and basically serves as an admin area for all of your app infrastructure. As developers, the main area that we'll be focused on is the develop category. This is the actual cloud infrastructure that we need to build a full stack application. This this is the most important area to focus on, especially in the early stages of architecting an app. The next section is the quality category. This is where you'll focus when your app is getting ready to go to production. These tools help you optimize performance, detect crashes, and distribute your app to testers. Once your app game's actual users you can analyze their behavior with analytics. This data is extremely powerful, and you can use it to segment your user base and custom tailor the user experience. You can use this analytics data to send push notifications or use remote config to change the actual appearance or behavior of your app based on the type user that's engaging with it.
infrastructure
architecture
software development
data analysis
software
artificial intelligence
quality assurance
databases
games
programming
networking
It's really powerful stuff. But to get to that point, you first need to create an app that people wanna use. In our case, we're building a web app. So the first thing we'll wanna in Firebase is go up here to the project settings and create a new web app. A Firebase project can actually have multiple web apps, so we'll wanna give it a nickname. When were finished. It will give us a script tag that references the Firebase SDK and adds our Firebase project credentials to link the web app to this Firebase project in the cloud.
These credentials are perfectly okay to expose in your front end application, so don't worry about hiding them for security purposes. We'll talk more about how security works in Firebase in a few minutes. Go and copy the code snippet, then head back to Versus Code and create a public folder and add a file called index HTML to it.
security
In the HTML file, you can type an exclamation point and then hit tab to quickly scaffold out a basic HTML page. Go ahead and paste the Firebase snippet in the head of the document. Now you'll notice in the comments, it has a to do to add SDKs for the Firebase products that we want to use. Firebase is modular, which means we can opt in or progressively enhance our app with the features that we want to use. If we're not using a feature, we don't need to include that extra dead code in our application, which would degrade performance. If we follow the link, we wanna find the CDN links for Firestore and Firebase auth. Those are the 2 features that we'll be using in today's demo. Go ahead and paste those script tags into the document. Now to simplify the application. I'm going to create an app dotjs file. From there, I'll create a script tag that references this file, and we'll use the defer attribute to make sure the script loads after the body elements have loaded. At this point, we can go into our app. Js file and console log firebase, which should be available as a global variable on the window. And now we can go into the browser and make sure everything's working as intended. Right click on the index. Html file and click copy path. Then then open up a web browser and paste the file path as the URL. You should get a blank HTML page, but if you open up the console using control shift j, you should see the Firebase SDK log there. And on that object, you should see Firestore and auth if your SDK is loaded properly. Okay. So now that we have Firebase installed in our front end code.
The next thing I recommend doing is installing the Firebase command line tools and initializing this project which will connect your command line to the cloud. The CLI has all kinds of awesome tools built in, and what we'll use it for right now is to serve and then deploy our app to a real URL on the Internet. Go ahead and open up a terminal session and install the Firebase tools package using the global flag, making it globally available on your system.
software
Once that's finished, you can run firebase login from the command line to log in to your Firebase account in the cloud. That'll bring up a pop up window for you to authenticate and you can now manage your Firebase project from the command line. Now if you're also using Versus Code, I would highly recommend installing the Firebase Explorer extension. This extension allows you to connect your Google account to Versus Code and manage all of your Firebase projects visually.
It's extremely useful to have quick access to your database, face your various projects, cloud functions, and so on. So now that our command line is connected to Firebase, I'm going to go into our HTML and add a heading for my awesome app just so we have something to look at.
databases
Next, we'll run the firebase init command to configure Firebase in this project. 1st, first it wants to know which features we plan on using.
For now, we'll go ahead and select hosting as well as emulators. You can use the space bar to make your selections. Hosting is where your front end web application will ultimately be deployed. It's basically a storage bucket that's available on the Internet served over a CDN, making your web app very fast everywhere in the world. Pricing is based on the number of gigabytes stored in your hosting account as well as the number of gigabytes that you transfer out to your users, which will, of course, increase with the amount of traffic that you have going to your site.
streaming
internet
networking
space exploration
The CLI ask you to use a project. Go ahead and use the project that you've already set up. The public directory is where all of our distribution code lives.
Those are the files that the end user needs to view our application on the web. In this case, we just have a single HTML file. So we'll go ahead and set it up as a single page app. Then we'll select no when asked to overwrite that file. After that, it'll ask us a few questions for the emulator setup.
software
I have an advanced breakdown of the Firebase Emulator on Fireship IO, but, basically, it's just a way for you to simulate proliferate Firebase services locally on your system.
That means you can create database records and run Cloud functions without having to directly connect to the Cloud. We'll go ahead and stick to default options for the remaining CLI questions here. When it's finished, you'll notice it created 2 files here in the root of our project. 1st, the Firebase RC or resource config file just contains an identifier for our project in the cloud.
databases
And we also have the Firebase JSON file, which is a file that you can modify to customize the behavior of various Firebase services. When it comes to hosting, you can use this file to create redirects and rewrites to different URLs in your app, but that's beyond the scope of this video. If you want to run your app locally, there's 2 ways you can do it. You can open up the command line and run Firebase serve or you can run the Firebase emulators start command. In either case, it will serve your app locally on localhost 5000. You can now start developing your app and see the changes reflected here. Firebase also makes it extremely easy to deploy your app to a production URL. Go ahead and run the Firebase deploy command, and it will take the files in your public directory and upload them to a storage bucket in the cloud.
It will automatically provision a hosting URL at web.app. If you follow that URL, you should now see your web app available on the real Internet. So that's pretty awesome. I don't think it can really get any easier than that. If you go to the hosting tab on the Firebase console.
internet
You can see the different versions that you've deployed there, and you can also connect your own custom domain here as well. And now we're ready to start building something cool. Let's start by getting a user logged into the application. Head back over to the Firebase console and find the authentication tab. Firebase auth is kind of like a read only database for your users. Currently, we don't have any users, but that'll be changing soon. If we wanted to add a user manually, we you could click the add user button and add one with an email and password here. When a new user signs up with our app, they'll have a record added here, and every user has a unique user ID. This UID is important because you'll often want to associate custom user data to it in your database, which we'll do in a few minutes here.
There's a whole bunch of built in ways to sign in a user, but the easiest to implement is Google, which we can do by simply clicking the enable button. Now before we get back to our code, you might be wondering, how much is this going to cost me?
google
The answer is nothing. Even if you have 10,000,000 users, the cost is 0, and that's pretty crazy, especially compared to other platforms. Now let's head over to our application code and see how we can get a user logged in to our web app. We'll start HTML and add some markup for the UI. Basically, we have 2 sections here, one for when the user is signed out and one for when the user is signed in. Each section will have a unique ID, and the signed in section will be hidden by default. In the signed out section, we'll add a button to sign in with Google. When the user clicks the button, it'll bring up a pop up window to sign in with their Google account. When that's done successfully, we'll show the signed in section that will contain their user details along with a sign out button. And just a little side note here, I'm using Bootstrap to give the UI a little more flavor. That part's completely optional and keep in mind you can find the full source code for this project on GitHub. Now we we can jump over to our JavaScript and start using the Firebase auth SDK. To reference auth, we call Firebase auth, and this part of the gives us access to a whole bunch of different methods to manage users within our app. What we wanna do here is sign a user in and then sign a user out when they click the corresponding buttons. The first thing we'll wanna do here is grab the HTML elements that we wanna interact with, which we can do by calling document get element by ID.
This code is obviously pretty fully. It's imperative, and it's one of the main reasons that people generally choose to use a framework like React, Angular, or Vue to get things done on the web. But even if using a framework, it's important to understand how these low level browser APIs work. Now in our case, we want the user to be able to log in with their Google account, and that's a functionality that's built into Firebase. To use it, we first declare a variable and set it equal to a Firebase auth Google provider instance.
google
software
Next, we register a click handler for our sign in button. This is just a function that calls the Firebase auth sign in with pop up method using that provider as the argument. Many apps have multiple sign in providers like Facebook, Apple, etcetera, allowing you to reuse the same logic across multiple sign in providers.
Now let's go ahead and test it out. When you open up your app on local host 5000, you should see the sign in button. When clicked, it should prompt you to log in with your Google account. At this point, you'll notice that nothing actually changes in our UI, but a couple of important things happened here and the user is, in fact, logged into the application at this point. On the back end Firebase created something known as a JSON Web Token to manage the authentication state.
google
If you go into the application section of the browser's dev tools, you'll notice that Fire base saved a record here that has information about the logged in user, like an email address, user ID, and so on. I'll show you how to access all these values in your application next. And it's also worth noting that the Firebase user is created in the Firebase dashboard as well. You can use that to manage the user, disable, or delete the account if you need to. Now back in our JavaScript code, there's one thing you should understand. The sign in and sign out methods are one off operations. They return a promise, and once they're called, they they do something asynchronous and then they're done.
But the user authentication state is something that can change multiple times throughout the life cycle of the application. And usually you want your app to react with changes to the UI when that happens. The way you do that in Firebase is by listening to on off state changed.
security
Anytime the user signs in or signs out, the callback function passed to this method will be called. The callback function gives you access to the currently logged in user, and that means you can provide traditional logic to show UI when the user's logged in or something else when the user's logged out. When the user object is defined, we know the user signed in, in which case we'll want to show the signed in template, and then we can add some custom user details to the UI using that user object. The user object is the same thing that we looked at in the browser's application tab just a minute ago. In this case, we'll interpolate the user's display name and also their unique user ID. If the user object is null, then we'll simply hide add the signed in template and set the user details to an empty string. And now if we open up our web app and sign in, you'll see that the UI updates reactively.
As as you can see, it's showing my display name from Google as well as my unique user ID. And when we click the sign out button, the UI goes back to its original state. And that's pretty awesome because we just accomplished a lot with very little code. And now we're ready to move on to what's probably the most important part of your application, the database. Out of the box, Firebase provides 2 NoSQL databases, real time database, and Firestore. In this video, we'll be focusing on Firestore, which tends to be the better option for most use cases. It's very similar to MongoDB, which is a document oriented database. Basically, you have a set of collections where each collection is a container for multiple documents and then you can make queries across all of the documents in a collection. There's there's no schema, which means the database is very flexible and easy to use, but that's both a good and bad thing. Unlike an SQL database where you do have a schema, it's a lot easier with something like Firestore to make mistakes with data modeling and things like that.
databases
data management
google
In fact, I've dedicated an entire course just to data modeling because it's such an important topic. Now if if you're just getting started with Firebase, don't worry about that. Just experiment and have fun with it. Another awesome thing about Firestore is that it's real time by default. When we integrate it into our front end application, everything will stay updated with the back end server database in real time without any effort on our part.
It's pretty awesome stuff. Now Firestore is not a free service, although it does have a free quota that you can use every month. When you go over the quota, you'll be charged primarily based on the number of reads, writes, and gigabytes transferred outside the network. Let's get things started by enabling Firestore in this project.
billing
Go ahead and start it in test mode, which means anybody can read or write to the database, and then we'll come back and set security rules for it later on.
Now that that's done, let's get familiar with the Firestore management console. This is a place where you, the super admin developer, can manage any the data in the database. The first thing we wanna do is create a new collection. We'll give it a plural name like things. And then inside that collection, we'll add the first document.
data management
databases
Every document in a collection needs to have a unique ID. Firestore can create one automatically, or you can manually create one to handle different data modeling relationships. Flips. The document is where you store all of your data in a series of key value pairs, similar to a JavaScript object. This document might have a name field where the value is a string and and await where the value is a number. You can name these fields whatever you want, but it's important to keep that consistent across documents because that's what you use to query them. For sample, if we have multiple documents in this database, we can find this upside down pyramid icon here in the collection. This allows us to experiment with different queries. If we go ahead and open up the panel, we first choose a field to filter by, which in this case is weight.
databases
data
data analysis
And then we have a number of different query operators we use to handle the filtering.
In this case, we want all the documents where the weight is greater than 5. When we apply this query, you can see it filters out just the one document where the weight is greater than 5. Now since one of these documents has a weight of 5, we can make this an inclusive query by saying greater than or equal to 5.
obesity
When we update the query, we now get both documents returned back to us. Now that you know a little bit about how Firestore works, let's take a look at how we can associate data to a user in our application.
If we go into our HTML, you can see I have another section here with an unordered list where we'll show all the things that this currently logged in user has created. We'll give the user a way to create a new random thing in the database by simply clicking on this button.
databases
Here's a pro tip. If you want to create random fake data in your application, check out this library called Faker JS. It's a say really quick and easy way to generate fake random data for testing. Now if we go back into our JavaScript, we'll first make a reference to the Firebase Firestore SDK as the variable DB. Then we'll use browser APIs to grab our create thing button as well as the things list. Now there are generally 2 things you need when accessing data from Firestore first store in real time. The first thing is a reference to the document or collection that you wanna access, which will give a variable name of the things ref in this case.
The reference is a starting point to create, read, update, and delete data at a specific point in the database. Now when it comes to reading data in real time, our front end UI will always react to changes that happen on the server. And that means we'll be subscribed to stream of changes happening to the database, and, therefore, we want to set a second variable here called unsubscribe so we can tell the app when to stop listening to this real time stream.
data
data management
databases
If you don't unsubscribe from your data, it could lead to memory leaks and also unnecessary costs by reading and listening to documents that you don't actually need for the UI. Now in this demo, we want our database records to only be accessible by the currently logged in user. And that means before we make a reference to the database, we need to check the authentication state of the current user. We can use the on auth state change callback just like we did in the previous section.
databases
data management
We'll set set everything up when the user is logged in.
And the first thing we'll do is create that reference to the database by calling db collection things. Now that we have that reference, we can register event handler on the click event on our create thing button. There are several different ways you can create data, but when you have a reference to a collection, the add method will simply add a new document to that collection and automatically generate the unique ID.
databases
The add method takes a JavaScript object as its argument, and this is the actual data that will be saved on your document in the database. Now the way we associate a document with a user is by making a reference to their user ID on the document itself. That way we can query all of the documents that have the corresponding user ID. From there, we'll add a name field to the document with just a random product name using faker. Now now one other thing you might want to do is save a timestamp of when this document was created. A common pitfall when doing front end development is to use a regular JavaScript date object. But what you should understand is that the date object is not always consistent on every machine. So what you should do for consistent time stamps is use the Firebase Firestore field value server timestamp. This will be evaluated by Firestore to ensure that the date is always the same across all client devices.
At at this point, we're able to create data in our database from the front end application. If we pull up the app, making sure that we're logged in and click on the create random item button, we should see that item created in the database instantaneously. But the real magic of Firestore is being able to listen to these changes in real time in the front end UI, and and the way you do that is by making a query.
databases
data management
data
Now when you make a query in Firestore, it's going to return a function that you can use to unsubscribe from that query later on. It's not required, but a very good idea to name that variable something like unsubscribe and then use it when the state of the app changes like when the user signs out. Using reference, we can then make a query by calling where the user ID equals the current user's user ID. That will give us only the documents that this particular user has created.
To get a real time stream of all the changes to this query we call on snapshot. But if we only wanted to read this data once, we could use get instead. With on snapshot, we provide a callback function that will be called anytime the underlying data changes. It gives us access to the query snapshot, which is an object that contains an array of documents that we can use to update the UI with the most recent data.
data
The way I'll handle it in this case is by taking the array of documents and mapping it down to an array of list items that we can show in the HTML. For each document that's returned in the query, we'll create a list item. And then inside that list item, we can get the actual data on the document by calling doc data and then we'll reference the name field. And then lastly, we'll update the HTML by setting the inner HTML of our things list few these items join together as a string.
databases
Now when we go back to our demo, you can see that the things list is updated in the actual UI every time we create a new record. Now cool thing about this is no matter where this data update takes place, whether it's on the server or some other application, it'll be updated in this UI as well. You can see see when I delete all the documents here on the server, those changes are reflected instantaneously in the front end app as well. So that was pretty easy, but it gets even easier when you use a front end framework. Now before we move on, there's a couple of other things you should know about Firestore.
In many cases, you might want to make what's known as a compound query. That's when you chain multiple operations together on the same query. For example, we could do that here by adding the order by method to order by the created at field. But when we do and go back to the application, you can see our data is no longer listed there.
databases
data
And if we open the console, we get an error message saying that we need a composite put index. In order to scale infinitely in the cloud, certain queries need a composite index. So in this case, we can create it by simply following the link in the error message, and it will take us to the Firebase console to create the index to support that query. Now the other thing to keep in mind that I've already mentioned is to make sure to unsubscribe from your data when it's no longer needed.
For for this feature, it would make sense to unsubscribe when the user is no longer logged in. So we're already checking for the user authentication state, which means we can just add an else statement here and unsubscribe if that unsubscribe function is defined. Now the final but most important thing to understand here is how security works. So even even though we're filtering the items by the logged in user, they're still not secure. Anybody could run this code and get the items that are privately owned by the logged in user. If if you're building a serious application, you absolutely need to have full stack security rules in place to prevent things like this. We can easily handle this by going to the rules tab from the Firestore console. Pull. Rules have their own special syntax and they're designed to make it really easy to implement security logic for your database. The first thing we'll wanna do is secure the entire database by allowing rewrite to be false across the entire database and then we'll allow things selectively based on where they're needed. From there, we'll reference the things collection and then use braces to represent every document in that collection as a wildcard with its document ID.
databases
security
cryptocurrency
data management
networking
In order for a user to be able to write to this collection, their request auth user ID, which represents the user ID of the currently logged in user, needs to match the user ID that they want to save to the database. If it's a mismatch, then Firestore will block that operation. In other words, this security rule would prevent a user from creating a document for any other user. When when it comes to reading documents, we have very similar security logic here. But instead of looking at the request data, which represents the incoming data, we're looking at for resource data, which is the data that already exists on the database. So in this case, a user can only read a document if it already contains their user ID. And that's really all there is to it. You've now built a full stack authenticated secure application. If we go into our source code and try to change the user ID and then make it right to the database, you'll notice that Firestore blocks it. We've already accomplished a lot, but we've barely scratched the surface of Firebase.
data
databases
data management
security
cryptocurrency
Let's finish this video by doing a rapid fire overview of some other things you'll want to check out. When building a complex application, you likely won't be able to do everything on the front end. You'll still need to write some server side code to interact with APIs, run background jobs and things like that. And the tool you use to run server side code is cloud functions. When you have something you want done on the server, maybe it's Python, Node. Js, or Go, you can write play Cloud Function to get that work done. In addition, your app might need to store raw files like videos and images. Every Firebase project comes with a built print storage bucket, and it has an SDK that allows you to easily upload files from your front end application to the storage bucket.
If you you do upload files here, you might want to run some machine learning on them, like text recognition or image labeling. Firebase has a ton of built in machine learning APIs is to handle stuff like that. And another awesome thing to keep an eye on is Firebase extensions.
machine learning
This is a relatively new feature that allows developers to extend the functionality of Firebase itself. For example, Stripe payments just recently released its own extension to make it easier for developers to accept payments in their Firebase apps. The bottom line here is that Firebase is an awesome tool if your goal is to get an app built quickly and efficiently.
Like I said earlier, there is nothing quite like it, and it's no surprise that it's the most popular back end as a service in the world. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and be looking out for more advanced and framework specific play Firebase content here in the near future. Thanks for watching, and I will see you in the next one.
youtube
streaming
video gaming
games
entertainment
Choosing the right tech stack for your product in a world of unlimited possibilities is extremely challenging. Let's imagine you have an idea for the next $1,000,000,000 to do app. You may have a vision for how the end user experience will work. But behind the front end, you have a ton of technical decisions to make on the back end, like how do we authenticate users? Which database should we use. How do we run trusted code on a server? How do we handle security, analytics, and scale up as our user base grows? These decisions are hard to get right, and just thinking about them takes time, money, and energy that would be better spent focusing on the user experience. When it comes to minimizing decision fatigue, there's nothing quite like Firebase. It it contains everything most apps will need to build and run a production app at scale. This is what we call a back end as a service, where the idea is that you, the developer, write and maintain as little back end code as possible. It costs about $0 per month to run until your app builds active user base, and it's extremely developer friendly. The tool that lets you use the whole vast without scaling, cutting, or gutting. It's just that simple. When writing code with Firebase, you'll find that the SDKs are extremely well documented and highly optimized to get features built quickly. But, ultimately everything is a trade off. I've been using Firebase for 5 years, and there are certainly some drawbacks to the platform that we'll talk about as well. In today's beginner friendly tutorial, you'll learn everything you need to know about Firebase. You'll learn how to deploy a full stack web application to the cloud. The app will be able to authenticate users with their Google account, then allow that user to securely create data in the database. And anytime that user's data changes, it will be automatically reflected in the UI in real time. We'll we'll be using vanilla JavaScript for this tutorial. However, most people using Firebase are using a front end framework, like React, Angular, Flutter, and so on. I'll be releasing intro videos for those frameworks separately, so make sure to subscribe to catch those as well. Even if you're using one of those frameworks, I highly recommend going through this tutorial as well to get a full understanding of how Firebase works at the base level. With that being said, let's go ahead and jump right into things. The first thing you'll need is to have Node. Js installed on your local system. You can see here that I've opened up PS code to an empty directory. I'm entering the command node flag v to get the version of 10 dot 21. Any version greater than 8 should work just fine. If you don't have Node installed, I recommend using NVM or Node version manager to install the same version of Node that I'm using here. The next step is to create a Firebase project. You can sign in to Firebase with your Google account because Firebase is just an extension of Google Cloud Platform. Firebase is a lot of different things, but at its core, it's an SDK or software development kit that makes it easy for your front end app to connect to back end cloud infrastructure on Google Cloud. Now Now on GCP, all of your cloud infrastructure like databases, storage buckets, servers, and so on is organized into a project. A project might be connected to multiple apps. You might have a web app, iOS, and Android app that all share the same database and back end servers. Go ahead and create a new project, and then let's take a tour of the Firebase console. The console is simply awesome and basically serves as an admin area for all of your app infrastructure. As developers, the main area that we'll be focused on is the develop category. This is the actual cloud infrastructure that we need to build a full stack application. This this is the most important area to focus on, especially in the early stages of architecting an app. The next section is the quality category. This is where you'll focus when your app is getting ready to go to production. These tools help you optimize performance, detect crashes, and distribute your app to testers. Once your app game's actual users you can analyze their behavior with analytics. This data is extremely powerful, and you can use it to segment your user base and custom tailor the user experience. You can use this analytics data to send push notifications or use remote config to change the actual appearance or behavior of your app based on the type user that's engaging with it. It's really powerful stuff. But to get to that point, you first need to create an app that people wanna use. In our case, we're building a web app. So the first thing we'll wanna in Firebase is go up here to the project settings and create a new web app. A Firebase project can actually have multiple web apps, so we'll wanna give it a nickname. When were finished. It will give us a script tag that references the Firebase SDK and adds our Firebase project credentials to link the web app to this Firebase project in the cloud. These credentials are perfectly okay to expose in your front end application, so don't worry about hiding them for security purposes. We'll talk more about how security works in Firebase in a few minutes. Go and copy the code snippet, then head back to Versus Code and create a public folder and add a file called index HTML to it. In the HTML file, you can type an exclamation point and then hit tab to quickly scaffold out a basic HTML page. Go ahead and paste the Firebase snippet in the head of the document. Now you'll notice in the comments, it has a to do to add SDKs for the Firebase products that we want to use. Firebase is modular, which means we can opt in or progressively enhance our app with the features that we want to use. If we're not using a feature, we don't need to include that extra dead code in our application, which would degrade performance. If we follow the link, we wanna find the CDN links for Firestore and Firebase auth. Those are the 2 features that we'll be using in today's demo. Go ahead and paste those script tags into the document. Now to simplify the application. I'm going to create an app dotjs file. From there, I'll create a script tag that references this file, and we'll use the defer attribute to make sure the script loads after the body elements have loaded. At this point, we can go into our app. Js file and console log firebase, which should be available as a global variable on the window. And now we can go into the browser and make sure everything's working as intended. Right click on the index. Html file and click copy path. Then then open up a web browser and paste the file path as the URL. You should get a blank HTML page, but if you open up the console using control shift j, you should see the Firebase SDK log there. And on that object, you should see Firestore and auth if your SDK is loaded properly. Okay. So now that we have Firebase installed in our front end code. The next thing I recommend doing is installing the Firebase command line tools and initializing this project which will connect your command line to the cloud. The CLI has all kinds of awesome tools built in, and what we'll use it for right now is to serve and then deploy our app to a real URL on the Internet. Go ahead and open up a terminal session and install the Firebase tools package using the global flag, making it globally available on your system. Once that's finished, you can run firebase login from the command line to log in to your Firebase account in the cloud. That'll bring up a pop up window for you to authenticate and you can now manage your Firebase project from the command line. Now if you're also using Versus Code, I would highly recommend installing the Firebase Explorer extension. This extension allows you to connect your Google account to Versus Code and manage all of your Firebase projects visually. It's extremely useful to have quick access to your database, face your various projects, cloud functions, and so on. So now that our command line is connected to Firebase, I'm going to go into our HTML and add a heading for my awesome app just so we have something to look at. Next, we'll run the firebase init command to configure Firebase in this project. 1st, first it wants to know which features we plan on using. For now, we'll go ahead and select hosting as well as emulators. You can use the space bar to make your selections. Hosting is where your front end web application will ultimately be deployed. It's basically a storage bucket that's available on the Internet served over a CDN, making your web app very fast everywhere in the world. Pricing is based on the number of gigabytes stored in your hosting account as well as the number of gigabytes that you transfer out to your users, which will, of course, increase with the amount of traffic that you have going to your site. The CLI ask you to use a project. Go ahead and use the project that you've already set up. The public directory is where all of our distribution code lives. Those are the files that the end user needs to view our application on the web. In this case, we just have a single HTML file. So we'll go ahead and set it up as a single page app. Then we'll select no when asked to overwrite that file. After that, it'll ask us a few questions for the emulator setup. I have an advanced breakdown of the Firebase Emulator on Fireship IO, but, basically, it's just a way for you to simulate proliferate Firebase services locally on your system. That means you can create database records and run Cloud functions without having to directly connect to the Cloud. We'll go ahead and stick to default options for the remaining CLI questions here. When it's finished, you'll notice it created 2 files here in the root of our project. 1st, the Firebase RC or resource config file just contains an identifier for our project in the cloud. And we also have the Firebase JSON file, which is a file that you can modify to customize the behavior of various Firebase services. When it comes to hosting, you can use this file to create redirects and rewrites to different URLs in your app, but that's beyond the scope of this video. If you want to run your app locally, there's 2 ways you can do it. You can open up the command line and run Firebase serve or you can run the Firebase emulators start command. In either case, it will serve your app locally on localhost 5000. You can now start developing your app and see the changes reflected here. Firebase also makes it extremely easy to deploy your app to a production URL. Go ahead and run the Firebase deploy command, and it will take the files in your public directory and upload them to a storage bucket in the cloud. It will automatically provision a hosting URL at web.app. If you follow that URL, you should now see your web app available on the real Internet. So that's pretty awesome. I don't think it can really get any easier than that. If you go to the hosting tab on the Firebase console. You can see the different versions that you've deployed there, and you can also connect your own custom domain here as well. And now we're ready to start building something cool. Let's start by getting a user logged into the application. Head back over to the Firebase console and find the authentication tab. Firebase auth is kind of like a read only database for your users. Currently, we don't have any users, but that'll be changing soon. If we wanted to add a user manually, we you could click the add user button and add one with an email and password here. When a new user signs up with our app, they'll have a record added here, and every user has a unique user ID. This UID is important because you'll often want to associate custom user data to it in your database, which we'll do in a few minutes here. There's a whole bunch of built in ways to sign in a user, but the easiest to implement is Google, which we can do by simply clicking the enable button. Now before we get back to our code, you might be wondering, how much is this going to cost me? The answer is nothing. Even if you have 10,000,000 users, the cost is 0, and that's pretty crazy, especially compared to other platforms. Now let's head over to our application code and see how we can get a user logged in to our web app. We'll start HTML and add some markup for the UI. Basically, we have 2 sections here, one for when the user is signed out and one for when the user is signed in. Each section will have a unique ID, and the signed in section will be hidden by default. In the signed out section, we'll add a button to sign in with Google. When the user clicks the button, it'll bring up a pop up window to sign in with their Google account. When that's done successfully, we'll show the signed in section that will contain their user details along with a sign out button. And just a little side note here, I'm using Bootstrap to give the UI a little more flavor. That part's completely optional and keep in mind you can find the full source code for this project on GitHub. Now we we can jump over to our JavaScript and start using the Firebase auth SDK. To reference auth, we call Firebase auth, and this part of the gives us access to a whole bunch of different methods to manage users within our app. What we wanna do here is sign a user in and then sign a user out when they click the corresponding buttons. The first thing we'll wanna do here is grab the HTML elements that we wanna interact with, which we can do by calling document get element by ID. This code is obviously pretty fully. It's imperative, and it's one of the main reasons that people generally choose to use a framework like React, Angular, or Vue to get things done on the web. But even if using a framework, it's important to understand how these low level browser APIs work. Now in our case, we want the user to be able to log in with their Google account, and that's a functionality that's built into Firebase. To use it, we first declare a variable and set it equal to a Firebase auth Google provider instance. Next, we register a click handler for our sign in button. This is just a function that calls the Firebase auth sign in with pop up method using that provider as the argument. Many apps have multiple sign in providers like Facebook, Apple, etcetera, allowing you to reuse the same logic across multiple sign in providers. Now let's go ahead and test it out. When you open up your app on local host 5000, you should see the sign in button. When clicked, it should prompt you to log in with your Google account. At this point, you'll notice that nothing actually changes in our UI, but a couple of important things happened here and the user is, in fact, logged into the application at this point. On the back end Firebase created something known as a JSON Web Token to manage the authentication state. If you go into the application section of the browser's dev tools, you'll notice that Fire base saved a record here that has information about the logged in user, like an email address, user ID, and so on. I'll show you how to access all these values in your application next. And it's also worth noting that the Firebase user is created in the Firebase dashboard as well. You can use that to manage the user, disable, or delete the account if you need to. Now back in our JavaScript code, there's one thing you should understand. The sign in and sign out methods are one off operations. They return a promise, and once they're called, they they do something asynchronous and then they're done. But the user authentication state is something that can change multiple times throughout the life cycle of the application. And usually you want your app to react with changes to the UI when that happens. The way you do that in Firebase is by listening to on off state changed. Anytime the user signs in or signs out, the callback function passed to this method will be called. The callback function gives you access to the currently logged in user, and that means you can provide traditional logic to show UI when the user's logged in or something else when the user's logged out. When the user object is defined, we know the user signed in, in which case we'll want to show the signed in template, and then we can add some custom user details to the UI using that user object. The user object is the same thing that we looked at in the browser's application tab just a minute ago. In this case, we'll interpolate the user's display name and also their unique user ID. If the user object is null, then we'll simply hide add the signed in template and set the user details to an empty string. And now if we open up our web app and sign in, you'll see that the UI updates reactively. As as you can see, it's showing my display name from Google as well as my unique user ID. And when we click the sign out button, the UI goes back to its original state. And that's pretty awesome because we just accomplished a lot with very little code. And now we're ready to move on to what's probably the most important part of your application, the database. Out of the box, Firebase provides 2 NoSQL databases, real time database, and Firestore. In this video, we'll be focusing on Firestore, which tends to be the better option for most use cases. It's very similar to MongoDB, which is a document oriented database. Basically, you have a set of collections where each collection is a container for multiple documents and then you can make queries across all of the documents in a collection. There's there's no schema, which means the database is very flexible and easy to use, but that's both a good and bad thing. Unlike an SQL database where you do have a schema, it's a lot easier with something like Firestore to make mistakes with data modeling and things like that. In fact, I've dedicated an entire course just to data modeling because it's such an important topic. Now if if you're just getting started with Firebase, don't worry about that. Just experiment and have fun with it. Another awesome thing about Firestore is that it's real time by default. When we integrate it into our front end application, everything will stay updated with the back end server database in real time without any effort on our part. It's pretty awesome stuff. Now Firestore is not a free service, although it does have a free quota that you can use every month. When you go over the quota, you'll be charged primarily based on the number of reads, writes, and gigabytes transferred outside the network. Let's get things started by enabling Firestore in this project. Go ahead and start it in test mode, which means anybody can read or write to the database, and then we'll come back and set security rules for it later on. Now that that's done, let's get familiar with the Firestore management console. This is a place where you, the super admin developer, can manage any the data in the database. The first thing we wanna do is create a new collection. We'll give it a plural name like things. And then inside that collection, we'll add the first document. Every document in a collection needs to have a unique ID. Firestore can create one automatically, or you can manually create one to handle different data modeling relationships. Flips. The document is where you store all of your data in a series of key value pairs, similar to a JavaScript object. This document might have a name field where the value is a string and and await where the value is a number. You can name these fields whatever you want, but it's important to keep that consistent across documents because that's what you use to query them. For sample, if we have multiple documents in this database, we can find this upside down pyramid icon here in the collection. This allows us to experiment with different queries. If we go ahead and open up the panel, we first choose a field to filter by, which in this case is weight. And then we have a number of different query operators we use to handle the filtering. In this case, we want all the documents where the weight is greater than 5. When we apply this query, you can see it filters out just the one document where the weight is greater than 5. Now since one of these documents has a weight of 5, we can make this an inclusive query by saying greater than or equal to 5. When we update the query, we now get both documents returned back to us. Now that you know a little bit about how Firestore works, let's take a look at how we can associate data to a user in our application. If we go into our HTML, you can see I have another section here with an unordered list where we'll show all the things that this currently logged in user has created. We'll give the user a way to create a new random thing in the database by simply clicking on this button. Here's a pro tip. If you want to create random fake data in your application, check out this library called Faker JS. It's a say really quick and easy way to generate fake random data for testing. Now if we go back into our JavaScript, we'll first make a reference to the Firebase Firestore SDK as the variable DB. Then we'll use browser APIs to grab our create thing button as well as the things list. Now there are generally 2 things you need when accessing data from Firestore first store in real time. The first thing is a reference to the document or collection that you wanna access, which will give a variable name of the things ref in this case. The reference is a starting point to create, read, update, and delete data at a specific point in the database. Now when it comes to reading data in real time, our front end UI will always react to changes that happen on the server. And that means we'll be subscribed to stream of changes happening to the database, and, therefore, we want to set a second variable here called unsubscribe so we can tell the app when to stop listening to this real time stream. If you don't unsubscribe from your data, it could lead to memory leaks and also unnecessary costs by reading and listening to documents that you don't actually need for the UI. Now in this demo, we want our database records to only be accessible by the currently logged in user. And that means before we make a reference to the database, we need to check the authentication state of the current user. We can use the on auth state change callback just like we did in the previous section. We'll set set everything up when the user is logged in. And the first thing we'll do is create that reference to the database by calling db collection things. Now that we have that reference, we can register event handler on the click event on our create thing button. There are several different ways you can create data, but when you have a reference to a collection, the add method will simply add a new document to that collection and automatically generate the unique ID. The add method takes a JavaScript object as its argument, and this is the actual data that will be saved on your document in the database. Now the way we associate a document with a user is by making a reference to their user ID on the document itself. That way we can query all of the documents that have the corresponding user ID. From there, we'll add a name field to the document with just a random product name using faker. Now now one other thing you might want to do is save a timestamp of when this document was created. A common pitfall when doing front end development is to use a regular JavaScript date object. But what you should understand is that the date object is not always consistent on every machine. So what you should do for consistent time stamps is use the Firebase Firestore field value server timestamp. This will be evaluated by Firestore to ensure that the date is always the same across all client devices. At at this point, we're able to create data in our database from the front end application. If we pull up the app, making sure that we're logged in and click on the create random item button, we should see that item created in the database instantaneously. But the real magic of Firestore is being able to listen to these changes in real time in the front end UI, and and the way you do that is by making a query. Now when you make a query in Firestore, it's going to return a function that you can use to unsubscribe from that query later on. It's not required, but a very good idea to name that variable something like unsubscribe and then use it when the state of the app changes like when the user signs out. Using reference, we can then make a query by calling where the user ID equals the current user's user ID. That will give us only the documents that this particular user has created. To get a real time stream of all the changes to this query we call on snapshot. But if we only wanted to read this data once, we could use get instead. With on snapshot, we provide a callback function that will be called anytime the underlying data changes. It gives us access to the query snapshot, which is an object that contains an array of documents that we can use to update the UI with the most recent data. The way I'll handle it in this case is by taking the array of documents and mapping it down to an array of list items that we can show in the HTML. For each document that's returned in the query, we'll create a list item. And then inside that list item, we can get the actual data on the document by calling doc data and then we'll reference the name field. And then lastly, we'll update the HTML by setting the inner HTML of our things list few these items join together as a string. Now when we go back to our demo, you can see that the things list is updated in the actual UI every time we create a new record. Now cool thing about this is no matter where this data update takes place, whether it's on the server or some other application, it'll be updated in this UI as well. You can see see when I delete all the documents here on the server, those changes are reflected instantaneously in the front end app as well. So that was pretty easy, but it gets even easier when you use a front end framework. Now before we move on, there's a couple of other things you should know about Firestore. In many cases, you might want to make what's known as a compound query. That's when you chain multiple operations together on the same query. For example, we could do that here by adding the order by method to order by the created at field. But when we do and go back to the application, you can see our data is no longer listed there. And if we open the console, we get an error message saying that we need a composite put index. In order to scale infinitely in the cloud, certain queries need a composite index. So in this case, we can create it by simply following the link in the error message, and it will take us to the Firebase console to create the index to support that query. Now the other thing to keep in mind that I've already mentioned is to make sure to unsubscribe from your data when it's no longer needed. For for this feature, it would make sense to unsubscribe when the user is no longer logged in. So we're already checking for the user authentication state, which means we can just add an else statement here and unsubscribe if that unsubscribe function is defined. Now the final but most important thing to understand here is how security works. So even even though we're filtering the items by the logged in user, they're still not secure. Anybody could run this code and get the items that are privately owned by the logged in user. If if you're building a serious application, you absolutely need to have full stack security rules in place to prevent things like this. We can easily handle this by going to the rules tab from the Firestore console. Pull. Rules have their own special syntax and they're designed to make it really easy to implement security logic for your database. The first thing we'll wanna do is secure the entire database by allowing rewrite to be false across the entire database and then we'll allow things selectively based on where they're needed. From there, we'll reference the things collection and then use braces to represent every document in that collection as a wildcard with its document ID. In order for a user to be able to write to this collection, their request auth user ID, which represents the user ID of the currently logged in user, needs to match the user ID that they want to save to the database. If it's a mismatch, then Firestore will block that operation. In other words, this security rule would prevent a user from creating a document for any other user. When when it comes to reading documents, we have very similar security logic here. But instead of looking at the request data, which represents the incoming data, we're looking at for resource data, which is the data that already exists on the database. So in this case, a user can only read a document if it already contains their user ID. And that's really all there is to it. You've now built a full stack authenticated secure application. If we go into our source code and try to change the user ID and then make it right to the database, you'll notice that Firestore blocks it. We've already accomplished a lot, but we've barely scratched the surface of Firebase. Let's finish this video by doing a rapid fire overview of some other things you'll want to check out. When building a complex application, you likely won't be able to do everything on the front end. You'll still need to write some server side code to interact with APIs, run background jobs and things like that. And the tool you use to run server side code is cloud functions. When you have something you want done on the server, maybe it's Python, Node. Js, or Go, you can write play Cloud Function to get that work done. In addition, your app might need to store raw files like videos and images. Every Firebase project comes with a built print storage bucket, and it has an SDK that allows you to easily upload files from your front end application to the storage bucket. If you you do upload files here, you might want to run some machine learning on them, like text recognition or image labeling. Firebase has a ton of built in machine learning APIs is to handle stuff like that. And another awesome thing to keep an eye on is Firebase extensions. This is a relatively new feature that allows developers to extend the functionality of Firebase itself. For example, Stripe payments just recently released its own extension to make it easier for developers to accept payments in their Firebase apps. The bottom line here is that Firebase is an awesome tool if your goal is to get an app built quickly and efficiently. Like I said earlier, there is nothing quite like it, and it's no surprise that it's the most popular back end as a service in the world. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and be looking out for more advanced and framework specific play Firebase content here in the near future. Thanks for watching, and I will see you in the next one.
Choosing
choosing
the
the
right
right
tech
tech
stack
stack
for
for
your
your
product
product
in
in
a
a
world
world
of
of
unlimited
unlimited
possibilities
possibilities
is
is
extremely
extremely
challenging.
challenging
Let's
let's
imagine
imagine
you
you
have
have
an
an
idea
idea
for
for
the
the
next
next
$1,000,000,000
$1,000,000,000
to
to
do
do
app.
app
You
you
may
may
have
have
a
a
vision
vision
for
for
how
how
the
the
end
end
user
user
experience
experience
will
will
work.
work
But
but
behind
behind
the
the
front
front
end,
end
you
you
have
have
a
a
ton
ton
of
of
technical
technical
decisions
decisions
to
to
make
make
on
on
the
the
back
back
end,
end
like
like
how
how
do
do
we
we
authenticate
authenticate
users?
users
Which
which
database
database
should
should
we
we
use.
use
How
how
do
do
we
we
run
run
trusted
trusted
code
code
on
on
a
a
server?
server
How
how
do
do
we
we
handle
handle
security,
security
analytics,
analytics
and
and
scale
scale
up
up
as
as
our
our
user
user
base
base
grows?
grows
These
these
decisions
decisions
are
are
hard
hard
to
to
get
get
right,
right
and
and
just
just
thinking
thinking
about
about
them
them
takes
takes
time,
time
money,
money
and
and
energy
energy
that
that
would
would
be
be
better
better
spent
spent
focusing
focusing
on
on
the
the
user
user
experience.
experience
When
when
it
it
comes
comes
to
to
minimizing
minimizing
decision
decision
fatigue,
fatigue
there's
there's
nothing
nothing
quite
quite
like
like
Firebase.
firebase
It
it
it
it
contains
contains
everything
everything
most
most
apps
apps
will
will
need
need
to
to
build
build
and
and
run
run
a
a
production
production
app
app
at
at
scale.
scale
This
this
is
is
what
what
we
we
call
call
a
a
back
back
end
end
as
as
a
a
service,
service
where
where
the
the
idea
idea
is
is
that
that
you,
you
the
the
developer,
developer
write
write
and
and
maintain
maintain
as
as
little
little
back
back
end
end
code
code
as
as
possible.
possible
It
it
costs
costs
about
about
$0
$0
per
per
month
month
to
to
run
run
until
until
your
your
app
app
builds
builds
active
active
user
user
base,
base
and
and
it's
it's
extremely
extremely
developer
developer
friendly.
friendly
The
the
tool
tool
that
that
lets
lets
you
you
use
use
the
the
whole
whole
vast
vast
without
without
scaling,
scaling
cutting,
cutting
or
or
gutting.
gutting
It's
it's
just
just
that
that
simple.
simple
When
when
writing
writing
code
code
with
with
Firebase,
firebase
you'll
you'll
find
find
that
that
the
the
SDKs
sdks
are
are
extremely
extremely
well
well
documented
documented
and
and
highly
highly
optimized
optimized
to
to
get
get
features
features
built
built
quickly.
quickly
But,
but
ultimately
ultimately
everything
everything
is
is
a
a
trade
trade
off.
off
I've
i've
been
been
using
using
Firebase
firebase
for
for
5
5
years,
years
and
and
there
there
are
are
certainly
certainly
some
some
drawbacks
drawbacks
to
to
the
the
platform
platform
that
that
we'll
we'll
talk
talk
about
about
as
as
well.
well
In
in
today's
today's
beginner
beginner
friendly
friendly
tutorial,
tutorial
you'll
you'll
learn
learn
everything
everything
you
you
need
need
to
to
know
know
about
about
Firebase.
firebase
You'll
you'll
learn
learn
how
how
to
to
deploy
deploy
a
a
full
full
stack
stack
web
web
application
application
to
to
the
the
cloud.
cloud
The
the
app
app
will
will
be
be
able
able
to
to
authenticate
authenticate
users
users
with
with
their
their
Google
google
account,
account
then
then
allow
allow
that
that
user
user
to
to
securely
securely
create
create
data
data
in
in
the
the
database.
database
And
and
anytime
anytime
that
that
user's
user's
data
data
changes,
changes
it
it
will
will
be
be
automatically
automatically
reflected
reflected
in
in
the
the
UI
ui
in
in
real
real
time.
time
We'll
we'll
we'll
we'll
be
be
using
using
vanilla
vanilla
JavaScript
javascript
for
for
this
this
tutorial.
tutorial
However,
however
most
most
people
people
using
using
Firebase
firebase
are
are
using
using
a
a
front
front
end
end
framework,
framework
like
like
React,
react
Angular,
angular
Flutter,
flutter
and
and
so
so
on.
on
I'll
i'll
be
be
releasing
releasing
intro
intro
videos
videos
for
for
those
those
frameworks
frameworks
separately,
separately
so
so
make
make
sure
sure
to
to
subscribe
subscribe
to
to
catch
catch
those
those
as
as
well.
well
Even
even
if
if
you're
you're
using
using
one
one
of
of
those
those
frameworks,
frameworks
I
i
highly
highly
recommend
recommend
going
going
through
through
this
this
tutorial
tutorial
as
as
well
well
to
to
get
get
a
a
full
full
understanding
understanding
of
of
how
how
Firebase
firebase
works
works
at
at
the
the
base
base
level.
level
With
with
that
that
being
being
said,
said
let's
let's
go
go
ahead
ahead
and
and
jump
jump
right
right
into
into
things.
things
The
the
first
first
thing
thing
you'll
you'll
need
need
is
is
to
to
have
have
Node.
node
Js
js
installed
installed
on
on
your
your
local
local
system.
system
You
you
can
can
see
see
here
here
that
that
I've
i've
opened
opened
up
up
PS
ps
code
code
to
to
an
an
empty
empty
directory.
directory
I'm
i'm
entering
entering
the
the
command
command
node
node
flag
flag
v
v
to
to
get
get
the
the
version
version
of
of
10
10
dot
dot
21.
21
Any
any
version
version
greater
greater
than
than
8
8
should
should
work
work
just
just
fine.
fine
If
if
you
you
don't
don't
have
have
Node
node
installed,
installed
I
i
recommend
recommend
using
using
NVM
nvm
or
or
Node
node
version
version
manager
manager
to
to
install
install
the
the
same
same
version
version
of
of
Node
node
that
that
I'm
i'm
using
using
here.
here
The
the
next
next
step
step
is
is
to
to
create
create
a
a
Firebase
firebase
project.
project
You
you
can
can
sign
sign
in
in
to
to
Firebase
firebase
with
with
your
your
Google
google
account
account
because
because
Firebase
firebase
is
is
just
just
an
an
extension
extension
of
of
Google
google
Cloud
cloud
Platform.
platform
Firebase
firebase
is
is
a
a
lot
lot
of
of
different
different
things,
things
but
but
at
at
its
its
core,
core
it's
it's
an
an
SDK
sdk
or
or
software
software
development
development
kit
kit
that
that
makes
makes
it
it
easy
easy
for
for
your
your
front
front
end
end
app
app
to
to
connect
connect
to
to
back
back
end
end
cloud
cloud
infrastructure
infrastructure
on
on
Google
google
Cloud.
cloud
Now
now
Now
now
on
on
GCP,
gcp
all
all
of
of
your
your
cloud
cloud
infrastructure
infrastructure
like
like
databases,
databases
storage
storage
buckets,
buckets
servers,
servers
and
and
so
so
on
on
is
is
organized
organized
into
into
a
a
project.
project
A
a
project
project
might
might
be
be
connected
connected
to
to
multiple
multiple
apps.
apps
You
you
might
might
have
have
a
a
web
web
app,
app
iOS,
ios
and
and
Android
android
app
app
that
that
all
all
share
share
the
the
same
same
database
database
and
and
back
back
end
end
servers.
servers
Go
go
ahead
ahead
and
and
create
create
a
a
new
new
project,
project
and
and
then
then
let's
let's
take
take
a
a
tour
tour
of
of
the
the
Firebase
firebase
console.
console
The
the
console
console
is
is
simply
simply
awesome
awesome
and
and
basically
basically
serves
serves
as
as
an
an
admin
admin
area
area
for
for
all
all
of
of
your
your
app
app
infrastructure.
infrastructure
As
as
developers,
developers
the
the
main
main
area
area
that
that
we'll
we'll
be
be
focused
focused
on
on
is
is
the
the
develop
develop
category.
category
This
this
is
is
the
the
actual
actual
cloud
cloud
infrastructure
infrastructure
that
that
we
we
need
need
to
to
build
build
a
a
full
full
stack
stack
application.
application
This
this
this
this
is
is
the
the
most
most
important
important
area
area
to
to
focus
focus
on,
on
especially
especially
in
in
the
the
early
early
stages
stages
of
of
architecting
architecting
an
an
app.
app
The
the
next
next
section
section
is
is
the
the
quality
quality
category.
category
This
this
is
is
where
where
you'll
you'll
focus
focus
when
when
your
your
app
app
is
is
getting
getting
ready
ready
to
to
go
go
to
to
production.
production
These
these
tools
tools
help
help
you
you
optimize
optimize
performance,
performance
detect
detect
crashes,
crashes
and
and
distribute
distribute
your
your
app
app
to
to
testers.
testers
Once
once
your
your
app
app
game's
game's
actual
actual
users
users
you
you
can
can
analyze
analyze
their
their
behavior
behavior
with
with
analytics.
analytics
This
this
data
data
is
is
extremely
extremely
powerful,
powerful
and
and
you
you
can
can
use
use
it
it
to
to
segment
segment
your
your
user
user
base
base
and
and
custom
custom
tailor
tailor
the
the
user
user
experience.
experience
You
you
can
can
use
use
this
this
analytics
analytics
data
data
to
to
send
send
push
push
notifications
notifications
or
or
use
use
remote
remote
config
config
to
to
change
change
the
the
actual
actual
appearance
appearance
or
or
behavior
behavior
of
of
your
your
app
app
based
based
on
on
the
the
type
type
user
user
that's
that's
engaging
engaging
with
with
it.
it
It's
it's
really
really
powerful
powerful
stuff.
stuff
But
but
to
to
get
get
to
to
that
that
point,
point
you
you
first
first
need
need
to
to
create
create
an
an
app
app
that
that
people
people
wanna
wanna
use.
use
In
in
our
our
case,
case
we're
we're
building
building
a
a
web
web
app.
app
So
so
the
the
first
first
thing
thing
we'll
we'll
wanna
wanna
in
in
Firebase
firebase
is
is
go
go
up
up
here
here
to
to
the
the
project
project
settings
settings
and
and
create
create
a
a
new
new
web
web
app.
app
A
a
Firebase
firebase
project
project
can
can
actually
actually
have
have
multiple
multiple
web
web
apps,
apps
so
so
we'll
we'll
wanna
wanna
give
give
it
it
a
a
nickname.
nickname
When
when
were
were
finished.
finished
It
it
will
will
give
give
us
us
a
a
script
script
tag
tag
that
that
references
references
the
the
Firebase
firebase
SDK
sdk
and
and
adds
adds
our
our
Firebase
firebase
project
project
credentials
credentials
to
to
link
link
the
the
web
web
app
app
to
to
this
this
Firebase
firebase
project
project
in
in
the
the
cloud.
cloud
These
these
credentials
credentials
are
are
perfectly
perfectly
okay
okay
to
to
expose
expose
in
in
your
your
front
front
end
end
application,
application
so
so
don't
don't
worry
worry
about
about
hiding
hiding
them
them
for
for
security
security
purposes.
purposes
We'll
we'll
talk
talk
more
more
about
about
how
how
security
security
works
works
in
in
Firebase
firebase
in
in
a
a
few
few
minutes.
minutes
Go
go
and
and
copy
copy
the
the
code
code
snippet,
snippet
then
then
head
head
back
back
to
to
Versus
versus
Code
code
and
and
create
create
a
a
public
public
folder
folder
and
and
add
add
a
a
file
file
called
called
index
index
HTML
html
to
to
it.
it
In
in
the
the
HTML
html
file,
file
you
you
can
can
type
type
an
an
exclamation
exclamation
point
point
and
and
then
then
hit
hit
tab
tab
to
to
quickly
quickly
scaffold
scaffold
out
out
a
a
basic
basic
HTML
html
page.
page
Go
go
ahead
ahead
and
and
paste
paste
the
the
Firebase
firebase
snippet
snippet
in
in
the
the
head
head
of
of
the
the
document.
document
Now
now
you'll
you'll
notice
notice
in
in
the
the
comments,
comments
it
it
has
has
a
a
to
to
do
do
to
to
add
add
SDKs
sdks
for
for
the
the
Firebase
firebase
products
products
that
that
we
we
want
want
to
to
use.
use
Firebase
firebase
is
is
modular,
modular
which
which
means
means
we
we
can
can
opt
opt
in
in
or
or
progressively
progressively
enhance
enhance
our
our
app
app
with
with
the
the
features
features
that
that
we
we
want
want
to
to
use.
use
If
if
we're
we're
not
not
using
using
a
a
feature,
feature
we
we
don't
don't
need
need
to
to
include
include
that
that
extra
extra
dead
dead
code
code
in
in
our
our
application,
application
which
which
would
would
degrade
degrade
performance.
performance
If
if
we
we
follow
follow
the
the
link,
link
we
we
wanna
wanna
find
find
the
the
CDN
cdn
links
links
for
for
Firestore
firestore
and
and
Firebase
firebase
auth.
auth
Those
those
are
are
the
the
2
2
features
features
that
that
we'll
we'll
be
be
using
using
in
in
today's
today's
demo.
demo
Go
go
ahead
ahead
and
and
paste
paste
those
those
script
script
tags
tags
into
into
the
the
document.
document
Now
now
to
to
simplify
simplify
the
the
application.
application
I'm
i'm
going
going
to
to
create
create
an
an
app
app
dotjs
dotjs
file.
file
From
from
there,
there
I'll
i'll
create
create
a
a
script
script
tag
tag
that
that
references
references
this
this
file,
file
and
and
we'll
we'll
use
use
the
the
defer
defer
attribute
attribute
to
to
make
make
sure
sure
the
the
script
script
loads
loads
after
after
the
the
body
body
elements
elements
have
have
loaded.
loaded
At
at
this
this
point,
point
we
we
can
can
go
go
into
into
our
our
app.
app
Js
js
file
file
and
and
console
console
log
log
firebase,
firebase
which
which
should
should
be
be
available
available
as
as
a
a
global
global
variable
variable
on
on
the
the
window.
window
And
and
now
now
we
we
can
can
go
go
into
into
the
the
browser
browser
and
and
make
make
sure
sure
everything's
everything's
working
working
as
as
intended.
intended
Right
right
click
click
on
on
the
the
index.
index
Html
html
file
file
and
and
click
click
copy
copy
path.
path
Then
then
then
then
open
open
up
up
a
a
web
web
browser
browser
and
and
paste
paste
the
the
file
file
path
path
as
as
the
the
URL.
url
You
you
should
should
get
get
a
a
blank
blank
HTML
html
page,
page
but
but
if
if
you
you
open
open
up
up
the
the
console
console
using
using
control
control
shift
shift
j,
j
you
you
should
should
see
see
the
the
Firebase
firebase
SDK
sdk
log
log
there.
there
And
and
on
on
that
that
object,
object
you
you
should
should
see
see
Firestore
firestore
and
and
auth
auth
if
if
your
your
SDK
sdk
is
is
loaded
loaded
properly.
properly
Okay.
okay
So
so
now
now
that
that
we
we
have
have
Firebase
firebase
installed
installed
in
in
our
our
front
front
end
end
code.
code
The
the
next
next
thing
thing
I
i
recommend
recommend
doing
doing
is
is
installing
installing
the
the
Firebase
firebase
command
command
line
line
tools
tools
and
and
initializing
initializing
this
this
project
project
which
which
will
will
connect
connect
your
your
command
command
line
line
to
to
the
the
cloud.
cloud
The
the
CLI
cli
has
has
all
all
kinds
kinds
of
of
awesome
awesome
tools
tools
built
built
in,
in
and
and
what
what
we'll
we'll
use
use
it
it
for
for
right
right
now
now
is
is
to
to
serve
serve
and
and
then
then
deploy
deploy
our
our
app
app
to
to
a
a
real
real
URL
url
on
on
the
the
Internet.
internet
Go
go
ahead
ahead
and
and
open
open
up
up
a
a
terminal
terminal
session
session
and
and
install
install
the
the
Firebase
firebase
tools
tools
package
package
using
using
the
the
global
global
flag,
flag
making
making
it
it
globally
globally
available
available
on
on
your
your
system.
system
Once
once
that's
that's
finished,
finished
you
you
can
can
run
run
firebase
firebase
login
login
from
from
the
the
command
command
line
line
to
to
log
log
in
in
to
to
your
your
Firebase
firebase
account
account
in
in
the
the
cloud.
cloud
That'll
that'll
bring
bring
up
up
a
a
pop
pop
up
up
window
window
for
for
you
you
to
to
authenticate
authenticate
and
and
you
you
can
can
now
now
manage
manage
your
your
Firebase
firebase
project
project
from
from
the
the
command
command
line.
line
Now
now
if
if
you're
you're
also
also
using
using
Versus
versus
Code,
code
I
i
would
would
highly
highly
recommend
recommend
installing
installing
the
the
Firebase
firebase
Explorer
explorer
extension.
extension
This
this
extension
extension
allows
allows
you
you
to
to
connect
connect
your
your
Google
google
account
account
to
to
Versus
versus
Code
code
and
and
manage
manage
all
all
of
of
your
your
Firebase
firebase
projects
projects
visually.
visually
It's
it's
extremely
extremely
useful
useful
to
to
have
have
quick
quick
access
access
to
to
your
your
database,
database
face
face
your
your
various
various
projects,
projects
cloud
cloud
functions,
functions
and
and
so
so
on.
on
So
so
now
now
that
that
our
our
command
command
line
line
is
is
connected
connected
to
to
Firebase,
firebase
I'm
i'm
going
going
to
to
go
go
into
into
our
our
HTML
html
and
and
add
add
a
a
heading
heading
for
for
my
my
awesome
awesome
app
app
just
just
so
so
we
we
have
have
something
something
to
to
look
look
at.
at
Next,
next
we'll
we'll
run
run
the
the
firebase
firebase
init
init
command
command
to
to
configure
configure
Firebase
firebase
in
in
this
this
project.
project
1st,
1st
first
first
it
it
wants
wants
to
to
know
know
which
which
features
features
we
we
plan
plan
on
on
using.
using
For
for
now,
now
we'll
we'll
go
go
ahead
ahead
and
and
select
select
hosting
hosting
as
as
well
well
as
as
emulators.
emulators
You
you
can
can
use
use
the
the
space
space
bar
bar
to
to
make
make
your
your
selections.
selections
Hosting
hosting
is
is
where
where
your
your
front
front
end
end
web
web
application
application
will
will
ultimately
ultimately
be
be
deployed.
deployed
It's
it's
basically
basically
a
a
storage
storage
bucket
bucket
that's
that's
available
available
on
on
the
the
Internet
internet
served
served
over
over
a
a
CDN,
cdn
making
making
your
your
web
web
app
app
very
very
fast
fast
everywhere
everywhere
in
in
the
the
world.
world
Pricing
pricing
is
is
based
based
on
on
the
the
number
number
of
of
gigabytes
gigabytes
stored
stored
in
in
your
your
hosting
hosting
account
account
as
as
well
well
as
as
the
the
number
number
of
of
gigabytes
gigabytes
that
that
you
you
transfer
transfer
out
out
to
to
your
your
users,
users
which
which
will,
will
of
of
course,
course
increase
increase
with
with
the
the
amount
amount
of
of
traffic
traffic
that
that
you
you
have
have
going
going
to
to
your
your
site.
site
The
the
CLI
cli
ask
ask
you
you
to
to
use
use
a
a
project.
project
Go
go
ahead
ahead
and
and
use
use
the
the
project
project
that
that
you've
you've
already
already
set
set
up.
up
The
the
public
public
directory
directory
is
is
where
where
all
all
of
of
our
our
distribution
distribution
code
code
lives.
lives
Those
those
are
are
the
the
files
files
that
that
the
the
end
end
user
user
needs
needs
to
to
view
view
our
our
application
application
on
on
the
the
web.
web
In
in
this
this
case,
case
we
we
just
just
have
have
a
a
single
single
HTML
html
file.
file
So
so
we'll
we'll
go
go
ahead
ahead
and
and
set
set
it
it
up
up
as
as
a
a
single
single
page
page
app.
app
Then
then
we'll
we'll
select
select
no
no
when
when
asked
asked
to
to
overwrite
overwrite
that
that
file.
file
After
after
that,
that
it'll
it'll
ask
ask
us
us
a
a
few
few
questions
questions
for
for
the
the
emulator
emulator
setup.
setup
I
i
have
have
an
an
advanced
advanced
breakdown
breakdown
of
of
the
the
Firebase
firebase
Emulator
emulator
on
on
Fireship
fireship
IO,
io
but,
but
basically,
basically
it's
it's
just
just
a
a
way
way
for
for
you
you
to
to
simulate
simulate
proliferate
proliferate
Firebase
firebase
services
services
locally
locally
on
on
your
your
system.
system
That
that
means
means
you
you
can
can
create
create
database
database
records
records
and
and
run
run
Cloud
cloud
functions
functions
without
without
having
having
to
to
directly
directly
connect
connect
to
to
the
the
Cloud.
cloud
We'll
we'll
go
go
ahead
ahead
and
and
stick
stick
to
to
default
default
options
options
for
for
the
the
remaining
remaining
CLI
cli
questions
questions
here.
here
When
when
it's
it's
finished,
finished
you'll
you'll
notice
notice
it
it
created
created
2
2
files
files
here
here
in
in
the
the
root
root
of
of
our
our
project.
project
1st,
1st
the
the
Firebase
firebase
RC
rc
or
or
resource
resource
config
config
file
file
just
just
contains
contains
an
an
identifier
identifier
for
for
our
our
project
project
in
in
the
the
cloud.
cloud
And
and
we
we
also
also
have
have
the
the
Firebase
firebase
JSON
json
file,
file
which
which
is
is
a
a
file
file
that
that
you
you
can
can
modify
modify
to
to
customize
customize
the
the
behavior
behavior
of
of
various
various
Firebase
firebase
services.
services
When
when
it
it
comes
comes
to
to
hosting,
hosting
you
you
can
can
use
use
this
this
file
file
to
to
create
create
redirects
redirects
and
and
rewrites
rewrites
to
to
different
different
URLs
urls
in
in
your
your
app,
app
but
but
that's
that's
beyond
beyond
the
the
scope
scope
of
of
this
this
video.
video
If
if
you
you
want
want
to
to
run
run
your
your
app
app
locally,
locally
there's
there's
2
2
ways
ways
you
you
can
can
do
do
it.
it
You
you
can
can
open
open
up
up
the
the
command
command
line
line
and
and
run
run
Firebase
firebase
serve
serve
or
or
you
you
can
can
run
run
the
the
Firebase
firebase
emulators
emulators
start
start
command.
command
In
in
either
either
case,
case
it
it
will
will
serve
serve
your
your
app
app
locally
locally
on
on
localhost
localhost
5000.
5000
You
you
can
can
now
now
start
start
developing
developing
your
your
app
app
and
and
see
see
the
the
changes
changes
reflected
reflected
here.
here
Firebase
firebase
also
also
makes
makes
it
it
extremely
extremely
easy
easy
to
to
deploy
deploy
your
your
app
app
to
to
a
a
production
production
URL.
url
Go
go
ahead
ahead
and
and
run
run
the
the
Firebase
firebase
deploy
deploy
command,
command
and
and
it
it
will
will
take
take
the
the
files
files
in
in
your
your
public
public
directory
directory
and
and
upload
upload
them
them
to
to
a
a
storage
storage
bucket
bucket
in
in
the
the
cloud.
cloud
It
it
will
will
automatically
automatically
provision
provision
a
a
hosting
hosting
URL
url
at
at
web.app.
web.app
If
if
you
you
follow
follow
that
that
URL,
url
you
you
should
should
now
now
see
see
your
your
web
web
app
app
available
available
on
on
the
the
real
real
Internet.
internet
So
so
that's
that's
pretty
pretty
awesome.
awesome
I
i
don't
don't
think
think
it
it
can
can
really
really
get
get
any
any
easier
easier
than
than
that.
that
If
if
you
you
go
go
to
to
the
the
hosting
hosting
tab
tab
on
on
the
the
Firebase
firebase
console.
console
You
you
can
can
see
see
the
the
different
different
versions
versions
that
that
you've
you've
deployed
deployed
there,
there
and
and
you
you
can
can
also
also
connect
connect
your
your
own
own
custom
custom
domain
domain
here
here
as
as
well.
well
And
and
now
now
we're
we're
ready
ready
to
to
start
start
building
building
something
something
cool.
cool
Let's
let's
start
start
by
by
getting
getting
a
a
user
user
logged
logged
into
into
the
the
application.
application
Head
head
back
back
over
over
to
to
the
the
Firebase
firebase
console
console
and
and
find
find
the
the
authentication
authentication
tab.
tab
Firebase
firebase
auth
auth
is
is
kind
kind
of
of
like
like
a
a
read
read
only
only
database
database
for
for
your
your
users.
users
Currently,
currently
we
we
don't
don't
have
have
any
any
users,
users
but
but
that'll
that'll
be
be
changing
changing
soon.
soon
If
if
we
we
wanted
wanted
to
to
add
add
a
a
user
user
manually,
manually
we
we
you
you
could
could
click
click
the
the
add
add
user
user
button
button
and
and
add
add
one
one
with
with
an
an
email
email
and
and
password
password
here.
here
When
when
a
a
new
new
user
user
signs
signs
up
up
with
with
our
our
app,
app
they'll
they'll
have
have
a
a
record
record
added
added
here,
here
and
and
every
every
user
user
has
has
a
a
unique
unique
user
user
ID.
id
This
this
UID
uid
is
is
important
important
because
because
you'll
you'll
often
often
want
want
to
to
associate
associate
custom
custom
user
user
data
data
to
to
it
it
in
in
your
your
database,
database
which
which
we'll
we'll
do
do
in
in
a
a
few
few
minutes
minutes
here.
here
There's
there's
a
a
whole
whole
bunch
bunch
of
of
built
built
in
in
ways
ways
to
to
sign
sign
in
in
a
a
user,
user
but
but
the
the
easiest
easiest
to
to
implement
implement
is
is
Google,
google
which
which
we
we
can
can
do
do
by
by
simply
simply
clicking
clicking
the
the
enable
enable
button.
button
Now
now
before
before
we
we
get
get
back
back
to
to
our
our
code,
code
you
you
might
might
be
be
wondering,
wondering
how
how
much
much
is
is
this
this
going
going
to
to
cost
cost
me?
me
The
the
answer
answer
is
is
nothing.
nothing
Even
even
if
if
you
you
have
have
10,000,000
10,000,000
users,
users
the
the
cost
cost
is
is
0,
0
and
and
that's
that's
pretty
pretty
crazy,
crazy
especially
especially
compared
compared
to
to
other
other
platforms.
platforms
Now
now
let's
let's
head
head
over
over
to
to
our
our
application
application
code
code
and
and
see
see
how
how
we
we
can
can
get
get
a
a
user
user
logged
logged
in
in
to
to
our
our
web
web
app.
app
We'll
we'll
start
start
HTML
html
and
and
add
add
some
some
markup
markup
for
for
the
the
UI.
ui
Basically,
basically
we
we
have
have
2
2
sections
sections
here,
here
one
one
for
for
when
when
the
the
user
user
is
is
signed
signed
out
out
and
and
one
one
for
for
when
when
the
the
user
user
is
is
signed
signed
in.
in
Each
each
section
section
will
will
have
have
a
a
unique
unique
ID,
id
and
and
the
the
signed
signed
in
in
section
section
will
will
be
be
hidden
hidden
by
by
default.
default
In
in
the
the
signed
signed
out
out
section,
section
we'll
we'll
add
add
a
a
button
button
to
to
sign
sign
in
in
with
with
Google.
google
When
when
the
the
user
user
clicks
clicks
the
the
button,
button
it'll
it'll
bring
bring
up
up
a
a
pop
pop
up
up
window
window
to
to
sign
sign
in
in
with
with
their
their
Google
google
account.
account
When
when
that's
that's
done
done
successfully,
successfully
we'll
we'll
show
show
the
the
signed
signed
in
in
section
section
that
that
will
will
contain
contain
their
their
user
user
details
details
along
along
with
with
a
a
sign
sign
out
out
button.
button
And
and
just
just
a
a
little
little
side
side
note
note
here,
here
I'm
i'm
using
using
Bootstrap
bootstrap
to
to
give
give
the
the
UI
ui
a
a
little
little
more
more
flavor.
flavor
That
that
part's
part's
completely
completely
optional
optional
and
and
keep
keep
in
in
mind
mind
you
you
can
can
find
find
the
the
full
full
source
source
code
code
for
for
this
this
project
project
on
on
GitHub.
github
Now
now
we
we
we
we
can
can
jump
jump
over
over
to
to
our
our
JavaScript
javascript
and
and
start
start
using
using
the
the
Firebase
firebase
auth
auth
SDK.
sdk
To
to
reference
reference
auth,
auth
we
we
call
call
Firebase
firebase
auth,
auth
and
and
this
this
part
part
of
of
the
the
gives
gives
us
us
access
access
to
to
a
a
whole
whole
bunch
bunch
of
of
different
different
methods
methods
to
to
manage
manage
users
users
within
within
our
our
app.
app
What
what
we
we
wanna
wanna
do
do
here
here
is
is
sign
sign
a
a
user
user
in
in
and
and
then
then
sign
sign
a
a
user
user
out
out
when
when
they
they
click
click
the
the
corresponding
corresponding
buttons.
buttons
The
the
first
first
thing
thing
we'll
we'll
wanna
wanna
do
do
here
here
is
is
grab
grab
the
the
HTML
html
elements
elements
that
that
we
we
wanna
wanna
interact
interact
with,
with
which
which
we
we
can
can
do
do
by
by
calling
calling
document
document
get
get
element
element
by
by
ID.
id
This
this
code
code
is
is
obviously
obviously
pretty
pretty
fully.
fully
It's
it's
imperative,
imperative
and
and
it's
it's
one
one
of
of
the
the
main
main
reasons
reasons
that
that
people
people
generally
generally
choose
choose
to
to
use
use
a
a
framework
framework
like
like
React,
react
Angular,
angular
or
or
Vue
vue
to
to
get
get
things
things
done
done
on
on
the
the
web.
web
But
but
even
even
if
if
using
using
a
a
framework,
framework
it's
it's
important
important
to
to
understand
understand
how
how
these
these
low
low
level
level
browser
browser
APIs
apis
work.
work
Now
now
in
in
our
our
case,
case
we
we
want
want
the
the
user
user
to
to
be
be
able
able
to
to
log
log
in
in
with
with
their
their
Google
google
account,
account
and
and
that's
that's
a
a
functionality
functionality
that's
that's
built
built
into
into
Firebase.
firebase
To
to
use
use
it,
it
we
we
first
first
declare
declare
a
a
variable
variable
and
and
set
set
it
it
equal
equal
to
to
a
a
Firebase
firebase
auth
auth
Google
google
provider
provider
instance.
instance
Next,
next
we
we
register
register
a
a
click
click
handler
handler
for
for
our
our
sign
sign
in
in
button.
button
This
this
is
is
just
just
a
a
function
function
that
that
calls
calls
the
the
Firebase
firebase
auth
auth
sign
sign
in
in
with
with
pop
pop
up
up
method
method
using
using
that
that
provider
provider
as
as
the
the
argument.
argument
Many
many
apps
apps
have
have
multiple
multiple
sign
sign
in
in
providers
providers
like
like
Facebook,
facebook
Apple,
apple
etcetera,
etcetera
allowing
allowing
you
you
to
to
reuse
reuse
the
the
same
same
logic
logic
across
across
multiple
multiple
sign
sign
in
in
providers.
providers
Now
now
let's
let's
go
go
ahead
ahead
and
and
test
test
it
it
out.
out
When
when
you
you
open
open
up
up
your
your
app
app
on
on
local
local
host
host
5000,
5000
you
you
should
should
see
see
the
the
sign
sign
in
in
button.
button
When
when
clicked,
clicked
it
it
should
should
prompt
prompt
you
you
to
to
log
log
in
in
with
with
your
your
Google
google
account.
account
At
at
this
this
point,
point
you'll
you'll
notice
notice
that
that
nothing
nothing
actually
actually
changes
changes
in
in
our
our
UI,
ui
but
but
a
a
couple
couple
of
of
important
important
things
things
happened
happened
here
here
and
and
the
the
user
user
is,
is
in
in
fact,
fact
logged
logged
into
into
the
the
application
application
at
at
this
this
point.
point
On
on
the
the
back
back
end
end
Firebase
firebase
created
created
something
something
known
known
as
as
a
a
JSON
json
Web
web
Token
token
to
to
manage
manage
the
the
authentication
authentication
state.
state
If
if
you
you
go
go
into
into
the
the
application
application
section
section
of
of
the
the
browser's
browser's
dev
dev
tools,
tools
you'll
you'll
notice
notice
that
that
Fire
fire
base
base
saved
saved
a
a
record
record
here
here
that
that
has
has
information
information
about
about
the
the
logged
logged
in
in
user,
user
like
like
an
an
email
email
address,
address
user
user
ID,
id
and
and
so
so
on.
on
I'll
i'll
show
show
you
you
how
how
to
to
access
access
all
all
these
these
values
values
in
in
your
your
application
application
next.
next
And
and
it's
it's
also
also
worth
worth
noting
noting
that
that
the
the
Firebase
firebase
user
user
is
is
created
created
in
in
the
the
Firebase
firebase
dashboard
dashboard
as
as
well.
well
You
you
can
can
use
use
that
that
to
to
manage
manage
the
the
user,
user
disable,
disable
or
or
delete
delete
the
the
account
account
if
if
you
you
need
need
to.
to
Now
now
back
back
in
in
our
our
JavaScript
javascript
code,
code
there's
there's
one
one
thing
thing
you
you
should
should
understand.
understand
The
the
sign
sign
in
in
and
and
sign
sign
out
out
methods
methods
are
are
one
one
off
off
operations.
operations
They
they
return
return
a
a
promise,
promise
and
and
once
once
they're
they're
called,
called
they
they
they
they
do
do
something
something
asynchronous
asynchronous
and
and
then
then
they're
they're
done.
done
But
but
the
the
user
user
authentication
authentication
state
state
is
is
something
something
that
that
can
can
change
change
multiple
multiple
times
times
throughout
throughout
the
the
life
life
cycle
cycle
of
of
the
the
application.
application
And
and
usually
usually
you
you
want
want
your
your
app
app
to
to
react
react
with
with
changes
changes
to
to
the
the
UI
ui
when
when
that
that
happens.
happens
The
the
way
way
you
you
do
do
that
that
in
in
Firebase
firebase
is
is
by
by
listening
listening
to
to
on
on
off
off
state
state
changed.
changed
Anytime
anytime
the
the
user
user
signs
signs
in
in
or
or
signs
signs
out,
out
the
the
callback
callback
function
function
passed
passed
to
to
this
this
method
method
will
will
be
be
called.
called
The
the
callback
callback
function
function
gives
gives
you
you
access
access
to
to
the
the
currently
currently
logged
logged
in
in
user,
user
and
and
that
that
means
means
you
you
can
can
provide
provide
traditional
traditional
logic
logic
to
to
show
show
UI
ui
when
when
the
the
user's
user's
logged
logged
in
in
or
or
something
something
else
else
when
when
the
the
user's
user's
logged
logged
out.
out
When
when
the
the
user
user
object
object
is
is
defined,
defined
we
we
know
know
the
the
user
user
signed
signed
in,
in
in
in
which
which
case
case
we'll
we'll
want
want
to
to
show
show
the
the
signed
signed
in
in
template,
template
and
and
then
then
we
we
can
can
add
add
some
some
custom
custom
user
user
details
details
to
to
the
the
UI
ui
using
using
that
that
user
user
object.
object
The
the
user
user
object
object
is
is
the
the
same
same
thing
thing
that
that
we
we
looked
looked
at
at
in
in
the
the
browser's
browser's
application
application
tab
tab
just
just
a
a
minute
minute
ago.
ago
In
in
this
this
case,
case
we'll
we'll
interpolate
interpolate
the
the
user's
user's
display
display
name
name
and
and
also
also
their
their
unique
unique
user
user
ID.
id
If
if
the
the
user
user
object
object
is
is
null,
null
then
then
we'll
we'll
simply
simply
hide
hide
add
add
the
the
signed
signed
in
in
template
template
and
and
set
set
the
the
user
user
details
details
to
to
an
an
empty
empty
string.
string
And
and
now
now
if
if
we
we
open
open
up
up
our
our
web
web
app
app
and
and
sign
sign
in,
in
you'll
you'll
see
see
that
that
the
the
UI
ui
updates
updates
reactively.
reactively
As
as
as
as
you
you
can
can
see,
see
it's
it's
showing
showing
my
my
display
display
name
name
from
from
Google
google
as
as
well
well
as
as
my
my
unique
unique
user
user
ID.
id
And
and
when
when
we
we
click
click
the
the
sign
sign
out
out
button,
button
the
the
UI
ui
goes
goes
back
back
to
to
its
its
original
original
state.
state
And
and
that's
that's
pretty
pretty
awesome
awesome
because
because
we
we
just
just
accomplished
accomplished
a
a
lot
lot
with
with
very
very
little
little
code.
code
And
and
now
now
we're
we're
ready
ready
to
to
move
move
on
on
to
to
what's
what's
probably
probably
the
the
most
most
important
important
part
part
of
of
your
your
application,
application
the
the
database.
database
Out
out
of
of
the
the
box,
box
Firebase
firebase
provides
provides
2
2
NoSQL
nosql
databases,
databases
real
real
time
time
database,
database
and
and
Firestore.
firestore
In
in
this
this
video,
video
we'll
we'll
be
be
focusing
focusing
on
on
Firestore,
firestore
which
which
tends
tends
to
to
be
be
the
the
better
better
option
option
for
for
most
most
use
use
cases.
cases
It's
it's
very
very
similar
similar
to
to
MongoDB,
mongodb
which
which
is
is
a
a
document
document
oriented
oriented
database.
database
Basically,
basically
you
you
have
have
a
a
set
set
of
of
collections
collections
where
where
each
each
collection
collection
is
is
a
a
container
container
for
for
multiple
multiple
documents
documents
and
and
then
then
you
you
can
can
make
make
queries
queries
across
across
all
all
of
of
the
the
documents
documents
in
in
a
a
collection.
collection
There's
there's
there's
there's
no
no
schema,
schema
which
which
means
means
the
the
database
database
is
is
very
very
flexible
flexible
and
and
easy
easy
to
to
use,
use
but
but
that's
that's
both
both
a
a
good
good
and
and
bad
bad
thing.
thing
Unlike
unlike
an
an
SQL
sql
database
database
where
where
you
you
do
do
have
have
a
a
schema,
schema
it's
it's
a
a
lot
lot
easier
easier
with
with
something
something
like
like
Firestore
firestore
to
to
make
make
mistakes
mistakes
with
with
data
data
modeling
modeling
and
and
things
things
like
like
that.
that
In
in
fact,
fact
I've
i've
dedicated
dedicated
an
an
entire
entire
course
course
just
just
to
to
data
data
modeling
modeling
because
because
it's
it's
such
such
an
an
important
important
topic.
topic
Now
now
if
if
if
if
you're
you're
just
just
getting
getting
started
started
with
with
Firebase,
firebase
don't
don't
worry
worry
about
about
that.
that
Just
just
experiment
experiment
and
and
have
have
fun
fun
with
with
it.
it
Another
another
awesome
awesome
thing
thing
about
about
Firestore
firestore
is
is
that
that
it's
it's
real
real
time
time
by
by
default.
default
When
when
we
we
integrate
integrate
it
it
into
into
our
our
front
front
end
end
application,
application
everything
everything
will
will
stay
stay
updated
updated
with
with
the
the
back
back
end
end
server
server
database
database
in
in
real
real
time
time
without
without
any
any
effort
effort
on
on
our
our
part.
part
It's
it's
pretty
pretty
awesome
awesome
stuff.
stuff
Now
now
Firestore
firestore
is
is
not
not
a
a
free
free
service,
service
although
although
it
it
does
does
have
have
a
a
free
free
quota
quota
that
that
you
you
can
can
use
use
every
every
month.
month
When
when
you
you
go
go
over
over
the
the
quota,
quota
you'll
you'll
be
be
charged
charged
primarily
primarily
based
based
on
on
the
the
number
number
of
of
reads,
reads
writes,
writes
and
and
gigabytes
gigabytes
transferred
transferred
outside
outside
the
the
network.
network
Let's
let's
get
get
things
things
started
started
by
by
enabling
enabling
Firestore
firestore
in
in
this
this
project.
project
Go
go
ahead
ahead
and
and
start
start
it
it
in
in
test
test
mode,
mode
which
which
means
means
anybody
anybody
can
can
read
read
or
or
write
write
to
to
the
the
database,
database
and
and
then
then
we'll
we'll
come
come
back
back
and
and
set
set
security
security
rules
rules
for
for
it
it
later
later
on.
on
Now
now
that
that
that's
that's
done,
done
let's
let's
get
get
familiar
familiar
with
with
the
the
Firestore
firestore
management
management
console.
console
This
this
is
is
a
a
place
place
where
where
you,
you
the
the
super
super
admin
admin
developer,
developer
can
can
manage
manage
any
any
the
the
data
data
in
in
the
the
database.
database
The
the
first
first
thing
thing
we
we
wanna
wanna
do
do
is
is
create
create
a
a
new
new
collection.
collection
We'll
we'll
give
give
it
it
a
a
plural
plural
name
name
like
like
things.
things
And
and
then
then
inside
inside
that
that
collection,
collection
we'll
we'll
add
add
the
the
first
first
document.
document
Every
every
document
document
in
in
a
a
collection
collection
needs
needs
to
to
have
have
a
a
unique
unique
ID.
id
Firestore
firestore
can
can
create
create
one
one
automatically,
automatically
or
or
you
you
can
can
manually
manually
create
create
one
one
to
to
handle
handle
different
different
data
data
modeling
modeling
relationships.
relationships
Flips.
flips
The
the
document
document
is
is
where
where
you
you
store
store
all
all
of
of
your
your
data
data
in
in
a
a
series
series
of
of
key
key
value
value
pairs,
pairs
similar
similar
to
to
a
a
JavaScript
javascript
object.
object
This
this
document
document
might
might
have
have
a
a
name
name
field
field
where
where
the
the
value
value
is
is
a
a
string
string
and
and
and
and
await
await
where
where
the
the
value
value
is
is
a
a
number.
number
You
you
can
can
name
name
these
these
fields
fields
whatever
whatever
you
you
want,
want
but
but
it's
it's
important
important
to
to
keep
keep
that
that
consistent
consistent
across
across
documents
documents
because
because
that's
that's
what
what
you
you
use
use
to
to
query
query
them.
them
For
for
sample,
sample
if
if
we
we
have
have
multiple
multiple
documents
documents
in
in
this
this
database,
database
we
we
can
can
find
find
this
this
upside
upside
down
down
pyramid
pyramid
icon
icon
here
here
in
in
the
the
collection.
collection
This
this
allows
allows
us
us
to
to
experiment
experiment
with
with
different
different
queries.
queries
If
if
we
we
go
go
ahead
ahead
and
and
open
open
up
up
the
the
panel,
panel
we
we
first
first
choose
choose
a
a
field
field
to
to
filter
filter
by,
by
which
which
in
in
this
this
case
case
is
is
weight.
weight
And
and
then
then
we
we
have
have
a
a
number
number
of
of
different
different
query
query
operators
operators
we
we
use
use
to
to
handle
handle
the
the
filtering.
filtering
In
in
this
this
case,
case
we
we
want
want
all
all
the
the
documents
documents
where
where
the
the
weight
weight
is
is
greater
greater
than
than
5.
5
When
when
we
we
apply
apply
this
this
query,
query
you
you
can
can
see
see
it
it
filters
filters
out
out
just
just
the
the
one
one
document
document
where
where
the
the
weight
weight
is
is
greater
greater
than
than
5.
5
Now
now
since
since
one
one
of
of
these
these
documents
documents
has
has
a
a
weight
weight
of
of
5,
5
we
we
can
can
make
make
this
this
an
an
inclusive
inclusive
query
query
by
by
saying
saying
greater
greater
than
than
or
or
equal
equal
to
to
5.
5
When
when
we
we
update
update
the
the
query,
query
we
we
now
now
get
get
both
both
documents
documents
returned
returned
back
back
to
to
us.
us
Now
now
that
that
you
you
know
know
a
a
little
little
bit
bit
about
about
how
how
Firestore
firestore
works,
works
let's
let's
take
take
a
a
look
look
at
at
how
how
we
we
can
can
associate
associate
data
data
to
to
a
a
user
user
in
in
our
our
application.
application
If
if
we
we
go
go
into
into
our
our
HTML,
html
you
you
can
can
see
see
I
i
have
have
another
another
section
section
here
here
with
with
an
an
unordered
unordered
list
list
where
where
we'll
we'll
show
show
all
all
the
the
things
things
that
that
this
this
currently
currently
logged
logged
in
in
user
user
has
has
created.
created
We'll
we'll
give
give
the
the
user
user
a
a
way
way
to
to
create
create
a
a
new
new
random
random
thing
thing
in
in
the
the
database
database
by
by
simply
simply
clicking
clicking
on
on
this
this
button.
button
Here's
here's
a
a
pro
pro
tip.
tip
If
if
you
you
want
want
to
to
create
create
random
random
fake
fake
data
data
in
in
your
your
application,
application
check
check
out
out
this
this
library
library
called
called
Faker
faker
JS.
js
It's
it's
a
a
say
say
really
really
quick
quick
and
and
easy
easy
way
way
to
to
generate
generate
fake
fake
random
random
data
data
for
for
testing.
testing
Now
now
if
if
we
we
go
go
back
back
into
into
our
our
JavaScript,
javascript
we'll
we'll
first
first
make
make
a
a
reference
reference
to
to
the
the
Firebase
firebase
Firestore
firestore
SDK
sdk
as
as
the
the
variable
variable
DB.
db
Then
then
we'll
we'll
use
use
browser
browser
APIs
apis
to
to
grab
grab
our
our
create
create
thing
thing
button
button
as
as
well
well
as
as
the
the
things
things
list.
list
Now
now
there
there
are
are
generally
generally
2
2
things
things
you
you
need
need
when
when
accessing
accessing
data
data
from
from
Firestore
firestore
first
first
store
store
in
in
real
real
time.
time
The
the
first
first
thing
thing
is
is
a
a
reference
reference
to
to
the
the
document
document
or
or
collection
collection
that
that
you
you
wanna
wanna
access,
access
which
which
will
will
give
give
a
a
variable
variable
name
name
of
of
the
the
things
things
ref
ref
in
in
this
this
case.
case
The
the
reference
reference
is
is
a
a
starting
starting
point
point
to
to
create,
create
read,
read
update,
update
and
and
delete
delete
data
data
at
at
a
a
specific
specific
point
point
in
in
the
the
database.
database
Now
now
when
when
it
it
comes
comes
to
to
reading
reading
data
data
in
in
real
real
time,
time
our
our
front
front
end
end
UI
ui
will
will
always
always
react
react
to
to
changes
changes
that
that
happen
happen
on
on
the
the
server.
server
And
and
that
that
means
means
we'll
we'll
be
be
subscribed
subscribed
to
to
stream
stream
of
of
changes
changes
happening
happening
to
to
the
the
database,
database
and,
and
therefore,
therefore
we
we
want
want
to
to
set
set
a
a
second
second
variable
variable
here
here
called
called
unsubscribe
unsubscribe
so
so
we
we
can
can
tell
tell
the
the
app
app
when
when
to
to
stop
stop
listening
listening
to
to
this
this
real
real
time
time
stream.
stream
If
if
you
you
don't
don't
unsubscribe
unsubscribe
from
from
your
your
data,
data
it
it
could
could
lead
lead
to
to
memory
memory
leaks
leaks
and
and
also
also
unnecessary
unnecessary
costs
costs
by
by
reading
reading
and
and
listening
listening
to
to
documents
documents
that
that
you
you
don't
don't
actually
actually
need
need
for
for
the
the
UI.
ui
Now
now
in
in
this
this
demo,
demo
we
we
want
want
our
our
database
database
records
records
to
to
only
only
be
be
accessible
accessible
by
by
the
the
currently
currently
logged
logged
in
in
user.
user
And
and
that
that
means
means
before
before
we
we
make
make
a
a
reference
reference
to
to
the
the
database,
database
we
we
need
need
to
to
check
check
the
the
authentication
authentication
state
state
of
of
the
the
current
current
user.
user
We
we
can
can
use
use
the
the
on
on
auth
auth
state
state
change
change
callback
callback
just
just
like
like
we
we
did
did
in
in
the
the
previous
previous
section.
section
We'll
we'll
set
set
set
set
everything
everything
up
up
when
when
the
the
user
user
is
is
logged
logged
in.
in
And
and
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
create
create
that
that
reference
reference
to
to
the
the
database
database
by
by
calling
calling
db
db
collection
collection
things.
things
Now
now
that
that
we
we
have
have
that
that
reference,
reference
we
we
can
can
register
register
event
event
handler
handler
on
on
the
the
click
click
event
event
on
on
our
our
create
create
thing
thing
button.
button
There
there
are
are
several
several
different
different
ways
ways
you
you
can
can
create
create
data,
data
but
but
when
when
you
you
have
have
a
a
reference
reference
to
to
a
a
collection,
collection
the
the
add
add
method
method
will
will
simply
simply
add
add
a
a
new
new
document
document
to
to
that
that
collection
collection
and
and
automatically
automatically
generate
generate
the
the
unique
unique
ID.
id
The
the
add
add
method
method
takes
takes
a
a
JavaScript
javascript
object
object
as
as
its
its
argument,
argument
and
and
this
this
is
is
the
the
actual
actual
data
data
that
that
will
will
be
be
saved
saved
on
on
your
your
document
document
in
in
the
the
database.
database
Now
now
the
the
way
way
we
we
associate
associate
a
a
document
document
with
with
a
a
user
user
is
is
by
by
making
making
a
a
reference
reference
to
to
their
their
user
user
ID
id
on
on
the
the
document
document
itself.
itself
That
that
way
way
we
we
can
can
query
query
all
all
of
of
the
the
documents
documents
that
that
have
have
the
the
corresponding
corresponding
user
user
ID.
id
From
from
there,
there
we'll
we'll
add
add
a
a
name
name
field
field
to
to
the
the
document
document
with
with
just
just
a
a
random
random
product
product
name
name
using
using
faker.
faker
Now
now
now
now
one
one
other
other
thing
thing
you
you
might
might
want
want
to
to
do
do
is
is
save
save
a
a
timestamp
timestamp
of
of
when
when
this
this
document
document
was
was
created.
created
A
a
common
common
pitfall
pitfall
when
when
doing
doing
front
front
end
end
development
development
is
is
to
to
use
use
a
a
regular
regular
JavaScript
javascript
date
date
object.
object
But
but
what
what
you
you
should
should
understand
understand
is
is
that
that
the
the
date
date
object
object
is
is
not
not
always
always
consistent
consistent
on
on
every
every
machine.
machine
So
so
what
what
you
you
should
should
do
do
for
for
consistent
consistent
time
time
stamps
stamps
is
is
use
use
the
the
Firebase
firebase
Firestore
firestore
field
field
value
value
server
server
timestamp.
timestamp
This
this
will
will
be
be
evaluated
evaluated
by
by
Firestore
firestore
to
to
ensure
ensure
that
that
the
the
date
date
is
is
always
always
the
the
same
same
across
across
all
all
client
client
devices.
devices
At
at
at
at
this
this
point,
point
we're
we're
able
able
to
to
create
create
data
data
in
in
our
our
database
database
from
from
the
the
front
front
end
end
application.
application
If
if
we
we
pull
pull
up
up
the
the
app,
app
making
making
sure
sure
that
that
we're
we're
logged
logged
in
in
and
and
click
click
on
on
the
the
create
create
random
random
item
item
button,
button
we
we
should
should
see
see
that
that
item
item
created
created
in
in
the
the
database
database
instantaneously.
instantaneously
But
but
the
the
real
real
magic
magic
of
of
Firestore
firestore
is
is
being
being
able
able
to
to
listen
listen
to
to
these
these
changes
changes
in
in
real
real
time
time
in
in
the
the
front
front
end
end
UI,
ui
and
and
and
and
the
the
way
way
you
you
do
do
that
that
is
is
by
by
making
making
a
a
query.
query
Now
now
when
when
you
you
make
make
a
a
query
query
in
in
Firestore,
firestore
it's
it's
going
going
to
to
return
return
a
a
function
function
that
that
you
you
can
can
use
use
to
to
unsubscribe
unsubscribe
from
from
that
that
query
query
later
later
on.
on
It's
it's
not
not
required,
required
but
but
a
a
very
very
good
good
idea
idea
to
to
name
name
that
that
variable
variable
something
something
like
like
unsubscribe
unsubscribe
and
and
then
then
use
use
it
it
when
when
the
the
state
state
of
of
the
the
app
app
changes
changes
like
like
when
when
the
the
user
user
signs
signs
out.
out
Using
using
reference,
reference
we
we
can
can
then
then
make
make
a
a
query
query
by
by
calling
calling
where
where
the
the
user
user
ID
id
equals
equals
the
the
current
current
user's
user's
user
user
ID.
id
That
that
will
will
give
give
us
us
only
only
the
the
documents
documents
that
that
this
this
particular
particular
user
user
has
has
created.
created
To
to
get
get
a
a
real
real
time
time
stream
stream
of
of
all
all
the
the
changes
changes
to
to
this
this
query
query
we
we
call
call
on
on
snapshot.
snapshot
But
but
if
if
we
we
only
only
wanted
wanted
to
to
read
read
this
this
data
data
once,
once
we
we
could
could
use
use
get
get
instead.
instead
With
with
on
on
snapshot,
snapshot
we
we
provide
provide
a
a
callback
callback
function
function
that
that
will
will
be
be
called
called
anytime
anytime
the
the
underlying
underlying
data
data
changes.
changes
It
it
gives
gives
us
us
access
access
to
to
the
the
query
query
snapshot,
snapshot
which
which
is
is
an
an
object
object
that
that
contains
contains
an
an
array
array
of
of
documents
documents
that
that
we
we
can
can
use
use
to
to
update
update
the
the
UI
ui
with
with
the
the
most
most
recent
recent
data.
data
The
the
way
way
I'll
i'll
handle
handle
it
it
in
in
this
this
case
case
is
is
by
by
taking
taking
the
the
array
array
of
of
documents
documents
and
and
mapping
mapping
it
it
down
down
to
to
an
an
array
array
of
of
list
list
items
items
that
that
we
we
can
can
show
show
in
in
the
the
HTML.
html
For
for
each
each
document
document
that's
that's
returned
returned
in
in
the
the
query,
query
we'll
we'll
create
create
a
a
list
list
item.
item
And
and
then
then
inside
inside
that
that
list
list
item,
item
we
we
can
can
get
get
the
the
actual
actual
data
data
on
on
the
the
document
document
by
by
calling
calling
doc
doc
data
data
and
and
then
then
we'll
we'll
reference
reference
the
the
name
name
field.
field
And
and
then
then
lastly,
lastly
we'll
we'll
update
update
the
the
HTML
html
by
by
setting
setting
the
the
inner
inner
HTML
html
of
of
our
our
things
things
list
list
few
few
these
these
items
items
join
join
together
together
as
as
a
a
string.
string
Now
now
when
when
we
we
go
go
back
back
to
to
our
our
demo,
demo
you
you
can
can
see
see
that
that
the
the
things
things
list
list
is
is
updated
updated
in
in
the
the
actual
actual
UI
ui
every
every
time
time
we
we
create
create
a
a
new
new
record.
record
Now
now
cool
cool
thing
thing
about
about
this
this
is
is
no
no
matter
matter
where
where
this
this
data
data
update
update
takes
takes
place,
place
whether
whether
it's
it's
on
on
the
the
server
server
or
or
some
some
other
other
application,
application
it'll
it'll
be
be
updated
updated
in
in
this
this
UI
ui
as
as
well.
well
You
you
can
can
see
see
see
see
when
when
I
i
delete
delete
all
all
the
the
documents
documents
here
here
on
on
the
the
server,
server
those
those
changes
changes
are
are
reflected
reflected
instantaneously
instantaneously
in
in
the
the
front
front
end
end
app
app
as
as
well.
well
So
so
that
that
was
was
pretty
pretty
easy,
easy
but
but
it
it
gets
gets
even
even
easier
easier
when
when
you
you
use
use
a
a
front
front
end
end
framework.
framework
Now
now
before
before
we
we
move
move
on,
on
there's
there's
a
a
couple
couple
of
of
other
other
things
things
you
you
should
should
know
know
about
about
Firestore.
firestore
In
in
many
many
cases,
cases
you
you
might
might
want
want
to
to
make
make
what's
what's
known
known
as
as
a
a
compound
compound
query.
query
That's
that's
when
when
you
you
chain
chain
multiple
multiple
operations
operations
together
together
on
on
the
the
same
same
query.
query
For
for
example,
example
we
we
could
could
do
do
that
that
here
here
by
by
adding
adding
the
the
order
order
by
by
method
method
to
to
order
order
by
by
the
the
created
created
at
at
field.
field
But
but
when
when
we
we
do
do
and
and
go
go
back
back
to
to
the
the
application,
application
you
you
can
can
see
see
our
our
data
data
is
is
no
no
longer
longer
listed
listed
there.
there
And
and
if
if
we
we
open
open
the
the
console,
console
we
we
get
get
an
an
error
error
message
message
saying
saying
that
that
we
we
need
need
a
a
composite
composite
put
put
index.
index
In
in
order
order
to
to
scale
scale
infinitely
infinitely
in
in
the
the
cloud,
cloud
certain
certain
queries
queries
need
need
a
a
composite
composite
index.
index
So
so
in
in
this
this
case,
case
we
we
can
can
create
create
it
it
by
by
simply
simply
following
following
the
the
link
link
in
in
the
the
error
error
message,
message
and
and
it
it
will
will
take
take
us
us
to
to
the
the
Firebase
firebase
console
console
to
to
create
create
the
the
index
index
to
to
support
support
that
that
query.
query
Now
now
the
the
other
other
thing
thing
to
to
keep
keep
in
in
mind
mind
that
that
I've
i've
already
already
mentioned
mentioned
is
is
to
to
make
make
sure
sure
to
to
unsubscribe
unsubscribe
from
from
your
your
data
data
when
when
it's
it's
no
no
longer
longer
needed.
needed
For
for
for
for
this
this
feature,
feature
it
it
would
would
make
make
sense
sense
to
to
unsubscribe
unsubscribe
when
when
the
the
user
user
is
is
no
no
longer
longer
logged
logged
in.
in
So
so
we're
we're
already
already
checking
checking
for
for
the
the
user
user
authentication
authentication
state,
state
which
which
means
means
we
we
can
can
just
just
add
add
an
an
else
else
statement
statement
here
here
and
and
unsubscribe
unsubscribe
if
if
that
that
unsubscribe
unsubscribe
function
function
is
is
defined.
defined
Now
now
the
the
final
final
but
but
most
most
important
important
thing
thing
to
to
understand
understand
here
here
is
is
how
how
security
security
works.
works
So
so
even
even
even
even
though
though
we're
we're
filtering
filtering
the
the
items
items
by
by
the
the
logged
logged
in
in
user,
user
they're
they're
still
still
not
not
secure.
secure
Anybody
anybody
could
could
run
run
this
this
code
code
and
and
get
get
the
the
items
items
that
that
are
are
privately
privately
owned
owned
by
by
the
the
logged
logged
in
in
user.
user
If
if
if
if
you're
you're
building
building
a
a
serious
serious
application,
application
you
you
absolutely
absolutely
need
need
to
to
have
have
full
full
stack
stack
security
security
rules
rules
in
in
place
place
to
to
prevent
prevent
things
things
like
like
this.
this
We
we
can
can
easily
easily
handle
handle
this
this
by
by
going
going
to
to
the
the
rules
rules
tab
tab
from
from
the
the
Firestore
firestore
console.
console
Pull.
pull
Rules
rules
have
have
their
their
own
own
special
special
syntax
syntax
and
and
they're
they're
designed
designed
to
to
make
make
it
it
really
really
easy
easy
to
to
implement
implement
security
security
logic
logic
for
for
your
your
database.
database
The
the
first
first
thing
thing
we'll
we'll
wanna
wanna
do
do
is
is
secure
secure
the
the
entire
entire
database
database
by
by
allowing
allowing
rewrite
rewrite
to
to
be
be
false
false
across
across
the
the
entire
entire
database
database
and
and
then
then
we'll
we'll
allow
allow
things
things
selectively
selectively
based
based
on
on
where
where
they're
they're
needed.
needed
From
from
there,
there
we'll
we'll
reference
reference
the
the
things
things
collection
collection
and
and
then
then
use
use
braces
braces
to
to
represent
represent
every
every
document
document
in
in
that
that
collection
collection
as
as
a
a
wildcard
wildcard
with
with
its
its
document
document
ID.
id
In
in
order
order
for
for
a
a
user
user
to
to
be
be
able
able
to
to
write
write
to
to
this
this
collection,
collection
their
their
request
request
auth
auth
user
user
ID,
id
which
which
represents
represents
the
the
user
user
ID
id
of
of
the
the
currently
currently
logged
logged
in
in
user,
user
needs
needs
to
to
match
match
the
the
user
user
ID
id
that
that
they
they
want
want
to
to
save
save
to
to
the
the
database.
database
If
if
it's
it's
a
a
mismatch,
mismatch
then
then
Firestore
firestore
will
will
block
block
that
that
operation.
operation
In
in
other
other
words,
words
this
this
security
security
rule
rule
would
would
prevent
prevent
a
a
user
user
from
from
creating
creating
a
a
document
document
for
for
any
any
other
other
user.
user
When
when
when
when
it
it
comes
comes
to
to
reading
reading
documents,
documents
we
we
have
have
very
very
similar
similar
security
security
logic
logic
here.
here
But
but
instead
instead
of
of
looking
looking
at
at
the
the
request
request
data,
data
which
which
represents
represents
the
the
incoming
incoming
data,
data
we're
we're
looking
looking
at
at
for
for
resource
resource
data,
data
which
which
is
is
the
the
data
data
that
that
already
already
exists
exists
on
on
the
the
database.
database
So
so
in
in
this
this
case,
case
a
a
user
user
can
can
only
only
read
read
a
a
document
document
if
if
it
it
already
already
contains
contains
their
their
user
user
ID.
id
And
and
that's
that's
really
really
all
all
there
there
is
is
to
to
it.
it
You've
you've
now
now
built
built
a
a
full
full
stack
stack
authenticated
authenticated
secure
secure
application.
application
If
if
we
we
go
go
into
into
our
our
source
source
code
code
and
and
try
try
to
to
change
change
the
the
user
user
ID
id
and
and
then
then
make
make
it
it
right
right
to
to
the
the
database,
database
you'll
you'll
notice
notice
that
that
Firestore
firestore
blocks
blocks
it.
it
We've
we've
already
already
accomplished
accomplished
a
a
lot,
lot
but
but
we've
we've
barely
barely
scratched
scratched
the
the
surface
surface
of
of
Firebase.
firebase
Let's
let's
finish
finish
this
this
video
video
by
by
doing
doing
a
a
rapid
rapid
fire
fire
overview
overview
of
of
some
some
other
other
things
things
you'll
you'll
want
want
to
to
check
check
out.
out
When
when
building
building
a
a
complex
complex
application,
application
you
you
likely
likely
won't
won't
be
be
able
able
to
to
do
do
everything
everything
on
on
the
the
front
front
end.
end
You'll
you'll
still
still
need
need
to
to
write
write
some
some
server
server
side
side
code
code
to
to
interact
interact
with
with
APIs,
apis
run
run
background
background
jobs
jobs
and
and
things
things
like
like
that.
that
And
and
the
the
tool
tool
you
you
use
use
to
to
run
run
server
server
side
side
code
code
is
is
cloud
cloud
functions.
functions
When
when
you
you
have
have
something
something
you
you
want
want
done
done
on
on
the
the
server,
server
maybe
maybe
it's
it's
Python,
python
Node.
node
Js,
js
or
or
Go,
go
you
you
can
can
write
write
play
play
Cloud
cloud
Function
function
to
to
get
get
that
that
work
work
done.
done
In
in
addition,
addition
your
your
app
app
might
might
need
need
to
to
store
store
raw
raw
files
files
like
like
videos
videos
and
and
images.
images
Every
every
Firebase
firebase
project
project
comes
comes
with
with
a
a
built
built
print
print
storage
storage
bucket,
bucket
and
and
it
it
has
has
an
an
SDK
sdk
that
that
allows
allows
you
you
to
to
easily
easily
upload
upload
files
files
from
from
your
your
front
front
end
end
application
application
to
to
the
the
storage
storage
bucket.
bucket
If
if
you
you
you
you
do
do
upload
upload
files
files
here,
here
you
you
might
might
want
want
to
to
run
run
some
some
machine
machine
learning
learning
on
on
them,
them
like
like
text
text
recognition
recognition
or
or
image
image
labeling.
labeling
Firebase
firebase
has
has
a
a
ton
ton
of
of
built
built
in
in
machine
machine
learning
learning
APIs
apis
is
is
to
to
handle
handle
stuff
stuff
like
like
that.
that
And
and
another
another
awesome
awesome
thing
thing
to
to
keep
keep
an
an
eye
eye
on
on
is
is
Firebase
firebase
extensions.
extensions
This
this
is
is
a
a
relatively
relatively
new
new
feature
feature
that
that
allows
allows
developers
developers
to
to
extend
extend
the
the
functionality
functionality
of
of
Firebase
firebase
itself.
itself
For
for
example,
example
Stripe
stripe
payments
payments
just
just
recently
recently
released
released
its
its
own
own
extension
extension
to
to
make
make
it
it
easier
easier
for
for
developers
developers
to
to
accept
accept
payments
payments
in
in
their
their
Firebase
firebase
apps.
apps
The
the
bottom
bottom
line
line
here
here
is
is
that
that
Firebase
firebase
is
is
an
an
awesome
awesome
tool
tool
if
if
your
your
goal
goal
is
is
to
to
get
get
an
an
app
app
built
built
quickly
quickly
and
and
efficiently.
efficiently
Like
like
I
i
said
said
earlier,
earlier
there
there
is
is
nothing
nothing
quite
quite
like
like
it,
it
and
and
it's
it's
no
no
surprise
surprise
that
that
it's
it's
the
the
most
most
popular
popular
back
back
end
end
as
as
a
a
service
service
in
in
the
the
world.
world
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
be
be
looking
looking
out
out
for
for
more
more
advanced
advanced
and
and
framework
framework
specific
specific
play
play
Firebase
firebase
content
content
here
here
in
in
the
the
near
near
future.
future
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss the challenges of choosing the right tech stack for a product and emphasize the importance of minimizing decision fatigue. They recommend using the denies command and the developers category, and provide instructions on setting up a project in obtaining necessary information and creating an app. They also explain how to install the reminded file and use the implement the relevant file path, as well as managing users through the app. The speakers provide tips on creating a new collection and filtering data in the database, setting a reference to the current user's user ID, and handling changes to the database. They also discuss the use of Fir databases for real-time updates and the importance of building a full stack security rules to prevent certain queries.
Firebase - Back to the Basics
Choosing the right tech stack for your product in a world of unlimited possibilities is extremely challenging. Let's imagine you have an idea for the next $1,000,000,000 to do app. You may have a vision for how the end user experience will work. But behind the front end, you have a ton of technical decisions to make on the back end, like how do we authenticate users? Which database should we use. How do we run trusted code on a server? How do we handle security, analytics, and scale up as our user base grows? These decisions are hard to get right, and just thinking about them takes time, money, and energy that would be better spent focusing on the user experience. When it comes to minimizing decision fatigue, there's nothing quite like Firebase. It it contains everything most apps will need to build and run a production app at scale. This is what we call a back end as a service, where the idea is that you, the developer, write and maintain as little back end code as possible. It costs about $0 per month to run until your app builds active user base, and it's extremely developer friendly. The tool that lets you use the whole vast without scaling, cutting, or gutting. It's just that simple. When writing code with Firebase, you'll find that the SDKs are extremely well documented and highly optimized to get features built quickly. But, ultimately everything is a trade off. I've been using Firebase for 5 years, and there are certainly some drawbacks to the platform that we'll talk about as well. In today's beginner friendly tutorial, you'll learn everything you need to know about Firebase. You'll learn how to deploy a full stack web application to the cloud. The app will be able to authenticate users with their Google account, then allow that user to securely create data in the database. And anytime that user's data changes, it will be automatically reflected in the UI in real time. We'll we'll be using vanilla JavaScript for this tutorial. However, most people using Firebase are using a front end framework, like React, Angular, Flutter, and so on. I'll be releasing intro videos for those frameworks separately, so make sure to subscribe to catch those as well. Even if you're using one of those frameworks, I highly recommend going through this tutorial as well to get a full understanding of how Firebase works at the base level. With that being said, let's go ahead and jump right into things. The first thing you'll need is to have Node. Js installed on your local system. You can see here that I've opened up PS code to an empty directory. I'm entering the command node flag v to get the version of 10 dot 21. Any version greater than 8 should work just fine. If you don't have Node installed, I recommend using NVM or Node version manager to install the same version of Node that I'm using here. The next step is to create a Firebase project. You can sign in to Firebase with your Google account because Firebase is just an extension of Google Cloud Platform. Firebase is a lot of different things, but at its core, it's an SDK or software development kit that makes it easy for your front end app to connect to back end cloud infrastructure on Google Cloud. Now Now on GCP, all of your cloud infrastructure like databases, storage buckets, servers, and so on is organized into a project. A project might be connected to multiple apps. You might have a web app, iOS, and Android app that all share the same database and back end servers. Go ahead and create a new project, and then let's take a tour of the Firebase console. The console is simply awesome and basically serves as an admin area for all of your app infrastructure. As developers, the main area that we'll be focused on is the develop category. This is the actual cloud infrastructure that we need to build a full stack application. This this is the most important area to focus on, especially in the early stages of architecting an app. The next section is the quality category. This is where you'll focus when your app is getting ready to go to production. These tools help you optimize performance, detect crashes, and distribute your app to testers. Once your app game's actual users you can analyze their behavior with analytics. This data is extremely powerful, and you can use it to segment your user base and custom tailor the user experience. You can use this analytics data to send push notifications or use remote config to change the actual appearance or behavior of your app based on the type user that's engaging with it. It's really powerful stuff. But to get to that point, you first need to create an app that people wanna use. In our case, we're building a web app. So the first thing we'll wanna in Firebase is go up here to the project settings and create a new web app. A Firebase project can actually have multiple web apps, so we'll wanna give it a nickname. When were finished. It will give us a script tag that references the Firebase SDK and adds our Firebase project credentials to link the web app to this Firebase project in the cloud. These credentials are perfectly okay to expose in your front end application, so don't worry about hiding them for security purposes. We'll talk more about how security works in Firebase in a few minutes. Go and copy the code snippet, then head back to Versus Code and create a public folder and add a file called index HTML to it. In the HTML file, you can type an exclamation point and then hit tab to quickly scaffold out a basic HTML page. Go ahead and paste the Firebase snippet in the head of the document. Now you'll notice in the comments, it has a to do to add SDKs for the Firebase products that we want to use. Firebase is modular, which means we can opt in or progressively enhance our app with the features that we want to use. If we're not using a feature, we don't need to include that extra dead code in our application, which would degrade performance. If we follow the link, we wanna find the CDN links for Firestore and Firebase auth. Those are the 2 features that we'll be using in today's demo. Go ahead and paste those script tags into the document. Now to simplify the application. I'm going to create an app dotjs file. From there, I'll create a script tag that references this file, and we'll use the defer attribute to make sure the script loads after the body elements have loaded. At this point, we can go into our app. Js file and console log firebase, which should be available as a global variable on the window. And now we can go into the browser and make sure everything's working as intended. Right click on the index. Html file and click copy path. Then then open up a web browser and paste the file path as the URL. You should get a blank HTML page, but if you open up the console using control shift j, you should see the Firebase SDK log there. And on that object, you should see Firestore and auth if your SDK is loaded properly. Okay. So now that we have Firebase installed in our front end code. The next thing I recommend doing is installing the Firebase command line tools and initializing this project which will connect your command line to the cloud. The CLI has all kinds of awesome tools built in, and what we'll use it for right now is to serve and then deploy our app to a real URL on the Internet. Go ahead and open up a terminal session and install the Firebase tools package using the global flag, making it globally available on your system. Once that's finished, you can run firebase login from the command line to log in to your Firebase account in the cloud. That'll bring up a pop up window for you to authenticate and you can now manage your Firebase project from the command line. Now if you're also using Versus Code, I would highly recommend installing the Firebase Explorer extension. This extension allows you to connect your Google account to Versus Code and manage all of your Firebase projects visually. It's extremely useful to have quick access to your database, face your various projects, cloud functions, and so on. So now that our command line is connected to Firebase, I'm going to go into our HTML and add a heading for my awesome app just so we have something to look at. Next, we'll run the firebase init command to configure Firebase in this project. 1st, first it wants to know which features we plan on using. For now, we'll go ahead and select hosting as well as emulators. You can use the space bar to make your selections. Hosting is where your front end web application will ultimately be deployed. It's basically a storage bucket that's available on the Internet served over a CDN, making your web app very fast everywhere in the world. Pricing is based on the number of gigabytes stored in your hosting account as well as the number of gigabytes that you transfer out to your users, which will, of course, increase with the amount of traffic that you have going to your site. The CLI ask you to use a project. Go ahead and use the project that you've already set up. The public directory is where all of our distribution code lives. Those are the files that the end user needs to view our application on the web. In this case, we just have a single HTML file. So we'll go ahead and set it up as a single page app. Then we'll select no when asked to overwrite that file. After that, it'll ask us a few questions for the emulator setup. I have an advanced breakdown of the Firebase Emulator on Fireship IO, but, basically, it's just a way for you to simulate proliferate Firebase services locally on your system. That means you can create database records and run Cloud functions without having to directly connect to the Cloud. We'll go ahead and stick to default options for the remaining CLI questions here. When it's finished, you'll notice it created 2 files here in the root of our project. 1st, the Firebase RC or resource config file just contains an identifier for our project in the cloud. And we also have the Firebase JSON file, which is a file that you can modify to customize the behavior of various Firebase services. When it comes to hosting, you can use this file to create redirects and rewrites to different URLs in your app, but that's beyond the scope of this video. If you want to run your app locally, there's 2 ways you can do it. You can open up the command line and run Firebase serve or you can run the Firebase emulators start command. In either case, it will serve your app locally on localhost 5000. You can now start developing your app and see the changes reflected here. Firebase also makes it extremely easy to deploy your app to a production URL. Go ahead and run the Firebase deploy command, and it will take the files in your public directory and upload them to a storage bucket in the cloud. It will automatically provision a hosting URL at web.app. If you follow that URL, you should now see your web app available on the real Internet. So that's pretty awesome. I don't think it can really get any easier than that. If you go to the hosting tab on the Firebase console. You can see the different versions that you've deployed there, and you can also connect your own custom domain here as well. And now we're ready to start building something cool. Let's start by getting a user logged into the application. Head back over to the Firebase console and find the authentication tab. Firebase auth is kind of like a read only database for your users. Currently, we don't have any users, but that'll be changing soon. If we wanted to add a user manually, we you could click the add user button and add one with an email and password here. When a new user signs up with our app, they'll have a record added here, and every user has a unique user ID. This UID is important because you'll often want to associate custom user data to it in your database, which we'll do in a few minutes here. There's a whole bunch of built in ways to sign in a user, but the easiest to implement is Google, which we can do by simply clicking the enable button. Now before we get back to our code, you might be wondering, how much is this going to cost me? The answer is nothing. Even if you have 10,000,000 users, the cost is 0, and that's pretty crazy, especially compared to other platforms. Now let's head over to our application code and see how we can get a user logged in to our web app. We'll start HTML and add some markup for the UI. Basically, we have 2 sections here, one for when the user is signed out and one for when the user is signed in. Each section will have a unique ID, and the signed in section will be hidden by default. In the signed out section, we'll add a button to sign in with Google. When the user clicks the button, it'll bring up a pop up window to sign in with their Google account. When that's done successfully, we'll show the signed in section that will contain their user details along with a sign out button. And just a little side note here, I'm using Bootstrap to give the UI a little more flavor. That part's completely optional and keep in mind you can find the full source code for this project on GitHub. Now we we can jump over to our JavaScript and start using the Firebase auth SDK. To reference auth, we call Firebase auth, and this part of the gives us access to a whole bunch of different methods to manage users within our app. What we wanna do here is sign a user in and then sign a user out when they click the corresponding buttons. The first thing we'll wanna do here is grab the HTML elements that we wanna interact with, which we can do by calling document get element by ID. This code is obviously pretty fully. It's imperative, and it's one of the main reasons that people generally choose to use a framework like React, Angular, or Vue to get things done on the web. But even if using a framework, it's important to understand how these low level browser APIs work. Now in our case, we want the user to be able to log in with their Google account, and that's a functionality that's built into Firebase. To use it, we first declare a variable and set it equal to a Firebase auth Google provider instance. Next, we register a click handler for our sign in button. This is just a function that calls the Firebase auth sign in with pop up method using that provider as the argument. Many apps have multiple sign in providers like Facebook, Apple, etcetera, allowing you to reuse the same logic across multiple sign in providers. Now let's go ahead and test it out. When you open up your app on local host 5000, you should see the sign in button. When clicked, it should prompt you to log in with your Google account. At this point, you'll notice that nothing actually changes in our UI, but a couple of important things happened here and the user is, in fact, logged into the application at this point. On the back end Firebase created something known as a JSON Web Token to manage the authentication state. If you go into the application section of the browser's dev tools, you'll notice that Fire base saved a record here that has information about the logged in user, like an email address, user ID, and so on. I'll show you how to access all these values in your application next. And it's also worth noting that the Firebase user is created in the Firebase dashboard as well. You can use that to manage the user, disable, or delete the account if you need to. Now back in our JavaScript code, there's one thing you should understand. The sign in and sign out methods are one off operations. They return a promise, and once they're called, they they do something asynchronous and then they're done. But the user authentication state is something that can change multiple times throughout the life cycle of the application. And usually you want your app to react with changes to the UI when that happens. The way you do that in Firebase is by listening to on off state changed. Anytime the user signs in or signs out, the callback function passed to this method will be called. The callback function gives you access to the currently logged in user, and that means you can provide traditional logic to show UI when the user's logged in or something else when the user's logged out. When the user object is defined, we know the user signed in, in which case we'll want to show the signed in template, and then we can add some custom user details to the UI using that user object. The user object is the same thing that we looked at in the browser's application tab just a minute ago. In this case, we'll interpolate the user's display name and also their unique user ID. If the user object is null, then we'll simply hide add the signed in template and set the user details to an empty string. And now if we open up our web app and sign in, you'll see that the UI updates reactively. As as you can see, it's showing my display name from Google as well as my unique user ID. And when we click the sign out button, the UI goes back to its original state. And that's pretty awesome because we just accomplished a lot with very little code. And now we're ready to move on to what's probably the most important part of your application, the database. Out of the box, Firebase provides 2 NoSQL databases, real time database, and Firestore. In this video, we'll be focusing on Firestore, which tends to be the better option for most use cases. It's very similar to MongoDB, which is a document oriented database. Basically, you have a set of collections where each collection is a container for multiple documents and then you can make queries across all of the documents in a collection. There's there's no schema, which means the database is very flexible and easy to use, but that's both a good and bad thing. Unlike an SQL database where you do have a schema, it's a lot easier with something like Firestore to make mistakes with data modeling and things like that. In fact, I've dedicated an entire course just to data modeling because it's such an important topic. Now if if you're just getting started with Firebase, don't worry about that. Just experiment and have fun with it. Another awesome thing about Firestore is that it's real time by default. When we integrate it into our front end application, everything will stay updated with the back end server database in real time without any effort on our part. It's pretty awesome stuff. Now Firestore is not a free service, although it does have a free quota that you can use every month. When you go over the quota, you'll be charged primarily based on the number of reads, writes, and gigabytes transferred outside the network. Let's get things started by enabling Firestore in this project. Go ahead and start it in test mode, which means anybody can read or write to the database, and then we'll come back and set security rules for it later on. Now that that's done, let's get familiar with the Firestore management console. This is a place where you, the super admin developer, can manage any the data in the database. The first thing we wanna do is create a new collection. We'll give it a plural name like things. And then inside that collection, we'll add the first document. Every document in a collection needs to have a unique ID. Firestore can create one automatically, or you can manually create one to handle different data modeling relationships. Flips. The document is where you store all of your data in a series of key value pairs, similar to a JavaScript object. This document might have a name field where the value is a string and and await where the value is a number. You can name these fields whatever you want, but it's important to keep that consistent across documents because that's what you use to query them. For sample, if we have multiple documents in this database, we can find this upside down pyramid icon here in the collection. This allows us to experiment with different queries. If we go ahead and open up the panel, we first choose a field to filter by, which in this case is weight. And then we have a number of different query operators we use to handle the filtering. In this case, we want all the documents where the weight is greater than 5. When we apply this query, you can see it filters out just the one document where the weight is greater than 5. Now since one of these documents has a weight of 5, we can make this an inclusive query by saying greater than or equal to 5. When we update the query, we now get both documents returned back to us. Now that you know a little bit about how Firestore works, let's take a look at how we can associate data to a user in our application. If we go into our HTML, you can see I have another section here with an unordered list where we'll show all the things that this currently logged in user has created. We'll give the user a way to create a new random thing in the database by simply clicking on this button. Here's a pro tip. If you want to create random fake data in your application, check out this library called Faker JS. It's a say really quick and easy way to generate fake random data for testing. Now if we go back into our JavaScript, we'll first make a reference to the Firebase Firestore SDK as the variable DB. Then we'll use browser APIs to grab our create thing button as well as the things list. Now there are generally 2 things you need when accessing data from Firestore first store in real time. The first thing is a reference to the document or collection that you wanna access, which will give a variable name of the things ref in this case. The reference is a starting point to create, read, update, and delete data at a specific point in the database. Now when it comes to reading data in real time, our front end UI will always react to changes that happen on the server. And that means we'll be subscribed to stream of changes happening to the database, and, therefore, we want to set a second variable here called unsubscribe so we can tell the app when to stop listening to this real time stream. If you don't unsubscribe from your data, it could lead to memory leaks and also unnecessary costs by reading and listening to documents that you don't actually need for the UI. Now in this demo, we want our database records to only be accessible by the currently logged in user. And that means before we make a reference to the database, we need to check the authentication state of the current user. We can use the on auth state change callback just like we did in the previous section. We'll set set everything up when the user is logged in. And the first thing we'll do is create that reference to the database by calling db collection things. Now that we have that reference, we can register event handler on the click event on our create thing button. There are several different ways you can create data, but when you have a reference to a collection, the add method will simply add a new document to that collection and automatically generate the unique ID. The add method takes a JavaScript object as its argument, and this is the actual data that will be saved on your document in the database. Now the way we associate a document with a user is by making a reference to their user ID on the document itself. That way we can query all of the documents that have the corresponding user ID. From there, we'll add a name field to the document with just a random product name using faker. Now now one other thing you might want to do is save a timestamp of when this document was created. A common pitfall when doing front end development is to use a regular JavaScript date object. But what you should understand is that the date object is not always consistent on every machine. So what you should do for consistent time stamps is use the Firebase Firestore field value server timestamp. This will be evaluated by Firestore to ensure that the date is always the same across all client devices. At at this point, we're able to create data in our database from the front end application. If we pull up the app, making sure that we're logged in and click on the create random item button, we should see that item created in the database instantaneously. But the real magic of Firestore is being able to listen to these changes in real time in the front end UI, and and the way you do that is by making a query. Now when you make a query in Firestore, it's going to return a function that you can use to unsubscribe from that query later on. It's not required, but a very good idea to name that variable something like unsubscribe and then use it when the state of the app changes like when the user signs out. Using reference, we can then make a query by calling where the user ID equals the current user's user ID. That will give us only the documents that this particular user has created. To get a real time stream of all the changes to this query we call on snapshot. But if we only wanted to read this data once, we could use get instead. With on snapshot, we provide a callback function that will be called anytime the underlying data changes. It gives us access to the query snapshot, which is an object that contains an array of documents that we can use to update the UI with the most recent data. The way I'll handle it in this case is by taking the array of documents and mapping it down to an array of list items that we can show in the HTML. For each document that's returned in the query, we'll create a list item. And then inside that list item, we can get the actual data on the document by calling doc data and then we'll reference the name field. And then lastly, we'll update the HTML by setting the inner HTML of our things list few these items join together as a string. Now when we go back to our demo, you can see that the things list is updated in the actual UI every time we create a new record. Now cool thing about this is no matter where this data update takes place, whether it's on the server or some other application, it'll be updated in this UI as well. You can see see when I delete all the documents here on the server, those changes are reflected instantaneously in the front end app as well. So that was pretty easy, but it gets even easier when you use a front end framework. Now before we move on, there's a couple of other things you should know about Firestore. In many cases, you might want to make what's known as a compound query. That's when you chain multiple operations together on the same query. For example, we could do that here by adding the order by method to order by the created at field. But when we do and go back to the application, you can see our data is no longer listed there. And if we open the console, we get an error message saying that we need a composite put index. In order to scale infinitely in the cloud, certain queries need a composite index. So in this case, we can create it by simply following the link in the error message, and it will take us to the Firebase console to create the index to support that query. Now the other thing to keep in mind that I've already mentioned is to make sure to unsubscribe from your data when it's no longer needed. For for this feature, it would make sense to unsubscribe when the user is no longer logged in. So we're already checking for the user authentication state, which means we can just add an else statement here and unsubscribe if that unsubscribe function is defined. Now the final but most important thing to understand here is how security works. So even even though we're filtering the items by the logged in user, they're still not secure. Anybody could run this code and get the items that are privately owned by the logged in user. If if you're building a serious application, you absolutely need to have full stack security rules in place to prevent things like this. We can easily handle this by going to the rules tab from the Firestore console. Pull. Rules have their own special syntax and they're designed to make it really easy to implement security logic for your database. The first thing we'll wanna do is secure the entire database by allowing rewrite to be false across the entire database and then we'll allow things selectively based on where they're needed. From there, we'll reference the things collection and then use braces to represent every document in that collection as a wildcard with its document ID. In order for a user to be able to write to this collection, their request auth user ID, which represents the user ID of the currently logged in user, needs to match the user ID that they want to save to the database. If it's a mismatch, then Firestore will block that operation. In other words, this security rule would prevent a user from creating a document for any other user. When when it comes to reading documents, we have very similar security logic here. But instead of looking at the request data, which represents the incoming data, we're looking at for resource data, which is the data that already exists on the database. So in this case, a user can only read a document if it already contains their user ID. And that's really all there is to it. You've now built a full stack authenticated secure application. If we go into our source code and try to change the user ID and then make it right to the database, you'll notice that Firestore blocks it. We've already accomplished a lot, but we've barely scratched the surface of Firebase. Let's finish this video by doing a rapid fire overview of some other things you'll want to check out. When building a complex application, you likely won't be able to do everything on the front end. You'll still need to write some server side code to interact with APIs, run background jobs and things like that. And the tool you use to run server side code is cloud functions. When you have something you want done on the server, maybe it's Python, Node. Js, or Go, you can write play Cloud Function to get that work done. In addition, your app might need to store raw files like videos and images. Every Firebase project comes with a built print storage bucket, and it has an SDK that allows you to easily upload files from your front end application to the storage bucket. If you you do upload files here, you might want to run some machine learning on them, like text recognition or image labeling. Firebase has a ton of built in machine learning APIs is to handle stuff like that. And another awesome thing to keep an eye on is Firebase extensions. This is a relatively new feature that allows developers to extend the functionality of Firebase itself. For example, Stripe payments just recently released its own extension to make it easier for developers to accept payments in their Firebase apps. The bottom line here is that Firebase is an awesome tool if your goal is to get an app built quickly and efficiently. Like I said earlier, there is nothing quite like it, and it's no surprise that it's the most popular back end as a service in the world. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and be looking out for more advanced and framework specific play Firebase content here in the near future. Thanks for watching, and I will see you in the next one.
The speakers discuss the challenges of choosing the right tech stack for a product and emphasize the importance of minimizing decision fatigue. They recommend using the denies command and the developers category, and provide instructions on setting up a project in obtaining necessary information and creating an app. They also explain how to install the reminded file and use the implement the relevant file path, as well as managing users through the app. The speakers provide tips on creating a new collection and filtering data in the database, setting a reference to the current user's user ID, and handling changes to the database. They also discuss the use of Fir databases for real-time updates and the importance of building a full stack security rules to prevent certain queries.