React Firebase Authentication - Protected Routes - Context - (Firebase v9) 🔥

hey what's up guys in this video i'm going to show you how to use firebase authentication version 9 and your very own react.js project we're going to be using react router dom we're going to be using a lot of really cool things we're going to have pre protected routes where you can only be able to you have to be signed in to be able to view these pages and we're gonna be able to create a new user we're gonna be able to sign in in the user log out like i said the protected routes we're gonna be using tailwind for the entire ui and styling of this application so if you're ready to get started i'm gonna show you how to do it for absolutely from the beginning i'm gonna show you how to configure firebase tailwind everything so without further ado let's get started so here we are vs code right i'm going to open up my terminal here and i'm going to go ahead and change over to my desktop and then let's go and create a react app i'm going to be using yarn you can use whatever you'd like so create react app and i'm gonna call this firebase off youtube okay all right here we are it says happy hacking that means we're ready to go i'm gonna go ahead and pull over my firebase auth youtube and let's just start this server up right off the bat here so yarn start npm start fusing npm i'm super pumped for this video guys there's a lot of really good information on firebase version 8 a lot of namespace but this new modular way is really really awesome and i didn't really find a whole lot of really great content on it so that's why i'm doing this video so hopefully i can save you some time using firebase so here we are just a basic create react app um we're gonna be working out of this source folder and all these files kind of gets confusing so let's go ahead and clean this up a bit the app.cs css app.test the logo svg report web models and setup tests let's just go ahead and get rid of all those we're going to leave the app.js make sure you leave the index.css and also the index.js of course and in this index.js i'm going to delete some things this is why we're getting those errors on the screen and then app.js let's just get rid of all this and i'm just going to import react from react cool so now we should be able to uh type and see some text over here it's working it's working so first things oops first thing i want to do is go ahead and let's go ahead and install tailwind so i'm gonna go ahead and cruise on over to tailwindcss.com click on that get started button frameworks guide i'm going to create react app here we go first thing it wants to do is create a rack app we've already done that so down here on step two i'm just going to copy this right so and let's open up just a new little terminal there say yarn add go and paste that in all right and the next thing we're going to run this npx command what this npx command is going to do is create us our toe in config file over here boom and then there it's very important because we need to pay attention to this content array because the next step it wants us to copy this into the content array this is how it's going to build our build our project and the next are directives we just need to copy that in to the index.css file so we can just go and replace all the basic styling there and we can close index.css we'll close the tailwind config file we don't need that in this index.js we can go ahead and um close that so let's have a look at our server here boom let's go ahead and inspect i like to keep my console open and okay it's talking about react react router dom so this is react route down version 18. um we can go and make the update real quick it's super fast if you guys are interested so let's go into the um index.js okay so a couple changes here right off the bat i'm not going to go into it but just to update it here let's say client and we actually need to run a couple commands what are these commands see if i can remember here okay i have it written down here yarn add and we'll say react at 18 and we also want to grab the react dom at 18. boom go ahead and hit enter give some room there then next we just want to basically we're going to rewrite all of this right here okay so i'm going to say const root i have this off to the side here in my notes we'll say react dom dot create root all right and then we're just going to say document.getelementbyd and we are grabbing the root boom there we go and then we just want to say root.render and then here we can render our app boom there we go i'll go ahead and hit save uh so we are going to be using redwaterdom version six like i said we're gonna have some protected routes we're gonna have a sign in page we're going to have a sign sign up sign in we're going to have an account page and the account page is going to be a protected route so we're going to use a react router dom to uh for our navigation in here so let's go ahead and um install that so i'm going to say yarn add wrecked router dom go ahead and enter there and so for react router dom if you're not familiar basically we need to wrap our entire application in what's called a browser router so we can do that in here i'm going to give a couple spaces here so what i'm going to say is browser router boom already has me in there perfect and we can just copy this up here boom go ahead and hit save and that should so we need to import browser router that's probably what it's looking at here um oh we already imported browser router what's it explaining okay we left off that bracket there all right whoops okay go ahead and save there we go so we wrap the package and wrap wrap the app component in the browser router sometimes you'll just see uh what's called just router here and um you can do that it's fine it doesn't really matter people like to do that save time you used to have to say browser router as router but you know i'm just going to leave it as browser router just so there's no um just so there's no confusion here so browser browser router just like so okay oop i have a little semicolon in there okay so now we're pretty much done with the index.js uh file here so let's close that and next let's go ahead and install tailwind so let's cruise on over or sorry we just installed tailwind sorry about that so let's go ahead and create our components right so like i said we're going to have i'm going to have a components folder and in the components folder what we're going to have is our we're going to have uh we'll have a sign in dot jsx we'll have a sign up dot jsx okay and let's just have an account page account page.jsx okay and i'm gonna go and drop that down r-a-f-c-e it's gonna generate my functional components here boom boom boom r-a-f-c-e right so let's uh let's close it sign in and the account page i don't want a bunch of tabs open and let's go ahead and kind of set up our routes here so what i'm gonna do also i'm going to kind of copy over just a couple things here um that we're going to grab here so basically i want an h1 in here i'm not going to go over um tailwind that's not what this is about i do have a lid video if you want to learn some tailwind it's not grabbing our styles we probably just need to restart our server here so if you start up your server and you then install tailwind it's not going to work properly you're going to have to you're going to have to restart it first so this should actually be styled put in the middle of the screen text 3l font bold so let's see if it boom there it goes that's what we want right there you guys um so next let's set up our routes like i said so we're going to have for react router dom we're going to surround everything in routes and then we're going to have individual route in here and this is going to be a path so for our home page right this is our home page and what i want to show at the homepage is just a login component so whenever they come into the home page we're just going to have sorry we actually need to put element here element and we wrap this like so there we go jeez there and let's just put here our login component it won't let us auto import it that's fine let's go ahead and import it at the top here import login from oh no i need to go in components and then or sorry i didn't call it long again sorry about that sign in is what the issue was i call that sign in there it is and so also let's have a sign up so i'm just gonna copy this down i'm gonna copy it down twice so for the next one i want this route to be sign up okay and we'll just change this to our signed up component make sure it auto imports there we go and then for this last one here this is going to be our protected route but we'll come back and take care of that in a little bit here and this one is going to be account so okay it's not going to let us auto import that so let's just go and grab that import account from components account there we go and we need to change this so we don't get any errors so let's go ahead and save routes okay we need to import routes and then also route as well so i'm just pressing a real cool trick you guys if you press the control and the spacebar button at the end of the component you bring up a list of options in which case we can just auto import it just like that boom so that looks like it's taking care of all of our errors just going to refresh this cool so this is our sign in page now for our sign in page you guys what i'm going to do i'm going to kind of cop over copy over some styles um let's go into our sign sorry let's go to our sign up page here and i don't want to make this tutorial too long doing a bunch of classes but basically i'll describe it as we go so what we want to have is a max width of 700 pixels here and this is on the sign in remember this is our home page so if we go over to sign up boom this is our sign up page and we can see if we type some text in there remove that error boom so what i'm saying real quick max width of 700 pixels and then uh margin x on the x-axis is auto and then a little bit of margin on the on the top and bottom and a padding of four okay so if you're wondering what these brackets are really really cool and tell when if you um if you don't have the numbers a lot of times you'll say max width dash dash 20 for example and that's um that's not going to show us what that is it might be a little bit too big but if you open up some brackets basically you can put some custom values in there you can kind of declare your own values whether it's pixels ram percentages anything like that so that's our outer container there next we're going to have a div here so i'm going to create a div no class on that and then for this h1 i'm going to paste it she's going to say sign in to your account and then next i'm going to have a p tag boom p tag i'm going to close that off and it's going to say don't have an account and then we're going to have a sign sign up there we go so and we want this link to go to our signup page i'm sorry this is our sign up page so we'll say for this sign up already have an account then sign in okay and for this here what i want to do is actually i want that to be underlined so i'm going to give this a link so this is going to be a link we want it to link to our homepage which is the sign in component so we'll say link to and i'm just going to put that to the home page there we go and we'll close that off i'm going to drop this down so what i want to do just copy this little site in there and i'm going to paste it in there link is not defined that's cool we just import link and it's coming from react router dom there we go and let's see if we can i think we install on this here not sure cool yeah there we go and so if we click this it's going to go to our um pay attention there boom there we go now we're at our homepage so but let's go back to what we're doing on our signup page because after this p tag um we're going to go outside of that div we're gonna have our form here so we're gonna have our form and we don't need an action or anything like that boom then inside our form what we're gonna have here is a see here gonna have a div i'll just type it out here div here and we're gonna have a label boom and i don't need any of this html4 stuff not for this video and i'm just gonna say email address boom there we go and then we're gonna have an input and this is gonna be for our email and again we don't need this name id stuff and i'm going to put a placeholder for this you guys and then i'm going to have a basically i'm just going to copy this down make it easy here and this one is just going to be uh enter or just say password password boom instead of type email we're gonna want that to be a password okay and then i do want to have a button in here here we go and we'll just say sign sign up and looks like we're missing oh i'm missing a div in here the form oh that's funky boom there we go so that should take care of that so there are so you can't really see them because the tailwind has still tailwind configures everything um but don't worry about it i'm going to add in some classes right now so for this div right here we're actually going to do both the same here we're going to have flex flex column we're giving just a little bit of padding there we go next i'm going to grab some styling for our labels and actually if you click right here and you hold down the alt button or the option button if you're on a mac so you can actually type in multiple places at the same time so it's just going to save us a little bit of time while we're coding and what we're saying here we're padding a two we're giving a font medium so just a slight little bold there the next we're going to want to style our input right so for our input tailwind comes right out the box with like bass bass styling like almost nothing it makes it really really customizable it's an awesome feature i love it so what we can do is actually i wanted that put that class name i put this on the wrong spot here so for this i actually want border p3 and i'm going to go ahead and type that in there so i'm border then padding of three and then on this label i got it right on this one i just put it in the wrong spot here there we go so now our our form is kind of coming together here it's looking good let's get our button our button next here and the button here we go let's get our class name here on the button boom there we go perfect perfect so what i'm saying the button border defining border then say the border is blue 500 the higher the number you go the darker it gets 900 is going to be really really dark 100 is going to be very very light so um and what i'm saying is here hover whenever we go on hover it drops down to shade boom as you can see that right there the width is full then a little just a little bit of padding and margin text white right so what i want to do this is our sign up component now the login component is going to be very very very very similar um see click here log in boom so what i'm going to do i'm just gonna copy this right this entire div i'm just gonna copy that now let's go over to our sign in boom there we go and let's just paste right over that thing okay and instead of sign in okay yeah link it wants us to import that so let's go ahead and make a react happy there will import that and now instead of sign in to your account i'll say sign up for a free account there we go oh damn it sorry this is the sign in run right so i'm just go back in here and i'm gonna say sign up sorry for the confusion there guys sign up for a free account because we styled our sign up component first so for our signing component sign we'll just say sign in just like we had it sign in to your account boom there we go okay then we'll say here don't have an account yet sign up boom so and then we'll just change this to the sign up page cool so now we can go to the sign up page up there boom then go sign in takes us back to our homepage because that's where our login component is and we probably wouldn't just change that just so it um i'm going to save it so it formats here just so it makes sense we want to sign in cool so and then we do have let's just make our account page um let's go to our account page really quick just to style it it's going to be really really simple you guys basically i'm just going to copy over the styling here so what i want up here is max with 600 pixels margin auto then a little bit of padding in between there and then we're going to have an h1 that says account and in this h1 i'm just going to give it a little bit of styling here so text to xl font bold py4 and let's just cruise on over to our account page i don't have a link to get there we're going to set up kind of automatic forwarding it's called a navigate and react router dom so we're going to set that up too it's going to be super awesome there and then let's just have a little p-tech here and we'll just say a user email and we'll so when we log in we'll be able to display our user email right there um for now i'm just gonna leave that blank and let's just have a button here that says log out it's not to have any functionality yet but we're going to come back and hook everything up with firebase firebase authentication boom so border px6 py2 a little bit of margin cool so don't do anything let's go back to our you know what let's go back the next step is probably to let's install firebase and then we'll move on to the context like i said yes we will be using context for um mars var state management here authentication it's really really great so let's go over to firebase boom there we go and what i want to go to let's go here okay firebase i'm going to click on get started and what i want to do these are some other projects let's create a new project and in our new project i'm going to call this firebase auth yt for youtube and what it's asking here i'll open the screen up a little bit do we want to um incorporate google analytics dell it's going to add some extra code in there and i don't want to confuse anything so let's go ahead and create your application here it takes just a minute guys pretty quick a little quick water break smash the like button you guys if this is the first time using firebase authentication smash the like button it's gonna be awesome all right our project is ready cool let's get continue so this is the screen you're gonna come into this kind of just like the console screen for firebase right so off here we have some of their um some other tools we can use like authentication firebase um this is like firestore if it's like cloud storage and then also do some hosting so i'm also in the next video i'm gonna show you how we can like store user data as well it's gonna be really awesome so go ahead and if you didn't see what i clicked there this is the ios this is android this is for web since we're building on a online here so just click that web button next we have to set up our app so i'm just gonna call this i'll say auth yt for youtube go ahead and register app i'm not going to be hosting it right now so don't mind that so it's going to generate some code for us to use there we go so first it wants us to install firebase go ahead and copy this whole thing if we're using npm if you're like me and you're using on yarn let's go ahead and copy that and say yarn add firebase boom there you go now next we need to copy this right so go ahead and copy this don't copy mine you guys don't copy this uh api key because it's not going to work okay i'm going to close this right after i uh record this video this is a private stuff that you don't want to share with anybody so if you're going to deploy your application you definitely want to hide this in a env file or something like that because you definitely don't want the public getting your api key information could get very messy so okay so we installed firebase and we can check and see in our package boom there it is so um next we're going to want to create a firebase.js file and that is going to be in our source folder okay so firebase.js boom and what i just copied all this i'm just going to paste it right here and firebase is really really awesome it lets us basically install these um software development kits the sdks as tools and that's what we're going to do and i'm going to show you how to do all that so down here when you come down here and what we're going to do is export default app and then what we want to do one of these sdks we want to bring in i'm going to search for it so i could just copy it in here but you guys i want to try and show you how how to learn this stuff and not just copying a tutorial okay if that makes any sense because that's a really really key part in becoming a developer right is learning how to teach yourself instead of just watching tutorials all the time so what i did i just clicked authentication here okay and what it's okay sign in method what we're gonna do in this video i'm just using email and password uh firebase authentication has really really cool things you can sign in with your google account facebook um i don't even know what that is really but um really really cool ways to sign in and they're all pretty simple to implicate so i'm going to show you how to do them for this video we're just using email password so go ahead and click enable i'm not going to use this one i'm going to go ahead and click save okay so like i said to teach you how to teach yourself right so what i'm going to do i'm gonna go to these docs right and what we want to use is authentication so where am i looking so this is the documentation side of firebase and it's set up really cool it's basically just like the the console area right that's where that's how it's laid out and then so what we want we're doing authentication so i just click on that boom and you can look through there but i know where we want to look here is the web right now i'm going to click on getting started so we're talking about these sdks right and this is what we want to import right here to get authors we're using firebase auth if you're using db you know you go down there look at the db and so on and so forth so this is what we're doing and you may see some other tutorials with this namespace way of importing and initializing stuff right and there's a lot of really really great tutorials however this is the firebase version nine so it's a slightly updated way and if you try and import things the same way then you'll you're gonna get a lot of errors so that's why i'm creating this video guys awesome stuff here so go ahead and copy this import and get auth okay and we're going to paste that right here at the top and then down here we can just copy that and i'm just going to paste it right here and what i want to do is actually want to export this because we want it to be available elsewhere right so that's all we need to do for the firebase for our firebase.js so the next the next thing we need to do is actually actually set up our user authentication or sorry our context so let's go ahead and go into i'm bringing this up a bit so for our context basically if you're not familiar with context basically in my opinion it's a similar simpler similar and simpler version the option for for redux right and context is very very easy to implicate it's a lot easier to understand and also it's great for things like um if you visit their documentation for for if you have a lot of state that's not gonna be making constant changes for example authentication uh light theme dark theme ui stuff like that so we can close this account right there and so okay let's go in here and we're gonna put a context folder and i'm going to have that just kind of here next in our source folder so context boom and then for our context folder and create a file i'm just going to call it authcontext.js there's a lot of way to a lot of ways to to implement context and uh basically if you google it you're gonna find like a hundred different ways so just find a way that works for you um this is how this is how i'm gonna do it so i'm going to close this down a little bit there we go and what we just create here firebase off this one this is the one we're working in here so all right so okay okay so what we need to do at first we need to import put it in some brackets create context okay from and this is going to be just from react i have my notes over here so what we're going to do next is const we're going to have a user context and this is going to be equal to create context there we go and that is a function there and then next what we want to have we're going to export this export const see auth context context provider and this is actually going to take in some children right and we can go ahead and just leave that destructured so we have to deal with the props or anything like that it's just going to be an arrow function and there we go boom there we go got this mic i haven't got an arm stand yet for my mic so i'm kind of leaning around it if you're wondering what i'm doing there and then in here what we want to do basically we just want to return here and we're going to return user context provider and in here we're going to have the children and this is also going to take in the value and we're this is where we're going to export all our all our values right and then we also want to export const user auth and this is going to be an arrow function there we go and we'll just return and this is what's going to make our context context available user context that's what's going to make our context available throughout our application great so there we go um cool so for a few things that we're looking at like i said to teach you kind of how to how to search yourself right i'm going to bring this back open again so let's go to the docs and a few things that we're going to be doing right we're going to have a sign in a create new user function a sign in function a logout function and then a couple more but here's how we're going to look for it right so like i said we're in authentication here we're doing the web get started so basically it showed us how to import our auth right so now it's showing us how we create new users okay and i'm not just going to copy this completely because my way is just a little bit different but that's all right so basically this is the firebase function to create a new user with email and password so what i'm going to do here and we're going to put all this inside our auth context so what i want to say in here basically let's import open up our curly brackets and we're going to look for this in a the firebase project so say firebase.auth and if we do this first we kind of get previewed what we're looking for right so what we want to create see these are our previews here create user with email and password we forgot the from keyword there okay so we're going to create a user with email password we're going to want to sign in with an email and password we're going to want to sign out we are also going to want to have the on state on auth state changed and basically that is it's going to check to see if we're logged in and that way we can have protected routes and kind of have access to some of that information so i'm going to go ahead and i like it formatted like this when it gets real long just so it's easy for to read and it's easier for you guys to understand let me know in the comments if you're liking this if you're getting some value out of it i know let's about we're about to dive in right now with the context and firebase is where it's getting fun right here okay okay so there we go so what we want to do and we're going to take an off an email and a password i'm going to show you where we're going to grab all those so what we need to do here so for our create user right this is what we're going to focus on first this create user function so we're going to put this inside of our auth context provider boom right in here so we're going to put this kind of at the top so what we're going to have and i'm going to have um i'm sad it's going to be an arrow function so const i'm going to call this create user i would call it sign in then we have some conflicting names there and firebase or react doesn't like that so create user right and what we want to pass in is an email and also a password and then whoops once we're inside here what we want to do is just return and what we want to return is the create user with email password and it's going to take an auth and then also email and password and then the value property down here uh right here on this children this value property this is where we're going to export our functions so what we want to export is create user boom like that so everything's looking good so far this is what we want and we're also see we need to import auth from firebase that's one thing we left out here so import auth from we need it from our okay you need to go outside our current directory into firebase boom there we go looking good looking good all right you guys so now i assume we have this set up correctly we're about to see in a moment let's cruise on over to our sign up page here this is our sign up component and a few things we want to do we're going to be using the estate hook right so let's go ahead and set up our state for our email and our password and we're also going to have an error state as well so i'm going to say const and we're going to have an email and set email okay and that's just going to be equal to use state and it's going to set this to an empty string and let's go ahead and copy this down a couple times this next one is going to be password and then we're going to have set password there we go and then let's do an error one so we can display some errors on the screen and also do some errors in the console as well boom so next let's go ahead and go into rk our form is going to have a handle submit function so let's go in here and say on submit and on submit we just want to call this handle submit function that we haven't created yet so let's go into the first input this is our email input inside of the form so make sure everything's looking right when i started recording this video i've realized about halfway through my mic was off so on here we're gonna have an on change and on this change what we have is arrow function and basically we just want to set the email to event target value so that's what we're passing in there and also here so on change and this is for our password i'm just going to say there we go and set password target value cool so um yeah yeah yeah we need to import estate so let's go i'm just going to click the control button boom auto auto import that don't need that stuff so handle submit let's go ahead and create our handle submit function const handle submit and this is actually going to be um it's actually going to be an asynchronous function so the way we do that for our function i'm going to say async right there boom and okay so what we want to do first off is so whenever we submit our signup form i do not actually want the page to submit so i'm going to pass an event it's e dot prevent default okay and then let's go and set our error to an empty string and then we want to have a try catch block right so and then we want to catch the error and then we'll just say set error air dot message and let's go in console what is all that console.log a dot message okay and this work like says asynchronous functions so we just want to await and what we want to wait is the sign what do we call this create user not that no just create user so this is what we're grabbing right here this uh create user and we have access to it because we exporting right here oh hold on i forgot some i'm gonna pass an email and password but we need to import this okay so let's go ahead and import user context and we're getting the user context or sorry user auth i got that wrong user auth is what we need to import user off from and that's our context file so let's go find that it's in our context boom and real quick before we left out a key step here so create user is not defined i know because that's because here we haven't wrapped everything in our app component yet but let's go ahead and we'll say const and what we're grabbing is the create user and that's equal to the user auth that we just brought in right here so basically we're we have our function we're listing it as a value and then in here we can import our our function and then we have access to we have to set it here and now we have access to it but we don't actually yet because we missed a key point using using context so we need to go into our app.js and what we need to do is kind of surround our routes so you really want to wrap your entire application in here um i'm going to put it around my routes right here and what i wanted to say i believe we're looking what we're looking for is the uh auth context provider right here right so let's go in and we're saying auth context provider boom there we go and then these routes i'm just going to copy that so if i press there just the alt button i can just scroll up there boom all right all right so now we have we should have access to everything so let's we can kind of close that let's go back into our sign up component all right so now what we want to do is let's see if we can actually create a new account without anything breaking let's see if we did it with no errors so and here we are uh this are just our user table and authentication so basically just a table of all your users it's empty because we don't have any there yet so let's create our first user test at test.com and i'm just say one two three so firebase has some really cool um security features like a certain minimum length on a password so i'm gonna see we should be getting an uh password or sorry that was the login page let's go to sign up page and well it looks like we got an error here a signup page type user context is not a function so that's gonna be okay let's go into our auth context in the user context equals create context that's right and user context to return okay you guys this maybe use context i think that's the issue and we need to import that boom make sure you import use context and let's see still got an error let's refresh okay we're refreshed let's try this again test test.com i'm just gonna type pass p-a-s-s sign up okay so that's good that's what we wanted there we have firebase password should be at least six characters you are weak you're weak so instead of pass let's just say pass word i'm going to hit enter and okay it's okay nothing happened that's good if you hit it again it gives you an error you're already in use so let's go over to our table let's refresh this hey there we go so there is our email test at test.com perfect has a little information i'm going to show you some more information here in a minute so that's cool so now it'd be really cool to um we're going to do a few things so let's have let's have whenever we log in or sign up for a new account it doesn't make any sense just sit at the same signup account right so let's use let's come over here into our sign up and we'll use the use navigate and react router dom so let's just go and import that use navigate and then here we can just say whoops come down here i'll say const navigate and that can be equal to use navigate and then and here right after um right after creator user i'm just say navigate to boom the homepage which is login or actually let's go to the account page whenever we create a new account we want to be automatically redirected to the account page so let's try this again i'll say test test1 same password and should oh okay okay let's refresh i had the same value in there let's say test me gmail.com password and invalid invalid hook call so what it's saying here navigate okay so what does it not like we have the use navigate cool okay this is a function boom there we go damn okay let's try this again i'll say test at um gmail.com and then password and what happens boom okay perfect it moved us to our account page that's perfect so we eventually want to set this up as a restricted account so let's go ahead and um let's go and implement the on off state change so actually when we log in here or we set up sign up for a new account or log in we want to be able to see our user email here right and and that's in our account page so first let's close this sign up page so for our auth context what we want to do is actually we're going to we're going to be using the on off state change we're actually going to put this in a in a use effect right because we only want it to run once when the when the component mounts so and i'm going to put this just above my return here and so we're going to have a um sorry use effect all right and yes that's going to take in arrow function and then we're going to have our dependency away because we only want this to run once like i said okay and in here we're not going to pass in anything but what we want to say is actually const unsubscribe that's going to be equal to and then we're going to have our on off state change now we brought this in here from firebase.org so that's what we're grabbing right there and on auth state change what we want to have is uh we want to pass an auth and then actually um an arrow function and in here we're going to have the uh current user we can spell this with whatever we like their cr current user and current user is a kind of feature of firebase we actually have access to the basic like email and wherever we create um a new account with firebase authentication you actually get a user id unique user id you have um basically like a url pic picture url kind of like an avatar all these extra options right so in there we're gonna pass in the arrow function right and we just want to say this is really cool i'll show you what i mean i'm going to console.log a new user and we actually have to set some state so let's set our state real quick this is going to be inside this right here right inside our auth context provider make sure you put your state in here otherwise you won't have access to it so i want to say user and set user equal to use state and this is going to be an object okay make sure that's an object because that's what we're going to be getting back here so we're going to console.log user and let's set i'm going to set user to current user and actually actually what we want right here as well and then down here we want to excuse me return return return um it's going to be an arrow function here and just uh unsubscribe there and it's gonna be a function so let's go ahead and save use effect is not defined i'm gonna import that oh no what do i do i jack that one up let's just go ahead and manually import it we don't want any extra bugs no more bugs so you stay and they use context okay oh i said so let's just do our use day as well cool go ahead and give that a save okay cool so this is i'm gonna refresh this so this one i was talking this is the object that we get back when you create an account with firebase authentication with the create user uh sorry create user with email and password so we have display names automatically set to null but this is our email right that's our email that we use right there email verified basically they have an option to send you a verification email that'd be really cool to go over if you guys want me to make a video on that i can do so and this is our unique user id right there boom little photo url so phone number lots of information here um so let's display our email right there right so let's go into our account page and to do that remember to have access to that we actually have to bring in import and it was auth dang i always forget it is what we bring in user auth okay so user auth and this is from our context boom slash okay then remember how we need to bring it in here we need to say const and um we're looking for the what are we looking for user right and also let's have a log out button so user and also log out we don't have the logout functionality yet that's going to be equal to user auth cool function the user auth function there we go so next we can actually have access to the user so i'm going to open up my curly brackets here so i can just type some javascript down here and what i want to say is basically if user is true we want to display user dot email and we're saying email because that's how we access it right there so let's go ahead and refresh is it working no what's going on here user user email so let's say if i list anything out here um we need our auth for our log out let's leave our log out alone oh you know what we okay key point here we did not pass through our value to our value down here and that's something you have to do when you're using context so along with this create user what we also created was the um this user right here so we need to make sure that we pass that out there user boom all right so user of it's given okay so refresh there we go so now we are signed in as our user boom so as you can see now we and we suggested to clarify why it wasn't working is we weren't passing in um our use effect uh function here so after we passed that in we now had access to it because basically it was trying to look for it and it didn't we didn't um we didn't export it so we didn't have access to it so now we have it displayed on on the screen here basically saying uh if there is a user it's going to display and if not then it won't display at all which is kind of relevant but this page is going to be this page is going to be what you call password protected you know protected route so but let's go ahead and have our logout button here that'd be cool right so let's do our auth context right so next we already have our sign out so what we want to do here we can just put it right here under the crate user so i'll say const and i'm just going to say um i'll just call it sign out like so or let's call it log out log out it's going to be an arrow function and it's going to be also going to take in is i believe it's just the auth yeah so return return sign out there it is and we just want to pass in the auth and then let's go into our account page let's refresh that there so for our account page we'll say uh on click here we're gonna run a function it just says handle log out cool there we go and then for our function const handle log out and you know this is going to be a asynchronous function as well so make sure we add async there and then what we want to say is um we're not going to have to prevent a form from submitting or anything all we can say is uh what we're going to say is let's see our cons log out we want to call our see try catch and catch won't take in our air it was um i'm just in a console log but we're gonna set an error on this page e dot message there we go and basically all we want to do here is a wait log out function i think we might need to pass through the uh we need to pass through the um the auth on there no no we don't and we so what we want to do when we log out we don't want to hang out on this page we want to get forwarded to use our navigate right so navigate whenever we log out let's just go back to our home page boom lowercase there's and then we have actually want this to be use navigate boom there we go and so whenever we log out we have to make a cons for that well for that to use navigate so go up here say const navigate equal to use navigate that's going to be a function there so whenever we log out basically we wanted to forward us there and let's just give a little message so it note we know that we're logged out so console you are logged out cool so and this should be returned to null so let's see if this works is it going to work log out log out is not a function do we pull this in so handle log out log out that's good so handle log out and we export it do we do that same thing see same thing there we go so we just going to make sure log out now let's try it again let's refresh click this no you are logged out perfect and it forward us to our sign in page perfect that's what we want right there for us to our homepage great so what's next we have the on off state change we have our sign up we have our log out let's do our sign in okay so i'm gonna close that right there so next for our sign in let's close that account for our auth contacts this is where we're going to be right here and i'm going to throw this right above the log out and just below the create user okay so const and this is what we're looking for we're going to have we're going to have a sign in like so okay and what we're looking for is to sign in with email and password so and again it's gonna be an asynchronous function and whoops we're gonna be taking in some values so let's make this or sorry this is experience but we do need to take in email and password okay and then we want to return we want to return the sign in with email and password and remember we're passing an auth and email and then also the password and before we forget what i've been doing this entire time here let's go down here and we're going to pass this through we're saying sign in sign in like so boom perfect now we have access to it so let's look for our sign in component there we go and what we want to do first again we need to bring this in all right so before i forget we're going to use this use navigate as well so let's go ahead and bring that in use navigate and then we're going to import the auth context or sorry user auth dang i keep getting wrong user auth and again boom we're grabbing the user off from right there okay and so user auth is what we want there and we're also going to want to what we're going to want to grab is the um we're going to define that right there right so we'll say cons open up our brackets got to put this in brackets and we're looking for our sign in equal to the user uh function cool so now just like we did in the sign up we basically just copied everything over for this component so for our form what we're going to have is a sorry not a class name we want to on submit and then on submit we want to handle submit so we're going to need a handle submit function and then we're also going to want our uh our ustate right so let's go ahead and let's go into our sign up and let's just copy all of this right here dude so we're copying the email set email you state we're copying the password set password and the error and set error we already have all that over there cool i guess i could have grabbed that you now use navigate so we'll say cons navigate equal to use navigate cool that's a function all right so now we have all our state in there that's the way to do it um yeah okay react we'll import that boom import all right and the handle submit let's do the handle submit function so const we'll just say handle submit okay boom and this one we are going to want to say e dot my email not pass this in there so shut up e dot prevent default oh come on come on there we go all right guys there we go so prevent and fall and let's go ahead and set um set our air to just an empty string here okay perfect and then next what we're going to have the try catch block right so try and then we're going to catch we're going to catch an error and we'll just set error boom to e dot message and let's also console.log i like to log that so this is where i'll show you i haven't displayed an error on the screen yet but i'll show you how we're going to do that so boom there we go and for this what we want to asynchronous right so we're actually going to wait so let's put our async here async there we go and what we want to wait for is the sign in it's going to have email and password okay so are you ready to try this um what do we have our first i forget what we had that first test at test.com and i believe it was just password i'm gonna go ahead and sign in are we gonna get any bugs invalid uh auth invalid email okay i can't remember what it is so i'm just gonna sign up for a new account i'm just gonna say um email at test.com it's going to be password boom go enter email at test.com right so we're now on our sign-in page so email test.com password is pass let me get this right password invalid error auth invalid email am i getting this right okay so error auth invalid email why is my email invalid email set email uh oh duh okay yes sorry about that duh okay we missed we didn't have our on change uh okay so let's say our on change sorry about that you guys on change come on on change okay and um that's what we're gonna have is event and then we're gonna set our email to event dot target dot value there we go come on now come on all right let's change and um and we just want to say set password and target that value cool all right now i'm just going to refresh that and get rid of all those errors so what was it email at test.com and then i said this as password and weak strong come on auth wrong password what did i okay you know right here i'm just gonna say email at that's what it was test.com okay email at test.com that's what it is so email at test.com and then password and we don't have it uh forwarding us anywhere yet so it should just sit here but boom yeah so it logged us in but hey let's add in this navigate right because navigate we want to navigate into let's go to the account page make sure i spell that right and i'm just going to see if it'll do this now boom so there we go go to the account page and now we can successfully log out boom so there we go all right you guys smash that like button if you're using firebase authentication for the first time now so let's look at what we've done so far basically we can create a new user with the email and password we can sign in that user we can log out the user we have the on off state change function so we can determine whether or not the user is logged in and then we can actually forward using react router dom so what we also what we want to do next or what we don't want to be able to do that we can do is go to this account page so that doesn't make any sense to be able to access the account page unless we're logged in so let's take care of that right now we're going back go back to our code editor and we're going to take care of that with a protected route so let's go into our components folder we're going to create a new file called protectedroute dot js okay and i'm going to say rafce here to get our functional component and what we want to do we're going to be able to do two things we want to be able to navigate to another page in here if we're not logged in we also need to access our user so we're going to import this is from navigate a capital capital navigate there and this is going to be from react router dom and then next we need our our context so user and that's going to be from our context folder there we go context auth there we go all right so what we need to do is first to find our user so i'm going to say const user is equal to our user auth function there we go now what we want to say here is simple if statement and if if there's no user we want to return the navigate this is going to be wrapped in opening brackets there navigate to to our home page and our home page is where our logging component is boom there we go and this actually is going to be this can just be self-closing there we go and if not we're going to return our children and we're going to leave this destructure here so we'll just pass it in at the top there we go so let's go ahead and save that make sure there's no errors perfect now one more thing we need to do we need to go into our app there we go and close some of these and to make this a protected route we need to find the component or the the route the page that we want to protect and that's the account uh component right there so what i'm gonna do i'm gonna give some some space here i'm gonna add in my protected route like so then i'm just gonna cut this and put it right in the middle there and once we save that oh what i grab there we go just need to grab that right there and let's just throw it inside the protected route and so i don't think we need that there we go what do i do here let me go sorry guys let me go back here so i'm just going to cut that account okay cut that and let's import our protected route there we go and we'll paste that in between there there we go all right so no errors let's go in and check our account page and it should just automatically bounce us out of there boom so you saw it it flashed the accounts page and then it flashed us to the login to our homepage there so let's check this out let's create a new user here i'm going to say email free.com password is going to be password let's sign in boom there we are let's log out and let's see if we can log back in email at free.com password is password and it should take us right to the account page perfect boom log out and then we're gone so there you go have it you guys firebase authentication version nine and react yes thanks for watching make sure you smash that like button and consider subscribing to my channel i'm going to be putting out some more react content just like this here in the near future thanks for watching guys i'll see you on the next one

Channel: Code Commerce

Views: 45,184

Keywords:

Id: x62aBvnRCKw

Length: 58min 3sec (3483 seconds)

Published: Sat Apr 09 2022