Build Angular Google OAuth2 Login Using the angular-oauth2-oidc Library in Browser Using TypeScript

uh hello guys welcome to this video so in this video we will be looking at how to integrate Google authentication

Google login inside angular application so this is actually the demo of the

application we will be building right here if you open the homepage it will look something like this Google or or2

it will show you the login page login with Google and if you just click this button you will be redirected to the

consent screen where you can actually select your Google account so just select a Google account and it will need

to Grant permission you simply click on continue and then it will actually show you the actual details of your account

which is actually the profile picture display name email address and a log out button as well so we are developing it

in the latest version of angular which is I think 17 or 18 so this is actually the directory structure we have a login

component and we have this routing also done right here it is developed inside

typescript you can see that we also have a log out button if you click the log out button you will be redirected to the

homepage you will see that very simple so now you will stay on the login page because you are love out once again if

you do it the same process it will repeat this time it will automatically

do it for you as it already know that you are already uh granted the access so

no longer you need to repeat the process so it will show you this profile picture

this is the display name this is the email address like this you can do it for any Google account let's suppose I

do for a different account so by default the angular applications runs on uh

Local Host 4200 Port number you will see that so again we have this login you

just click this so you will see that

it is actually showing this all this information so we are actually getting this access

token we from the Google Au API to actually get the profile details of the

user I will show you step by step process how I implemented this and we are actually using a special package

which is uh specifically designed for angular applications which is angular O2

oidc so if you search this package on npmjs

it's a very popular package so the name of the package is

angular o or2 oidc this is the name of the package the

very first link which comes right here this is

the command to actually install this open ID certified you will see that so

it's supports various social networks specifically in this example we will be looking at Google how to integrate

Google Google login inside angular so 166,000 weekly downloads are there so

and we will at the time of recording the video we will be using the latest version of

angular so it is out think angular 16 is a stable version and angular 18 is also

is released so it will be compatible with all the versions of angular so this will be the directory structure if you

want to purchase the full source code with full documentation the link is given in the description you can go to

my website Pro Cod store.com and you can directly purchase it you will be redirected to Google Drive after you

make the payment and where you can actually get the zip file which will actually contain all this directory structure with full documentation and if

you face any sort of issues I will also help you so the link is given you can directly purchase it so now let's get

started by building this application so what I will do I will stop this development server and I will simply go

to my project directory right here so YT projects so I will simply create a new

project of angular which is NG new command so I will simply say Google o or

to Google angular project so this is the command

NG new NG as you all know it's a CLI tool for angular for creating projects

this is the name of the project enter it and it will ask you some questions

regarding if you want to use CSS or SAS or would you like to add angular routing

so we need to add angular routing so I will simply say yes and we will be using

the CSS so just press enter CSS so it will just in 1 minute it will take and

it will actually create your angular project it is installing all the packages and dependencies so once it's

installed I will be back and we will be continue from there so now you can see that guys it

has created the project I just need to navigate to the project

directory so I think it is named as Google angular

project so I just need to open it inside vs code so it will actually open this

will be the directory structure of a basic angular app right here we have the app folder we have the routing folder

which will actually have routes here app. module. TS file we will have

right here where you can actually add third party modules that we have installed so first of all we just need

to install a third party module that I showed you earlier which will help us to

integrate the O2 Google login so angular D

O2 oidc this is actually the module that we need to install package angular D O2

oidc simply enter it and install this package so it has pre-made methods for

integrating the Google login so once it is installed you just need to see the

package.json file it has installed this package if you see angular O2 oidc the

latest version which is 17.0.2 now you just need to navigate to this file which is app. module. TS file

so here in this file you just need to register this module so in angular you

need to register modules in this file app. module. TS file so first of all we

just need to import the HTTP module as well HTTP

client module because we will be making request as well to the Google API so

that's why we need this HTTP module HTTP client module so this is available in

the built-in HT angular framework so in the HTTP module so also we need to

import this uh o module from this package that we

installed so now we just need to add both this in the Imports array HTTP

client module and the O module for root simply add these lines in the Imports

array and that's all we have successfully registered both these modules in the angular app now you can

close this file and uh now we just need to create a brand new file in our app

directory O.C config dots you can just call this name anything but I will be

calling this one .c config dods so inside this

file you will be writing the configuration code so there will be just this object all config so here you will

be providing all this client ID details redirect URI everything export

con so this is typescript supert of

JavaScript so here you need to provide uh issuer name which will be

constant https accounts.

google.com put a comma and then we need to provide the redirect URI which will

be window. location. origin which is essentially the homepage

of the URL which is Local Host 4200 and then we need to provide this client ID

which will be coming we need to get this client ID from Google Cloud console so I will show you how you can get

this and then there is a second uh this option which is strict

Discovery document validation and this you need to set it

to a Boolean parameter which is false and scope so what s what sort of information you are requesting so here

you need to provide multiple Scopes open ID space profile of the user and the email of the user so we will be

requesting three information basic Scopes so here you need to put a

semicolon so it is saying to us that cannot find name so here you need to add the import

right here so now it will be finding this Au config it is available from this package that

we installed right here so it is using this method on Au config and it is

creating this object which is passing five properties issue redirect URI client ID and the scope information as

well so we need to strict Discovery document validation as well so now we just need to go to

the Google Cloud console and just type here on Google Google Cloud

console and you should have a basic account right here go to your console

account and just create some basic information which is the API

services and here you need to go to credentials and right here you just need

to click on create credentials or or client ID and select your application

typ type web application authorize redirect URI and here you need to paste

your homepage URL in both the fields HTTP Local Host 4200 if you see in the

authorized redirect URI as well the same URL HTTP Local Host

4200 and then click on Create and it will give you your own client ID so don't copy my client ID you don't need

the client secret simply paste the client ID

here that's all so we have pasted the client ID now we can also close this file as well so

after this we just need to create a basic component for our login button so we can go to the command line and there

is a command which is available NG command NG generate generate component

so this is actually a shorthand command NG G for Generate C for component and then we need to create components folder

and inside this we will create a login component so you will basically see in the app component in the app directory

there will be this directory created components directory and it will actually create this login component

directly it will have some boilerplate code automatically created by this command so you will see it will create

this components folder and we have these four files created this is your typescript CSS comp for your component

file this is the HTML this is the typescript you can see that so this is

automatically created and one more thing we need to create we need to also create a service file as well so this is also

required so you can just see NG generate service short end and then we need to

create a Services folder and inside this we need to create the O service so you can give any name of your choice this is

important NG generate service Services folder it will create an inside this it will create the O folder so you will see

that so this service has also been created au service.ts so this is automatically generated by

angular CLI now we just need to go to angular app routing folder right here

and here you need to specify the route inside your application so we will be specifying the Home Route and it will be

handled by the login component so we can import the login component from the component folder it will automatically

import it for me which is vs code so we have specified the homepage URL so it's

a single page app and we have specified this route R in the routing file and now

in the next section guys we will be writing the login component inside this uh typescript file so I will be seeing

you in the next section so now guys in this section we will be writing our service file that we created in the

earlier step this is located in the services folder Au service dots so

specifically in angular services are typically the code which will actually interact with the outside world such as

the apis or if you have any sort of third party object that you want to

interact with so this service will interacted and you will see that it has

a name right here all service and uh now we just need to import that module that

we installed here which is o right

here so it will be automatically imported from this package angular O2

oidc and also we need to import this file or config that we

written earlier on which is so it will also be imported from

automatically do do slash so it is present in the root directory file which is all configs so we just need to

require this file also in this service and also we just need to import

the HTTP client as well because we will be making uh rest API request to the

Google API so that's why we also need this so it will be again be imported

from angular SL common SL

HTTP so after you do this you just need to inside your Constructor here we will

be passing pass ing all these

values so this is required we just need to pass everything in the Constructor

because if you don't pass it these methods will not be available to the service so Constructor is the place

where you need to pass them so you're passing both the Au

service and the HTTP object to these Constructors so inside this Constructor

we just need to write a line right here this do we need to call a method this do

configure so now we just just need to Define this method that's why it is saying this red color right here so it

is saying that it is not defined this method doesn't exist we just need to Define this privately so private config

configure and here you need to add uh or call this configure method that

you defined inside so this is part of the package right here so here if you

see it is this service is coming from the base package and it contains this configure method and here we need to

pass the O config that we defined early on so this whole object that we defined

which contains five properties right here we are directly passing to this function which is

configure and secondly we also need to call this method load Discovery

document and try login and here we just just need to call this method so what this method will do

it will using these authentication options that you pass in the previous step it will try to open or it will try

to communicate with Google and it will go to that uh consent URL where you

will actually select your Google account so after doing

this now we just need to define the login method and the log out

method as well so we are just writing the service right here we are just defining these methods so in the HTML we

will be calling these methods so for logging it there is a this uh built-in function which is

available in it login flow so when you call this it will actually do all the

heavy lifting it will communicate to Google it will open that URL so you just need to call this

function one line of code and similarly for the log out functionality as

well we will have this log out function and right here there is a built-in

function inside this package which is log out Simply you need

to call this that's

all and two more three more methods we have to write here which is getter

methods in order to get information first one is uh get identity claims

so this function will be responsible for getting the user information once you are authenticated so it will return this

information get identity claims again this is a built-in

function so it will return user information such as display name email address and profile picture and once

again we have another function for getting the access token so

again this Library contains a pre-built function available to get the access token get access

token and lastly we will also have a function which will

be user profile so here in this function from

the name itself we will be getting the user profile directly by going to this URL

https wwwg googleapis.com /2 /v to user info so it will make a

simple HTTP request to this URL by using the HTTP client module so

we'll say this. HTT doget we will pass the URL as a first argument and in the

second argument we'll pass an object and here we'll pass a headers object

authorization so this is actually the format that you see

beor and Then followed by your access token so this. access

token so we are actually calling this method right here this do access token this will return the access token and we

will pass it to actually get the profile information of the

user so that's all that we need to do inside the service guys so this is now

ready so this will interact with the Google so now we just need to write our

login component right here which is located in the components folder so we will be looking it in the next

section so now guys we will be writing this login component right here which is

located in the components folder if you see right here if you run the application right here just run your

application you will just see the we need to run it by using NG Ser

this is the command in angular this will start your development server at Local Host 4200 by default you will actually

see this file app. component. HTML if you try

to see the so by default

angular just search for this file which is app. component. HTML this is a

starting point so it has a pre-built boilerplate

template right here ready for us so we just need to edit this file and just

include the login component that we created so it is just compiling the

application so just

wait so it as you can see it is compiled this and it is listening on Local Host 4200 if I just refresh you will see this

homepage of angular so if I make any sort of change inside

this file if I just write here H1

tag so you will see that so it will reflect the changes now what we need to do right here uh we need to show this

login component so if you see it has a tag right here which is this is a

selector app login so we will use this selector in this to actually include

this so what we can do right here we have this custom selector app

login that's all we will include this like this and now you can see this login works it is saying to

us so now we can close this file and addit directly our login component so

for using the UI guys styling the UI we are actually using Tailwind

CSS CDM so simply go to this website and include the

CDM copy the script tag and uh paste

it so just go to the index. HTML file and write here paste

it and now you can go to your uh this file right

here so we'll be having the container MX Autos these are all Tailwind

classes so we'll have a simple heading which will Google or or to login

[Music] example if you just refresh now there you will be

this we'll see that this heading is showing to us so here we will have a conditional so

we have NG if star NG if we can use it based upon a condition so we will be

having is logged in so we need to Define it in the component type script is

logged in so it will return return either true or false depending upon whether the user is logged in or not so

if the user is logged in we will be showing the information of the user such

as profile picture the name and the email address

so you just need to define or actually go to the typescript file and here we

need to define a property so just write here so first of all you will Define the user profile variable which is of type

any and then we will have a simple Constructor and here we'll be passing the Au

service which is of the type Au service so this all service that we defined in

the services folder will get imported automatically in this uh component and uh just have empty

Constructor and we will be having this NG on in it which is a life cycle method

for every angular component this executes at the starting of every component and here we will make

basically have this this. service. identity claims so this function we have

different find in the service identity claims so if the user is authenticated

then in that case we will get the user profile and you will simply subscribe to

the profile information you will say this do user profile is equal to profile so now this

user profile will be equal to the profile if the user is authenticated so this will run every time when the use uh

component is mounted or opened by the user in the browser

now we just need to Define that method is logged

in so this will return this uh dot not

not sign this will uh just return a Boolean parameter so this will interact

with the service and we have actually have a function right here which is identity claims so again I told you this

returns a Boolean parameter whether the user is logged in or not so if you now

open you will actually

see so here you will be showing the user information if the user is logged in if

the user is not logged in in that case this MGF will

be not symbol so this simply means that the user is not logged in so the value

is false so in that that case you'll be showing a login button to the user login with

Google so you'll be giving a Tailwind classes PG blue 500

hover so text will be white

py 2 PX4 and it will be rounded so if you

just open the browser what will it will

show so nothing it is showing right here let me see is logged in is

uh NG if

this is a

d uh let me paste the code right here just to saved some time the full source

code is given guys in the description you can directly purchase it so it is saying that all these methods are not

defined so what I will do delete this

so now you can see that the user is logged in that's why it is showing the log out

button

so if I take another example let suppose if I go to a different

account again it is logged in so now the user is logged in we can simply show the

profile information so the profile information which which will be simply

be present

inside first of all we can show the profile picture like this user

profile do picture so if you see this object we have defined user profile is

coming from the service you will see it's a object which contains three properties the

picture email address and the display name so you'll be first of all be displaying the profile

picture then we will be displaying the

display name so user profile.

name so here you'll be defining the email

address so you will see that now all this information is displaying right here the user is logged

in so we also need to bind a onclick listener

to this log out button as well so just have a on click so that when we click

this we will be log out and simply here also when we

click this button we need to executing the function which is

login so this is Click sorry in angular we do like this

so now we just need to Define these functions in the typescript file so right here it is just showing

error so this is one line of code so for

login log out and for doing this we already have

made methods in the service so we can simply call the service method

login and this do Au service

log out so this completes the application guys if you now test it if you click the

log out button you will be redirected to the homepage you will stay right here because you're log out if you click once

again you will be redirected to the home screen where you can select your account consent screen you just need to allow

the permission after that uh you will actually see your profile information you can just do it for any account let's

suppose I do this for this

account so it will exchange access token and it then it will show you

the this is a display name this is the email

address for this account I don't have a profile picture so it is not showing here so if you click log out you will be

redirected to the homepage once again if you do it the same process will repeat and uh this time it will automatically

log you in so in this way guys you can Implement

Google or login inside your angular application so it is compatible with all

the latest version uh for the full source code if you want the link is given with full documentation and

support you you can directly purchase it after if you face any issues you can contact me at my email address as well

so you can purchase it from procore.com please hit that like button subscribe the channel and I will be seeing you in

the next video