Javascript OAuth2 One Tap Auto Google Login & Logout Project Using JWT & Google Identity Services

uh Hello friends today in this tutorial I will be showing you that how basically you can Implement that functionality of One Tap login system inside your JavaScript and HTML application so if I open a URL localhost 5500 you will see automatically this will lock me the accounts here you will see it will list me all the accounts which are previously I logged in so this is basically the Google identity Services System the latest Google auth flow that you see so it will automatically log in with one tap if I just tap on any of the individual account here let's suppose this account it will automatically verify the details in the background and it will now show me the name coding siksha email address and the profile picture we do have the logout Button as well so if I click the logout button I will be redirected to the you can again see right here now if I select this account here I need to Grant permission for the very first time and then after that it will simply verify and now you can see that once again it will automatically detect guys you will see as I close this once again if I try to open this URL it will automatically detect that you have previously logged in with these details it will show you in the sidebar and now you can simply verify this and now this will show you the information right here so this is the Google identity Services onetap login system guys that we will be oauth login we will try to implement it inside JavaScript I have given all the source code in the description of the video you can check out all the source code and follow along with this video so now let's get started so the very first thing guys we need to do is that we need to create a brand new index.html file this is the only file that we will need here and inside the body guys you will basically have a on load so we will execute this init function guys right here and we also need to include a CDN guys just right here after the title just include this CDM Source will be https accounts dot google.com GSI slash client and we just need to load the script asynchronously and defer that's all so just include this CDN tag right here guys after this what we need to do we need to Define this initialization function that we have done right here so right here you will put the script tag and we will Define this function function in it so inside this function guys we will basically have Google accounts.id.initialize and this function takes an basically parameter guys first is the client ID so here you need to paste your client ID and then we have the option of Auto selecting the accounts or to select this is the Boolean parameter true and the Callback function so callback function we need to have you can Define this anything let me just say handle credentials response so now we need to Define this function guys right here at the top so this callback function will automatically fire so right here we'll say handle credential response it will have the response right here and we can simply console log it so automatically whenever you select your account automatically all that information will be returned inside that callback function so right here you need to paste your client ID guys so this client ID you can get it from Google Cloud console so you just need to go to Google Cloud console and here you need to create a project and get your client ID this is very easy simply create a project and right inside this uh right here you need to paste your ID so whatever ID that you are doing so I am having localhost 5500 so simply copy this and simply paste it here localhost 5500 and also localhost in the authorized JavaScript origin and also authorize redirect URI will be localhost 5500 Simply Save and this will be your client ID and simply copy this client ID paste it here so now guys if you try to open your application if I try to open now nothing will happen so for that prompt guys that you see in the previous the starting of the video to enable that prompt it's very we we need to write one line of code right here which is Google dot accounts dot ID dot prompt this is the only line of code that we need to write guys so after doing this you will see automatically this will recognize me that you have previously logged in with these accounts if I select individual account here it will verify this and now if I check it the console you will get an object here and this object contains these credential which is a JWT token Json web token so Json web token guys we need to decode this token to get our profile information so J JWT token it's a very uh standard all the authorization application use basically your profile information is contained inside the Json web token now we have this function inside that function we will basically have a if condition we will have if response dot credential which is your JWT token if it is exist in that case we will need to decode that token so now for decoding that token guys we will say JWT and we will simply say response you will say that Json first of all you will store this token inside the response dot credential JWT and now we will extract the user information so you will use Json dot parse and inside this json.parse guys you will use a to B and then we will say JWT split and then we will split it by dot symbol and here we need to get the number one like this so this will basically pass the response so now if you console log the user guys so this will get the user information if you now refresh your application if you now do this verify so this will return the response guys basically we need to I think let me just paste it here sorry credential spelling is wrong so this needs to be credential yeah cre yeah this is a spelling mistake error was there so now if you refresh your application once again guys click on that you will now get your user object guys you will see this user object contains all this information email address profile picture display name now we can display this information so now inside the body guys we will simply have some tag here which is simple paragraph We will give it an ID of profile this is an empty here so now to display this information we can simply say here document dot get element by ID profile in our HTML and we can simply write in backtick symbol and right here you will say your name is this user dot name and then we can say that your email is user dot email and then we can again have a break tag and then lastly we can display the profile picture which is image source we can say user Dot and this contains a property picture so that's all guys and if you now refresh your application and basically if you select account you will see your profile information name email address and this is a profile picture if you want to select it for a different account you will see that you can see that so now guys we just need to display the logout Button as well so we can basically have a log out button we can give it an ID of logout button and we can say log out so we can basically whenever you this will not be displayed so display property will be none so now whenever it is long we can change the display property we can say log out button and then we can dynamically enable that button so we can say style dot display to block so now this logout button will be shown to the user if you click it so now your logout button will also be show here guys so now if I click this logout button guys we need to basically write a function so whenever we click this button so we can initialize on click here so this handle log out so this function we will need to make guys so now we can make make this function handle log out so inside this function guys what we need to do we will say google.accounts.id.disable Auto Select and then we will say Google dot accounts dot ID dot prompt then we will simply just clear out the profile like this empty and also we will hide the logout button so we will say style dot display To None that's so so now basically if you now refresh your application guys so click on logout you will be really log out once again you will see select your account this you can enable this for any application guys you will see that it is now working perfectly so in this way you can integrate One Tap login system inside your authentication system inside your JavaScript and HTML application it's very simple all the source code is given in the description of the video thank you very much for watching this video and I will be seeing you in the next video

Channel: Coding Shiksha

Views: 2,055

Keywords: coding shiksha

Id: gql4-OZCLWg

Length: 11min 16sec (676 seconds)

Published: Tue Apr 18 2023