How to use One-tap Google sign in, including idToken validation server side

okay guys so welcome back again in this video we'll be seeing that how do we use the Google identity platform inside our react application and this video would be like divided into three parts firstly we would cover that how to set up credentials inside our Google Cloud console the second part would be implementing that inside our react project using Google oauth library and in the third part we will see that how do we use the identity token provided by Google to validate the request coming from our front-end applications to our backend server application using express.js so without wasting any time let's dive into the first part that is creating credentials inside our Google Cloud console so once you log into Google Cloud console and if you haven't created any project then you would not be seeing this window here but instead you would be simply seeing here that is create a new project but I already have one project here but for this tutorial I would be creating a new project so I'll click here and I'll simply click select this new project and for this thing I would be simply giving a project name and this can be any project name it is not client facing so let's say that uh Google Google Google react sign in and for the organization I'm not going to choose any organization so I would be simply selecting no organization here and finally I would be simply clicking on create here and it would simply create a Google Cloud project for me and now I need to Simply select that project because like I'm logged into my old project here but you would be logged into the current project which you have just created so this is the project that is created Here and Now what we need to do we need to go to this thing here that is API info Services because we need to set up two things here that is the oauth consent screen and the credentials so firstly we would be setting up the oauth consent screen so let's click on this tab that is over consent screen and here you need to choose the user type that is internal or external so here I would be simply using external here because I want my application to be available for any user and now I'll click on Create and here I would say that you need to provide in the client facing app name so let's say that let's call it Mafia rocks simply like this that is the name of my application which the clients would see and then you need to select in your support email that would be the default email of the currently logged in user inside your Google Cloud console and then I would suggest that not to select in the app logo because if you select on the app logo then your app needs to be verified so just leave it as it is until until you are going for production and then you need to add in these uh optional things here that is application home page privacy policies in terms of service link and this is again needed for production builds and for the authorized domain just leave it as it is until and unless you are going for a production if you are going for production change it then just using the domain name on which your application is running or the react application is running and here you need to provide in a developer contact information so let me simply provide in my email address here and now let's simply click on Save and continue and now we need to add Scoops to our application that is what all is granted when the user selects this account so let's click here add or remove Scopes and here we will simply select email profile and open ID and let's click on update here so now we have these non-sensitive Scopes here and if you are using this application for like calling Google apis for the current user then you would need to enter the sensitive Scopes that would be like the calendar API the Gmail API or the drive API but we are not going to do that because we are only interested in authentication for this tutorials video and only let's simply click on Save and continue and here we need to add in some test users to test our application otherwise you'll be getting an error so let's add in a couple of test users here let's simply click on ADD here so let's click add and now we have these two users here which we can use for testing purposes and now let's simply click on Save and continue and now this is a summary and now we can simply go back to dashboard and now we need to go to our credentials tab here and now we need to create credentials here by clicking here that is the or2 client IDs select create credentials or client ID now we need to choose the application type since we are building a react application so we will be choosing the web application so let's select web application and here we need to give this any name again this is not client facing so let's simply call it react app react app simply like this and make sure that you are following me here correctly because if you do not add in the authorized JavaScript or is correctly your application would not run in the browser or it would give you an error in the console so let's add in a URI here since we are developing in localhost so we we would be adding HTTP forward slash localhost and now we would need to add one more Ura that is on which Port our application is running and that is 5173 in my case because I am running a wheat application and by default wheat react application runs on Port 5173 if you if you are using a create react app package to create your react application then just make sure that you enter the port correctly here because I guess that on the create react app the react app runs one port three thousand and when you are going for production just make sure that you enter the correct domain of your react application and now we do not need to enter any redirect URLs because we are not doing that here that is we are not redirecting the user anywhere and now let's simply click on create so once this is done we would be having having our client ID and client secret so this is my client ID and client secret and just don't waste your time copying this client ID and client secret into your projects because I would be deleting them after this tutorial so let's copy this quote or this client ID for reference so let's go here and just don't worry about what this is we will be coming into this in a moment and now let me also copy the client secret here so let's copy this client secret and let me paste it here so that's all what you need to do inside this Google console and we have our react app ready here so now what we are going to do we are going to go to our vs code here because here we have the basic mono repo setup with reactor as the front-end application the client application and the server updating express application and this is set up using a workspaces here inside this package.json file and the root folder of my project and then the server would contain the all the logic for the express application as you can see in the app.js file we have this express application basic express application and in the client folder we have the react application using the createweet app thing here and now we can go into the source folder to see in the app.j6 file so this is all basic skeleton stuff here so now what we need to do we need to do a couple of things we would be coming to the server part later on in the video but now let's focus on to the client application that is the react application here so let's try to run this application and let me do npm run there and it would start both the server and the client application and we see that uh server application is running on Port 4000 and we see awesome it works and the client application is on Port 5173 and we can see this thing here that is react Google oauth indicated client and server so now the first thing we need to do we need to use a package here that is the npm package called react or Google and make sure you are using this package here because you would be also implementing Google one tab sign in so let's simply copy the dependency from here and let's go to our application here and we need to stop the application just to install the packet let me clear out and let me paste in that command here and I would be simply adding this library to my client package that is the react application so therefore I'm providing this flag here but if you're directly using it inside your react package then you do not need to provide this workspace client here so let's press enter and it would take a couple of seconds to install and if you have a look at the package.json file of the client application we see that now we have the dependency installed Here and Now what we need to do the first thing we need to do is to go to our main.j6 file because we need to wrap our application inside the Google provider so what we'll do we'll simply import this thing here that is import something from uh at react Google or and we need to get the Google oauth Provider from this package and now what I'm going to do I'm going to wrap my app component inside this Google oauth provider so I'll say Google oauth provider and like this and then we need to pass in a prop here and that is the client ID here and the client ID we just simply copied a couple of seconds inside our package.json file that is this file here so let me simply copy this client ID here and this is the client secret and you would never want to publish your client secret to your front-end applications so we are simply copying this client secret here sorry the client ID here and we'll copy this to the to this thing here that is the Google oauth provider and that's all what you need to do here and now what I'm going to do I'm going to devote to my app.jsx file and just let me simply remove this user State from here because like it is coming from the wheat default generation so now we have this thing here and now what we need to have here is the Google Google login here import a component called Google login from this package that we just simply that we just installed so we'll simply import Googles from react Google or Google and will simply say Google login so what we can do you can use this Google login component here so let me remove this paragraph from here and we'll simply say Google login like this simply like this and we need to provide in two things here that is the on success event that is the required thing here and it provides us with credentials so credentials or credential response that would be better here so credential response because in the credential response we will be having the actual credentials so here for now let me simply log in the console.log I don't know why my auto completion is not working properly so we can say credential response and then we also need to handle the error here in case there is an error so we can say on error and here we would be having an error here so we can simply log the error so console.log the error message here simply like this this so these are the only two required things that you need to pass to this Google login as props and now what we can do we can go to our application and before going to the application we need to start the application again so npm run Dev so we have this application running on Port uh Port 5173 and it is on localhost and if you go to our application here that is the sweet application we see that we have this button here that is that says sign in with Google and again you can pass in some props to change in the uh change in the text here that is uh continue with Google something like that you can check the props inside the Library I'm not going to waste that time so if I inspect here we see that we are getting some kind of an error here because even if you click on this button here you see that this is not working for some reason and if we have a look we see that we see this that failed to load resource the server responded to the status code of 403 and this is one of the things that I wanted to show you with this thing or with the development with Google host is that that whenever you use 127.0.1 it would give you this error but instead if you would have used localhost then it would work so if I enter press enter here we see that now we do not get that error so once I click on this sign in with Google and let me also increase the font size of my console here so once I click on the sign in Google we see that we get this thing here that is again a pop-up here and since I'm in full screen so therefore it is opening it in a new window but otherwise you would be simply getting it as a pop-up here inside your this weight application or or your react application so let me simply choose one of the two test accounts that I added so let me simply select this account and now it says that confirm you want to sign into Mafia rocks as truly and that is the name of the application that I provided in my oauth consent screen and now let me simply click on confirm so once we confirm this that thing is closed and now we get up we are returned by this credential response which contains the client ID the credentials and select by so this is how you can get the credentials and this credential is a Json web token so what I can do I can simply copy this thing from here that is copy string contents and I can decode it inside JWT dot IO so JWT dot IO and let me simply paste that token here that is I simply copied this credential and I simply pasted it here and we see that we get all this payload here that is this uh payload which contains the email whether the email is verified and name picture and so on and so forth we can close this tab here what we can do we can simply get the data or we can get the payload from one another library that is called juice so that we can like directly show in the user some uh message here or we can change the layout accordingly by displaying it the user name email and this profile image so what we can do we can again stop the application and we can install one package that is npm juice npm ijuice workspace client equal to client and again if you are not using workspaces then simply ignore this tag here that is workspace client and it simply means that I'm installing it in inside my front-end application and we see that we have this dependency installed Here and Now what I can do I can decode the JWT from this package so import something from juice and here I can simply get this function here that is decode JWT and here I can say const payload equal to not a weight but we can get payload equal to credentialresponse dot credential because this is an optional value so firstly we'll check the credentials or let me explain out the credential from this credential response so credential response response credential like this and now we can check for credential if there are credentials then we can simply use this thing here let us decode JWT and here we can provide in the credential that is the JWT in itself and then otherwise the payload would be undefined if payload that is if there is payload then what we can do we can simply console log the payload here so payload like this otherwise we are not simply doing anything so if I save this and if I do npm run Dev once again and if I go back to my application and I reload the application and just ignore this error here because it is like something else it is coming from some other place so let me simply click on sign in as truly or let me select one other account that is this account here so as you can see we get back the decoded JWT here which contains in the family name the given name and the email as well as the profile image here so what you can do you can create some kind of a state inside your react application to store these credentials or these uh attributes to show the UI accordingly and you also need to save in the actual credential that is this JWT because when we make when we are going to make authenticated request to our express application we need to pass the stereo Bluetooth to our backend application to validate is JWT with the Google servers that this is a valid request and this is a valid twt and so that you can process your requests so before doing so I would show you one more thing that is how to implement the one tap log in here so what we can do is to go back to our react application and we can pass in one more prop here and that is use one tab as a prop here so this is the prop I am passing here and if I save the application we see that oh we get this pop-up here so this looks something like this that is we have this one tab sign in that is once the application is loaded we can simply select in the account with which we want to sign in and as soon as I click on this let me clear out the console first and as soon as I click on this email address it verifies here and finally we again get back the credential and the this thing here this thing and again you might be wondering that if you want to get rid of this button what to do you can simply use them go use Google login hook that is uh or if you simply want to show in this thing here that is this one tap login thing let me reload the page once again so if you only want to show this thing here and you do not want to show in the button so what you can do you can go back here and you can use in the use Google login hook that is use Google One Tap login and here what we can do we can simply say const login equal to use Google one tab login and here you need to pass in the functions here that is the on success and on error so let me copy these two functions or these two callbacks and let me paste it here and this should be like this and then we have in the on error thing here and this should be like this so that's all what you need to do that is this thing here and we can get rid of this stuff here that is this thing here and now as soon as I save the application and I go back here and I reload the page we see that we are seeing only this thing here and we don't see the button here so this is again what you can do and again if I select the account we get the similar response back in a moment so that's all what we have here okay so this is all about this use Google One Tap log and hook and now let's see that uh how do we pass this credential to our server so that we can validate the credentials and we can send in the response accordingly so as I've told you already that you need to store this JWT token somewhere as a state variable inside your react application using the context API or you are using Redux or any other state management Library so what you need to do for each and every request to your backend application or each and every authenticated request to your backend application you need to pass this as a header or in the body tags whichever way you want to do so for this video what I am going to do I'm simply going to copy this thing that is this credential and I'm simply going to make a request to my backend application as soon as I receive it inside the unsuccess block just to make one authenticated request or just to show it to you so for that what I need to do I need to install a couple of things firstly I need to install axios to my foreign application that is a client application so npm I access workspace client and again if you are not using workspaces then simply ignore this workspace client from here and now I need to install one package here inside my server thing and that is the Google oauth library to validate the JWT so what I am going to do I am going to install this package that is npmi Google auth library and this would be installed in workspace server since I'm using workspaces and if you're not using workspaces simply omit this workspace server and I'm insisting or this thing here because otherwise you would say that I have not told you that what this means so let me install this thing here and this is installed in the server package here that is the Google oauth library and just ignore this thing here and now what I'm going to do I am going to create enough function here inside my express application and all those of you who are watching this video must know that how Express works and if you don't know how to work with Express applications then I have a very good series about how to work with Express or how to create list apis using Express and I would be linking it here at the very top so now what I need to do I need to create a middleware here so let me call it verify middleware so we can create an async function here so async function called verify are like this and now what we need to do here we need to create a new oauth to client from this Google or package so what I'll do I'll simply say punched something equal to require Google Earth library and here we need to Simply Import in the oau to client and here before this function because I do not want to create in the or2 client again and again so just before this function what I will simply say I'll simply say oauth or to clients or to client let's start with a small o equal to new oauth to client and here we need to pass in the options that is the client ID and the client secret so as you all know that we have this client ID here so we can copy them this client ID here and let me go to my app.js file and I can pass in this client ID here and since it's a tutorial I'm hard coding it but in your in your application in a production application you you should never be hard coding your client ID and client Secrets like this but instead you should be getting it getting them from my environment variable and now I need to pass in the client secret so let me copy in the client secret and now let's go back to our app.js file and here we can pass in the client Secret simply like this so let's save this and now inside the verify middleware what we need to do we need to violate the authenticity of this token so what we can say we can say const ticket equal to 08 oauth to client dot verify ID token and here we need to verify the ID token so how do we get the ID token so we can extract it from the headers as we can send it from our react application so what we can say we can say const token equal to and this verify expecting a request a request response and next since it's a middleware so we can get the request response and next objects here so we can say request dot headers headers dot authorization and then we can get the or we can call it auth headers auth header would be like this and const token would be equal to auth header dot split auth header dot split and it would all make sense in a moment we are displaying splitting it with a space and then we simply need to grab in the first object because the token that would be passed from my from our client application would look something like this that is let me write it here so it would be looking something like this that is that auth header would be containing a better token here so Bearer space some kind of a token here and so therefore what I've done is this that I've splitted the in the auth this hot header would be looking like this so what I've done is this that I've splitted in the auth header over the space here so therefore I am using a space here and then I would be getting back in Array and I'm simply getting in the first item of the array or and I mean that the second item of the area that is this item and this would contain in the token so therefore I have used in this thing here so I would keep this here for reference so now to verify the ID token I can simply pass in the options here so ID token would be this token here and then we need to pass in the audience so audience would be this client ID so again you need to pass in the client ID so let me copy this client ID from here and again this should be coming from your environment variable so if the ticket is verified we can get in the payload so const payload equal to ticket dot get payload and now what you can do you can simply check that if payload you can simply call and you can simply attach in the user ID to your app to your request object you can simply say reg dot user ID that is I am attaching this user ID to my request object and I would simply say payload user ID or that would be sub uh and we would be simply calling in next from here that is go to the next middleware otherwise and again we will be returning from here otherwise we would be simply sending back a 403 error that is forbidden or like unauthorized through create error Dot unauthoraced simply like this so let's save this okay so now we need to use this middleware in any of the protected routes that we want to create so let's say that we want to create a route here that is app.get and this would be a protected route so I am calling it protected route and it can be named as anything or it can be any route and here I need to pass in the middleware that is the verify middleware and again we can simply copy this piece of code from here to keep it simple so awesome it works for protected route so protected route simply like this so if I save this application and if I go back to my application and I'm directly going to my local sport 4000 before connecting it with a react application so if I save this we see that on this local this index dot it works but if I go to the protected route we should be getting some kind of an error so we see that we are getting this error and that is because I expected because firstly it it is not 100 sure that we are already having an auth header in any request so what you can do you can simply check it here that is if not auth header that is auth header so if there is no Authority what you can do we can simply call it next with the error is the only parameter so create error dot unauthorized and I guess that we instead of throwing the error here we can simply call in the next with the unauthorized thing here instead of like throwing in the error because like I already have in the error Handler here inside the express application that is this this thing here there is this thing here so we can save this application and if I go back here and if I go to this protected route here we see that we are getting this error here that is unauthorized so now let's try to get this route from a react application so that we can get back a response so we can go to our react application once again so app.jsx file and here what I need to do once we have the payload so what we can do we can make in a request here so axios so I need to import access from axios first so import access from axios and I can make an arcade request so axios dot get and here we need to Target in the localhost port 4000 that is our backend application and it should be accessed so localhost Port 4000 forward slash protect it because that is around we want to call and here we can pass in some options here and here we need to pass in the editors headers and headers would be the authorization header and this should be containing in the credential JWT token so it would contain in the bearer and then we can pass in the credential here by using this thing here credential simply like this and then we can get in the response from our backend application and here we can simply log in the responsor console.logresponse DOT data otherwise you can catch in the error and we can simply login the address so console.log error error Dot message simply like this and did I do something wrong maybe not all right let's keep it simple so error would be equal to this thing here so let's save it and if I did everything correctly then this should be working fine so let's go back and let's reload the page and let's try to log in with one of the users here and as soon as we log in we hit the protected route and we see that we are getting this message here that is awesome it works for protected route so it it means that we are like validating the JWT token on the back end so now let me show you that if you do not pass in a valid JWT token what would happen so let's say that instead of the actual credential we pass in some gibberish value by adding some gibberish item here and if I save the application so let's try to hit this route once again so let me reload the application once again and if I click on this thing here we should be getting some kind of an error here and we get that error connection review so if you have a look at the terminal here and if we see the output here so if I scroll at the very bottom we see that we get this error here that says that invalid token signature so which means that our authentication is working on in on our backend server that is the site token is not valid and if you want to like uh not see the error here but instead send back in a response so what you can do you can wrap this thing in a try catch so try catch and you can try everything and finally you can simply cache the error and you will simply call in next with the error as the only parameter so that the error is like responded back to the client so let me stop the application once again and let me start once again so npm run div so let's go back and let me reload the application once again and let's sign in try to sign in with this user and we should be getting an error here we see that we simply get this error here that is request fill the status quo 500. and you can simply check in the data also that is what data is sent here so invalid token signature here that is this token is not valid so guys this is all about this video this is how you use Google sign and Insider react application with expresses the backend for authentication purposes if you have liked the video to hit the like button and if you're still watching till the end please do hit the Subscribe button it means a lot to me so thank you bye Tata take care and have a good day and have a great day

Channel: Mafia Codes

Views: 6,514

Keywords: mafiacodes, reactjs, google signin, how to use one tap google sign in react application, how to validation idtoken on express, google id token

Id: Am0prt_HNj4

Length: 30min 54sec (1854 seconds)

Published: Mon Mar 13 2023