Sign In With Google in React JS using firebase || Integrate firebase with React Js | Google Login

hello guys welcome back to the debug arena in today's video I'm going to show how we can add this button sign in with Google in our react application and with the help of Firebase we can login with our Google account in our reactjs application so first let me show you the demo so I will come here and I will click on this button once this button is clicked this popup will appear which will contain all my Google account I will select this account and some authentication will go on once the authentication is done we will receive the message user logged in successfully and we have been navigated to this profile screen where my current user detail has been shown you can see here this is my profile image this is the name of the user and this is the email of the user and let me tell you that we are fetching all this detail from users Google account and from here I can do the log out so these are the things we are going to cover in today's video also if you are here for the first time like you haven't watched my previous video then you can go and watch that video because in that video I have created this login page and this sign up page with the help of Firebase I have made them Dynamic like user can come here fill all this detail email and password and they can register in our application and with the same email and password they can do the login also it is very good that you provide your user multiple ways to do login like user can login with email and password user can login with Google and in future I will also integrate Facebook login you are only here for login with Google then also you can watch this video you will understand each and everything so without any delay let's get started okay so this is my application as of now the first thing which I will do is go to Google and search for Firebase console now here I will click on this first link here you have to login with your Google account login you can click on this go to console which will open the Firebase console and if you are here for the first time you can click on this add project okay after this you can give any project name for this will give login one okay I click on this continue then we can just ignore this we can click on create project it will create one project now click on this continue button okay so your project is ready now here as we are making the reactjs application and we have to use Firebase there we can select this web part and then we have to enter our project name and for now I will again enter the login one I will click on this Register App and now it will generate Firebase SDK so you can see here Firebase SDK is ready now you can go to your reactjs project and run this command npm install Firebase which will install the Firebase and then you can copy this code okay then go to your reactjs project go to component create one file fire base.js and paste that code here I've already done this in the previous video okay now let's again go to Firebase console I will click on this continue to console now I already have a project made so I will switch to that project which is login off now here we can scroll down and let's click on this authentication inside authentication here I'm getting list of all the registered user in my application and all the this user have been registered through email and password no user have been registered through Google now I'll click on the signin method in the previous video I have enabled this provider which is email and password now we have to enable the Google for that I will click on this add new provider we have to select Google okay and then I will click on this enable button and here we have to select one e uh email which is the debug Arena okay this is done now I I will scroll down and I will click on this save button so this Google provider will also be activated you have to activate this to do the Google login now here everything is done I will go to my code okay this is my project structure and inside the components you can see I have created this Firebase .js where we have pasted our Firebase SDK from Firebase console here I have added some additional thing the first one is I have imported this get art this get art is responsible for scoring the users data like when we will login through Google whatever data from Google we will get now it will be stored inside this get out okay after importing this here I'm exporting like I have created export con or and I have initialized it okay and this thing if you only want to do Google thing like Google login then you can skip this and that's it for the Firebase configuration part we can move to the coding I'll go to this login.js this is my login page and if I scroll down you can see this is my email input this is my password input and this is my button after this submit button I have to show the the Google login button but you know I also have to show this button to my register component also so rather than duplication of the code what I will do I will create a component of signin with Google and then I will import that in login and register so to do that I will come here let's click on this new file and I will create a new file here which is signin with google. JS let me do the structuring part okay so here I have created the function which sign in with Google Now here the first thing which I will show is a P tag which will stay or continue as that means it will indicate user to login with email and password or login with Google so I will just paste the code here okay and here I have created this class name continue p and inside index. CSS you can see I have added the class okay this is done now after this what I will do I will create another div and inside div I will place one image IMG so you can see here here I'm having this google. PNG which is stating sign in with Google if you want you can create this design but I prefer this image because it doesn't make any difference okay and it is also very simple now inside image I will pass the location so I will pass here SRC inside require I can pass the location of our image which is.png and here I can give the width of my image I will save this now let's go to login okay I will scroll down and after this P tag what I will do I will import our component so this this is our component sign in with Google check the output and you can see here all continue with is visible and this button is also visible but I want it into the center inside the div what I will do I will write here inline styling only okay uh inside inside inline style I will just write display as Flex I think now it should look good I will save this I will go to check the output and you can see it is in center and here I'm getting the cursor output now let's create the function which will be called on this click okay I will come here and let's create a function and the function name will be inside this the first thing which I will do is create a variable name as provider and after this I will write here new and I will write Google Au provider make sure that you imported from this Firebase a only like there are other also okay this is done this Google a provider will help us to do the Google login after this I will write here another function which is sign in with popup to the Google login we have to open the popup and that popup should be imported from Firebase or then this popup require two things the first one is the O in the starting only I have told you like whatever default function we use from the Firebase and whatever data we get that data will automatically be stored inside this o also this o is containing our Firebase configuration like you can see here all these are present here so it will help us to identify and to store the data so first let me import the a so I will write again a here and it will be imported from Firebase and this Firebase is my this Firebase project okay now along with the a we have to pass the provider which is we have created here now if everything goes well I will write here dot then this is like a promise and here I will make it a sync okay inside this we will receive one thing which is result now I will come here and here we can just console.log result let's check what is coming here now I will save this now I'll go to this div okay this is not a good way but I'm doing that you can make your own button and do it in a good manner and here I am calling that function Google log I will save this let's go to the output I will first open the console here I will click on this button and you can see the popup is opening now I will select this the debug Arena and when I select that authentication is going on and here you can see I've got some response inside this there is this thing name as user and inside user I'm getting the user's detail this means that we have been successfully logged in with the Google because inside the user I'm getting display name which is dagina this is the email and the email is verified like when you are login with the Google your email is already verified and here I'm getting the photo URL this means that we have been logged in but it is not navigating to profile so let's do that I will go to my code here I will write one condition which is if result. user is true that means we have got the details then we will navigate our user to window.location href and we will navigate it to the profile screen and before moving to the profile I want to show this message toast. success user logged in successfully and we have to import this toast if you want to learn about toast message you can check out my previous video okay this tost is imported okay let me explain you so whenever user will click on this div or you or you can say this image this function will be called inside this I have used this Google or provider after that I have called this sign in with popup inside sign in with popup I'm passing this or which will store the users detail and this provider once user select the Google account the result will be stored inside this variable and here I'm getting that and all the users detail will be present inside this variable user. user if everything is correct I'm showing this tost message and I'm navigating the user to the profile screen so let's go to the profile screen okay okay this is my profile screen I have written all these things in the previous video only but don't panic I will explain each and everything so I'm considering that you are only here for Google login in that case first I will remove this toast message which is not required and we can just comment this out this is not requir for Google login here I have imported react use effect use State and here I imported o from Firebase you can ignore this DB okay here I have created a state which will store our users data here I have created a function to F the the user data like our user data is stored inside the O so we have to fetch that and this fetch user data we are calling inside the use effect so inside this fetch user data I have written au. on Au State change this is a method provided by Firebase what this will do now whenever there is a o change like if user is not loging this o will be empty if user is logged in this o will contain the users's data so all this transition will be tracked by this variable and when user will log in or log out all the details will be stored inside this variable user and here I'm just consoling that user okay these things are not required with Google login so I will just comment this out okay I hope you understand each and everything now if I scroll down this is the function which is handling the log out so here I have written Au do sign out sign out is the function which will empty the Au variable when user presses on log out button Au will be empty and we are navigating the user back to the login and giving him the message user logged out successfully so this is how you can perform the log out this is how you can get the user details in the case of login okay only this much thing okay and now here this is the layout which currently I am showing so inside this if my user details is present like my state is having some data then only I will render this layout otherwise I'm showing this loading screen in this layout what I have done I have just written welcome user details. first name user detail. email user detail. last name but if you see in the data we are getting here there is no first name last name first name last name is coming from here so for now what I will do I will come here okay and I will just comment this out and here instead of the first name I will just write display name now I will save this let's go to the application click on sign in with Google choose the debug Arena okay it has been moved to profile but you can see it is in loading State this is in loading State because this user details is empty so I will come here and what I will do here I will just write a set user detail and I will set it to user I will save this I will again go to my application and here you can see I'm getting welcome the debina and here is the email now the next thing is I have to show the image and here you can see I'm getting the image inside this photo URL so let me just style that first okay I will come here and I will add this code so here what I have done I have created a div inside div I have created this image withd is 40% border radius is 50 % display Flex justify content and here I have written user details. photo not photo we have to write photo URL so I will write your photo URL okay I will save this let's check the output and here you can see I'm getting the output so it is totally working fine also one more thing always make sure to add this type of condition because it take time to fetch the data load the data and then load it inside the image so sometime it might happen that image is loading after this div has been rendered and you will not see the image so it is always better to add this type of condition so this was it if you are only following for Google login now let's see how we can merge all of these things like from the Google login I will get only this much data like Photo URL display name and email but what if I want to store first name and last name also so let's do that how we can store all of these things and get the data so whether your user is login with email and password or Google he will get the same output okay to merge them the first requirement is that you must have watched my previous video now I'll go to register in register you can see here inside this handle register after our user is registered we are storing that registered data in this fire store also so here we have to add one more field which is photo okay and for now I keeping it as null so that this photo variable will be created every time any user is registering so this part is done from the register I will copy this thing okay await now this sign in with Google after user is logged in with the Google this result. user will be true so in this I will write here await set doc user user ID and here we are passing email as user. email which is correct first name should be display name okay so I will write here user do display name so whatever display name is inside the users Google account it will be stored inside the first name we will not set L name here here okay and for the photo we will set the photo URL so here I will write user Dot and it is done and also last name I can keep it as empty now I will save this so now what will happen whenever user is trying to login with the Google okay he is logged in after that his detail will also be stored inside the Firebase this same case is following in the register also so now both the thing are in sync now only remaining thing is that in profile we have to get the data not from the user Google login but from the firestore so for that I will come here now I will first remove this set user details okay I will uncomment this I will also uncomment this line so here we were getting the data from fire store okay this will be as it is there will be no change changes will be in the variable name so here it was user details. photo URL but it will be changed to photo because now we are fetching the data from fir store okay in the same way this display name will be changed to first name and here also I can write user. first name and user details. last name now I will save this after this the first thing which you have to do is go to Firebase console okay these things are not defined so let's go and Define that so I'll go to sign in with Google here I will import set doc doc from Firebase fire store and DB from Firebase okay this is done and here the user is not defined so what I will do I will just copy this I will come here let's create a variable user and I will just assign result. user to this now it is good I will save this okay I will come here after doing all the modification you have to come here go to users now here you have to come and search for the Google account which you have already register and you have to delete that because at the time we have done the Google login there was no fire storage okay so that's why we are getting null here hope you understand this thing okay and yeah there is no Google account now I will go to my react app I will do the log out okay now I'll click on the sign in with Google so it is generated it is moving to profile and here you can see I'm getting the profile image done welcome the debug Arena email debug aren first name debug aren and the last name is nothing because we haven't stored the last name okay so for now we can just comment this last name thing so I will come to this profile I will comment this out last name okay perfect now what I can do I will just go here let's go to the Firebase sorry fire store and in the fire store we have this collection user which is containing the user U ID yes this user uid is same user U ID which we are getting here so inside the collection we are creating the users based on this uid okay so let's search for this qqo so here if I scroll down and you can see this is qqo if I open this you can see it as having email first name last name and photo all of these things we have stored from Google account also in the fire store one more thing you have to do is come here and go to rules and inside the rules you have to modify the rules okay so whatever rule previously was written just comment that out or remove that and add this Rule and then just save that okay then it should totally work fine now let's see another thing I will just do log out now I will try to do login with email and password I will click on submit and you can see I've got user loged in successful and here I'm getting welcome other other email first name and I'm not getting image because we are not having anything Ines okay so that's it for the video I hope you have understand each and everything and if you have any doubt then please let me know in comments I will try to help you also in the next video I will cover the email verification thing like whatever email user is entering at the time of registering we will verify that first then only user can do registration with the help of Firebase so stay tuned for that thank you for watching the video

Channel: The Debug Arena

Views: 2,503

Keywords: Google login in react js, integrate google login in react, react firebase, login with google react firebase, firebase, react js, oauth google login, sign up with google, sign in with google, google react js, login auth with google in react, google authentication in react firebase, get user data, google react firebase login, firebase firestore, google login, google login react, sign in react

Id: 7jOq6SXBF-k

Length: 19min 10sec (1150 seconds)

Published: Tue May 07 2024