{"id":54119,"date":"2020-09-22T08:00:36","date_gmt":"2020-09-22T06:00:36","guid":{"rendered":"https:\/\/code-maze.com\/?p=54119"},"modified":"2021-12-27T13:40:53","modified_gmt":"2021-12-27T12:40:53","slug":"angular-authentication-actions-with-identityserver4","status":"publish","type":"post","link":"https:\/\/code-maze.com\/angular-authentication-actions-with-identityserver4\/","title":{"rendered":"Angular Authentication Actions with IdentityServer4"},"content":{"rendered":"

In the previous article<\/a>, we have learned how to integrate an Angular application with IdentityServer4 and how to allow communication between these two projects. The configuration is prepared on both sides and as soon as we click the Login button, we get directed to the Login screen on the IDP level. But when we enter valid credentials, we get redirected to the Angular application on the Not Found (404) page. That\u2019s because we didn\u2019t finish the implementation of the Angular authentication actions. So, in this one, we are going to finish the Angular authentication implementation with the Login and Logout actions.<\/p>\n

That said, we strongly recommend reading the previous article<\/a> to keep track of all the things we implemented up until now.<\/p>\n

Additionally, if you want to read the entire IdentityServer4, OAuth2, and OIDC series<\/a>, feel free to do that and learn a lot more about the application security in ASP.NET Core.<\/p>\n

To download the source code for this article, you can visit the Angular Authentication with IdentityServer4<\/a> repository.<\/div>\n

So, let’s start.<\/p>\n

Completing the Login Functionality in the Angular Authentication Process<\/h2>\n

If you inspect our work so far, you will find the code in the AuthService<\/code> class and some modifications in the app.component.ts<\/code> file to check for the authenticated user. This code provides the functionality to navigate to the IDP server and once we enter credentials, to navigate back to the Angular application. But as soon as we navigate back to the Angular application, we need to complete the signin process because we don\u2019t want to navigate the user to the Not Found page. To do that, we have to process the response from the \/authorization<\/code> endpoint and populate the user object with the id and access tokens.<\/p>\n

That said, let\u2019s add a new function in the AuthService<\/code> class:<\/p>\n

public finishLogin = (): Promise<User> => {\r\n  return this._userManager.signinRedirectCallback()\r\n  .then(user => {\r\n    this._user = user;\r\n    this._loginChangedSubject.next(this.checkUser(user));\r\n    return user;\r\n  })\r\n}\r\n<\/pre><\/p>\n
In this function, we call the signinRedirectCallback<\/code> function that processes the response from the \/authorization<\/code> endpoint and returns a promise. From that promise, we extract the user object and populate the _user<\/code> property. Additionally, we call the next<\/code> function from the observable to inform any subscribed component about the Angular authentication state change, and finally, return that user.<\/p>\n
Adding Signin-Redirect-Callback Component<\/h3>\n
Now, we have to create the signin component, use this function, and react to the redirect action from the IDP server:<\/p>\n
ng g c signin-redirect-callback --skipTests<\/pre>\n
We can remove the HTML and CSS files because we don\u2019t need them, and modify the .ts<\/code> file:<\/p>\n
import { Component, OnInit } from '@angular\/core';\r\nimport { AuthService } from '..\/shared\/services\/auth.service';\r\nimport { Router } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-signin-redirect-callback',\r\n  template: `<div><\/div>`\r\n})\r\nexport class SigninRedirectCallbackComponent implements OnInit {\r\n\r\n  constructor(private _authService: AuthService, private _router: Router) { }\r\n\r\n  ngOnInit(): void {\r\n    this._authService.finishLogin()\r\n    .then(_ => {\r\n      this._router.navigate(['\/'], { replaceUrl: true });\r\n    })\r\n  }\r\n}\r\n<\/pre><\/p>\n
As you can see, we only have an empty div element for the template part and that\u2019s the reason why we removed the HTML file. Additionally, in the ngOnInit<\/code> function, we call the finishLogin<\/code> function from the AuthService<\/code> and just navigate the user to the home page. We set the replaceUrl<\/code> property to true because we want to remove this component from the navigation stack.<\/p>\n
After that, we have to add the route to this component in the app.module.ts<\/code> file:<\/p>\n
RouterModule.forRoot([\r\n  { path: 'home', component: HomeComponent },\r\n  { path: 'company', loadChildren: () => import('.\/company\/company.module').then(m => m.CompanyModule) },\r\n  { path: 'signin-callback', component: SigninRedirectCallbackComponent },\r\n  { path: '404', component : NotFoundComponent},\r\n  { path: '', redirectTo: '\/home', pathMatch: 'full' },\r\n  { path: '**', redirectTo: '\/404', pathMatch: 'full'}\r\n])\r\n<\/pre><\/p>\n
The value of the path property must match the value we assigned to the redirect_uri<\/code> property of the UserManager<\/code> settings in the AuthService<\/code> class.<\/p>\n
Now, we can test this.<\/p>\n