Google Identity Services Login with React (2023 React Google Login)

what's going on guys it's cooper codes and in this video we're going to be taking a look at the brand new google identity services and using their sign in with google functionality to create an application where we can sign in and sign out in react the new functionality from google makes the login process way more simple and also gives you new things such as the regular sign in with google button that looks a little different one tap sign up and then also automatic sign-in which is something we haven't seen before the old javascript platform designed for the web is now going to be unavailable for download after march 31st 2023 and you're not going to be able to create a new project with the old code after july 29th 2022. in short terms it's going to be deprecated and you have to switch to the new google identity services code in order to make sure that your google applications are running and ready to go all right so that's just some quick overview let's get into actually creating our application so before we get into the react stuff we're going to want to go to console.cloud this is the google cloud platform and it's necessary for us to create our project and create a client for our login and log out to use so you should see a page like this go to the search bar on the top and then go to credentials and make sure it's credentials under apis and services from here you're going to see that you need to create a project in order to use this so press the create project button you can name the project whatever you want i'm just going to call it test login then you can just create that you should get a little warning here that says remember to configure your consent screen if it's not showing this look up oauth consent screen and it will bring you to the same place so i'm going to press configure consent screen here the oauth consent screen is that little screen you see whenever you log into a page using google it will say do you want this website to use your profile picture email whatever and the consent screen exists so it can ask specifically do you want it to access your youtube for example do you want to access your google docs so for our user type we're going to do an external user press create make an app name i'm just going to call this test login again and then you need a mandatory email for these here so just take an email that you you know can use you're also going to need a mandatory email under the developer contact information and then press save and continue since we're just using google authentication we don't need any scopes to any apis actually so we can just press save and continue here then your test users are super important when testing your app locally you have to have the email you're attempting to log in show up in these test users so i'm going to use an email which is going to be my test user i'll use later in the video it'll be desk spacing gmail.com but if you try to log in with any other email it's not going to work when you're in the testing or local stage so once you have the emails you want to log in with locally during your testing press save and continue then you'll be provided with a little summary just press back to dashboard at the bottom here alright so we don't have to worry about any of this now we can now press on credentials then we're going to want to create credentials and we're going to want to create an oauth client id you're going to want to choose your application type since we're creating a react application i'm going to choose webapp right here this is a super important part of the video is you need the http localhost for local testing and you also need the http localhost at port 3000. you need both of these you didn't need both of them before but now you need both of them so down here your redirect uris you're also going to need to do this and i'm choosing port 3000 because that's the default port on react if you're watching this video maybe using a different framework or just using a different port whatever port you're testing locally on let's say it's 4000 make this localhost 4000. i'm just going to name this web client one for now and we can press create at the bottom so you're going to want to take your client id and your client's secret and save these i believe the client secrets only showed once so you seriously want to make sure that you get your stuff here but you can always find your client id again but save this somewhere where you have access to it later because i'll tell you guys to go grab your client id later once you have the client id that's all we need from the google side so now let's get started creating our react application so i open my vs code to a fresh new folder and you can use whatever terminal you want whatever text editor you want it's not going to really matter here but go to an empty folder and say npx create dash react app i'm going to name our react app client for this video and this video assumes that you have npm installed and so if you don't look up npm install online it's a relatively easy install and it will make it so you can run stuff like npx create react app in your terminal once that is done i'm going to cd into my client in my terminal and i'm going to open up the folder over on my text editor here first thing that we're going to do which is a super important part of this tutorial is we're going to go into the public file and then we're going to go into index.html this is the boilerplate html of your react application and generally your entire application sits inside of this div id equals root but if we want to do things like include outside scripts to our react what we can do is we can then change the head of this html there is a script provided by google which is this i'm going to put this in the comments so you guys can copy paste it but google specifically asks you to have this script and also ask for a sync and defer to make the script load faster so once you put the script in make sure to save the index.html and that is all we will do to edit this file so now we can close up that public folder and now we can go into source which is generally where we do most of our react development and we can go into app.js so as normal this is just the regular app.js you have all of your header html code in here or jsx code we can delete the entire header because we're not going to deal with the spoiler plate for this application and so delete everything except that outside div so the first thing we want to do in our react application is we want to initialize our google client with our client id and we also want to initialize the button for logging in this initialize code we only want to run once and we can run something once at the beginning of our renders in react by using the hook called use effect so we can go to the top and we can import use curly braces use effect from react so use effect is a react hook that we can use like this the first parameter is the actual effect that we want to run and so we can do a function here for example and we can do the syntax like this so this first parameter is a function and the second parameter is just going to be an empty array the in-depth react look at this empty array is that if anything in this array changes it's going to run the use effect again but we only want this use effect to run once and so we just put nothing in the array and it will only run once in our application so this is kind of strange syntax if you're not used to react but since we're using an outside script we're going to want to put a comment at the top here it says global google this is because this google object is coming from the script in our html and we can do things like google dot accounts dot id dot initialize is one of the functions that we're going to be using but our react application doesn't know that google exists but if you go to our index.html this script is going to load before our react content gets loaded and this script is going to give us a couple of different javascript objects we can use in our react.js and so if we don't have this global google the linter is going to say hey google doesn't exist we have to tell the linter hey i know you don't know google doesn't exist but we know it's already being loaded in from this script and so it will ignore any errors where google isn't defined because it is defined react just doesn't know that so using this google object that we have access to we can use an initialize function from the accounts and the initialize function is going to take in two things it's going to take in a client underscore id which is going to be our client id here so go to wherever you saved your client id and then paste it in here it's also going to take a callback function as its second parameter which pretty much means that if we ever do a credentials or if someone ever logs in what function do we want to call so i'm going to call this function handle callback response this is a function we haven't made yet and so i'm going to create it up here function handle callback response it's going to take that response as a parameter and so now we have access to the response if anyone tries to log in using our google client and on react the google accounts also has the functionality to do things like this google accounts.id dot render button then you can tell it the actual dom element you want so i'm going to say document.getelementbyid and i'm going to say sign in div we will make this in a second and then you can pass in parameters as to the theming of the button so i'm going to say theme we're going to do an outline button and the size of the button is going to be large for our case so inside of our app we can then do this make a div with an id and we can make it equal to sign in div so this is where our sign in button is going to live and so let's do this so we have this response and this response is coming from documentation from the google identity services but one thing we know from the documentation is that there is an encoded jwt id token and it's you can grab that by saying response dot credential alright so now we have our client initialized we have a button getting rendered let's do an npm start and see what our application looks like so far alright this is great so if you see a sign in with google button on the top left that looks something like this you are in a great spot that means your script loaded correctly and it also means your client initialized correctly as well which is super great if we press sign in with google right now or first let's inspect element and then go to console so we can see any console.logs and let's try to sign in with google then make sure to choose the account that you have under your test users like i showed earlier in the video for example my account was deskspacing gmail.com so i will choose that it will say confirm you want to sign in to this person i'm going to confirm and as you'll see we just got a json web token which is a successful login response which is super great the google identity services package is very bare bones in that all it's doing is it's giving you this successful json web token which has a bunch of information that we can decode google isn't really handling anything for you it's expecting you to go and then handle this json web token as a successful login response all google is doing is saying on our side this person actually is desk spacing at gmail.com and they logged in successfully here's a json web token showing that they logged in successfully and who it is so the cool thing here is this if you're unfamiliar with json web tokens this might be kind of strange but there is actually information hidden inside of this crazy huge string we can decode a json web token by going to our application again and then installing a package called npm install jwt dash decode this jwt decode is going to allow us to decode a json web token and get the object that is at the payload of that json web token so if we import jwt underscore decode at the top from jwt decode this is actually a function that we can use to decode json web tokens so we know that this response doc credential is a json web token so we can say var user object is equal to jwt decode and then that json web token we're discussing if you're not familiar with json web tokens that's totally fine this is just a kind of simple overview of this stuff and so if i console.log this user object it will be way more easy to understand so now that i'm logging this user object which is decoding that json web deck we style let's npm start again let's inspect element and as you guys will see you can already see some of this cool new functionality where it recognized who i was before and so i want to sign in as the same person thank you google and you guys will see on the top here in my terminal is the actual json web token just a string but on the bottom here is the decoded object that that json web token string was representing initially so this decoded object has a bunch of different things that we can use it has the name of the person it has their email it has it their emails verified or not it also has a picture of that person whatever picture they have on their google account and so this is actually really cool stuff it means that google is giving us access to all this information that we can use for our application for example if i wanted google authentication alongside my own authentication system my own authentication system might have pictures it might have names etc right and so i can use this json web token to know that google is giving me this information and it's verified from google that this is a successful login so we're successfully logging in but we're not really storing anything so let's get into that what we can do to store this stuff is we can use a state in react so i'm going to import use state at the top here i'm then going to make the state of a user so i'm going to say const user and then set user is equal to use state and then an empty object so use state gives us two things it gives us the user which is the actual information an empty object and then the setter which would be the set user function so if i wanted to set our user as this user object i would go down here and i would say set user and then the user object here i think it's super important to understand that i'm just using a state as an example if you have a more full stack application or using react is one of your main ways to log in you're probably going to want to do something like a more global state or something like a redux to manage this user object state isn't designed to be used across different components in a super easy to use way and so whatever your authentication system is outside of google you should use whatever that is whatever it's a cache whether it's something like redux whatever that is use that instead of the state but state is still usable and it does serve a purpose in saving the user's information for this case so now this user object is getting set to this user over here and so now we can make a kind of sign in and sign out functionality so if we have no user we're going to want to show the login button so let's comment this out if we have let's see if we have no user then we want to show the sign in button if we have a user show the log out button and so that's kind of the basic idea of this functionality and so how do we know if we have a user or not well we can do something like this so i'm going to use some inline conditional logic here where i'm going to say if a user exists then i want to show some things to my react so we can make a little basic thing to show the basic properties that a user has so i'm just going to make a div here and the div is going to have a couple things it's going to have an image and i believe if we go to our application we can see that if we were to do dot picture it would show us this image here so let's import that rob can say source is equal to user dot picture so it should show that image and then we can also make a little header three and we can say user dot name so if we go back to our react application we should see this information on our page okay so sign in make sure you're using your test account and boom there we go it's getting the profile picture and the name from our user which is great news so if a user signs in we want to hide this button here one thing we can do is we can show some peer javascript we can go up to where we log in and because someone's logged in we don't want to show the sign in div anymore right so we can say document dot get element by id and then we can go to the sign in div and we can set its hidden property by saying dot hidden is equal to true you can imagine it like this i'm logging in that means i can't log in again right so hide that login button is kind of what we're doing there and you could imagine when we create the sign in functionality we want someone to sign out and then show the option to log in again and so we can use this line of code somewhere else as well so let's go back to our application refresh login again and we should see that the button has disappeared so this is great news this means that when we have a signed in user we're not going to be showing that sign in button still which is great stuff but now we have to go and create our own sign out button so we can go down to our code here and we can make a little button for signing out i'm going to say button on click i'm going to get the event from the click and then i'm going to point that event to a function we will make called handle sign out this is function we are going to make ourselves sign out for the button here so let's go make this handle sign out function we can go up here handle sign out we can just get that event i'm not sure we're going to use it but i'm just showing you guys that's a possibility if you have a different use case but you might need that event and so inside this handle sign out we are managing our cache locally with this state here and so one thing we want this do is okay if a user wants to sign out we're going to then set that user to its empty object again this empty object pretty much is saying if our user is an empty object we have nothing signed in we have no person and if they sign out we want to show the sign in div again right and so we can say take this line of code from here and instead of making hidden true we want to make hidden false which means we're going to show our sign in div so they have the option to sign in again so let's go back to our application and we're going to see sign in and sign out at the same time just for now we're going to change that in a second but let's sign in here use your test account then we should be able to press sign out and boom it's going to show you the sign in button again which is great news this means we can sign in and kind of sign out at will but there's an issue we don't want the sign out button to show alongside the sign in one so let's go make some functionality to react to make sure that doesn't happen this is a little complex but hopefully i can keep you guys here so if our user object has any properties pretty much means if our user object isn't empty that means we have a user and that means we want to show our sign out button one thing we can do here is object dot keys user dot length doesn't equal zero this means that our user actually has full user attributes and if this ever happens where we have a bunch of user attributes we know that we have a user who is logged in and so if a user is logged in we want to show that sign out button so we can bring this in here do the double and at the end to say if this is true show this and now we should only have this button to sign out showing when we have a user who's logged in so let's go back to our react application and we should see that the sign up button is not showing here which is great news so i'm going to go up here and i'm going to sign in as desk missing again boom i'm signed in we have the json web token authenticating great stuff and i can press sign out and boom we're back to normal again so this is a basic idea of how you would have this flow work for a google authenticated user there there are some really cool things you can do such as this one tap dialog is what google calls it i don't know why they call it that but when we load the page for the first time we can prompt the user to log in easily so we can say google.accounts.ide.prompt so this prompt is going to show a little prompt to the right where it will show some accounts you have recently logged in as or just some accounts you have in your like google cache if you're using like google chrome for example and so you put this prompt and then restart your application as you'll see it's prompting us on the right here to log in and so if i log in through here like this it's going to verify and the cool thing is we didn't have to change any of our code because that prompt it still hits the same callback which is handle callback response here and so that's the really cool thing is when you have this prompt it's going to call the same code it's going to get the same user object set your user object do this document hidden true code and you have another successfully logged in user and so google identity services especially with this new code allows us to create these google auth logins in a pretty streamlined manner compared to what it was like before alright guys so that's pretty much the entire video you have a react application where you can log in as a google user we've decoded that json web token coming from google and we have the ability to log in and then log out as that user in a react application thanks so much for watching

Channel: Cooper Codes

Views: 183,860

Keywords: react js tutorial, google login, react, javascript, authentication, react js, react tutorial, react tutorial for beginners, learn react, react crash course

Id: roxC8SMs7HU

Length: 19min 50sec (1190 seconds)

Published: Wed May 25 2022