Creating a Single-Sign-On Angular Application | OAuth2 and OIDC

#Angular #SingleSignOn #SSO
This video tutorial explains in detail, how to create a single-sign-on application in angular. Using OAuth2 and Open ID Connect (OIDC).

This application will be using the configuration from the following github repository. Credits to its creator!

This video explains how single-login in angular can be implemented with and without a login form/button.

#angular #singlesignon #oauth2 #oidc

Closed Captioning :
We will open a folder for keeping the project.
Now open a new terminal from
Terminal Menu , New Terminal.
Create an angular app 'sso-app' by typing the command
'ng new sso-app'
Press 'y' and hit 'Enter' to enable routing in angular.
Select 'CSS' as the stylesheet format and hit 'Enter'.
It will take some time to set up the new angular project.
Now the angular project is set up.
You can see the project structure in the 'Explore' section
of VS Code.
Let's install the oauth2 oidc package for angular.
For that, change the current working directory to project folder.
Type 'cd sso-app' in the terminal.
Now type 'npm install angular-oauth2-oidc --save' in the terminal.
Once the installation is completed, type 'ng serve --open'
to run the angular application.
On successful compilation, the application will open in the browser.
This is the default angular application template.
Let's change it.
Inside the 'app' folder of the angular application,
Open it.
Except the 'router-outlet' tag, delete everything else.
Because, angular routing happens in the 'router-outlet'.
Now we will add a 'div' tag with two buttons inside it.
One for Login and another for Logout.
Set click events.
So that, on clicking these buttons, we will call the login and logout functions.
Now, let's create an angular component 'home'.
which should be displayed on successful login.
For that, open a new terminal.
Change current working directory,
and type 'ng generate component home'.
You can see the component created under the app folder.
Now let's add URL routing for this component.
In the 'routes' variable, add path 'home'.
Set the component as 'HomeComponent'.
Also we will add default route path,
which takes care of all invalid URL paths.
We will redirect it to 'home' component.
For the angular application to work properly,
At the top of the file, import required items.
Add the 'HomeComponent' inside the 'declarations' array.
Now we need to create a configuration file for oauth2.
inside the app folder.
and inject the 'OAuthService'.
Create a function 'configureSingleSignOn',
for configuring 'oauthService' variable.
Inside the function, first we will call 'configure'.
Next, we will set a token validator.
For that built-in validator 'JwksValidationHandler' can be used.
Lastly, call the method 'loadDiscoveryDocumentAndTryLogin()'.
These methods must be invoked while the component is being created.
So, call the function 'configureSingleSignOn' inside the constructor.
Inside the 'login()' function, call the method 'initImplicitFlow()'.
And inside the 'logout()' function, call the method 'logout()'.
Open browser and click on 'login' button.
You can use the username as 'max',
And password as 'geheim'.
Now let's click on 'logout' button.
Now, we will display the home component,
only if the user logs in.
For that, we will create a get accessor function 'token'.
let's create a variable 'claims' for storing claims from the token,
using the function 'getIdentityClaims()'.
If the login was successful, we will return the claims,
else will return null.
Now call this get accessor function in the 'ngIf' of 'router-outlet'.
So that, the 'home' component is loaded only on successful login.
Now let's modify the 'home' component.
We will add some login success message here.
Also we can set the visibility of buttons based on the login status.
Just set the 'ngIf' for login and logout buttons, like this.
Sometimes we need the application to take us
to the login page automatically, without clicking any button.
First we will delete the login and logout buttons,
and it's associated functions.
All we have to do is,
replace the function call 'loadDiscoveryDocumentAndTryLogin()'
with function 'loadDiscoveryDocumentAndLogin()'.
We are redirected to the login page automatically.
without clicking any button.

[paulorobertobatistasousafi]

I've been looking for something like this for days, so far, the only one that made me understand. Thank you.

[stevekeith]

This is the best and quickuest demo and explanation. You saved my time, thank you Shaheer.

[s.y.stoyanov]

Great tutorial! Just a quick tip for latest versions of angular the JwksValidationHandler has been exported into its own package that you can isntall with "npm i angular-oauth2-oidc-jwks --save" and import into your application.

[AntonioRibeiro-qsfy]

Exactly what I needed...thank you so much

[nagendrakumar]

Its perfect, i was looking for something like this since long time, i will try it my self and will update you.

[masoodmunshie]

Nice video, wish all videos could be like this. easy to understand

[jagdeepshergill]

Thanks a lot. That was greatly helpful. Long live information age.

[bogdanbogdan]

hello, I have a question, what is the purpose of chaining the TryLogin() method after loading the discovery document? Thanks!

[vikaskyatannawar]

Where is the SSO shown though? This was just one application doing oauth login

[gabrielmayta]

Amazing explanation, I am currently working in a project where I need to use this library.

[megoo]

How did this work with get token()? Is the return type of token(0 method get ?!Is there no syntax error? Please explain

[salarkazazi]

Thank you so much, Very informative !

[Smathews]

How can we modify this application to connect to Azure AD?

[therealmanc]

Sir, i’m new for oauth2, so what is identity server? how can i redirect to own login page and try to login from there and redirect to (some url)

my application (click login)-> my login page ( type login password) -> after success redirect user to ( some url) for example google.com and in google get token

[Nirajkumar-msmo]

How can I get Url of the Identity Provider and client id. I mean I how can I register client?

[pawedugosz]

Great, I am waiting for another courses.

[pratikkapadia]

Good Tutorial, but there is one question... I am planning to implement Hybrid flow with webapi and login should be happen with angular UI but in this case angular application will not be client, so how can we manage this flow? can you please guide me?

[AmitSingh-xxoz]

Getting invalid issuer in discovery documents expected: error. Plz help.

[RGWorld]

Thanks a lot !!! It was a great tutorial.

[gprasad]

Good Explanation! Thank you for the details & OAuth2 usage. Have a question ... Once the single sign on happens, before going to the home screen, how to retrieve the information that is stored on the request headers ( any way to retrieve in angular)? Because the single sign-on we use, will post the information into the HTTP headers like user email, name etc, so can be used rest of the module.