Firebase Google Authentication in React App | Step-by-Step Tutorial

hello guys welcome back to the channel in my previous video I have shown you how to implement Firebase authentication using email and password in a react application so in this video I would like to show you how to implement a Firebase authentication using Google provider so let's talk about Firebase in a nutshell so basically it is an application development platform used for both the web and mobile apps so you can use a Firebase as a backend as a service so first of all you can go to firebase.google.com and here you can go to the console by clicking on this button and once you are inside a Firebase you are supposed to create a project and then register your web app so I will show you how to do this in a later moment so for now let's continue so here you can see I have already registered one app and I have enabled authentication inside it so currently you can say I have no users and I have enabled Google provider so you can see this is my react application that is running on Port 3000 and I have a Google sign in button here I am using a third third party package which is a react Google button simply like you can install it you can import it and you can make use of it inside it your application so for the demo I'm using it in case if you like it you can go ahead and continue with implementing this button or else you can go with your custom button and also you can observe like if I go to my home page so you can see I'm redirecting back to login so I'm implementing protected routes and further routes purpose I'm making use of react router Dom latest version as well so let's continue with the demo I will open my console okay here you can see I have a clear console and in the application tab inside local storage I have no variables so let's start sign in let's click on this button so you can see a pop-up is uh opened and okay so you are supposed to select your Google account so you are supposed to provide consent for this application and then it will allow you to continue so I have already given a consent before that's why it's not showing up so on the pop-up you are supposed to do that and here you can see on my home page now I'm inside home page so I'm welcoming the user and I'm using this user email and the user profile image and I have a lockout button and here you can see I have a response from the Google and it is providing the user information like you can see the token display name email the photo URL and so on and currently you can ignore this error so this is uh coming from the pop-up from Firebase Google error so it is not something a blocker for now the response I have received from Google and my application is running without any problem so I hope this error will resolve soon and you can see in the application tab like so I'm making use of two local storage variables one is to store the token and the other is to store the user information so basically once Google has given our user information we are supposed to store inside a react application right so you have to maintain a state management for that so it can be Redux or context API in my case I'm not implementing that because that is out of scope and I'm making use of local storage variables so that we can show that information to you and this is the token I'm using to validate if the person is authenticated or not so now if you see if I refresh again I will be inside my home page only if I try to log out now so now you can see the variables were deleted and we were navigated back to login is right so now if I try to go to the home page again it will not allow because we are not authenticated so let's jump onto the code base on how to implement it okay guys so I have opened my project folder inside a visual studio code you can see I have cleaned some of the files so you can see the CSS all these files I have removed and inside app.js you can see I have just a welcome text and inside index.js I have removed the report web vitals and all so now so let me show you what I have used the command to create the project so inside my project directory I have used this command npx create react app and then after this installation I have used the npm starter to start the application if I show in the browser so this is how it is coming okay so let's start with the console so after go going to the console so this will be the welcome page from the Firebase so we need to create a project here so select that one go ahead and give a name for this after giving the name let's continue so we can disable this analysis let's create the project so this will take couple of seconds for creating the project all right so the project is uh ready so let's click on continue okay now once you are inside this project what you are supposed to do is so you can see add an app to get started so we are supposed to add our react web application to this Firebase project so you can select this web option and then here you are supposed to provide your application name so here I am going with the same name so this checkbox is for Firebase hosting if you are going with the hosting as well so in my case I'm leaving as it is and let's click on register app so the second thing is you need to add Firebase SDK right here you can see we have to install the Firebase package and Then followed by we have to configure the Firebase inside our application so let's uh proceed with that so you can copy this so this is my project directory inside here we are supposed to install it so along with Firebase I would like to install a few other dependencies which is react router Dom for a routes purpose and Then followed by another npm package which is a react Google button so let's install these three packages so in the meantime like we can proceed further so here you can take this information so let's copy this and inside our project inside source folder create a file called firebase.js and you can simply copy paste here let's remove this comments so here we have to do two things one is we need to create a get authentication object from Firebase we have to import it from Firebase package so let me paste this as well so here you can see I am importing get auth function and Google Earth Provider from Firebase auth package so finally we are supposed to export this app as a default exporter because we will be making use of this variable inside a plugin page these are the two requirements on this configuration so let's save this all right so let's continue so from the browser we can continue to the console now you can see one app is registered on this project so the next thing is we have to go inside Authentication so you can get started so the first thing you can see it is asking you have to enable a provider so for example so in my previous video like I have shown how to enable I mean how to make use of email and password so in our case uh in this video we are proceeding with this Google authentication right so we have to select this we have to enable and then here you are supposed to provide a support email so your account email address and then save all right so in the users tab you can see there are no users as of now so if you deploy your project in the production in the settings you are supposed to in the inside authorized domains you are supposed to add your domain here so currently I am showing this demo inside localhost right so Firebase will allow localhost domain but when you deploy to production make sure to add your domain here all right so let's continue with our project okay so inside source folder let's create a folder for pages and then another folder for components okay so inside pages I would like to create two one for login.jsx so here I will be making use of reactor Snippets so this will help us to set up the boilerplate so if you are wondering how I am doing this uh so inside extensions so I'm making use of this reactor Snippets extension so make sure to install this okay so let's create a one more page for our home page so again rafc react Paro functional component expression and the inside components I would like to create one for protected component so this will help us to protect our pages so I will implement this in a moment all right so let's verify the installation of dependencies so you can see three packages were installed in our project so inside package.json you can verify Firebase and react router Dom latest version and then react Google button package as well so let's close this so let's start implementing with the routes so open index.js file so here we are supposed to import these functions and components from react router Dom package and then so we are supposed to create a router object so here you can see I'm making use of create browser router and routes from elements implementation approach so here if you go to in the react router Dom website so on the latest version I am implementing nested routes functionality so this is possible by two ways so you can configure nested routes with jsx approach or you can also make use of plane object X so in our case we are making use of this approach okay so after creating the route router object so I will update this render part so here you can see I'm making use of react router provider and to this I'm crossing a router prop and the value will be this router object inside the app component what we are supposed to do is we have to place a hook uh instead of this welcome text so this is coming from react router Dom so you have to import this Outlet of component so inside index.js as I mentioned like we will be using making use of nested routes so inside app let me import the home component here so here you can see so when you are inside a root path so your app component will load initially and then inside the nested route so this will be the children ride so on the home path on the index route so we are loading the home page so this home page will get replaced in place of this Outlet so let's save this and see in the browser all right you can see now home page is rendering on the react application so let's go back to index route again so let's add the login path as well so we have to import this login page again so we have imported both the home page and login page so if we go to login path now so this should render login page so let's verify that also so slash login now you can see login page is being rendered okay but we want to protect this home page right so we should not allow the user to see home page unless they are authenticated so we have to protect the route so this Home Path I am protecting with the help of protected component so let's import this protected as well so here what I'm doing is so whenever you go to the Home Path which is a slash react router will go inside protected component and inside we will write the logic in such a way that if there is a token then we will allow otherwise we don't we will redirect back this is how like we will protect our home page so let us implement the protected component so here you can see from the local storage we are getting a token variable so if we have a token so we are using conditional approach if we have a token then we will display this Outlet component so in place of this this uh home page will get rendered otherwise it will navigate back to login so we are supposed to import this Outlet as well as navigate from react router Dom okay so let's save both of this and verify in the browser now you can see from login page sorry from home page we have redirected to login all right so let's implement the login functionality so before that I would like to add a few CSS Styles so on app.css I'm just adding a few Styles so this will make the code Center like you can Center the elements and for the logout button I will be having the cursor pointer and some padding so let's save this now you can see we have login on the center of the page so here you can see I am making use of Google button so this will come from react Google button package here on click of this button we need a Handler so let's create a function so when when we click on this button it will execute this function so let's open the try cache block if you encounter any errors let's log it to the console so here you can see I'm making use of asyncavate approach when we make a asynchronous call to the Firebase it will return promise and you can handle either by using asyncavate or by using dot then dot catch so here you can see I am calling sign in with popup so this is coming from Firebase okay so we have to import this auth variable from Firebase from our package configuration package again Google Earth provider and then pop-up sign in with pop-up from Firebase so this is coming from Firebase package and these are the two variables are coming from our Firebase configuration file okay so here you can say I'm logging the result so once we have the result we are supposed to create Locker storage variables so using the locker storage API so we are setting item so one is token and the other is user so you can access the token from this user object from the result and also since user is an object so you cannot directly store it inside Locker storage you so you have to convert this into string format so that's why json.string file so this will convert into string representation and so once we have successfully authenticated so we would like to navigate back to home page right so here so we need to create a variable using use Navigator hook so this is again coming from react router Dom okay so let's save this and verify in the browser okay now I can see the sign in button is coming up so let's open the console and in the application section you can see on local storage we do not have any variables so let's start with the sign in let's click on the sign in with Google so here you can see pop-up has opened so it is asking to give consent to this web application so you can select your account all right now we are inside a home page right so you can see there are two variables created one is the token and other is a user and in the console you can see we have this uh user information from Google so you can see it is coming from login page on line 14 and then you can see uh this uh user variables creation is also completed and Then followed by use navigate so we do not have any errors right I mean if if in case if we encounter any error it might end up in the catch block but uh you might wonder you know what is this error then so this is coming from pop-up TS file so this is like so when you sign in on Google so there is a pop-up open right so because of that this error is coming up and there is no blockage for our execution right so I hope this error will resolve soon so apart from this so now you can see like inside home page we are just seeing the home page right so let's open the home page now so here you I'm reading the local storage variable and also we need this uh use Navigator hook so we have imported this from react autom so why we need is so we can display user information right so here you can see I have a heading and Then followed by I'm reading the user email and then uh user image profile image I'm displaying and then you can see I have a logout button here so on click of this button we need a logout Handler so let's Implement that as well so here you can see this is an async function and then it contains a try cache block on case of error we will log it so let's see what is the functionality inside a try block so we are calling sign out method from Firebase and then we are supposed to pass our authentication variable this will come from our Firebase configuration file after that we will remove local storage variables and then we will navigate back to login so let's save this and verify in the browser okay now I can see so this data it is reading from local storage okay so now let's click on logout button so this will remove the locker storage variables and this will redirect back to login page right so let's click on logout that's all about the video guys uh I hope this video is helpful and you have learned how to implement uh Firebase authentication using Google provider do like share comment and subscribe to the channel thank you for watching and I will meet in the next video Until then take care bye

Channel: Web Wizard

Views: 3,117

Keywords:

Id: uOMXJBNP1u0

Length: 19min 14sec (1154 seconds)

Published: Tue Aug 15 2023