Firebase Auth Basics

0:06Hi, everyone, Shaun Wassell here.

0:08Probably one of the biggest questions

0:09I get asked by people who are already familiar with React

0:13and basic Full-Stack concepts is, how do I

0:16add user authentication to my applications

0:19in the quickest and most secure way possible?

0:22In other words, how do I add user authentication to my apps

0:26without all of that added complexity that

0:28generally comes along with it?

0:30Well, almost always, my response to that question

0:33is two words, Firebase Auth.

0:36Firebase Auth is a service provided by Google

0:38that makes it incredibly easy to add user authentication

0:41to your applications without having

0:43to manage any of the difficult stuff yourself.

0:45And that's what we're going to be taking a look at here today.

0:48We're going to be seeing the basics of Firebase Auth

0:51and how to add it to a React application

0:54in order to allow ourselves to let our users log in.

0:57And we're also going to be seeing

0:58how to create routes that will only allow certain users to see

1:03the pages they contain.

1:04So without further ado, let's jump right in

1:07and see what all this stuff is going to look like.

0:01[MUSIC PLAYING]

0:08All right, so before we start seeing

0:10how to incorporate Firebase Auth into a React app

0:13and how it lets us actually add user authentication to an app,

0:18let's talk a little bit about what

0:19Firebase is in the first place.

0:22So think about Firebase as kind of a user-friendly wrapper

0:26around Google Cloud platform.

0:28If any of you have ever used GCP or Amazon Web Services or Azure

0:33or one of those other providers before,

0:35chances are you've found that it's actually quite difficult

0:39to set up an application and make sure

0:41that it's performant and ready to serve thousands,

0:44if not millions, of users.

0:46That's why those kind of certifications exist.

0:49Because there's a lot you have to learn in order

0:51to make a lot of that stuff work.

0:53So what Firebase is essentially a wrapper around GCP,

0:57as I said, that takes care of a lot of that for you.

1:01And it has a lot of different products that are available.

1:04It's got Firebase Auth, which is what

1:06we're going to be taking a look at here today.

1:08And it's also got other things like database providers,

1:11which is called Firestore.

1:13It's got a storage solution, which is called Cloud storage.

1:17There's a lot of other options for products

1:19that you can use on here.

1:20But right now, we're just going to be taking a look at Firebase

1:23Auth, which as you may have guessed,

1:25is Firebase's user authentication provider.

1:30So let's talk about some of the benefits of Firebase Auth.

1:35First of all, one of the main benefits of Firebase Auth

1:38is that it is free.

1:40And yes, this is probably just to get

1:42you hooked on Firebase Auth and start

1:44using some of the other paid products

1:46that Firebase provides.

1:47But hey, I'll take it.

1:49This is something you generally don't

1:51get from other Auth providers.

1:54Now the one exception to this is, of course,

1:56if you're using cell phone authentication,

1:59that kind of stuff, in which case it costs you money.

2:02Because you're actually sending texts to users phones.

2:05But in general, for any kind of password-based authentication,

2:10for OAuth, et cetera, Firebase Auth

2:12is free, regardless of how many users you have.

2:17So that's the first main benefit.

2:19The second main benefit is that Firebase Auth

2:21takes care of nearly all the complexity

2:24behind implementing user authentication.

2:26So user authentication is obviously a very complex thing.

2:30And you have to worry about lots of security things

2:35that really has a huge influence on how your company behaves.

2:40If you're creating a startup, you

2:42have to worry about keeping all your data secure, et cetera.

2:45And those are things that you have to worry about anyway.

2:47But the fact that you can just kind of

2:50give Firebase your users, passwords, emails, et cetera,

2:54and know that you have Google protecting all of that--

2:57you have basically a team of people

2:58who spend all day every day, making sure

3:01that those things are secure--

3:03that to me, is a very comforting thought.

3:04So security is the second main benefit of Firebase Auth.

3:11It makes it so that you don't have

3:12to implement your own authentication,

3:14you don't have to store users passwords, et cetera.

3:17And the third main benefit of Firebase Auth

3:19is that in general, it's incredibly easy to use.

3:24Now what you're going to see when we actually

3:26add this to a React project, is that essentially in order

3:30to log a user in Firebase, all you have to do

3:33is call a single Firebase function,

3:37which will actually log them in.

3:38And it'll take care of keeping track of all of the tokens,

3:42storing all that stuff in your browser,

3:44et cetera, behind the scenes, without you even

3:46having to think about it.

3:47Literally all you do is call Firebase's log in and log out

3:51functions to log a user in or out.

3:53Very straightforward-- and I think you're going to like it.

3:57So those are the main benefits of Firebase Auth.

3:59We're going to see these all in action.

4:01So let's jump into seeing how this is going

4:03to work in a React project.

4:06I hope this has been informative for you.

4:07And I'd like to thank you for viewing.

0:08OK, so now that we know what Firebase Auth is and some

0:11of its benefits, the next question

0:13is, how do we add it to a React application.

0:16Well, in order to answer this question, what

0:18we're going to do is we're going to create

0:20a new application from scratch.

0:21And we're going to see how to install Firebase,

0:24how to set it up, how to create the login pages that are

0:27necessary, and that's about it.

0:29So let's get started.

0:31We're going to generate our project

0:32by saying npx create-react-app.

0:35We're going to call this project firebase-auth-basics.

0:40And we're going to add the use use-npm

0:42flag, because we want to use npm as our package manager instead

0:45of Yarn.

0:46You don't have to do that, but that's

0:48going to be my preference here.

0:49So let's hit Enter, and that will generate a React

0:52project for us.

0:58And once that project's been created,

1:00the next thing that we're going to do is open it up in our IDE.

1:04What I'm going to do is just say cd firebase-auth-basics.

1:07And I'm going to open that up in Visual Studio Code.

1:12And there we have it.

1:13So what we're going to do first is

1:16we're going to create the pages of our application.

1:19And really right now, we're just going to have two main pages.

1:22We're going to have the Login page.

1:25OK, this is just going to be fairly straightforward.

1:27It's going to have text box for putting

1:30in the user's email and one for entering

1:32in their password and a button that will let them log in.

1:36And we're also going to have a Home page, which is just

1:40going to display some basic information about the user,

1:42right?

1:43So it'll display things like their email, their user

1:46ID, et cetera.

1:48And we'll see how to add some other stuff

1:49to this a little later on.

1:51But the main point of what we're going to be doing here,

1:55after we've created these two pages,

1:57is we're going to see how to make it

1:59so that only authenticated users can access the home

2:02page and only users who are not authenticated, right,

2:07users that need to log in, can access this Login page.

2:11So in other words, we're going to see

2:12how to specify routes that users can only access

2:16when auth-ed or unauth-ed.

2:18So in order to get started with that,

2:20let's create a new folder called Pages,

2:22which is going to contain all of the pages for our application.

2:26And inside here, we're going to create our LoginPage.js.

2:31And we're going to create our HomePage.js.

2:35And just as a side note, one thing

2:38that always kind of confuses me and throws me for a loop

2:41is the casing behind login.

2:44Now the difference here, the difference

2:46between Log In and Login is that Log In, this

2:57is supposed to be a verb, linguistically speaking,

3:02and this is supposed to be a noun.

3:04So essentially-- so in other words,

3:07when we say LoginPage up here at the top,

3:10we could really choose either, right?

3:12We could either say this is the page that

3:14allows users to Log In, as a verb,

3:17or we could say this is just the page where the Login happens.

3:23So anyway, I just wanted to point that out,

3:25because you might see that throughout this course.

3:30I end up using these interchangeably,

3:32and it can definitely cause a few typos and a few errors

3:35when you end up capitalizing an I

3:37and you say LogInPage instead of LoginPage

3:42with a lowercase I, et cetera.

3:44Stupid thing, but I just wanted to point that out.

3:47Anyway, let's get started creating our pages here.

3:51Each one of these is going to be fairly straightforward.

3:54For the login page, what we're going to do

3:56is we're just going to say import useState from react.

4:03We're going to be using this for our text inputs--

4:05right, the email and password text inputs.

4:10And then we're going to export our page by saying export const

4:14LoginPage.

4:16Again, we're using a lowercase I.

4:17If you want to use a capital I, be my guest.

4:21And it's not going to take any props.

4:23It's just going to basically return some jsx.

4:28OK, we're going to put this all inside a React fragment.

4:31OK, and then we're going to have an h1 heading

4:33where we say Login.

4:35And under that, we're going to have an input.

4:38The placeholder for this input will be "Enter your email...".

4:45And then we're going to have a value, which

4:47will be a State variable.

4:48And we'll also have onChange, which will be a state variable.

4:50We'll come back to those in just a minute here.

4:53Now underneath that, the next thing we're going to do

4:55is have another input, which is going to be a password input.

4:59So we'll want to add type="password" to this,

5:02so that it doesn't display the letters,

5:04it'll just show those little dots instead.

5:07And for this one, we're going to have the placeholder say "Enter

5:10your password..."

5:11And we'll have a State variable for that one as well.

5:15Now below these inputs we're just

5:16going to have a button, which, when clicked--

5:21we'll say onClick-- is going to basically call a special login

5:25function that will define up here.

5:27So we'll just say const logIn.

5:30And here's a case where we end up using this as a verb,

5:34because this is actually telling our component to log in.

5:39We're specifying it as an action.

5:41Again, stupid thing, don't worry too much about it,

5:44but I just wanted to point out why there's

5:46that case difference there.

5:48Anyway that's going to be called when this button is clicked,

5:51we're going to say logIn.

5:53And for this button, we'll also say Log In with a capital I,

5:58because, again, the text of buttons is usually a verb

6:01and Log In, two words, is the verb form of this.

6:05So anyway, that's our login button

6:09and the rest of our elements for our login page.

6:11So let's actually create the State variables for our email

6:14and password inputs.

6:16We're going to say const email and setEmail equals useState.

6:22You know the drill here, empty string.

6:25And for password, we're going to say const password,

6:27setPassword equals useState empty string.

6:34And then down here, we're going to say value email, onChange e.

6:40We're going to do setEmail, e.target.value.

6:43Same thing here for our password input,

6:46value is going to be equal to password and onChang

6:50is going to be setPassword to e.target.value.

6:55Pretty straightforward React form stuff.

6:58So the next thing that we're going to do--

7:00well, right now what I'll do is I'm just

7:02going to do something that you probably

7:04don't want to do in production.

7:05We're going to just display the email and password when

7:08the user clicks that button, just

7:10to make sure that we have everything hooked up correctly.

7:13We're just going to say alert, and we're

7:16going to say email, email and password, password.

7:28And that should happen again when we click on this Log In

7:30button here.

7:31So that's going to be our login page.

7:32And we'll test that in just a minute, when we add routes.

7:36But first, let's add a home page.

7:38For now, it's going to be super simple.

7:40We're just going to say export const HomePage equals--

7:45it's not going to take any props.

7:46And it's just going to say return.

7:48And we'll just have an h1 heading here that says Home.

7:53OK, so pretty straightforward stuff.

7:56The next thing we're going to do is actually add

7:58routes for each of these pages.

8:00And we're not going to do the thing yet where we actually

8:04prevent a user from going to a route

8:05if they're authenticated or not authenticated.

8:08But we will get to that very shortly.

8:10So first, we're going to need to install the React router DOM

8:15package.

8:16We've looked at this earlier.

8:17If you're not familiar with it, I

8:18recommend going back and taking a look at it.

8:21So first of all, we're going to say npm install

8:24react-router-dom and hit Enter.

8:29And that will install that package for us.

8:32So now all we have to do is-- we're just

8:33going to open up App.js and add routes

8:36for both our Login and Home pages.

8:38What that's going to look like-- we're just

8:40going to remove all of the basic boilerplate

8:44that they gave us when we generated our project.

8:47I'm just going to adjust the indentation here.

8:50There we go.

8:51And I'm going to delete the logo and App.css.

8:55And what we're going to do is just import the BrowserRouter

8:59as Router.

9:00We're going to import the Switch component

9:02and we're going to import the Route component

9:05from react-router-dom.

9:11And we're going to use those components to display

9:13both of our pages at their corresponding routes.

9:16So what this is going to look like,

9:18we're just going to wrap everything

9:19inside a BrowserRouter here--

9:22or Router, rather, since we renamed it up in the Imports.

9:25We're going to wrap everything in a Switch

9:27to make sure that only one of our routes displays at a time

9:30and that our routes re-render correctly

9:32when the route changes.

9:34That's something we'll talk about later on.

9:36And finally, we're going to display

9:37a route for each of these.

9:40We're going to say Route.

9:41For our home page, the path is going

9:43to just be a regular slash, and we're

9:45going to have to say exact there to make sure that only shows up

9:49when it's exactly that route.

9:51And under that, we're going to display

9:53our HomePage, which was just automatically imported for me.

9:57And next up, we're going to define

9:59a route for our login page.

10:01This one's going to look pretty simple.

10:02We're just going to say path=/login.

10:06We don't have to say exact there.

10:08And we're just going to display the LoginPage inside of there,

10:12which, again, was automatically imported.

10:16OK, and just to make sure that everything works,

10:18let's run our application now.

10:20We're going to say npm run start and hit Enter.

10:26And that should run our application for us.

10:30OK, so what we're going to see is that the home page shows up

10:32at localhost:3000.

10:34And if we go to localhost:3000/login,

10:38we'll see our beautiful little login page,

10:41which doesn't really have any styling or anything,

10:43but nevertheless, it'll work for our purposes.

10:46And also note that you probably won't see these little things

10:49here.

10:49That's just for my password manager,

10:51so just ignore those for now.

10:54So anyway, let's just enter in something for our email.

10:56I'm just going to say shaun@gmail.com.

10:59And for password, I'm just going to enter in something simple.

11:03And if we click Login now, we should

11:04see that we have both our email and our password that

11:08are being correctly picked up on by our login page.

11:12So those are the two pages for our application.

11:15I hope this has been informative for you

11:16and I'd like to thank you for viewing.

0:10So at this point, we have both our login page and home page,

0:13which are being displayed at their respective routes.

0:16So now, the question is how do we

0:18make it so that users can only visit the home

0:20page if they're authenticated?

0:22And they can only visit the login page

0:25if they're not authenticated?

0:27So there's actually a few different ways

0:29we could go about this.

0:31One way that we could go about this, which is generally

0:34considered to be the more complex and error-prone way,

0:38would be inside each page to actually check

0:42if a user is authenticated.

0:44And if they're not authenticated,

0:46then basically redirect them back to the login page

0:50and vice versa for the login page.

0:52We want to check if they're authenticated.

0:54If they're already authenticated,

0:55we want to send them to the home page.

0:58So the way that we can do this in React

1:00is by using a special component from the React router Dom

1:05package, which is called redirect.

1:07So essentially, what this redirect component does--

1:10I'm just going to import that here.

1:12Import redirect from React router Dom.

1:15Essentially what this component does

1:17is if it gets displayed inside JSX, inside the JSX

1:22of any component, it will try and redirect

1:25the entire application to a different URL.

1:29To show you what I mean here, let's imagine

1:31that our home page is checking to see whether or not

1:35our user is authenticated.

1:36For now, we'll just say const is authed equals false.

1:41Let's just imagine that they're not authenticated,

1:43so we'd want to redirect them.

1:45What we could do in this case, if we

1:47wanted to use this redirect component now,

1:49is we would basically say return is authed.

1:54And basically, if the user's authed,

1:56we're going to return the regular home page.

1:59Otherwise, what we would do is we would

2:02return the redirect component.

2:05Now, the redirect component, what it looks

2:07like when we display it in JSX.

2:09We say redirect, and it takes a single prop called to,

2:14and that will basically tell the application

2:16where to redirect to, as you might have guessed

2:20by the name of the prop.

2:21So essentially what this will do is if is authed is false,

2:26which, just for testing purposes,

2:28we've set it to false here, it will display

2:31this redirect component.

2:33Which will automatically redirect the user

2:35to wherever we specify here.

2:38So in other words, if is authed is false here,

2:41we're going to send the user back to the login page.

2:44To see what this looks like, what we're going to do--

2:47Our application's still running, so let's just

2:49head back and take a look.

2:50If we try and go now to localhost 3000,

2:55what we're going to see is that immediately it

2:58redirects us to the login page.

3:01So that's exactly what we want with that, so everything's

3:04working out well there.

3:06So let's do the opposite now with our login page.

3:09Our login page, what we could do,

3:12is we're going to do the same thing.

3:14We're going to import the redirect component

3:16from React router Dom.

3:18I'm not sure why it wanted to import that from React router

3:21because that wouldn't work.

3:23But anyway, the next thing that we're going to do

3:26is say const is authed, and again,

3:29just for testing purposes here, we're going to say equals true.

3:32So we're going to simulate what would happen if the user was

3:36already authenticated.

3:37And just to make this work, let's change is authed to true

3:40here as well, so that it doesn't get

3:44it stuck in an infinite loop of redirecting back and forth

3:46between these two pages.

3:49And then what we would do is we would just

3:51say return is authed.

3:55And if the user's already authed,

3:57in that case, what we want to do is display the redirect

4:01since we don't want the user to be

4:02able to visit the login page if they're already authenticated.

4:05So we're going to say redirect to,

4:08and we would send them to the home page in this case.

4:12And that's all we'd really have to do on this page.

4:14So the next thing, let's just test this out, I suppose.

4:18We'll try and go to /login and hit enter.

4:21And sure enough, it will just automatically redirect us

4:24to the home page.

4:26So that's one way of doing it, and as I said before,

4:31this is generally considered to be the more error-prone way

4:34of doing this.

4:34Now, you might wonder why that is

4:36because honestly, the logic that we've written here

4:39seems pretty simple.

4:40It's literally three lines that we've

4:42added to these components.

4:44Well, the reason that I don't recommend doing it this way

4:48is because in general, the logic for redirecting users

4:53and authenticating all that kind of stuff

4:55gets a lot more complicated than what we have here.

4:58This is the nice, clean, shiny, new application here

5:04that only has two or three lines for this logic.

5:07But in general, things can get pretty complex.

5:10Imagine that, let's say, different users

5:12had different permissions, and you only

5:14wanted admins to be able to visit a certain page.

5:17And you only wanted non-admins to be

5:19able to visit another page, and you only

5:21wanted members of some group to be

5:23able to visit the group page.

5:25So on and so forth.

5:27The point here is that with this kind of logic,

5:30we generally want to encapsulate it inside its own component.

5:34So that's what we're going to do.

5:35What we're going to do instead of actually having each page

5:38worry about its redirecting logic

5:41is inside our app component, we're

5:43actually going to use a different component

5:46than this route here.

5:47Essentially, we're going to just create

5:49our own component, which we'll call authed route

5:52and unauthed route.

5:54So we're going to create two here,

5:56and those are basically going to be what take care

5:59of all the redirecting logic.

6:00And that'll leave our pages free to just

6:03be happy, carefree little pages and not

6:06worry about all this big bad user authentication stuff.

6:10So let's see what that would look like.

6:13What we're going to do is create a new folder

6:15inside our source folder, which we'll call components here.

6:20And we're going to create two new components inside of here.

6:23One of them, as I said, is going to be called

6:25authed route, and the other one, we're

6:29just going to give it the name unauthed route.

6:32Not super creative, but it works,

6:34and here's what these are going to look like.

6:36Essentially, each of these, we're

6:39going to say export const authed route.

6:43Each of these components is going to take some props.

6:46First of all, it's going to take a prop specifying

6:49whether or not the user is authenticated.

6:51So we'll say is authed, and then it's

6:54just going to take the rest of the props that

6:56get passed to it.

6:57You'll see why it does this in just a second,

6:59but we do need to get all of those other props

7:02by using the spread operator here.

7:08So the next thing that we're going to do,

7:10we're going to use that same redirect component that we saw

7:13earlier from React router Dom.

7:15So we'll say import redirect from React router Dom.

7:20And all we're going to do for this authed route is

7:23we're going to check if the user's authed, and if they are,

7:26we're going to just return a regular route component.

7:31Otherwise, we're going to return a redirect component.

7:34So in other words, what we're going to do

7:37is say return is authed.

7:40We're going to use a ternary operator here,

7:43and we're going to say if the user is authed,

7:45we want to just display a regular route.

7:49And here's why we did the spread operator thing with the props.

7:52We're just going to pass all of the props through to our route

7:57component by saying ...props.

8:00And essentially, what that'll do is if the user is authed,

8:03this thing is just going to behave exactly

8:05like a regular route component.

8:10So that's if the user's authed, otherwise we

8:12want to display that redirect.

8:13So we're going to say redirect and send them

8:15to the login page, where they will have to put in their email

8:19and password.

8:22So that's our authed route.

8:23Our unauthed route is going to look

8:24almost identical to this one, except it's

8:27going to be reversed.

8:28So what I'm going to do is just copy and paste this code here,

8:31paste it into unauthed route.

8:33We're going to have to change the name here, unauthed route.

8:37And essentially, we're just going

8:39to reverse these things by putting

8:41the route below the redirect.

8:42So in other words, if the user's already authenticated,

8:45we're going to redirect to, and we're

8:47going to change this to the home page here.

8:50So if the user's already authed, we're

8:52going to send them to the home page.

8:54They don't need to be at this unauthed route.

8:56Otherwise, if the user is already authed,

8:59it's just going to behave exactly like a regular route.

9:03So now that we have our authed and unauthed route components,

9:08let's actually add those to our app component.

9:11And the way we're going to do that, we

9:12won't need this route anymore.

9:15I'm Just.

9:15Going to remove that.

9:17Oh, and actually, now that I--

9:19now that I've done that, I realized

9:20that we have to first import the route

9:22component into both our authed and unauthed routes.

9:25So let's just say import route from React router Dom.

9:31I'll want to put that right here.

9:33Redirect and route.

9:36And same thing for unauthed route.

9:37We're just going to say redirect,

9:39and we want to import the route component as well.

9:43So now in our app component, we're

9:46just going to import both of those routes we defined.

9:49We'll say import authed route from ./components/authedroute.

9:58Same thing for our unauthed route.

10:02Import unauthed route from components/unauthedroute.

10:08And now, we just have to replace these things

10:11with whatever we want--

10:13whatever the equivalent component here would be.

10:16For our home page, this is strictly an authed route,

10:19so we're going to replace the route here with authed route.

10:23And for our login page, this is going to be an unauthed route.

10:28So oops, I changed the wrong one there.

10:31Unauthed route and unauthed route.

10:36And I forgot to do this one.

10:38Authed routed.

10:39There we go.

10:41So now, this should all work without either of our pages

10:45having to know about it.

10:46So what we can do is just delete the redirect from both our home

10:49page and log in page.

10:51So we're just going to return the home heading in this one

10:57just like that.

10:59And here, let's remove is authed as well.

11:02We don't need that, and in our log in page,

11:04we're going to remove redirect.

11:05We're going to remove is authed.

11:07We're going to remove this redirect,

11:09and we're just going to return the regular JSX from before.

11:14So everything should be working.

11:16It doesn't look like we have any errors.

11:17Let's take a look now at our application.

11:20Oh, first what we need to do is actually

11:22pass in is authed from our app component.

11:26So as you're going to see, what we're going to do here

11:28is have our app component be the one,

11:31at least temporarily, that controls whether or not

11:34the user's authed.

11:36So what we'll do is say const is authed equals, and let's

11:41just try it with false first.

11:43So for this one, for the authed route,

11:45we're going to have to pass in that

11:46is authed prop that we defined.

11:50So is authed is oft, and for unauthed route,

11:54we're going to say is authed is authed.

11:59And now it should work.

12:01Let's just go back here, and if we try and go to the home page

12:03now, what you'll see is that it doesn't let us.

12:06And likewise, if we change is authed to true, there we go.

12:12And I'm going to save it.

12:14What you'll see is that it won't let us go to the login page.

12:18It automatically redirects us to the home page.

12:21So that's how we create both auth-only and unauthed-only

12:25routes in React.

12:27I hope this has been informative for you,

12:28and I'd like to thank you for viewing.

0:08So now that we've got our application pretty much set up

0:11to handle authentication logic--

0:14We've got these routes that automatically redirect users.

0:17We've got a login page, a home page, et cetera.

0:19Let's actually see now how to add

0:22Firebase Auth to our application,

0:24so that we can allow users to log in

0:27with their email and password.

0:29So the first thing that we're going to do here

0:31is install the Firebase package into our front end.

0:34So we'll say NPM install Firebase,

0:40and we just install the entire Firebase package like that.

0:43Firebase Auth is just a subset of that we end up using.

0:46You'll see what that looks like in just a minute here.

0:49But while that's installing, let's actually head over

0:51to the Firebase console because what

0:53we need to do in order for Firebase

0:56to really work in our React app is

0:59we need to set up a Firebase project that will basically

1:02take care of managing all of our users,

1:05storing all their emails, passwords, et cetera.

1:08So what you're going to want to do

1:10is go to Firebase.google.com, and you're probably

1:13going to have to log into this if you don't already

1:15have a Gmail account.

1:18And what you're going to do is essentially just click on go

1:21to console here up in the right-hand corner,

1:24and that'll take you to what's called the Firebase console.

1:28Basically, this is your control panel

1:30for all of your Firebase projects.

1:33So what we're going to do here is create a new project,

1:35and you see I already have this Firebase Auth Basics one here.

1:38That's just the one that I was using for testing earlier,

1:41so ignore that one.

1:41What we're going to do is click on Add project,

1:45and then we're just going to have

1:46to give Firebase a few details about our project.

1:50So the first thing is going to be the project name.

1:52Now, this one can be really anything we want it to be.

1:55It's just an internal identifier,

1:57so no users are going to see it.

2:00So what I'm going to do is say React Firebase Auth Basics.

2:06I don't think that's what I called my other one.

2:08And what you'll see is that as you

2:10type that, you have this little thing down here that

2:13appears as well.

2:15Now, this is the project ID.

2:17And this is something that you cannot change and that the user

2:21may see, so you're going to want to be careful about what you

2:24end up having here.

2:25Don't go putting in any inside jokes or anything

2:28that you don't want users to see.

2:30Generally, Firebase will just generate something

2:34automatically for you.

2:36It does have to be unique across all of Firebase,

2:39so you may well find that your favorite string there

2:43is already taken.

2:44Now that we've done that, we've put in the project name.

2:46I'm going to leave the project ID the way it is,

2:49and we're going to click on continue.

2:52Next thing it's going to ask us if we

2:53want to have Google Analytics enabled

2:55for our Firebase project.

2:56I'm going to turn that off since that's just added complexity

2:59that we don't really need right now,

3:01and I'm going to click on create project now.

3:04So this little spinner thing is going

3:06to run for a little while, and once it finishes,

3:08we're basically going to have to add what's called

3:11an application to our project.

3:14So let's click on continue.

3:18And sure enough, right under where

3:20it says get started by adding Firebase to your app,

3:23you're going to want to click on this web icon here.

3:26Now, first of all, just as a side note with Firebase,

3:30Firebase does let you add iOS apps, Android apps, and even

3:36games that you create with Unity.

3:38And it allows you to basically use Firebase's services

3:42for those things.

3:44But for now, since we're developing a web application,

3:46we're going to use this web app.

3:50And applications in Firebase, by the way,

3:53are just another word for platforms.

3:56So you could have, as we saw, an iOS application, an Android

4:00application, a web application, et cetera.

4:04So we just need to let Firebase know that those exist here

4:08by basically creating one of those for our React app.

4:11So for our app nickname, we're going to say something

4:13like React Front End.

4:16We're going to leave this Firebase hosting

4:18thing unchecked.

4:19That is another service that Firebase provides for us

4:21if you're interested in that.

4:24Basically, it will host your app for you.

4:25But we're going to leave that for now,

4:27and we're going to click on register app.

4:29That will spin for a second or two,

4:32and then it will spit out some code here.

4:34So we already ran NPM install Firebase in our front end,

4:39so the next thing that we have to do is copy all of this code

4:42that they gave us here.

4:43I'll describe what it is exactly in just a minute.

4:46But let's just copy that right now,

4:48and we're going to head back over to our React app

4:51and open up the React entry point.

4:54So that's this index.js file here.

4:57So what we're going to do is paste

4:59this code now into index.js before where

5:03we say reactDOM.render.

5:07And then we're just going to delete these comments.

5:10We don't need those.

5:13And we also don't need app.

5:14We can just say initialize app Firebase config.

5:17So what is going on here?

5:19Essentially, what this Firebase config thing is,

5:22it just contains some unique identifier strings

5:26that will basically tell our React project

5:29what URLs to contact and what IDs to use in order

5:33to actually allow our users to log in,

5:37in order to do database stuff if you end up going

5:39with Firestore, et cetera.

5:42So these things here--

5:43Also, they're not sensitive information.

5:46These are public information that gets sent to the client

5:49anyway.

5:50So don't worry.

5:51It's perfectly fine to commit these to GitHub,

5:54so don't worry just because it's a big long random-looking

5:56string.

5:57It's not actually a secret key.

6:00Anyway, that's how Firebase is set up.

6:03Essentially what this does, again, it tells our application

6:07all of the unique identifiers and URLs for our Firebase

6:11project that we created.

6:13This project and app that we created over here

6:15in the console.

6:17And it just helps it link up correctly to those.

6:21So now that we've initialized our Firebase app, essentially,

6:25what we'll be able to do is in the rest of our application,

6:28in our components, et cetera, we'll

6:30be able to actually make calls to Firebase Auth.

6:34And that will allow us to create users, to let users log in,

6:38et cetera.

6:40So let's first just go back, though,

6:42to our Firebase console.

6:44We're going to click continue to console,

6:46and that should be about all we need to do.

6:52So the next thing that we're going to have to do

6:55is inside our login page, we're going

6:58to have to add a little bit of logic that will allow a user

7:01to actually log in.

7:03Now, where this is going to happen

7:04is inside this login function here.

7:08We're going to remove our alert, and instead of doing that,

7:12we're actually going to make a call to Firebase, to Firebase

7:16Auth, telling Firebase Auth to log

7:19in the user with the corresponding email

7:21and password.

7:23So first of all, what we're going to need to do

7:25is import a few things from Firebase.

7:28So we'll need to say import, getAuth, and sign

7:34in with email and password.

7:38That is, as you may have guessed,

7:40the function that will call to actually log in the user,

7:44and those are both imported from the Firebase package

7:48and specifically /Auth.

7:50So that's a subpackage of Firebase.

7:53So now, inside this log in, what we're going to do,

7:56it's going to need to be an asynchronous function, first

7:59of all.

8:00And what we're going to do is just

8:01say const auth equals getAuth.

8:05This basically just gets a reference to Firebase Auth.

8:09And then what we're going to do is say await sign

8:13in with email and password.

8:15We're going to pass the auth object to this as an argument.

8:20So auth.

8:21And then the second and third arguments

8:22are the email and password that we've collected from the user

8:26here in our login page.

8:27So we're going to say email and password,

8:32and that will take care of logging our user in.

8:35So just to show us that that's actually happened successfully,

8:39we're going to say alert, and we'll

8:41say successfully logged in.

8:48And that should be about it.

8:49So before the user can actually log in,

8:52however, we're going to need to actually create

8:55a user in Firebase Auth, so that will have a matching account

8:59with the email and password that we're going to use.

9:02You'll notice that we haven't yet

9:03created a create account page over here in our pages folder.

9:09That's something we'll get to later, so don't worry about it.

9:11But for now, what we can do.

9:13We're going to go into authentication in our Firebase

9:16console.

9:17We're going to click on this get started button here,

9:20which should activate Firebase Auth for our project,

9:24and then down here in this box, you

9:27can see that these are what are called sign-in providers.

9:30Basically, these are just different ways

9:33that you can allow users of your application to sign in.

9:37So you can see that in addition to email and password,

9:39which is what we're going to be using here,

9:41there's also Google, Facebook, play games, game center, Apple,

9:45GitHub, Microsoft, blah, blah, blah.

9:46There's a lot of different providers

9:49that you can use to allow users to log into your application.

9:52And that's something that we'll see later on as well.

9:54But for now, let's just select email and password.

9:57We're going to flip this little switch

9:59next to email and password up at the top that says enable.

10:03We're going to click on save, and that's

10:06all we should need to do.

10:07So now that we've activated this email password provider, what

10:12we're going to do is click on the users tab

10:15up in the top left.

10:17We're going to click on add user,

10:19and here's where we're going to add the first user

10:21to our application that we're going to actually

10:24be able to log in with.

10:26So for the email, I'm just going to say Shaun@Gmail.com,

10:30and for the password, I'm going to say ABC123!.

10:35We can click on add user now, and that will create a new user

10:39in our application.

10:42Now note also that this is not something

10:44that you'll generally do.

10:45Creating accounts for users, unless you're

10:47working in a very exclusive application where users have

10:51to actually contact you before you

10:53can create an account for them.

10:55You're probably not going to be doing this.

10:57The only reason we're doing this here,

10:58again, is just because we don't yet have a create account page.

11:03So now that we have this account,

11:06let's see how we can log in with it.

11:07What we should be able to do is just go to our login page.

11:12Here.

11:12What we're going to need to do first

11:14is actually change isAuthed to false.

11:19Oops.

11:20We need to run our application again.

11:22We'll say NPM run start.

11:27And there we go.

11:28We can see it goes immediately to our login page.

11:30So let's enter in the email that we created the account for.

11:34Mine is Shaun@Gmail.com, and then for the password, ABC123!.

11:40And now let's click logged in, and we

11:43should see successfully logged in logged out

11:47through this alert.

11:48So when we click OK, we are, at this point,

11:52going to be logged in.

11:53However, because we're just using a hard coded variable

11:56inside our app component, we're not

11:58going to see any changes reflected,

12:00and that's something that we'll take a look at shortly.

12:02We're going to need to actually have

12:03Firebase listen for changes in the user's auth state.

12:07But anyway, those are the basics of logging

12:09in with Firebase Auth.

12:11As you can see, it's super easy.

12:13It's literally just one function call

12:15that takes care of most of that for you.

12:17I hope this has been informative,

12:18and I'd like to thank you for viewing.

0:08OK so now that we have users able to actually log

0:11into our application, right, by using this sign in with email

0:15and password function, that Firebase auth provides to us,

0:18the next thing that we need to do

0:19is have our application actually update when that event occurs,

0:24right?

0:25So in other words, when the user successfully

0:27enters in their email and their correct password,

0:30we want to have our app actually know that happened,

0:34and redirect the user automatically to the home page.

0:38Now the way that this is going to work

0:40is inside our app component, we're actually

0:43going to have a state variable.

0:45And we're going to call this state variable user

0:48and setuser.

0:50You'll see why that is in just a minute.

0:52And here, let's just import useState up at the top

0:54while we're at it.

0:55UseState from react, and then we'll say useState,

1:00and the initial value of this is going to be null.

1:04OK so essentially the way that this is going to work

1:07is Firebase provides us with a function called

1:10onAuthStateChanged, that basically allows us to set up

1:15a subscription that will listen for changes to Firebase's

1:19authentication state, right?

1:21In other words, when a user logs in or logs out,

1:24the callback that we passed to this function

1:26will be called with the user that just logged in, right?

1:30A Firebase user object, you'll see

1:32what that looks like shortly.

1:34So the way that we use this, first of all,

1:35we're going to import that from the Firebase package

1:39up here at the top.

1:40We're going to say import, getAuth,

1:44and onAuthStateChanged.

1:47That's the function that I just told you about,

1:49that allows us to set up that subscription.

1:51And we're going to import those from firebase/auth.

1:55Now the other thing that we're going

1:56to need to do in order to set up a subscription in pretty

1:59much any react component, we want

2:01to do that inside a useEffect hook.

2:05So let's import useEffect from react up at the top.

2:08And we're going to use that now to actually set up

2:12this subscription that will allow us to keep

2:15track of this user thing.

2:16So we're going to say useEffect, and for the useEffect callback,

2:22we're going to create our subscription.

2:24So we'll say const auth equals getAuth, right?

2:30We're getting that reference to Firebase's auth object.

2:35And then what we're going to do is say onAuthStateChanged.

2:40We're passing auth as the first argument,

2:42and as the second argument we pass a callback.

2:45And this callback will actually get

2:46the user, the currently logged in Firebase user object,

2:51as an argument.

2:54And then, what we need to do is inside this callback,

2:57we need to set our user state appropriately.

3:01So basically what's happening is that when the user first opens

3:04up our application, right, and we

3:06have user and setUser equal to null,

3:10that just means that our user is initially unauthenticated

3:14before they actually log in.

3:15So what we're going to do is when

3:17this changes we're just going to say setUser to user,

3:23and that's about it for now.

3:25So the other thing that we need to do now

3:27is, since we no longer have an isAuthed variable,

3:30right, we just had that as a hard coded variable before.

3:34We're actually going to use this user, right,

3:37the user state, to tell whether or not the user's logged in.

3:40And that's actually pretty straightforward to do,

3:42because again all we have to do is check if this user exists.

3:47If the user doesn't exist, that means

3:48the user is not logged in.

3:49If the user does exist, it means the user is logged in.

3:52Simple as that.

3:53So what we're going to do is for isAuthed,

3:56for both our authed and unauthed routes,

3:59we're going to pass through double exclamation point user.

4:04Now what this double exclamation point

4:05does, if you haven't seen this before, is basically

4:08it just takes any value in JavaScript

4:10and converts it to a Boolean.

4:12It's basically asking, does this thing exist?

4:14And if user's null, this will be false.

4:17And if user is an actual object, this will translate into true.

4:22So just wanted to point that out there, in case

4:25you weren't familiar with that syntax.

4:28And that's pretty much all we have to do.

4:30So if we go back to our application now,

4:32we'll see that since we've already logged in,

4:34we're on the home page.

4:37So what you might want to do here is,

4:39if you want to test this, since we currently have no way to log

4:42out, you can always just open up an incognito window and go

4:45to localhost:3000.

4:47And that will basically allow you to see the page without any

4:52of the stored credentials.

4:53So what you can do is just test out the login

4:56here by saying shaun@gmail.com, entering in your password,

5:00clicking log in.

5:03You'll see successfully logged in.

5:04Click OK, and that should send you now to the home route.

5:07Now one thing to notice is that it's sending you to the home

5:10route automatically, not because we are saying history.push

5:15or anything, right?

5:16We don't even have history inside our login page.

5:19It's happening automatically because

5:21of the logic that we have inside our authed and unauthed routes.

5:26OK, essentially those are detecting this change

5:29to isAuthed, right?

5:32There is authed prop, and automatically taking care

5:35of all the redirection logic.

5:36So we don't have to do that kind of logic inside our home

5:39and login pages with the current setup that we have.

5:43All right, now one last thing that we are going to want to do

5:46is make sure that, while our application is actually

5:48loading, it doesn't display the login page, right?

5:52You might have noticed that if you refresh,

5:55it'll automatically show the login page.

5:57Because, again, our user is initially null

6:02while our application is taking care of actually logging

6:05the user in behind the scenes.

6:08So what we need to do is basically

6:10we need to have another state variable here,

6:12which we'll call isLoading and setIsLoading.

6:19And what this is going to do is basically

6:21while our app is checking whether the user is logged in,

6:24right, it's checking with Firebase,

6:27this is going to be true.

6:28And once we see that either the user is or is not

6:32logged in, right?

6:33Once we find out for sure from Firebase which is the case,

6:36we're going to set isLoading to false.

6:38So what this is going to look like,

6:39the initial value for isLoading is actually going to be--

6:44we're going to need this auth thing down here.

6:47We're going to need to say const auth equals getAuth.

6:50And the initial value here is going

6:51to be basically whether or not the current user exists

6:57on auth.

6:58Now what I just did here, this auth.currentUser thing,

7:03this is just a property that contains the current user

7:06object that's logged in.

7:08Now note that since this can change over time,

7:12we don't actually want to use this for ongoing things, right?

7:15We won't want to say isAuthed equals auth.currentUser,

7:20because this thing could change over time,

7:23And that would not trigger a subsequent render in react.

7:28But in our case here, it's perfectly fine

7:31to use it as the initial value for a state variable.

7:34All we're doing here is, if there's already a current user,

7:38we're just going to set isLoading to false.

7:40If there's not, we're going to set isLoading to true,

7:43because that means we don't really know whether the user is

7:47already logged in or not.

7:50And we're going to do something similar for the user down here

7:53and useState.

7:54We're going to say equals useState,

7:56and the initial value for that is

7:57going to be auth.currentUser.

8:01So essentially, if the user is already logged in,

8:04and we already have auth.currentUser,

8:05we're not going to see that loading state.

8:07Otherwise, we're going to see a loading message, which

8:10we actually have to display down here.

8:12The way we'll do that is just by saying return isLoading.

8:17If it is loading, we'll just say loading, dot dot dot.

8:22Otherwise, we'll display the regular JSX.

8:27So the other thing that we have to do

8:30is, after we've set the user, we need

8:32to say set isLoading to false.

8:35So that in case it was true to begin with,

8:37and it will be a lot of the time,

8:38it will turn to false once the user is actually logged in.

8:43Now this will work as is right now.

8:45Right, if we click refresh, we'll

8:47see loading and then home.

8:49Loading, home, loading, home, et cetera.

8:52One more thing that we have to do, just for cleanliness sake,

8:56and to prevent memory leaks, is we

8:58have to make sure to cancel this subscription

9:01when our app component rerenders.

9:03So essentially, what we're going to have to do

9:05is this onAuthStateChanged function

9:09actually returns a function that will cancel

9:12the subscription for you.

9:13So what we'll do is say const cancelSubscription equals

9:21onAuthStateChanged, blah, blah, blah.

9:24And then we're just going to return the cancelSubscription

9:27function from this useEffect hook, which basically means

9:30that this cancelSubscription thing will be called

9:32when our component unmounts.

9:34And the last thing we need to do here is,

9:37since we only want to set up that subscription once,

9:39we're just going to pass an empty array

9:41as the second argument to useEffect

9:45OK, so this should all work now.

9:48And if we open up the inspector window here in console,

9:51we shouldn't see any kind of--

9:53ah, here.

9:53So this one warning just says that we

9:55need to pass auth as a dependency,

9:57just in case that changes over time.

9:59It shouldn't, but just to make react happy

10:03and to get rid of that warning, why not?

10:06OK, and everything seems to be working now.

10:09The last thing that we're going to do here,

10:11and this is a very, very simple thing

10:12to implement, we're going to add a logout button,

10:15so that we can actually log out of our application.

10:18So what this is going to look like is inside our home page--

10:22we're going to open that up.

10:25What we're going to do is just add a basic logout button

10:28to the bottom of the page, that will allow the user

10:31to click on it and actually log themselves out.

10:35OK, now in order to make this happen,

10:36we just need to import getAuth and a function called signOut

10:41from the Firebase Auth package.

10:45OK and we're going to basically create

10:47a function here called logOut.

10:50It's going to be an async function that will basically

10:52call this signOut function for us.

10:55So what we're going to do inside of here,

10:57we're going to say const auth equals getAuth.

11:01We're going to say await signOut,

11:03and pass auth as an argument.

11:05And then we're just going to display

11:07an alert that says something like, "Successfully

11:10logged out."

11:14OK and then we just need to wrap these in a react fragment

11:16to make React happy with our syntax.

11:19And we'll have the button call this logout function by saying

11:22onClick equals logOut.

11:25And that should be our logout button.

11:27So as you can see, the logic here

11:29is incredibly simple for logging out a user,

11:31and essentially all that does is just

11:33delete some tokens behind the scenes

11:35that Firebase is using to create the user session.

11:39So let's go over here to our home page.

11:42Now we can click Log Out.

11:44We should see successfully logged out,

11:46and we'll see that has automatically now redirected

11:49us back to the login page.

11:51So just to go through the flow one more time,

11:53we'll say shaun@gmail.com, abc123, log in.

11:58Successfully logged in, and we're at our home page.

12:01So everything seems to be working just fine now,

12:04and we've successfully added Firebase Auth to a React

12:07application.

12:08So I hope this has been informative for you

12:10and I'd like to thank you for viewing.