MERN Stack - Login with Google - React Node Express Mongodb

hi guys this is my bag did another video in this video I'm going to be talking about very important topic in Bern stack and I'll be implementing log in with Google as I said in my last video with sign up with Nord and Express sign in and sign up so I have actually created a default or react app and they cannot show how to create a react app you can check any documentation I have just used a package create react app and using that package I've run NPN create react app come on and it has created me this all these boilerplate files for the reactor and this is the folder that I've created front-end this is a folder I've created my app within the front-end and all these files are created by the create react app package and this back-end folder contains all the backend folders the boilerplate check out my previous videos if I go so I have created forget reset password' nor email account activation and I have implemented the sign in/sign up functionality using same back-end boilerplate and I haven't uploaded the sign in sign up video as of now okay I will be uploading both of these videos at the same time okay so I haven't used the react or any kind of front-end for the previous functionalities for the videos that I've just shown you for get reset password email account activation instead I have created the API for implementing this functionality and I tested those API using the postman and this is the node Express collection and inside it we have different five requests and all these requests are working pretty fine check out my previous videos I will be giving the link of those previous videos as well as a whole playlist of the node expert series I have created 20 to 30 videos of node express opt-in now on my channel okay so let's get back to the code so this is the default react app okay I have made some changes it contains a lot of text over here to be shown on the browser but I have just removed everything the changes that I have made is there are a lot of CSS files and logo file in in the source folder I have removed all of these okay and I've also removed the references import from the indexed or GM file as well as the after GS file because it was leave me an error that there is no logo image found no CSS file false where to remove that okay so I also have this commented this line so I do not need serviceworkers was the file existing within the source folder and I have included the bootstrap file okay this is the bootstrap Styles I have been loaded the CDN you can just Google Bush AB CD and you can just add it over here okay and this is just the default thing integrity and cross-origin anonymous okay you don't need to actually add these properties just H ref and rel and you will be working ok and I've added the bucho because I'm using these classes to make the text Center alright so this is the app running on the front and ok this is the login is Google text has been shown up this is a reactor all right so let's go enough explanation now I'm going to start working on the log in with Google using react not too much react okay just I'm just going to test the backend API functionality of the Google login because how are we going to handle the user storage in the database using node access REST API that we have built we have the other function as well for the default signup login user but if we want to log in with Google or maybe Facebook we don't need to actually use email account activation or sign up fill the form and send the email user activities account and then user can they be able to create his account for using with Google and the Facebook we don't need all these steps for how we are handling the DB and DB storage of all the users that are coming from the Google and all this stuff okay so I'll be creating the backend API loading node and xpress okay so let's get back let's go package or JSON file and there are few packages that we need over here okay so if you just come back over here and I'm going to install those packages so first of all I need to install a cure for giving an API call okay I will be using ads eros to a call an API for log in the Google on mine or Express server that I haven't created yet I'll be creating in this video after that and other than this I need to have a package provided by NPM and it's called react Google login it actually provides a whole interface for the designing those Google login button and all this stuff okay so NPM I react Google login ok so this is the package unit install so you can see I have installed excells it has been added so now let's wait for react to Google login package to be installed okay so let me just remove it I don't need to add anything inside the index instead I will be writing everything the opto GS file for now okay so I have installed yet Google login let me just go and open up our react Google login and this is the NPM and it will give me a default code that I can use ok so this is the code that I can use to actually log in with Google I just want to copy it come back to my code and it has been installed let me just close package or Jason and now what I'm going to do is I'm just going to come over here and add this thing ok it will not work for now okay because I need to have my own client ID that I just need to create from the Google developers and I can write log in with Google I can have add these functions created but I'll be creating as of now okay so let me just go and create the client ID okay so let's just go and open up the console of cloud.google.com and you open it up you will see a kind of similar user interface and what we need to do is click on this drop down create new project and I need to give the name Project react node Google login okay I'm just going to clear it click on create okay so alright and let me go back to the side menu bar click on the api's and services and go to the credentials okay and I'm on the ok it's just loading right now alright so I need to select my project that I just created it is not selected in the drop down as you can see above here so I'm just going to click on this and react nor Google login so have selected it ok and now I need to actually configure consent screen I just need to click on the create credential and auth client ID ok you can see these are disabled so click on configure consent screen click on create and now I need to create the application name within this project so create node react login and ok we don't need to add this email I don't need to add so just click on save okay so if I click on the create credentials again and click on this earth client ID okay so now you can see that these bullet points are activated I need to have this app for the web app development okay so here I need to copy the URL for the front-end such as copy localhost colon 3000 this is the URL for which I want to actually URL must not contain the path and with this or just remove it okay so just hit enter so both have been added click on create alright now it should give me the client ID now so yeah I've got it okay so this is the client idea of just gorgeous tick on the copy and this is what we need to do over here okay so okay so I just copy over here so this is the client ID we have just created alright Phyllis let me just run the react app NPM run start so my react app is running okay Google login is not defined responsible is more defined okay Google login is not defined actually we need to import the Google login from the package so import Google login from react Google login okay and we need to create this function okay these two functions react response success Google response error Google okay so let me just go above this return function and I'm going to create a function cost response success Google equals two response was the user log n this function will be pre GERD okay but we actually need to handle the API call for storing the user data in the database within this function okay so alright this is the response and it has been created now we need to actually create the failure one function okay so this is the failure once alright so inside the success function let me just save it there shouldn't be any error as you can see in the terminal below and let me just log it so respond okay so let's just go so now you can see that this is the button that has been generated automatically using the package or react google logging we can actually customize button our cells over here okay so we can actually design it I think logout hook and these are all the API okay so if I click on it it should open up the window for log in with Google so if I click in you can see that it has opened up the deep window itself and it has shown me all the email ids over here so just click on any of these I'll click on here okay so because I haven't returned anything or maybe I haven't actually returned the response one moment three okay so if I go over here in fact Consol's we am okay yeah this is the response that I logged in and this is all the data that I have received so this design all the token type access token and all these stuff ID token and this is the user data my email ID username this is all the object okay so as if you remember it my previous video okay once we actually activate the account and once we create a new user for activating we actually pass the token to the backend okay so the same token we need to receive from the Google login so this should be ID token okay this is the property that we are going to be using to sending to the backend API and it's going to be stored in the database along with the user details all right so yeah so now let's come over here and I haven't created any API for Google login back-end for storing the data in the database so but I have to create it but first of all let me just create an API call functionality over here okay so I'll be using Axios so let me just bring it up so import X Y from X Y so X 0 dot I know it has an object and inside it I need to give it a method so from the back end I will be creating a Google login API call with a method post so what should be the URL of that API okay so over API server have been running in localhost colon 8080 over here so HTTP local host 8000 API which is in the server dot JS file in the backend okay and then we are going to create Google login API is out all right so after that I'm going to send the data and the data is the token ID okay for data and let's see I'm going to give it token ID and which it in the response dot token ID okay so that's pretty much it now let's go and verify I need to verify that what was the name of ed oh we can do it later after that let me just receive a response if the user successfully once we create an API call and it should return us some message from the backend API okay so I can actually log the response okay it's not from the Google API but the API REST API that we are going to be creating okay so here we can actually use the local storage so let me just do it later ok so just remove this bracket all right oh this is the bracket over here okay all right now let's go back to over back-end okay make sure you check out my previous video in order to know that this is the controller is a database models raus this is the model name email password and reset link okay and I'm going to be using this author out and in here I'm going to be creating a new route okay for log in with Google so router dot post and let me verify what I added over here so Google login Google login and I actually need to create this function in my controller Oh Google log n it doesn't exist yet but I need to open up in this file I only need to create this tank okay so just close it I need to open up this controller odd function okay so under 8 I'm just going to create a new function called exports dot go girl login is it the same name yeah okay and it's going to have requested form okay and now I can actually receive the token ID that I sent from the front-end let me just go and this is the token ID that I send from the front-end I can receive it over here so let me just use corn token ID request or body okay in my back-end I actually need to have the client ID as well that I have used on the front-end and this is because we need to actually verify if this disc Okun that have been generated by log in with Google have already been existing in the user data update or not okay if it's empty for the user if it's existing then we can actually verify that if even if you are trying to log in with with the same user Google login account it means that you are already logged and you have already created your account in the database okay so we need to have few more packages in the dependencies so let me just open up this terminal this is for the backend okay and Here I am going to install a package NPM I and the package called Google Earth library okay so it's going to get install so let's come back to our route and yeah our controller so we actually need to have the auth to client from the Google auth library so let's go up so cost require Google auth library okay and it gives us or to client okay so make sure you install this package Google auth library and this package is going to let us actually verify if the token that was generated by we logged into the Google is the same or not okay so I'm just going to actually create a cost over here so cause Cline's equals to new oh or through blind and here I actually need to pass the same client ID okay so just copy it and paste it alright so it has been pasted now what we need to do is we actually need to verify the token okay so what we can do is the token we sent from the client side and the auth to client actually package will actually verify that if the token that was sent from the client side and the token that we are using in the backend is same or not we actually need to verify okay so first of all we need to use the client verify token and this is the token ID okay so this is the token ID we are going to actually check and then we are going to give it an audience and then we need to have that Google client ID okay and after that we can have then response alright so inside aid we will get a response and response we'll have our object payload and from that we can have a different option email verified name and email okay so this is from the response dot payload okay let me just log it first so response dot payload we are actually going to test it what does it print okay so let me just go to the terminal and to make sure your back-end server is running and your fronted client-side is running and there is no error okay let me just go back to react app and does not click on the login again and it's going to run this thing up and here from here is going to call that API we have just created make sure you have correctly spelled it and it is going to send the token ID and it's going to return the response response over here we haven't returned any response from the backend as up now okay so just click over here and on the backend server it should return us the payload from here okay so this is the response that it has logged in let me go back to the backend server so it has given us an error there is an error verify token ID required the ID token okay so actually this thing's exhale this thing didn't work okay so if I go to and here I have to actually check this session state no token object and ID token okay so let me just come over here and I can actually use the ID token and this is the property that we have to pass this is a property that has to be received over here okay so let me just rerun the front and app and just check if it works or not okay so it's working it has started the react app is running click on the log in with the Google button in fact okay so I'm just waiting for it to load and show me off so just I'm going to click over here and it's going to just hit the API call to the Google to verify my email address okay so this thing all right so now this is the payload it has a return for the problem wall disk line this Google bak n ought to client actually returned as a property and we need to have we assign the same token to this ID ID token make sure you don't give it a message and we need to give you the values for the token that we have send it on the front end okay so we have logged the payload and this is the response okay it contains the email form form a Google account with email verified true this is the email verified property that are just tea structures this is the name this is the email these three properties FD structured okay nice let me just come over here and we need to do a lot of writing course I'm not just going to waste a lot of time over here okay so just a to it now I need to check if email verified exists this is a verified make sure you spell it right that we have court over here this is the email verified okay if even is verified then we are going to check if user dot find one once the user try to log in with a Google first time we actually need to create that user in the database but if it has already logged in with the Google previously we are not going to create a new user in the database instead we are going to use the same object of the database for the user to get logged in okay so we are going to create the user as well as the login user in at the same time in this function okay so email we are going to verify it user with this email exist in the database if it exists it means user previously tried log in with a Google okay if error or we actually need to handle a lot of errors so I'm just going to copy from the above function say state if there is an error for hundred user with this email already exists no something went wrong okay because this error occur when we're not sure what happened okay and else we are going to check it user if user exists it means that a user is already exist in the database okay so else L means user was not existing in the database and the user is trying to log in with the user for the first time so let's come over here and try to write something over here in case the user is already existing okay so I am just going to create a token so in the previous video actually wrote the function for the sign-in okay so this is the whole thing I am just going to copy from the previous function and yeah check out my previous video about the login sign up with Snowden Express okay so this is a token I'm using the java json web token to sign a new token and i'm using the this ID signing token are created in the E and B file and it expired in the 70s the user is already existing we just need to create a new token and expire it after seven days so user need to real aughh in it again for the authorization ID name and email I'm using for actually login user with these things and I'm just returning the token as well as a user email ID okay that's cool and else I need to create a new user user Bachmann I'm already existing in the database okay so let me create ah okay so what I can do is for actually creating a new user if I go to the model I have this password type okay which is required so for creating a new user I need to give it a password okay so let me just first create a new user property and I have already got the name and email name and email I have already got it from on here okay name and email okay this is the payload and we have verified it is token and this name is what we have received from here okay this email and this is the name we can use this thing but for generating a new password we have the password existing in the Google account okay so for now what we can do is we can create a new password okay it's up to you anything and these random numbers over here select password equals two I'm going to append the email with the token so process toward env dot J's WT anything of sign-in key okay I'm going to create a new user okay so I can pass it name email and password that I've just created okay now I can actually use new user dot save error data okay it still is an error let me just copy this if so if there is an error we are going to return something went wrong okay so return status 400 yeah up but if there is no error it means we have caused a dagger okay so user has been generated now we just need to create a new token and return the response so which can just copy this code and paste it over here alright so now we have called the token we are generating it but not from the user now we need to generate it from the data okay it's a new user data okay so we are creating a new token and not from the user but a new user okay this new user have these things and now we are just going to return the token and the user data all right I think that's pretty much fine and it's not going to cause any kind of issues hope so okay so from the backend let me just rerun the server okay and let me come back to the react app so here I'm going to let me just give it a Google login success so that I identify that this login message is here okay so this response will be returned from here either this either this or maybe this thing okay all right so let's go over here just to refresh this page and I'm going to click on this log in with Google button and let's see what happens click over here and I should be receiving over here okay data we're worth it getting logged in take this okay deck out this thing actually I did not save this file so that's why this Google login success is not printed part this response is printing the correct value so this response is that a success function okay so I need to verify the databases user has been created in the database or not if it has been created it means that all logic is working perfectly fine and this thing has been executed it created a new user and it has returned this token and the user data okay so this data contains this token it is coming from the back end and this user contained this thing okay we are not returning the password so let me just refresh the database and all right guys to users it means that it is successfully generated click over here and there is you guys you can see this at the password of you can encrypt it okay I'm not going it in this video but you should interpret so this is the password that has been created and this is the exact pass protect the way we created it okay the email ID plus third key K from the environment file okay so what we can do in the front end now it is up to you what how you want to proceed is we can actually store these values the token as a user data in the local storage and you can use the local storage to actually authorize if the user is already logged in or not and proceed further to the profile page dashboard and a lot most of you can do okay so now what we can do is we actually need to verify if user shouldn't get created if it is already existing in the database okay so we just go over here click on this button again and click over here ok so now it should not create a new user it should actually directly return us this response ok alright so we have got the response this is the data and this is the token on our user and let's verify from the database there are already two users existing and now we have we are not creating a new user instead we are just logging in with a Google perfectly fine ok so I think that's pretty cool pretty much it and you can proceed it from here you can just call other components to actually navigate to different routes once user gets logged in stored the token user data in the local storage that may be the cookie that's the best way so I hope that you have liked this video the next video I will be making video on the log in with Facebook using the same boilerplate same server-side code and the same front-end code so if you have liked my video make sure you subscribe my channel and there is another channel that I've got I make the videos on culture traveling tech reviews and I'm going to give the link of that YouTube channel in the description of this video don't forget to subscribe that channel as well and my channel name is a mare aka Mirza so may I hope that you are going to subscribe my the channel as well so thank you so much for watching make sure you keep on checking my channel this channel and like this video subscribe and comment below if you have any question

Channel: Awais Mirza

Views: 27,567

Rating: 4.8357029 out of 5

Keywords: node, express, login, auth, authentication, node-express, rest api, login with google, login with facebook, mern stack, react, angular, javascript, learn, tutorial, how to, aws, jwt

Id: LA16VCpUido

Length: 38min 53sec (2333 seconds)

Published: Fri May 08 2020