sign in with google | implement google sign in angular | login in with google in angular

in this video I showed you how to do and sign in with Google integration in angular application so there I showed you how you can create your client ID from the Google order console and how you can add a sign in with the Google button in your Android application so following that video a lot of people were asking me about that how we can get an user information once they sign in is successful so this is the part two where I'm going to show you how you can fetch the user information like the username the email ID their profile picture and all of the details so that you can use it in your application and I will also show you how you can perform and sign out with a Google provider in hybrid so let's get rolled in so here we are as you can see this was the screen that we developed in the last tutorial and I have the sign in button there and also a conventional login that we also implemented just for the sake of the login screen so you can see that if you are already logged in in your browser in your browser session then the Google automatically tips at the email ID and it tells you that okay you can sign in using this as your username into this application but if you don't have it or if you open it in the Incognito then it will simply show you that sign in option and not your name uh so I will click on it and once I click on it then I have this application which is demo signing created and I will log in there and now I have been navigated to a dashboard page where I got the details of the account so this is my email ID name and all the details is my Google account ID I have received that also and I have a sign out option also so let's see how we can implement this so let's go step by step first thing that we need to do is we have to go to our console developer console and then we have a credential and the overall consent screen so in the credential we have already already created the client ID and the secret and that time we also configure our oauth constant screen so if we go to the same oauth constant screen we have option to edit an application and if we go there there we find the details about our application like this is the name of our web application then what is the support email and what is the origin of the server what is the origin of uh on which our application is hosted that domain name you can find here so in order to get the user information we need to provide and permission to our token it means that we have a API key and we need to tell the Google that for this API key you need to get and details of the user the user which has logged in in my application I need the information about that user we need to configure that and that we can do with the help of the Scopes so if I do a save and continue and Go to Scopes there I see option to add the scope so I click on add or remove hubs and there we have the list of what are the different Scopes that are available for us so we can get the information like there are a lot of options to summarize like we can get info about the users one drive you like their files which are present in the user then a lot of other things is like their their Google account their cloud storage account or their even their even we can read their emails but this is not just that straightforward we cannot do without the concept of the user so when we perform that we actually ask user that this application is requesting a permission for reading this these resources on your account whether you agree to that or not if user says a lot then only you are going to get so in our case for this uh demonstration we want to get an user info like the profile and the email so I have the two options here I will simply click on it like the user info email it says that see your primary Google account email address and the personal information meaningful that you have made publicly available so I'll click on it and update so with this my client secret token that I have created have or Define a scope to read the user info like email and the profile of the users account that are going to login on my application so I'll Simply Save and close and that's it I don't have to do anything else so now I can come to my vs code you can customize my angular code to get this user information via Google token so uh this is our code that we have wrote in the previous video so what we did there is we had angular at a client side and at the back end we had a simple node.js API that we're listening to a sign in event so we are going to add few more new things into this so if you see that we have a data login URI which is localhost 3000 slash API login actually there are multiple ways that we can get an information of the user uh using the Google JavaScript library you can get it using only your backend if you don't have any front-end application and it's just a backend then you can Implement something of the server side setup and you can get those details so what was happening before is we had a data login URI once user is successfully logged in then now we pass the control to the 3000 slash API login which was our endpoint and there what we did is we just redirected to a dashboard so that you know once this sign-in is successful we wanted to you know navigate user to our landing page which is a dashboard now we are going to do a little bit change here uh we can do this in a better way and without involving a backend it is you know it's up to your requirement at whether you want to use a packet or not but without using backend so you can do something like you can add these languages data call back handle credential response now this means once your sign-in is successful then there is the Callback function callback Handler that we have defined in our front-end application which is handle credential response and then we are going to get the response of the signing credential and from that we are going to proceed so we have we can add this data callback here and it is important to note that if we add the data called that then this data login URI is not going to work so we have to remove this because now with this approach it is not going to hand over the control to any back and post API rather it will hand over the control to handle credential response method so we will remove this and then uh we need to Define this handle credential response so this we have included uh so support for the signing button we have included via JavaScript JavaScript library so we cannot Define this handle credential respond directly in angular application so for that what we need to do is we have to go in our index HTML and then we have to in a script we have to Define that function so we will write something for like these two functions I have a decode JW token I will come to this why we need this and what's the purpose of it but this is my handle credential response so what is happening in our case is the data callback tells that once assigning is successful go and call the handle credential response which you will find in our index.html and there you will have the instruction to pass the response which we have received from the Google and from that we have to pick the information of the login user so we need to decode the credential response so that's why we have our uh decode JWT token the response that we get from a Google after successful sign in it's a JWT token and in order to decode the JWT token in a readable format we have to uh to njson pass that's why I have put that logic into a decode GW token method so we get a response inside that a credential object has our user details so what we are going to do in this case is we simply going to get that credential details and uh once assigning is successful I am going to set the details of the user in my session offset which is logged in user and that session object I am going to use next in my dashboard component which is my landing page so once assigned in successful I get response from Google I store the user details into a session of that Navy logged in user and then use that session offset in a dashboard company or whatever and why I'm using a session storage because method is a preferable way of storing your data if you are storing information about your user in a particular session that you want to last only for a session that is active so once I have that I will simply do window location hrf this line takes care of navigating to a dashboard screen so now I don't need this redirect because my control is never actually reaching to a backend in this case so again to emphasize uh this is the totally pure client-side approach to do as Google sign in if you want to do or handle it in the back end part then as I had in a previous approach we had a login URI where it passes the control to our login URL and then you get an access to read the things so if you have to explore that option there is also documentation available on the Google console you can read that uh instead of getting the response credential in our script file like this you can straight away get that in this post API login that is also a different method since I'm showing a front-end side angular application that's why I'm sticking to an approach which is more convenient to a front end and easy to implement at a front-end side okay so with this we have a credential response so in our dashboard component.html I simply have a text user login successfully and dashboard works that's it so what I want to do now is I will put an NG container and inside that NG content I'm checking if I have a user profile data then I'm going to create a name from the user profile and we simply put a message there welcome username and then I want to show this user card where I will show the details of the user like a profile picture email user ID in a card UI so in a dashboard component we simply have to declare one object which is user profile and then to assign a value of our session storage which is set in our logged in user which is set using and key as a logged in user we have to read it and convert it to a Json object so you user profile will hold the information about the user and this user profile we are passing to our app user card so let me quickly create a component namely app user card in my project so there we go I have created a user card and uh in my module let me see if that has been imported or not so the user card component is imported and it is in the Declarations array so I'm good to use it so I'll go to the uh HTML file of this and we'll write a code to show user card there the user card component HTML I have a division block which is I have a class user card I want to apply some CSS to this so I inside that card I have profile photo which I will get from the user profile dot picture then the user information inside that I'll show a first name and the last name which which is under the this properties and this is what we get from the credential response from the Google sign-in and in the email this is enough that we need to show a card now we'll put a CSS for this so in the CSS file I will put an user card class which will align the items centrally and I have kept some padding and the border and the Box Shadows just to show and Shadow effect on it and some custom margin and in the user component yes we are simply going to put an user profile which will come from our parent component so once we include this user card in our dashboard component we are passing the user profile data so here on the line number six app user card which accept the user profile so we have the data of the user profile in the in this object so I will simply import this input from the angular code and now this user profile is available for our HTML to use so with this much of code let's see how it looks on our UI so if I go to application again on the browser I see sign in is there I do a sign in and choose an operation now I can say that I have been navigated to a dashboard I have the information about the user in this case it's my email ID that's why it shows that's why it's showing my name there but I use it with the email ID in the sign in uh in a sign-in pop-up you will get that information here first name and the last name and the email and the ID so if I go again back on the browser now I see the email ID and the my Google account ID now I want to show you how this helps worked so if I go to a login screen again I see and now option I go to a location again and when I click on the sign in and whatever account I provide here once I choose that there are two things happen at this moment first thing is it performs and signing it checks out whether the account has been whether the provided account is logged in into this browser or not and if it is then it performs an authentication and if you go to an application you can see that the Google by default it sets couple of keys here so if you go here this G underscore State this is the cookie that is actually the code we wrote in our index.html where a data callback we pass the control to handle credential response this handle credential response uh received the response from Google's API and then it decoded that JWT token and it set a logged in user of that response payload so that's why if I go to a session storage I can see a logged in user and I have the details of the users so this much details that you get from the Google you have a lot of things available here like the email certified expiration or the names now after having a successful sign in and also getting an user information what if you have to do a sign out how you will handle that so for sign out operation we can provide a sign out button here and I'll show you what changes we need to do in order to perform a clean sign out so in my dashboard component HTML I will simply put one button which is sign out button and I will call one function just handle sign out and there I will show just a text sign out and on click of it I will perform some set of instruction in my handle sign out method so in my dashboard component TS I will implement the Android sign out like this and inside that what we are doing we are simply clearing the session storage so logged in user that we have set in our session we will simply remove that item and then we are going to navigate back again to a login screen because the user is logged out now it makes a sense to navigate him to our landing page or whatever screen you want to but usually it is login screen or a landing page where user is navigated backwards performs a log out so instead that we need to provide window.location reload just to make that it really enters the sign in button and all those stuff properly but wait this is not enough once a sign out happened we need to inform via Google API that a sign out has happened and you need to clear few things in the cookies so so when I was showing that when a sign out happens that there are a bunch of the cookies that are set into it and the g state is a one that is actually a result of our signing so we need to tell uh Google that the sign out is happen from this application so we have to write function in our index HTML under script that we have to tell Google that perform and sign out so how this works actually I have referred to and documentation of a Google and then it says that to perform a sign out when a user signs out of your website they can be directed to a page where Google One Tap prompt is automatically displayed so one tab prompt is nothing but the button that we see and the pop-up that we have here on the right which tells that you can log in using this account uh but here what they suggest in the document once a user click on a button there is a google.accounts.id disable auto select method that we can invoke and after invoking that method it will perform an sign out and what exactly they mean by sign out is the sign out status is recorded through cooking your domain so that the daily Loop is ux rupees awarded so the sign out set is stored in the G State cookie so it means that a cookie will be still there but the status of that cookie will have information about the user is sign out and the not the sign in you have to write this function which is function handle sign out and there what we are doing is google.account.it disable auto select that's it so with this disable auto select what we are doing here is with the display Auto Select it just update the information in the G status cookie in our browser so we have the handle sign out now in our dashboard component once the sign out button is clicked uh we need to perform we need to invoke that handle sign out so I will invoke that handle sign up here and this is not recognized because it is the angular typescript code and what I have that function is in the script so for that I will simply declare the under sign out here in order to make typescript avoid that error so it means that we are invoking a native JavaScript method JavaScript function from our handle sign out okay so uh with this we have a sign out also implemented so I think we can now go to a browser and see if that works so I also see a button and this is a one tap pop-up so I can click here also and once I do that it will navigate me to a dashboard page I have all the details and I have a sign out this time if I click on sign out it has taken me to a landing page again and I see an option to login again so let's verify whether that work correctly or not so if I go to assess in storage I don't see any session which is holding the user file information so that means a sign out has successfully happened so this was the quick demonstration of sign in operation and getting the user information also I show you how you can perform in sign out so let me know if you like this video if you have any further question queries to let me know in there in the comments and I'll be happy to answer it thank you for watching

Channel: Brogrammers

Views: 2,521

Keywords: angular, google login in angular, angular tutorial, sign in with google, angular reactive forms, angular sign in with goo, angular google login, login with google account using javascript, google authenticator, google authentication angular, angular login authentication with api, sign in with google node js, google login in node js, angular tutorial for beginners, angular tutorials, learn angular, google oauth, google oauth 2.0 tutorial nodejs, google console

Id: chREkmVEOMI

Length: 15min 31sec (931 seconds)

Published: Mon Aug 14 2023