How to redirect angular app from keycloak login to specific routes

Question

I am writing an Angular 8 app that uses Keycloak 7.0.0 for user authentication and authorization.

Current workflow specifies:

1. A user accesses the web site which is written in Angular
2. The user gets redirected to Keycloak server for a specific realm login
3. After a successful login the user will be redirected to one of several (Angular) routes - depending upon the user's role defined in Keycloak (however, the redirect route is being determined inside an angular component which gets user role and redirects). So, after login Keycloak redirects to empty route and the component sets redirect route.

The issue is that after a successful login, if a user were to open another tab and enter a URL with route being specified, Keycloak would find a token and cookie for current session and not authenticate the user, but would still redirect him to the empty route. After that, the feature that redirects to routes depending on user role, would redirect to the default route for the user's role.

I am interested how to enable Keycloak to, after validating login, redirect to the initial route it received, and not just the empty route?

I hope, no code would be needed because the code is in a private repository. I am using keycloak-angular and keycloak-js npm modules. Also, I have defined the keycloak.servise.ts that has access to the user's token and specifies that the login is required.

P.S. I am not using the authguard to implement protected routes, but Keycloak redirects to the empty route and then, depending on user's roles, the component in the empty role redirects to the default one and locks those components that are not permitted.

Answer 1

Provide KeycloakLoginOptions in the Login method of KeycloakService.

e.g.

keycloakLoginOptions: KeycloakLoginOptions = {
    redirectUri: 'http://localhost:4200/dashboard'
  }

and then call this:

this.keycloakService.login(this.keycloakLoginOptions);