keycloak-angular: Infinite Loop with url params after redirection from keycloak server

For me, it was solved by setting initialNavigation to “enabledNonBlocking” in the parameters of the router module (it was set to “enabledBlocking”).

 RouterModule.forRoot(appRoutes, {
      initialNavigation: 'enabledNonBlocking',
      preloadingStrategy: PreloadAllModules
    })

The only problem is that “enabledBlocking” is required for the server side rendering to work

I had this issue too. We later found out that the reason behind it was incorrectly set up keycloak. Add * in weborigins of your realm settings. It solves this issue.

I hope that this works for you too. If not try the solutions above.

Ok. This here works without the infinite Redirect. BUT, it does not work when navigating into the page via angular router. only on direct access via url. It tells me, that the service does not wait for the onReady event before returning authenticated for the first time.

import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  Router,
  RouterStateSnapshot
} from '@angular/router';
import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard extends KeycloakAuthGuard {

  didRetry = false;

  constructor(
    protected readonly router: Router,
    protected readonly keycloak: KeycloakService
  ) {
    super(router, keycloak);
  }

  public async isAccessAllowed(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ) {

    const keycloakInstance = this.keycloak.getKeycloakInstance();

    return new Promise<boolean>(resolve => {
      keycloakInstance.onReady = async (authenticated) => {
        if (!authenticated) {
          await this.keycloak.login({
            redirectUri: window.location.origin + state.url
          });
          resolve(false);
          return;
        }

        // Get the roles required from the route.
        const requiredRoles = route.data.roles as string[];

        // Allow the user to to proceed if no additional roles are required to access the route.
        // noinspection SuspiciousTypeOfGuard
        if (!(requiredRoles instanceof Array) || requiredRoles.length === 0) {
          resolve(true);
          return;
        }

        // Allow the user to proceed if all the required roles are present.
        resolve(requiredRoles.every((role) => this.roles.includes(role)));
      };
    });

  }
}

@twopelu I can confirm that it is some race condition. It is quite simple to prove.

1. Use the guard from the example and let in run into the issue
2. Stop the browser reloading (X)
3. Modify your guard like shown below
4. Access the protected route directly by entering the url

You will see that isLoggedIn() returns false first. After the 1 second delay it becomes true. This should be solvable.

But anyway, the guard should return false in case of not authenticated user.

if (!this.authenticated) {
      this.keycloak.isLoggedIn().then(a => console.warn({a}))
      setTimeout(() => {
        this.keycloak.isLoggedIn().then(b => console.warn({b}))
      }, 1000);
      // await this.keycloak.login({
      //   redirectUri: window.location.origin + state.url,
      // });
      return Promise.resolve(false);
    }