React Firebase Authentication Crash Course With Context API and Protected Routes For Beginners

hey what's going on guys welcome back to another video so in this video we will explore the firebase authentication in react application we will see how we can set up the firebase configuration and build functionalities like login log out register a new user and log in with google account along with the context api let me show you the demo that we are going to build in this video so this is the application that we are going to build we can see that we have a firebase auth login page where we have the email address and the password then we have a login button and below that we have a sign in with google button and if we don't have an account then we can click on the sign up link so first if i click on the login directly without entering the email and the password then i'm going to get an error that odd slash invalid email and the password now let's give a try i'm going to add this email id and then i'm going to add the password and then i'm going to click on the login you will see that we have an error that particular account does not found or the user not found so what we are going to do is we are going to click on the sign up and here we are going to add the email address and let's add the password all right and then i'm going to click on the sign up so if we click on the sign up and the account created successfully then we will redirect to the login page so i click on the sign up button and you see that we have been redirected to the login page now let's give a try so this was our user and then i'm going to have the password and then i'm going to click on the login and it says that we have a wrong password so let me correct the password again and now if i click on the login then we should be able to login and we go to the home page so this home page is a protected route so only the authentication users will be able to view the home page now if i click on the logout then we go back to the login page all right so now this functionality is working and now let's check the sign in with google so if i click on the sign in with google account then i'm gonna see this pop-up and it will open my all the accounts okay so i have two google accounts and let me sign up with the the page so i'm gonna click on it and you will see that as soon as i am successfully authenticated then i go to the home page where we show the message hello welcome and we see the email address of the user that is logged in so now if i click on the logout then we will go back to the login page and this all is happening with the help of the firebase authentication so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] alright guys so i have already bootstrapped my react application using npx create react app and the name of my application let me give you a quick walkthrough of the code which i have so this is our application folder and you will see that we have a package.json and inside the package.json i have already installed some of the dependencies which i will need for this project so if we go through then we see that we have a bootstrap so i'm going to use the react bootstrap components so that i can make my ui faster then i have already installed the firebase so you can install the fireplace with npm installed firebase then i have installed the react bootstrap and then we have the react google button which will give me a google sign-in button so you can install via npm install react google button and then we have the react router dome for routing so we are using the react router dome version six so you can install the react router dome with npm install react router dome so these are the dependencies now let's go to our source folder so in the source folder i have already removed all the unwanted files that i don't want for this project then we only have the index.js which is the standard code which we get and then we have the app.js and inside this app.js change anything so it is as it is then in the app.css i have added some of the css styling which i will be needing for my ui so i'm not focusing much on the css part for this video so the focus will be more on the context api and firebase authentication then i have created a folder for the context so if i open that file i have a user of context which is empty then i have created components folder which contains all my components inside this i have a home component which has a basic jsx in it then we have the login component so inside the login component we have the ui built using the react bootstrap components then we have a very similar the signup page which is having an exactly same ui as the login page and last we have a protected routes component that will be protecting our routes only the authentication users will be able to access the routes so now let's go to our app.js and what we are going to do is i'm also running my application on the local development environment so if i go here and we see that our application is running on localhost 3001 so what i'm going to do first is i'm going to remove everything from my app component so let me remove everything from the app component and here i'm going to add the login component and let me import the login so i'm going to import and this will be coming from dot slash components and then we have the login now if i save this then we see the login page so let me expand this now what we're going to do is we are going to first set up the firebase so let's go to the firebase console so i'm going to write firebase and i'm going to click on the first link so let me click on the first link and then i'm going to click on the console so go to console and what we can do is first you need to add a project so you're going to click on this add icon so i'm going to add a project and then you can name your project so i'm going to name my project as react authentication all right and then i'm going to click on the continue and here you don't need to do anything you just go with the default settings and then you just click on the continue and here you're going to select the location so i'm going to select india and then i'm going to accept it and then i'm going to click on the create project so this is going to take some time so let's wait for some time all right so now our project is ready and what we can do is now we can click on this continue button and we will end to the project landing page so this is our project landing page and here you can have a different types of application inside this project you can have an ios application an android or you can have the web application so what i'm going to do is i'm going to click on this web application because we are working on the web application so now we need to give a name to our application and our application is the react auth all right then i will also have a firebase hosting no i don't want it then i'm just going to click on the register app all right so now our application is created and here we see that first thing we need to do is we need to do the npm install firebase to install firebase in our project so if we go back to our application then if we go to the package.json and inside the package.json we see that we already have installed the firebase so you can install the firebase using the npm install firebase now let's go back and take the configuration of the firebase all right so now we can take this firebase configuration and then we can add it in our application so what i'm going to do is i'm going to copy this i'm going to create a new file which will be named as firebase config so i'm going to add a new file in the source and i'm going to name it as firebase.js then i'm going to paste the configuration here and what we can do is we don't want anything to the analytics so i'm going to remove this so i'm going to do some cleanup and these configuration values will based on your application you have created so for now for this project i have created but i'm going to delete this project in some time so you will have to add your own configuration for the api key auth domain and all these values all right i'm going to save it and now we have to enable the authentication in our firebase console so if we go back to the firebase then we will click on continue to the console and in this console you will see that we have an authentication tab here so if we click on this authentication tab then i will click on the get started and here you will see that we have the different sign in methods so for this application we are using two sign in methods one is the email and the password so what i'm going to do is i'm going to click on this native provider and then i'm going to enable it then i'm going to save it and the other one i'm going to use is the google sign in so let's go back to the add new provider and then i'm going to select the google and then i will enable it then i'm going to select the support email so for me this is the support email and then i'm going to click on the save so you will see that we have two authentication enabled in our firebase console all right so we have both the enabled and here you will see that if we go to the users we have a table where whenever we create a new user we are going to have the user in this table since we are not using the firestore database we can also integrate the firestore database to have a users table but for now for this video we don't need it we will only using the authentication and all our users which are registered will be listed here so that you can manage your users all right now we have set up the basics of the firebase console now whatever we need to do is we need to do in our visual studio code so let's go back to the visual studio code and now what we are going to do is we need to import the get auth method from our firebase auth so i'm going to have the get auth so i'm using the firebase version 9 so if you are using the older version of the firebase then you will have a different way of importing as firebase 9 have a modular way and not the namespace way so you can read all this information in the documentation of the firebase so here what i'm going to do is this will be coming from the firebase slash auth all right now we have this firebase config so what we will do is we have the app we have initializing this firebase config and next we have to export so let me have the export and i'm going to create a constant of auth and this will be equals to the we need to have the get auth function and then we need to pass the app inside it so i'm going to pass the app and we are also going to export the app itself so i'm going to write an export default app that's only the configuration we need for the firebase in order to use firebase for the authentication so i'm going to close this application we don't need this now and then what we're going to do is first let's introduce the routing so that we can switch between the login and the sign in page so for the routing if you don't know about routing then i have an entire dedicated video on the routing you can click on the cart above and jump to it directly since we are using the react router version 6 so it will be a little bit different in the setup of the routes so what i'm going to do is i'm going to go to the app.js and inside the app.js i will just first import routes then i will also need the individual route and all this will be coming from the react router dome and then what i'm going to do is i'm going to go here and i'm going to remove this and instead of this i'm going to add the react bootstrap component so i'm going to add the container inside the container what i will need i will need a row all right and then i will need a column and then inside the column what i will need i'm going to create all my routes so let me add the routes so i'm going to have the routes component then i'm going to have the individual route so for the individual route first i'm going to have the slash and then for this the component which i want to load is i'm going to write the element so previously in the version 5 of the react router you used to add the component but now in the version 6 we need to add a element here so the element which we want is the login all right now let's close this route and i'm going to copy this and i'm going to add one more route so let me add a route here and here i'm going to have the sign up all right then i'm change this to sign up so now we have both the route the home route and the sign up route now if i save it and if i go here and then if i refresh my page then i have some errors so let's fix them so we need to import first the container and the rows so i'm going to do an import i'm going to have the container i'm going to have the row and i'm going to have the column and all this will be coming from the react bootstrap all right now if i go and if i refresh my page oops then it says that container is already defined so i already have a container so i'm going to remove this and i will also import the sign in so let me copy this i'm going to add it here and i'm going to change this to sign up so i'm going to copy this i'm going to add it here and i'm going to add it here see an error and the error says that the let me adjust my screens and the error says that the use routes may be used only in the context of the router now previously what we used to do we used to import the browser router but now here we haven't imported the browser router so what we will do is we will go to the index js index.js what we are going to do is we are going to import the browser router here so let me import browser router as router so let me add the router and this will be coming from the react router dome all right then i'm going to add this router here so let me add the router and then i'm going to add the router here so let's close the router and now if i save it then we see that we have the login page so now this is working now let me go to the signup so if you want to go to the sign up then what i will do is i'm going to have the sign up and we will go to the sign up page but we need a link between the sign up and the login so let's add the link so i'm going to go to the login page and inside the login what i will do is i'm going to import so let me import the link and this link will be coming from the react router dom so let me add that and i'm going to add the link here so what i will do is i will go here i'm going to add the link to all right and then inside the two i'm going to add slash sign up and i'm going to close the link so now we have it and we need to do a very similar thing in our sign up as well so let's go to the sign up and inside the sign up i'm going to add the link here this will go to slash and i'm going to end the link all right let's import the link so i'm going to copy this and i'm going to add it here all right and now if we go and see that we have a link so if i click on the link then we can switch between the sign up and the login page so now let's go and let's write the context api so that we can have the authentication so if i go to my contacts folder and inside the context folder i have nothing so here we are going to write the context api so the first thing we need to do is let's import the create context so i'm going to have the create context and this will be coming from the react all right and then i'm going to create a constant so i'm going to write a constant user auth context and this will be equals to the create context so if you don't know about the context api and the pattern which i'm going to use here then i have a dedicated video on the context api you can click on the card above and jump to it directly all right so we have this context api and i know we need to create a provider function so what i'm going to do is i'm going to have an export function and i'm going to name it as user auth context provider all right we are going to have this and this is going to take the children's so whatever the components we pass in as a children and then what it's going to return us is it going to return us the context provider so what i will do is i'm going to have here user auth context which is the name of our context dot provider so let me add the provider here and inside this provider we are going to pass the children's so whatever the children's we have all right and whenever we have this it actually takes a prop as a value so i'm going to add a value and this value will contain an object so whatever the object we can pass it here all right so we have this but what we need is we will also need to use this context so in order to use this context what we are going to do is we are going to make use of a custom hook that is going to wrap the use context so i'm going to have an export function use user auth and this use user auth will actually return the use context we are making a use of the use context hook and we have to pass the context so the name of our context is user auth context so i'm going to add it here so i have misspelled the return so let me correct that so we did a basic setup of our context api and now we need to start writing our functions for sign up register and the login all the stuff so what we are going to do is we are first going to import few methods from our firebase auth so i'm going to have an import all right and this import will be coming from the firebase so let me add the firebase slash auth and what we need from the firebase auth is first we need to create a new user based on email and the password so for that they have a method called create user with email and password then we will also need to sign in with email and password so for that i'm going to use the sign in with email and password then we are going to have a logout as well so for that they have a method called sign out so let me add the sign out and they also have one more method which is the on auth state change so whenever we try to log in a user it changes the state of the authentication and in that case it provides us the current user so for that i'm going to add the on auth state change so it doesn't make sense for you at the moment that what i'm adding all those stuff but it will make you sense in a bit and now let's go and let's start writing our authentication provider so here what i'm going to do is first i'm going to create a function for create user with email id and password so what i will do is i'm going to write a function and the function name will be sign up because we are doing a sign up and when we do the sign up what we are going to provide we are going to provide the email and we are going to provide the password and in this function what it's going to return us then this function will return back the function which is this one so i'm going to copy this and i'm going to add it here all right and this function takes some inputs so first input will be the email and the other input will be the password but in order to do the email and the password and create a new user it will also need your auth instance which you have created so if we go back to our firebase so let me go to the firebase and here you will see that you have taken the auth instance of our application so we have to pass this auth instance so i'm going to copy this and let's go back here and here i'm going to pass this auth instance we have to import this auth so i'm going to go here i'm going to do an import auth and this auth will be coming from the dot dot slash and i'm going to have the firebase alright so we have provided the auth we have created a signup function as well so now if we want to test the signup function we can test it but along with the signup function i also want to create the login function so what i'm going to do is i'm going to copy this and i'm going to add it here all right and here i'm going to write the log in for the login also it's going to take the email and the password but this time the function will be used as sign in with email and password and the parameters will be very similar email password and the auth instance so i'm gonna save this as well and we have saved it now one thing we need to do is how the firebase will notify us that particular user all is created or a particular user is logged in so for that case they provide us on auth change function so this is our function so we want to run this function only once when the component gets mount so what i'm going to do is i'm going to copy this i will go here and i'm going to write and use effect so let me add the use effect and this use effect is going to have an arrow function and we want to run this only once whenever the component gets mount so whenever the component gets mount either the auth status or the current user will be null or we're going to have some user so what i will do here is i'm going to have here on auth state changed so i can do just simply copy and let's add it again and in this on off state we have to pass the auth and it gives us the current user so let me add the current user and this is going to be an arrow function and when we have this what i'm going to do is i'm going to create a state of a user so that i can access it in all my components so what i'm going to do is i'm going to write a constant and this constant will have the user and set user and this will be equals to the use state so now we have it so i want to import the use state as well all right i am also using the use context so let me import the use context as well so i'm going to go here i'm going to use the use context so we have this and what i want to do is whenever the auth state change i want to set my current user so i'm going to write a set user and what i want to set whatever the current user is so i'm going to set the correct user but what we need is whenever a component is mounted we have this on odd state changed and we set the current user so we also want that whenever the component is unmount we don't want to listen this function anymore so for that what it actually offers is it offers an unsubscribe function so what i'm going to do is i'm going to write a constant and i'm going to write an unsubscribe and i will do a cleanup so whenever a component gets unmount i want to run this cleanup so i'm going to have a return so if you don't know about the use state and the cleanup function then i have a video on it you can click on the card above and jump to it directly so i'm going to return here a arrow function and inside this arrow function i'm going to do the cleanup so i'm going to copy this and i'm going to add it here all right so we did the cleanup part and let's give a try and let's try to do a create new user a registered user or a signup user and then try to log in it so i'm going to go back here all right so if i click on the login then we go to the login so right now we don't have any users so what i will do is i'm going to go to the sign up and here what we will do is we need to make use of the sign up in our sign up component so let's go to our signup component so i'm going to clear all this stuff and we don't want it and let's go to the sign up now on the sign up what we need is whenever we click on the sign up function we first need to have the values of the email and the password so i'm going to write n on submit and this is going to have a handle submit and we will also need to manage the state of our email and the password so i will have the states so i'm going to write a constant email and set email and this will be equals to the use state and very similarly i'm going to have a constant for a password and then it's going to have a set password and this is going to be a use state let's import this use state so i'm going to import the use state and then what we will do is we are going to write an on change here so i will go here i will click on enter and then i'm going to have an on change all right so on change i'm going to have a arrow function which will have an even and then i'm going to set the email all right and the value of the email will be event dot target dot value all right i'm gonna do a copy of this and i'm gonna add it here as well so let me add for the password all right and for the password i want to change this so this set email will now change to set password and now let's write this handle submit so i'm going to go here and i'm going to write a constant i'm going to have a handle submit which will be equals to an arrow function and i'm going to have an add prevent default so that my page doesn't get refresh on submit now what we need is we need the signup function which we have created in our auth so if we go here we need this signup function and this signup function we can access it with the help of the use user auth hook so i'm going to go here and here what i'm going to write is i'm going to have a constant and inside this constant i need a sign up and this sign up will be coming from the use user auth so now we need to import this use user auth so i'm gonna go here and i'm gonna import use user auth and this will be coming from dot dot slash context slash user auth context all right now we have it and this is going to be an async function so what we need to do is i'm going to do here an async so let me add an async and then i'm going to write a try block here all right and then i'm going to have a catch block which is going to give us an error okay and inside this try block what i will do is i'm going to have an await and then i'm going to use this sign up function all right and with this sign up function what i need to pass is i need to pass this email so let me copy this email and then i need to pass the password so i'm going to copy this and i'm going to add the password here all right so in case of an error what we are going to do is we are going to return an error message so to handle the error message i'm going to create one more state so let me have a constant and i'm going to have the error and then i'm going to have the set error and this is going to be use state all right and what we will do is initially whenever we make a try then in that case we need this error object to be set as empty so i'm going to set the error as empty all right and once we get the error what we need is we need to assign the error to the set error so i will have a set error and this will have the error dot message all right so we have written it and now let's give a try so there is some error we see what the error is it says that cannot file use user or contact.js does not match with the name of the file so we have made some mistake and the problem here is we have added a small view so let me add it and now we have another error which says that the we don't have the value here what we need to uh provide so we have to make some more changes so what we will do is we will go to the user auth and here what we need to pass is we first need to pass the sign up function so whatever we need to expose so we need to expose this sign up so i'm going to add the sign up here so either you can add it like this or you can actually create a constant here with an object and then you can assign the object it's either way whatever you prefer so i will also need the user so let me have the user and the sign up now we need to provide this context provider so let's go to our app component and inside the app component to the routes i need to provide this context provider so let me add it and then i'm going to close this user auth context provider all right now let's import it so i'm going to go here and i'm going to import the user auth context provider and this will be coming from the dot slash context user auth context all right and now let's go and we see that we have misspelled the firebase so we have done a lot of mistakes so let's go to the firebase so i'm going to go to the firebase.js and here i'm going to add the firebase all right now we see that now we don't have any errors but one thing we have missed so if we go to the signup function and in the up we have added the error but we need to display this error on the screen so we have to add a component which is the alert component of bootstrap so what i'm going to do is i will go here and here below the h2 tag i'm going to have the error so if we have the error in that case we need to have the alert and the variant of this alert will be danger as it is an error message all right and then inside this what we are going to do is we are going to add the error so let me add the error all right now let's import this alert so i'm going to go here and i'm going to import the alert all right and now let's go and let's test it so if i click on this sign up then in that case we have an error which is that invalid email so if we go to the inspect element so let's go to the inspect element if i expand this and let's give some testing so what i'm going to do is i'm going to clear everything and if i click on the sign up then we see that we make a post call to the firebase api where we need to create the account so what i'm going to do is i'm going to have a the page at the rate gmail.com and here i'm going to give a password of only four characters so if i click on this sign up then you see that firebase throws an error that password should be at least six characters so let's change this to one two three four five six seven eight and now i'm gonna click on the sign up so if i click on the sign up then we don't see anything but now let's go to the firebase console and we see that the user is created or not so if we go to the firebase and this one let's refresh it so if we refresh it then you will see that we now have a new user created but what we need to do here is whenever a new user is created we have to redirect our user to the login page so for that let's go back to our application and here what we will do is here after creating a new user we have to navigate so to navigate what i'm going to do is i'm going to make use of a use navigate hook all right and then here what i'm going to create i'm going to create a constant i'm going to have the navigate and this will be a use navigate hook and now i can use this navigate here so let me copy it and i'm going to use it here so whenever we create a new user and the user is successfully created we have to redirect back to the login page which is the slash all right now let's go back and this time i'm going to create a new user with the test gmail and i'm going to give a password as one two three four five six now i'm going to click on the sign up and we should be able to successfully redirect to the login page now you see that the user is created and we are redirected back to the login page so if we go here and if we refresh it then we see that we have two users now let's give a try on the login so to give a try on the login we haven't integrated the login component with the firebase yet so let's go to the visual studio code and let's write the login functionality all right then i'm going to go to the login and inside the login we're going to have very similar what we have done in the sign up so what i will do here is first i'm going to write a on submit so let me add a on submit and here i'm going to have the handle submit and what i will do is i'm going to copy everything from the sign up so i will go here i'm going to copy all these stuff so i'm going to copy this and i'm going to add it here because we have a very similar functionality and then i'm going to go to the sign up i'm going to copy this as well and i'm going to add it here but instead of sign up this time we need to have a login so let's go to our user or context and here we have a login so we need to expose this login so i'm going to have here and i'm going to add the login here now we will use this login in our app component so i'm going to close this sign up and i will also close the firebase so let's go to the login and here instead of this signup we're going to have the login so we have to do the import so let me import it so i'm going to do an import use user auth all right and then we will also need the use navigate so let me have the use navigate all right and then what we need to do is we have to copy this login and we have to add the login here so as soon as we do the login we have to redirect it to the home component right now we haven't did anything with the protected route but we will do it in a bit so what i'm going to do is i'm going to write here home and now what we need to do is we are setting the error so this is all looks good and we have to do the on change here so let me have the on change and this on change will be an arrow function so let me have an arrow function with an event e and then i'm going to have the set email and this is going to be event dot target dot value i'm going to copy this and i'm going to add it for the email for the password as well so let's go here let's add it all right and then here i just have to change the email with the password so let me change this to password all right so now we have changed this and what we want is uh if we refresh our page then we see that we have a use date is not defined so let's add the use state so i'm gonna go here i'm gonna have the use state all right so if we go here then let's do a test at the gmail.com and i'm gonna have one two three four five six seven eight so before doing that let's add the alert as well so in case of any error we will see the alert so let's go back and here what i'm going to do is we are already setting the error so if we have a login then we navigate if we don't log in and we have an error then we set the error so for that what i'm going to do is i'm going to have the error if we have an error then i'm going to have an alert let me add the variant so the variant will be danger all right and inside the alert we are going to have the error all right now let's go back and let's see so we will import the alert as well so i'm going to import the the alert so now we have it and now if i click on the login then we should be able to see an error message that password is wrong or something is wrong so let me add a something different so i'm going to have it the paste test and i'm going to have a password something and if i click on the login so i have to add the add the rate gmail.com and if i click on it then you see that the user is not pumped so let's give a try with the user which we have already created so if i go here we have the page at the right gmail.com so i'm going to use that and i'm going to provide a password of one two three four five six seven eight and if i click on the login then we see that we redirected and if i do then we have it on the home component so since we don't have anything the jsx in the home component but we see that the redirection url is the home component all right so now let's go back and what we want is if i do a slash so first let's write something some jsx in our home component so i will go to the home component so let's go to the home component i'm going to remove the login and in the app.js we will see that we don't have any route for the home component so what i will do is i'm going to copy this and i'm going to add it here but since what i want is my home component should only be accessible if a user is logged in so that means it's a protected route so in react router version 6 how we can add the protected route so i'm going to have the route will be the home all right and then i'm going to have a break here and here i'm going to add the protected route so let me add the protected route so i'm going to add the route here all right and then what i'm going to do here is i'm going to close this protected route so let me have the protected route and inside this protected route component i'm going to pass the component which i want so for this i have a slash home so i will have the home component here so let me have the home component all right so this is how we are going to do the protected routes now let's import this protected route and the home component so what i'm going to do here is i'm going to go here i'm going to do an import home this will be coming from dot slash components and then we are going to have the home all right and for the protected route we will do the same so this will be protected route and this will be coming from components slash protected so this will become slash and this will become protected route all right so we have added the protected routes but we haven't added any logic in the protected routes so let's go back to the protected routes and inside this protected route what we are going to do here is it's going to take the children so whatever the component we are passing in this protected route so i'm going to have the children and what we need to do is we need to see that if the user is authenticated we have to pass so what i'm going to do here is i'm going to have the let auth and this auth will be equals to a true all right and then what i will return here is uh if this auth is false then in that case what i want i want to navigate to the login page so if the user is not authenticated and it still wants to access the home component then in that case i'm going to redirect it so to do a redirect in the react router version 6 we don't use the redirect instead of that we use the navigate so what i'm going to do is i'm going to import navigate and this navigate will come from the react router dome so in that case i want to navigate and i want to navigate to slash all right but if it is an authenticated user then in that case i want to return the children so i'm going to copy this and i'm going to add it here all right now if we want to test the protected routes let's go and test it so i'm going to minimize this and i'm gonna go here and let's do a slash home so i'm gonna do a slash home so we see that we have an error so let's go back and let's fix it so we did a mistake and we are not returning here so let me add a return all right now if i go back and now if i try to access the home then we see that hello welcome and we have a logout button but what in case if an unauthenticated user is trying to access so if the auth is false then in that case what we want we wanted to navigate to the login page so now if i try to use the slash home then you will see that we get redirected back to the login page so that means the functionality is working but now how we can determine that a user is authenticated or not so for that what we have done is in our user auth context you see we have the user so in case of an authentication is successful for a user we are already setting this current user to the set user so we can access this user in our protected route so i will go here and what i'm going to do here is i'm going to have the user and i will have to destructure the user and it will be coming from the use user auth all right and now if we have the user then we have to go to the home component but if we don't have the user we have to navigate back to the login page now we can access the user into home component as well and we can display the email id so what we will do is we will go to the home component and inside the home component i'm going to have the constant and then i will have the user and this user will be equals to the use user auth all right then i have to import the use user auth so let's do import use user auth and this will be coming from dot dot slash context user auth context all right now we have this user and now we can display the email id so if we want to do a console log and see what is exactly we have this in user so i'm going to do a console log of the user and what we need is whenever we do a login if the login is successful we need to navigate to the home component so if we go here we see that we already have the navigation to the home component all right so now let's give a try on the login so what i will do is i'm going to have the the page and i'm gonna have the password as one two three four five six seven eight and i'm gonna click on the login all right so we don't see anything so if we go to the network then we see that we have the login as successful but we are not able to redirect it on the home page so let's go back and let's uh debug it first i'm going to go to my context user or context and in the user of context what i will do is i'm going to have a console.log and see that we are able to see the email here or not so let me add the email and now if we go back here and let me clear the console and now if i try to have the the page and i have password and i'm going to click on the login then i see that the function is being called so there must be a problem with the protected route so let's go back to our protected route and if i go to the protected route then we see that we have the user and we actually missed the parenthesis so i'm going to add the parenthesis now let's give a try so i'm going to have it the page i'm going to have the 1 2 3 4 5 6 7 8 and i'm going to click on the login so we see that we are able to go to the home component as we are now authenticated user and we have also did a console log of the user so if we go here then we see that they have a lot of information on the user so what we are going to do is we are going to display the email id of the authenticated user so let's go back to our home component we have did a console log of the user so here what i will do is i'm going to have the hello welcome and then i'm going to have a break here all right and after the break what i'm going to have here is if i have a user then in that case i want the user dot email all right i will save it and then we also have a logout so right now we don't have a functionality for the logout so let's have an on click here so i'm going to write a on click and this on click will have a handle log out all right then let's write the logout function so i'm gonna go here and i'm gonna have a constant i'm gonna have the handle log out and this will be an arrow function all right and inside the handle logout what i'm going to do is i'm going to have a try and then i'm going to have a catch so this sketch will have an error and in case of an error i'm going to have a console.log of error dot message all right so we haven't returned any functionality for the log out so let's go to our auth context and inside the auth context we're going to have the sign out so we have already imported the sign out so we just need to write a function so what i'm going to do here is i'm going to have a function i'm going to have the log out and inside the logout we don't need to pass any parameters and then what i'm going to do here is i'm going to return sign out all right and while doing the sign out we need to pass our auth instance so let me copy the instance and let me add it here all right so we have added the sign out function now we need to expose this function so that we can use it so i'm going to add it here in the value all right and now let's go back to our home component and inside the home component what i'm going to do here is i will have the user and along with the user i'm going to have the log out all right i will go here i'm going to write the weight and i'm going to have the log out function i'm going to use the async here so let me add the async all right and now let's give a try for the log out so what i'm going to do is i'm going to go here i will close the inspect element and i'm going to have the page i'm going to write 7 8 and i'm going to click on login now we are able to see that this is the user who is logged in and we are able to display the email id now i will click on the logout and when i do a logout i need to navigate back to the login page so i'm going to click on it and i see that i can go back to the login page so now we have done the functionality for the register a new user and then log in a user so if i click on it then we should be able to see the error messages as well now the only thing we need to do is the sign in with the google so let's go back to our visual studio code and here what we will do is let's go to the auth context and inside the auth context we are going to have the google auth provider so let me import the google auth provider all right along with that i'm also going to import the sign in with pop-up so let me have the sign in with pop-up all right we will need these two and then let's create a function for the google sign-in so i will go here and i'm going to write a function and name of the function will be google sign in then here i'm going to write a constant and i'm going to create a google auth provider so let me have the google auth provider and this will be equals to the new instance of the google auth provider all right we have the new instance and then we just need to return here so let me add a return i'm going to return the sign in with pop-up and then i'm going to pass the provider google auth provider so i'm going to copy this and i'm going to pass the google earth provider but along with this what we also need to do is we also need to pass the auth instance so if you hover on it then you will see that you need to pass the auth instance and you need to pass the provider so we have already provided the provider let's copy the instance of the auth so we have it and now let's give a try so what we need to do is first let's go to our login component so i'm going to go to the login component and inside the login component you see we have a google button so i have added a package called react google button it actually gives me the sign in with google button so what i will do is i'm going to go here and i'm going to write a on click so let me have a on click here so i'm going to have the on click and here i'm going to have the handle google sign in and we also have to expose the sign in with google so if we go to our auth context then i'm going to copy this and i'm going to expose this so i'm going to add it here all right and now we can make use it in the login so let's go to the login component again and then here what i'm going to do here is we have the login and along with the login i will have the google sign in as well all right now let's write a constant for the handle google sign in and this is going to be an arrow function so let me have the arrow function all right and i'm going to add the async here so let me add the async okay and now what we need to do is i'm going to have to add the event dot prevent default so let me add the event dot prevent default and i'm going to have the event here all right and after that what i'm going to do is i'm going to have a try catch block so let me add the try i'm going to have the catch and this will have the error and then i'm simply going to have the console log of the error so or also i can do the set error and i'm going to have the error dot message all right and what we need to do in the drive block is we need to write an update and then we need to do a google sign in so let me have the google signed in and once the sign-in is successfully we need to navigate to the protected route which is the home component so i'm going to have the navigate and let's navigate to the home all right now we have done it and let's give a try on the login with google so i'm going to go here and i'm going to refresh it so we see that we have an error so let's go back and here we did a mistake so i'm going to remove this and here we will have the event all right and now let's give a try so if i go here and if i now click on the sign in with google then we should be able to see a pop-up so you can see here we have a pop-up and inside the pop-up you will see that it's list my google accounts so these are the two google accounts which i am using so i will use the page lohar i'm going to click on it and once i click on it it will authenticate the user with the google account and then i will go to the home component so you see that this is the email id which i was using now if i go to the console of the firebase and if i refresh it then you will see that now we have three users one which is provider is the google and the other two is the email and the password so this way you can actually add the authentication to your react application so the firebase provides a variety of authentication methods so if i go here if i click on the add new provider then you will see that they have the facebook github yahoo twitter and many more and you can integrate all this in a very similar fashion the way we did the google auth provider similarly if it's a github then they will expose a github auth provider all right so i have an assignment for you so if we go to our auth context provider then you will also see that in our application if i click on the logout then we don't have a forgot password functionality so i want you to build a forward password functionality uh taking this code and you just extend this code for the building the functionality of the forgot password so i'm going to give you a hint what you need to do is so firebase exposes a one more function which is the password reset so if i do a password reset so you will see that send password reset via email so this will help you to do the forward password when you do a forgot password is going to ask you the email address and then based on the email address you can generate your new password so i want you to build this functionality and i want you to provide the solution then i'm going to take the best solution and i'm going to add it to the github of this project and if you have any questions you can add it in the comments section so we can take it together now let's go and let's retest everything so if i go back here then we see we have this page if we click on the sign up we see go to the sign up if we click on the login we go to the login and if we try to access the home component then if we are not an authenticated user then we redirect back to the login page all right so that's all i have in this video i hope you like the video a thumbs up is appreciated so that's all i have in this video i hope you like the video a thumbs up is appreciated you can follow me on facebook instagram you can follow me on twitter for latest updates i will add the links in the description below and i will also add the github link for the code in the description so that you can download

Channel: Dipesh Malvia

Views: 2,445

Keywords: firebase, firebase storage, firebase tutorial, firebase authentication, firebase developers, firebase react, firebase auth, firebase react auth, firebase react authentication, react auth, react authentication, react authentication and authorization, react firebase tutorial, react js auth, reactjs auth, react js authentication, reactjs authentication, react signup, react login, react google sign in, context api react, react firebase protected routes

Id: 6kgitEWTxac

Length: 50min 37sec (3037 seconds)

Published: Thu Dec 09 2021