React Authentication Crash Course (with Firebase v9)

hello everyone in today's video i'll be showing you the basics of firebase authentication i'm first gonna start with the demo here i can give the demo a random email and a random password and we can hit sign up and it's gonna register and log us in with that email and once we're logged in the sign up buttons and the login buttons are going to be grayed out because we don't want the user to be able to log in after they are already logged in so instead what we can do is we can log out and we're going to be logged out and we can try to sign up using the same email again and it should give us an error because we shouldn't register with an email that is already registered instead we can log in and we're going to be logged in like that all right so the first thing we want to do is go to firebase console and create a new firebase project so that's what i'm going to do i'm going to give the project a name let's click continue and we don't need google analytics so we can just disable that hit create project and it's going to take a while to create so i'm just going to pause the video here and it seems like our new project is ready i'm just gonna click continue and this should bring us to our firebase console and once we're in the firebase console i'm gonna click on authentication on the left pane and let's go and get started with this so once you're using firebase authentication you have access to all sorts of providers like you can sign in using google facebook github and microsoft and so many other different providers but in today's video we're just going to be focusing on the most basic form of authentication and that is using the email and password sign-in method so i'm going to enable this hit save and once we're done with this i'm just going to show you the users tab here so the users tab will show you all of the existing users in this project which we currently have none and here you can create a new user by giving it an email and password but this is not what we are going to be doing this video because we want to create new users from the react application front end so let's come back here let's make a connection between our firebase back and our react front end so to do that i'm going to go to the project overview and create a new connection by clicking on this web icon here so this will prompt us to create a new web app which i'm going to name react app front end you can name this anything you want i'm not going to set up firebase hosting i'm just going to click register app and give it a minute or so and it's done and it's telling us to install firebase using npm which i'm gonna do but i'm gonna use yarn instead so i'm gonna come to my app here this is my app right now it's basically a create react app template i've gotten rid of all of the nonsense files that we don't need and this is what it looks like in the browser it looks like an empty page i'm going to my terminal here and let's say yarn add firebase if you're using npm you'll be doing npm install firebase and while this is running i'm going to go back to my console here and copy my api key so you'll want to be copying your own api key here and then i'm going to come to my vs code and create a new file called firebase.js and paste in all of the code here the first thing you're going to notice about the code is it has a big to-do here that tells you to add the sdk for the specific firebase services that you want to use so the thing about firebase is that you have so many different types of services you can use authentication cloud firestore real-time database storage hosting functions all sorts of things so i'm going to be importing a single module here called firebase slash off now this is the code for all stuff related to firebase authentication and in order to perform any sort of operations we first have to get a handle from firebase authentication which is what i'm going to get here i'm going to get get off from firebase authentication now get off is going to return the handle to us that we can use to perform all sorts of authentication functionalities so i'm going to store this in a variable called auth and run get off like that now that we have our authentication handle i'm going to define a new function here called sign up it's going to take in an email and password i'm also going to export this function so that we can use this function from other components such as app.js i'm going to import something from firebase auth called create user with email and password and this is what we're going to be running from our function called sign up here and whenever you're running any sorts of operations or functions that you're importing from firebase slash auth you'll always want to provide the authentication handle as the first argument in these functions i'm also going to provide the email and the password and i'm going to return this so that we can get the the status of this if it succeeded or failed in creating a new user now that we have exported our signup function i'm going to go over to app.js and import that function from dot slash firebase i'm also going to want to get the email and passwords from the user because right now if i switch to my browser tab here you can see we have an empty canvas so i'm going to do input placeholder equals to email self-close this i'm also going to do one for password let's save and refresh you can see that if i type my password in here the password is going to be displayed in plain text which is not what i want so i can go and do a type of password and it should be a type of password so that's better and i'm also going to wrap this in its own div with an id actually i'm just going to wrap it in its own divs here and let's indent this properly i'm going to give this div an id of fields because right now i have my custom css here it's pretty much just some really basic and simple uh styling because i don't want to bog down this video series with the whole bunch of styling like using bootstrap or even materialize so let's make our button now new button let's do sign up the button is going to have uh and on click i think it's going to have an unclick and i'm going to have to handle sign up so let's go and define a function right now called handle sign up and it's not going to do anything right now so let's go and refresh this and we can type an email you can type password you can sign up but nothing's going to happen because the function right now is blank first i'm going to do is make this function asynchronous because signup is going to return a promise because signup is an api call here to the firebase authentication api so i'm going to just do that let's do await sign up give it an email and password so right now the thing you're gonna notice is that email and password are underlined in red because it's undefined we are not getting the email and password from the input fields here so how do we get the values from the input fields using react so the thing i'm going to be using is called use ref re-import use rev from react and i'm gonna give this i'm gonna make two refs here i'm gonna make um cons of email ref equals use ref so use ref is something that is specific to react it's not really a firebase thing so if you don't really know what used refs are you should probably go and check that out on google before you continue this step so email ref and password graph equals a user i'm gonna give these inputs a ref value it's going to be equal to email ref i'm going to change the bottom one here to be password rev so now that we've assigned this input field to refs what i can do is i can come to my sign up here and i can do email is email ref dot current dot value so i'm getting the current value of the email input ref and also for the password i'm going to password the current dot value and we can save this so let me check this this should be working one way to find out is go to our react application here let's type something at gmail.com and give it a random password that's hit sign up of course we don't get any feedback there's no feedback whatsoever the only way we can check that is to go to console here and refresh and we do in fact see that something in gmail.com appears in our database so this is a good sign means that our sign up is working but the thing is right now if i try to sign up again you can see that it's going to crash in our faces and this is generally not something you want to happen when your user is using your actual application because you see email is already in use so the way we can catch these errors without the app just crashing on the user's face is of course to use the try catch technique so we can do try we can try to wait sign up and if this doesn't work we're going to catch the error and we're going to just going to do a simple alert that says error a generic error message here we can fix that in the future but right now if i come back here reload this and let's try something at gmail.com again let's try sign up it shouldn't crash it should just give us an error message that says error so this is good but another thing is that when i hit sign up you can see that i can just spam the signup button and it's going to like register our user multiple times and this is not something we want happening we want there to be like a loading state so that the sign up button is actually disabled when we are loading and we are running the transaction between our front-end and our back-end server so what better way to implement loading states than just to use the react state itself so that's exactly what i'm going to do here which is to import use date from react i'm going to make a state variable here it's called cons loading and set loading and i'm going to set this to use state with the default value of false because we want to begin without loading and then before we even try any of this we can try set loading to be true i can in fact put this above the try and catch statement and put something below which says set loading of and now we shouldn't be able to spam our signup button let's go ahead and try that in our application let's do something something at gmail.com let's try to spam the signup button and we can still spam the signup button and the reason for that is because we have the state variable of loading but we're not using loading you can see it's underlined in yellow and it's a bit grayed out because we are we've declared this variable but we are never using and reading the value from this variable so let's go ahead and add a disabled value here in the button element and then we'll just say loading so if loading is true then this button will be disabled let's refresh this one more time and let's do some thing at gmail.com give it a random password let's try the spam now you can see that we can no longer spam the signup button because right after i click on sign up it's going to gray out and it blocks you from spamming it all right let's try signing up with a different email this time let's do test at gmail.com that's it sign up and this should succeed but the thing is there is no indication whatsoever if we have succeeded in our signup process or if we are even logged in at all because right now we are logged in as test gmail.com but we don't actually know that because the application is not telling us anything so we're gonna have to write the code for that in our app.js i'm just going to say currently logged in as and then i'm going to wrap this in its own div just the cheapest and dirtiest way to get everything to be on its own line then we're going to have to put something here and this is gonna be the current user's email so that's the thing that we're gonna be putting in this curly braces right here but we don't actually have that current user's information right now so i'm gonna go to firebase.js here me import something called on off state changed so an auth state changed is kind of like on snapshot if you've watched my cloud firestore videos it's a way you can subscribe a listener to listen for updates in the change of the user's authentication state the thing is to listen and keep track of the changes that's being made with this listener we need to put this in the react state so that we can trigger a re-render whenever there's an update and to keep track of this in react state we have to put the state variable either in a react component or in a react hook and in this case because i want to use this hook in multiple places i'm just going to be calling i'm just going to be creating a custom react hook it's going to be called function use auth so this is our custom hook that i'm going to be creating of course i have to export this so that we can use this in other components the first thing i'm going to do is of course create a current user state variable so current user and set current user we want to trigger a rerender every time there's an update that's being pushed to the on off state changed event listener so i'm going to use state of course i have to import that from react up here so import use state from react and we just do return current user so i'm going to write the code for current user later on but first of all i'm going to come back to app.js here i'm going to import use auth from firebase and then we're going to be putting const current user equals use off so this is how we're going to get our current user it's going to be returned to the use auth state from this custom hook right here so we can right now we can come here and do current user dot email the thing is right now current user is empty because we are not setting current user so that's what i'm going to do i'm going to use effect here and we import that from react which is automatically imported and i'm going to have uh an arrow function here as well as an empty list because we want to ever run this code only once when the component mounts in this use effect function i'm going to call on off state changed and the thing i'm going to pass in here is the authentication handle of course and i'm also going to have another arrow function which is in here and i'm going to get the user from this error function so user and then i'm going to do set user set current user of user so basically this is what i'm going to do i can actually just get rid of the curly braces here as well because it's just a single line statement and this should be it so basically i'm going to give this on auth state change function a return variable called unsub and then we're going to return and sub to use effect so we are going to subscribe to a listener every time our hook is mounted and once the hook is unmounted or once the component is unmounted we're gonna unsubscribe from the from this hook so that we don't keep the listener just permanently listening in the background or even though our component is unmounted so here i can come back to my app.js and then let's see use auth is not defined because i'm not spelling it correctly there and this should work all right so right now we're going to be seeing currently logged in as current user.email which i'm going to come here and refresh and let's see what this gives us so current user is undefined so the reason we're getting this error is because there is an initialization phase in which our client has to connect to the firebase backend servers in order to retrieve our user's current authentication state and that means that we always have to start off as a logged out user and there's a delay before we can get the user's information such as the email address from the servers which is what we're doing in this line here current user dot email so the simple fix is i'm just going to put a question mark here so that the current user's email will only print out if the current user is not null if the current user is equal to null then we will just ignore this line and it will just print out current currently logged in as so let's try that out i'm going to refresh this and you can see there's like a delay there's a slight delay in which this is blank and it takes like half a second for test gmail.com to show up all right now that we are logged in as test at gm.com we want to disable the signup button here because we don't want to allow users to register for new accounts if they are still logged in so they have to log out first before they can create new accounts so let's go to the code here i'm going to add another criteria in the button disabled state which says if current user is not equals to null then we want to disable the button right here which is working you can see that the button right now is grayed out because we are logged in so what the thing is we can just get rid of this whole part here because of javascript syntax it's just going to work the same and with that we are pretty much done with all of the code for the sign up functionality so the next thing we'll do is make a log out button here because we're right now we are logged in i'm gonna make user have the ability to log out so i'm gonna do a button that says log out and gonna have an on click on click equals to handle logout which we are going to create up here just after handle signup so i'm going to collapse that i'm going to do a sync function handle log out and because it's still an api call to log out a user so that's why it's going to be an asynchronous function and here i'm going to put something that we write in firebase.js which is i'm going to just collapse all of these functions here let's type export function log out and i'm going to move this all the way up here before the hook so i can expand this and i can write a sign out and give it a an auth handle there so i'm going to return this of course i've import that from firebase which is signed out so sign out so this is basically how you sign out and of course don't forget to give it the authentication handle every time you're running function from firebase auth you'll always want to put the authentication handle there and i'm going to import this log out let's do logout and handle logout which is logout and we don't even need to pass in the email or password here because we're just logging out the current user and i'm going to just put try actually await this i'm also going to try and let's catch the error if there's an error you're just going to say alert error so the app doesn't just crash on our users face and we're going to just like give it a loading state as well so set loading of true and at the end of this set loading false right now this log out button should be fully functioning so let's go back to our browser let's see if we're logged in so we're logged in as test at gmail.com i can log out and then we're now logged out the thing is we're already logged out and we're going to try logout again it's just going to be we're going to disable this button if we're already logged out so i can go ahead and give it a disabled equals to loading or current user but instead of just putting the current user i'm going to put not current user because if current user is null then i want to disable the logout button so i want to inverse this it's going to be inversed compared to the signup button here so if the signup button is disabled the logout button shouldn't be disabled and if the logout button is disabled then the signup button shouldn't be disabled so it's going to be opposite and now we can see that's working i can log i can sign up with a different email right now i'm just going to give it a random email then you can sign up we can see the logout button is disabled right now if i hit sign up we're going to be logged in and the log the logout button is going to be not grayed out anymore all right so we are actually almost done we're done with sign up and log out so now all that's left is to do the login functionality which i'm going to do right now i'm going to make a button here i'm just going to clone the button down i'm going to say log in instead of sign up so log in and then on click should be handle login so handle login is going to be pretty similar to handle up which means i'm just going to clone this asynchronous function down like that and we can collapse handle signup so we're just focusing on handle login right here so set loading would still be true there's to be a try catch but instead of await sign up i'm going to be awaiting login which is something i have to import here from firebase dot slash firebase which means i have to go to my firebase.js and create a function here that says export function login so i'm just going to clone that and collapse that so export function login it's going to take an email and password as well so instead of create user with email and password i'm going to do sign in i'm just going to sign in with email and password so sign in with email and password which is something we have to import from firebase auth so that like this and this should pretty much cover everything that we need to do to be able to implement the login function let's go back to firefox and let's refresh this i'm still logged in which means i'm going to log out i'm going to actually create a sensible account here let's do uh hello at gmail.com password is just going to be password123 let's sign up and just going to sign us up and we can log out and we can log in again with the email all right so login is now officially done but before i end this video i just want to show you guys something that you might encounter when you're developing your own firebase authentication app so first i'm going to log out of this i'm going to clear everything here so let's say i'm going to like sign up with a different account right now and i give it like a password of one two three four so there are only like four characters in here and if you try to sign up like that it's gonna throw you an error and this error is basically something that you can see if i just get rid of the try and catch here so in my signup function let's handle sign up and i'm to get rid of the try and catch so let me do that and so let's comment that out so you can see what the error is so i'm going to hit ok let's try to sign up like that again and you can see that the error is going to say password should be at least six characters so if you have like a password that is weak you're gonna get this error so if you just start getting random errors in your development just don't fret and just try to create a password that's more than six characters long so with that out of the way i'm gonna end this video right here in the next videos i'm gonna make uh how you can update your email and password in firebase i'm also gonna show you how you can send forgot password emails to your users and also eventually you will get to link cloud firestore with firebase authentication so hope to see in those next videos i'll catch you then [Music]

Channel: Logicism

Views: 6,925

Keywords:

Id: _Kv965pA-j8

Length: 22min 27sec (1347 seconds)

Published: Sun Oct 24 2021