Implement google sign in angular | Login in with google in angular | Google authentication angular

[Music] foreign so I am going to create a new angular project using NG new let's call this sign in with Google so once I have application created by angular CLI I will get rid of the Polar plate code that I don't need so I will go to my app component HTML to remove this thing which I don't need then I will create a new component which will be my login page so I want to show a login page and then I will give you option to sign in with the Google so I'll generate a new component let's call this login and I need one more component uh that component basically will be used once user is logged in then I want to redirect to the component so I will call that dashboard so here in my case if a user login successfully it will be navigated to a dashboard and if there is any error then he will be still on the login page but I will show some warning or some error that a login was unsuccessful or something like that okay so first thing I will uh include this app login in my app component HTML so that it is available in the Dom so just paste this control space and it is available there now I need to add the code inside this login component for sign in with Google button so similarly I created a error component where I want to show the error if user has not been logged in successfully I can also do this on the login page itself but there I would need to pass some data to a login page the data that the message where I would pass in that login was not successful because of some reason but I would keep it simple for this example and would show an error message on a separate page then I will go to HTML of the dashboard and then simply I'll put this html text where I will tell user that they are login successfully and this is a dashboard content that you can put whatever you want it's like a landing page where your user will come after they successfully login then uh next thing I need to do is to create a routes in my application because I want to tell angular that whenever whatever path whatever URL user gives in a browser I want to tell angular that which component to route to so I will just import these three components that I have just created and create a route so if it's a login then I want to render a login component if it's a dashboard then I want to navigate user to a dashboard and if it's a error then it will go to error component in the error component I simply have a simple message which says that there is a error error logging in a user then after having this routes I will go to my app component HTML and there I will add a router Outlet router Outlet we need the router Outlet in order to render the content inside a route whatever routes this match so after having this we basically have a setup of angular application that we need we also need some backend where we want to listen to the request I'll come to that part but before that I want to show you how you can create a Google's oauth client ID so for that I will take you to my Google developer console page so this is the documentation of googledevelopers.google.com identity protocol or to there you will find all the details about how to set up this they're specifically about the web application they have this separate page where they have given the details step how to set up the authentication I have given all the links in the description so that you will find what exactly the documentation is where it is present and you can refer along with the source code of course as I do in every my tutorial so in order to set up the Google API client ID you need to create a project so you need to come to console.cloud.google.com and this is the console basically if you have to create create any uh client ID or any auth or any other Cloud specific things if you need to create you do that through the console.cloud so you need to log in here with your Google profile with a Google account and there it shows the active projects that you have So currently I have this one signing demo I created but for sake of this tutorial I will show you how you can create a new project from scratch so I'll simply uh go to any project and uh there I have option to select a project and uh option to create a new project so I'll create a new project uh so Google allows uh some I think 13 it has a code of 13 projects so I have already created two of them and with this I I have or 10 projects say many so it allows you it allows only 13 projects to be created in a specific time so I'll create a angular sign-in demo I don't want to select any location because uh I am not creating this for any organization this is just for a simple project just some demonstration so I'll create angular sign-in demo and once I have it I will select that project and after selecting a project it shows that we are working on angular signing okay so after having this what I need to do is I need to create a Google client ID Google or to client ID so for creating a Google API client ID as it is mentioned in the documentation of Google we need to go to API console so if I go to API console it will show me what project I have there and a couple of options I'll have available on the left side so I have the angular sign-in demo a project I just created a moment back and I want to create a credential for the same so what I will do is go to the credential and inside the credential I will click on create credential and here I want oauth client ID which basically we use for accessing a user's data there are other options like also service account enable server to server and other yeah so in this case we'll create a oauth client ID we just need a login mechanism so we'll click on the oauth client ID and in order to create auth client ID I need to configure constant scheme so I'll configure constant screen where I need to provide some basic details about my application so my user type is external I would say because with the internal and external we specify which at the rate uh email IDs we want to allow so for this tutorial I want to allow every Google account if I want to restrict that to only specific user let's say I'm working in an apple and I want to allow only at the red apple.com email IDs then I would choose an internal and then in that case it would ask for other details but I have not selected any organization that's why it is not allowing me to select that option so I'll choose external for this example I will simply call the name of this application as angular sign-in demo then the support email I can give my email then the app logo I will simply upload a app logo that I have then app domain home page so for this example I am running this on the localhost if you have a domain name associated you can give that domain name link here remaining are the options additional things that you can specify even if you don't specify there is no issue I'll give the developer contact information which is mandatory and we'll say save and continue so you can see here uh the scope you can also Define a scope if you want to restate a scope that is in terms of the quest access of Highly user sensitive data what data you want to make available so in this case we are simply using this for authentication we don't need any data but if you need a data like a username and the email ID of a logged in person then you can add that scope here that which data you want to be available as a response of a successful login then I will say say save and continue test user I don't want any test user for now so we'll simply skip it in the summary and we'll create this after creating this it will navigate us back to our application so after having that I will I have the oauth constant screen set up now I have what constant skin configured so I will create a credential so let's so for this example we have angular which is is a web application that's why I'm selecting application type as a web application if you have something of Android or the iOS application TV desktop application other Chrome extension you're developing you would choose this option so I'll simply go with the web application let me give the same name again angular or sign-in demo then I will add a URL so we need to add the URL this is important because this is what help us to uh you know decide from which origin the request will come so I'll say HTTP localhost 4200 and technically this will be your url whatever you have if you have any uh domain associated with your application you can add that and you need to add a two URLs here if in this example I'm running this on the 42004 that's why I specify the 4200 Port specifically but I also need to give a URI of my domain so that is localhost so I'll add a localhost 4200 and the localhost to Uris and then authorize redirect URI uh this is so this we need to provide this is compulsory because once your login happens successfully uh you need to specify that at which URL you want your user to navigate it so in my example if you remember if my authentication is successful if my login is successful then I want to navigate user to a dashboard so for the same reason I would add localhost slash dashboard here in the redirect URI so with this I think I am good I will create this and as it says it may takes five minutes uh to reflect the changes and I get a message which says that oauth is created and then I have the things which are client ID client secret all of those things so now we have a or 2.0 client ID created next thing is we need to integrate that in our angular application so to integrate or two client ID calls in any web application there was a library which was initially created by a Google which is types G API Dot auth2 and that was being used very heavily as you can see on the npm.js that this is the library what was being used but there is a twist with this this library was being used uh heavily but recently Google has announced that they will they are going to deprecate this by March 31 2023 and as a alternative to this they have a better mention about their explain about how to use that new way in their setup documentation so this was the old way and since they are going to deprecate it soon I am not going to talk about it but just from the history perspective to know this was a one way that you could do so so now how to do that with a new way uh as here in the Google documentation they have mentioned a setup and there is a if you go to Next Step which is a load client Library so what I need to do is I need to copy this and I need to put this script somewhere in my angular code so in angular we have the script usually present in index HTML if I have any script to load I keep that in the index.html you can even download the script if you don't want to make a request to accounts.google.com always you can download this and put it in your in your assets so in my index HTML I will simply copy that script SRC so that the script is a available now I have imported a script next thing uh next thing I need to do is to generate an integration code so for that Google has provided very interactive UI where it has become a very easy to do this so we need to provide a Google client ID and from where I'll get it so here is my client ID on my oauth to client ID so I will copy that will uh will come to this page and I will paste my client ID then data context which uh for what purpose I'm going to use this or what is a context I need a sign in sign up for the use if so login URI this is the listener URI at which I want uh my application to listen and get that data so in the sign in I don't have any data written but if I say use then it will return some data back to login URI I will provide a local host URI and for the same purpose I need to also create a backend server so I'll show you how you can get a back-end server so I'll provide a localhost 3000 slash API slash login as a URI after providing this login URL here it means that one smile uh login request is processed by Google this is the URI at which or this is the endpoint at which a response will be listened so that means I need to have this 3000 Point running on my Local Host so what I did here is I created a backend server and for creating a backend server I am using this Express so I have installed the express if you don't know about how to create Express server I have a separate uh detailed tutorial about it where I have explained how to create a Express server and how you can render a angle application but in this example we just need an Express server so I have installed the express Library using npm install Express and what I'm doing is I'm running the express application on the port number 3000 and here I have defined a middleware which is API logging and if API login is hit then I need to redirect user to this dashboard or page which is basically login successful page in our case this is what mapped here so if I go to 3000 slash API login this will invoke this this middleware and inside according present in inside it will get executed so I'll simply create it then I will go next here and there we have the options to customize how you how we want it to look so education specifying this customization I'll click on the get code and there I have a code available so I will simply copy this code and go to and go to my vs code and in my vs code under a login page in the view part of a login I'll paste this code so I will simply copy this and we'll put it here so that the code is available and I will go to my localhost 4200 now so I'm in the browser and I can say there is nothing loaded that is probably because I don't have a route for the empty if I have a empty path in my URL then I simply want to show a login component which is like a default landing page so now I can see the button is available I provide this I will uh I will log in quickly uh once I uh login here it asks that you want to sign into this application as my username so this is a name that we provided in the our Google console because we created a project with this name and there it asks for the cancel confirm if I say confirm then my login is successful and now two things happened here behind the scene after I gave a consent from here once I acknowledge to con uh one side did a confirmation there on the pop-up it made a hit to my backend and uh in a backend you can see that I had the backend running which so uh it came to a slash API login on the 3000 port and once I have that it just comes to unlock the request body which was empty in this case which I received from the Google uh from the Google API then it redirected to a 4200 dashboard which is my angular page so that's why you can see that uh once a successful login happened it has locked it has navigated me to a dashboard page where I can see user login successfully message so once we have a login demonstrated I will simply add a few more fields in uh login page so that to make it more good looking by the way all the source code of this example is present on my GitHub or link to my source code you will find in the description of this video so I'll simply add a label of username and another for the password where I will simply want to accept a username and password and I want to show a simple login screen this is the ABR type for that I have created a class login form will simply add some CSS to that so that it will look good and uh with that I think it should show me a login form and on my dashboard page I have also just shown a user logged in successfully message so I'll go to UI and see how it looks I will go to a login and with a new to form field added it should look different there we go I think I uh so I can see I have a simple username and password and sign in with Google option if I click on it it still works so this was a simple example a demonstration example that how you can play around with a Google sign in and how you can Implement a sign in with a Google on any form in your angular application there are a lot of customization of course you can do if you go to a documentation of developers.google.com so that's all for this video I hope you find this video helpful thank you for watching [Music]

Channel: Brogrammers

Views: 11,793

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, passport js tutorial, sign in with google node js, google login in node js, angular tutorial in hindi, angular tutorial for beginners

Id: GEht4l4n4K8

Length: 15min 40sec (940 seconds)

Published: Tue May 30 2023