Firebase v9 Authentication in React | Email-Password Auth | Forgot Password

what is up guys if you want to create your own website with an user authentication system without writing any of the backend or the api code then this video is absolutely for you in this video we'll see how we can use firebase authentication in our react web app in order to securely authenticate our users using their emails and password so stick to this video till the end and without any further ado let's get started [Music] welcome back to full stack simplified my name is prashun and i'm here to share some amazing contents related to full stack now if that sounds interesting don't forget to subscribe to this channel for more videos like this in order to get started i have a pretty basic authentication form here we can see that we have a login form here with the email and password fields and also a sign in button we also have this forgot password link which on clicking will send and password reset link to the registered user email and here we also have this new user so if we click on that we are redirected to this registration component or we can say the registration form and here also in addition to this email and password field we have a name field for the user and this already have an account does the same so basically we are not using any routing or something so this is a state based rendering so if i quickly go to this auth component we can see that we i have a state with either value of true or false and accordingly i'm rendering either the sign-in or the signup component in the app.js we can see that if there is no user we are entering this authentication or the auth component and if the user is present so if we set it true we are seeing this dashboard also you can see in the sign-in component we have these fields as we talked about and also we are using this use ref hook in order to fetch the data or you can say in order to get the current value of the text fields so here we are getting this email and password text field in the on submit handler and also we have a forget password handler which we talked about to send a password reset link to the register user's email so we require that email here so we are fetching it from that similar to that we also have a sign up button with the with a pretty much same logic over here now if you are unaware of this refs or how to use this use ref hook i have a pretty much full video on this topic explaining everything about user f and the forward drive interact so the link to the video will be in the cart server and also in the description below now the next step is to create and firebase project for that simply go to your browser and type console.firebase.google.com here add a new project give a random name to your project and click on continue now if you want to enable google analytics you can do it but i am simply disabling it for this particular video then click on this create project button and it will take some time and will be back soon once this is done so now as the project is created simply click on this continue button and then click on this add web application button here you can give in any random nickname to your application so i'm going to give that same name and then click on this register app now since we are using npm we need to install this firebase package so simply copy this line go back to your editor and in your editor open the console and simply paste that line this is going to install all the firebase dependencies which we require in our project now the next step is to simply grab this whole thing and here in our project i'm simply going to create a separate folder so i'm going to say firebase and in here i'm going to create an index.js file i'll be pasting everything which we copied now we need to clear these comments and also this initialize app now in order to use firebase auth in the version 9 of the firebase we need to import get auth from this firebase auth and here we are going to export auth object which will be equals to this get auth and will pass this app as its parameter now as our next step we are going to create a app-wide user context in order to maintain our user state throughout our application so in here in the src folder i'm going to create another directory called context and in here i'm going to say user context dot js and in here we'll be creating the whole context logic and every methods and states related to our user authentication so i'm going to say const user context is equals to create context and initially we want our states to be simply an md object now in here i'm going to create const user context provider which will be a simple function returning user context start provider now from the props we are going to simply extract the children prop so i'm going to say children and in here we are simply going to render the children now this provider also accepts a value so i'm going to say value which will be equals to this context value object so here we'll create this context value which for the time wing will be an empty object so now let us first start by creating our state so we'll be having basically three states so i'm going to have a user state which is going to hold all the user data so i'm going to say user and set user is equals to use state which by default will be null now second state which we want here is the loading state so we want to have our something like in loading text or a loader which we need to show when these data are fetched from the firebase server so i'm going to say use state and that will be also undefined by default now the last and the third state which will be having is the error state so if we have some error during the login or any other process we can simply show the error message by setting this error state so i'm going to say which will be a simply an empty string for the timing now if you are finding this context thing difficult or you want to explore more about this context then i have a separate video completely made on this topic explaining each and every aspect of the context api in react so you can check the video so the links will be in the card 7 and also in the description below now as a next step we are going to create four major methods the one for registering the user another for the signing in the user the third one is for logging out the user and the fourth and the final one is to send a reset password link when the user clicks on the forward password button so let us start by creating the register user function which is going to accept email name and the password provided by the user from the form and this is going to do some stuff which will be coming back into it now the next method for the function will be sign in user which is again going to get email and password but no name this time and this again will be doing some stuff the third method is the log out user which is going to accept no parameters and this will simply log out the user and also set the user state to null again and the final and the fourth method will be the forgot password which will accept a parameter that is email because as this discuss we need an email to send password reset link and again there will be some stuffs we'll be doing very pretty soon speaking of which we are just 5 subscribers away from our first 100 subscribers on this channel so if you are really enjoying this content then of sub to this channel will be outstanding now let us first dig into this register user function for this we need to import something from firebase slash auth and we also need to import the auth object which we created in our firebase index.js file so here we are going to import create user with email and password and this is the method which we'll be using in order to register our user so here i'm going to say first thing that is set loading to true because as soon as we enter to into this method we want a loader showing up so when to set the state to true in here we'll use this method we'll pass the email so we'll pass the first thing that is the auth then the email and the password now in here this returns a promise so let me expand my editor and here we'll say dot then and when this thing happens that is when there is a success we want to set the username to this name which we are getting as a parameter so i'm going to say update profile so also we need to import update profile from firebase auth so i'm going to say update profile and this is going to accept the auth dot current user and then the next parameter we will be setting the display name to this name which we are getting into this parameter now since this update profile also returns a promise so i am going to return this update profile right from here and in the next then block we're going to receive the rest that is the response and for now simply let us console log this response now here we also need to have a catch block at times there are some issues so we need to catch them so we're going to say catch now here getting the error from the firebase so let us also set the error to error dot message and finally in the finale block we are simply going to set loading back to false now essentially we can simply set our user state right from this then block but instead of that firebase provides us a method called on auth state changed which is going to take care of everything so when the user logs in logs out it is going to give us the required data for the user and it is going to maintain everything in the background so for that we need to simply import the on or state changed method from the firebase auth and in here we are going to say use effect and here this use effect is going to work only once the app mounts and here we are going to first set this loading to true because this spot state change is going to take some time to run so we are going to show a loading text for a loader so we need to set this loading state to true here and here we are going to say on auth state changed the first parameter which it requires is the auth and the second is a callback function which returns a response so i will say response and if there is a response we can say set user to that response and if the response is not there so either the user is not logged in or not registered we can set the user back to null now in here we are also going to set the error state to an empty string and also set the loading back to false now this auth state changed returns an unsubscribe method which we can use to unsubscribe to this listener when the app unmounts so in our return function we're going to simply return this unsubscribe method now let us move to our next function that is the sign-in user for this we need to import sign in user with email and password method from the firebase path and here we are going to again set the loading state back to true and we are going to use this method which is this sign in with email and password as a first parameter we are going to pass the auth object the next thing will be the email and the third and the last parameter will be the password now this again returns as a promise so we can simply grab this thing here and copy this and paste it right away now the next method is the logout user for this we are simply going to again import a method called sign out and in here we are simply going to use sign out and pass the auth object as simple as that and the final and the last method that is the forgot password method for this we need to import send password reset email so i could say send password reset email method from the firebase auth and then we can simply return the send password reset email and we're going to pass the auth and the email which we are getting as a parameter now this thing is going to return the promise so this forward password method will also return the promise which we will be handling in our login component now also let us not forget use this context value so we are going to pass the user loading error and then our all the functions which we have defined here when we say register user sign in user log out user function and the final one the forward password function and now also let us not forget to export this context provider signus export this context provider now the next thing is to create our own custom use user context hook so that we can use that hook directly in our child components to directly get access to all these values so i'm going to say export const use user context and this will be a function which will return use context and here we are going to simply pass the user context which we have created so let us do that and save this thing and now the next step we are going to go into our root component that is the index.js file and here we are going to wrap everything with this user context provider now in the app component let us simply use our custom hook so i'm going to say const is equals to use user context and from here we're going to destructure the loading error and the user state like this and in here i'm going to remove this new state thing because we do not require that we can also remove the import and now within this div i'm simply going to cut this thing completely and in here and we say if there is an error i'm going to show an error message which will be there in this error variable and i'm also going to have a class of error like this but don't worry about the class and everything i have defined everything in this index.css and i'll be providing a link to the github repository so you can find everything right there now coming back to our component we need to add couple of more things here so let us here we are going to say if there is a loading state so if the loading state is true i am simply going to show you a text of loading if the loading has been complete then we are going to have a simple fragment and in here we are going to show our user component now let us quickly fix this because we will having a semicolon here and save this thing let me expand my editor we can see that we are getting this registration form right away because we don't have any user logged in or registered now this is time to use all the methods for logging in and logging out and the registration into our components for that the first thing i'll do is go to my signup component and in here i'm going to again restructure the register user function so i'm going to say use user context and in here i'm going to say register user function now we are going to use this register user function so we want to say if email name and password is true that is if there is a value to them so i am going to call this register user function and we are going to pass the email name and the password so that's it for this registering thing now we can quickly move on to our sign in function here again we are going to destructure two methods namely the sign in user and also forward password now we are going to use use user context hook and in here we are going to do the same thing we will check if their email and password exists then we'll be calling this sign in user function with these values and in here we are simply going to check if email is present then we are going to call this forgot password method and this as discussed will return a promise which we need to handle here so i am going to say email and then on this then block you know to show that if this is a success what we're going to do is we are simply going to take this email ref and we are going to clear its value so i'm going to say email dot current ref dot value equals to empty string now if we give an email and then we simply click on this forget password button if the thing is successful then this email will be cleared from this email field now let's save it and now before using this method and seeing everything in action we need to go to our browser and click on this continue to control button now in here we are going to use this authentication thing and here we need to set up authentication for that click on this get started button and then select this email and password enable the email and password authentication and click on save now if we quickly come back to our browser and click on this new user and we'll provide this fullstacksimplified.gmail.com my name and let us save a password one two three four five six seven eight now if i click on register we are getting into the dashboard now this dashboard is pretty empty so let us quickly go to our dashboard and make some quick changes i will also be having a lockout button in order to log out our user so in our components in the dashboard i am going to destructure those methods from our custom hook so i'm going to say use user context and here we are going to destructure the user and the log out user function in here i'm going to show the name and the email of the user so we'll have an h2 tag i'm going to say name which will be equals to user dot display name and we'll also have a email field or we can say email text where we'll be showing the user email and then finally we'll be having a button which will simply say log out and in the on click event here we are simply going to pass this logout user function now if we save this and come back to our browser if we click on this logout button we are simply getting logged out now since we have already created our user let us now check if we are able to log in to the same user with the same email and password so i will say email to this and let us first give a wrong password so i'm going to say one two three four five six then click on sign in and see here we are getting the firebase error message that the password is wrong now let us again try to with the correct password so i'm gonna say one two three four five six seven eight and voila we are going to see the user have logged in and we are going to redirect the user to the dashboard now since as i said we are always doing this redirection thing with the conditional rendering using the state but obviously you are going to use the react router or some routing library with the react thing in order to make the thing happen now if i quickly log out and let us check the final and the last function that is the forward password now if i click on this forward password and since the email field has been cleared now let us check if we have got any mail so you want to check yeah we have received a password reset email if we click on that we are redirected to a link where we can reset the password simply and now if i simply give it a new password for an example one two three four five six seven eight nine and click save password has been changed let us close this and go back to our browser and let us first try the older password click sign in we can see that the password is wrong now let us check also with the newer password so what is one two three four five six seven eight nine click on sign in and everything is working as expected now if i quickly go to the firebase console and click on this users tab we can see the list of all the users who have registered in our web application we can also directly manage the users right from here so we can reset the password we can disable the account delete the account so you have the controls right from this admin dashboard so basically that was all about firebase authentication now firebase also provides authentication using facebook google github and other sort of provider now if you want me to make videos on those login systems how to work on them do mention that in the comment section below so that was everything about firebase authentication using email and password if you really like the video don't forget to hit the like button and also subscribe to this channel for more contents like this

Channel: Fullstack Simplified

Views: 1,882

Keywords: ReactJs, Firebase, Authentication

Id: 14Nb3qPDtBQ

Length: 23min 23sec (1403 seconds)

Published: Sun Oct 24 2021