Logging in when starting the application, keycloak-angular 19

[Rezorl]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search for issues before submitting
- [ ] feature request

Versions.

"keycloak-angular": "19.0.1",
"keycloak-js": "25.0.5",
"@angular/core": "19.0.3",

Repro steps.

const isAccessAllowed = async (route: ActivatedRouteSnapshot, __: RouterStateSnapshot, authData: AuthGuardData): Promise<boolean | UrlTree> => {
  const { authenticated, grantedRoles } = authData;

  console.log(authData.keycloak.authenticated); //always false
  console.log(authenticated); //always false

   if (!authenticated) {
    const keycloak = inject(Keycloak);
    return await keycloak.login().then(() => true);
  }

  const requiredRole = route.data['role'];
  if (!requiredRole) {
    return false;
  }

  const hasRequiredRole = (role: string): boolean =>
    Object.values(grantedRoles.resourceRoles).some((roles) => roles.includes(role));

  if (authenticated && hasRequiredRole(requiredRole)) {
    return true;
  }

  return Promise.resolve(false);
}

export const keycloakAppGuard = createAuthGuard<CanActivateFn>(isAccessAllowed);




export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [keycloakAppGuard],
    data: { role: 'read-app' }
  },
];




provideKeycloak({
  config: {
    clientId: 'test-client',
    realm: 'TestApp',
    url: 'http://localhost:8888',
  },
  initOptions: {
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri:
      window.location.origin + '/assets/silent-check-sso.html'
  }
})

The log given by the failure.

Desired functionality.

When starting the application, I want to check whether the user is logged in:

If so, it enters the application.

If not, it is redirected to the login page.

  console.log(authData.keycloak.authenticated); //always false
  console.log(authenticated); //always false

Even after logging in to the keycloak website and being redirected to the application

[mauriciovigolo]

Hi @Rezorl,

In the new version of the library, there has been a shift from using KeycloakService to directly utilizing the Keycloak client instance. This could be a side effect of accessing the value before having the response from the Keycloak server instance, after the login.

To handle this scenario effectively, I recommend using Angular Signals. Signals provide a reactive approach to managing state and can ensure that you only access the authenticated value after the Keycloak server has responded, post-login.

Here’s an example of how you can use Angular Signals for this purpose:

For example:

import { Component, effect, inject } from '@angular/core';
import Keycloak from 'keycloak-js';
import {
  KEYCLOAK_EVENT_SIGNAL,
  KeycloakEventType,
  typeEventArgs,
  ReadyArgs
} from 'keycloak-angular';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent {
  authenticated = false;
  private readonly keycloakSignal = inject(KEYCLOAK_EVENT_SIGNAL);

  constructor() {
    effect(() => {
      const keycloakEvent = this.keycloakSignal();

      this.keycloakStatus = keycloakEvent.type;

      if (keycloakEvent.type === KeycloakEventType.Ready) {
        this.authenticated = typeEventArgs<ReadyArgs>(keycloakEvent.args);
      }
    });
  }
}

[Rezorl]

Hi @mauriciovigolo

const isAccessAllowed = async (route: ActivatedRouteSnapshot, __: RouterStateSnapshot, authData: AuthGuardData): Promise<boolean | UrlTree> => {
  const keycloak = inject(Keycloak);

  const keycloakEventSignal = inject(KEYCLOAK_EVENT_SIGNAL);

  return firstValueFrom(
    toObservable(keycloakEventSignal).pipe(
      filter(evt => evt.type === KeycloakEventType.Ready),
      map(evt => typeEventArgs<ReadyArgs>(evt.args)),
      mergeMap(authenticated => {
        if (!authenticated) {
          return keycloak.login().then(() => false);
        }

        const requiredRole = route.data['role'];
        if (!requiredRole) {
          return of(false);
        }

        const hasRequiredRole = (role: string): boolean =>
          Object.values(keycloak.realmAccess?.roles || []).some((roles) => roles.includes(role));

        if (authenticated && hasRequiredRole(requiredRole)) {
          return of(true);
        }

        return of(false);
      })
    )
  );
};

export const keycloakAppGuard = createAuthGuard<CanActivateFn>(isAccessAllowed);

Thanks for the quick answer, the above piece of code made the application work properly, thanks

[RobSlgm]

Hi @Rezorl, very interesting. I'm getting the same result in a component as you mention in the original issue (.authenticated is always false). Seems we need to use the signals approach.

But with createAuthGuard I get the authenticated flag from the AuthGuardData and this authenticated is properly set to false or true.

There is even a third parameter in the AuthGuardData which I believe to be the Keycloak instance itself (so propably no inject(Keycloak) needed?).

[mauriciovigolo]

@RobSlgm, if you're using the AuthGuard, the Keycloak instance is indeed included in the parameters list. However, the Angular Signal still needs to be explicitly injected because it is not part of the AuthGuardData object.

I will close this issue. Thanks!

[Rezorl]

for me, authData always has authenticated false and grantedRoles are empty, I don't know why

[Rezorl]

RouteProvider: provideRouter(ROUTES, withPreloading(PreloadAllModules)),

[dsubelman]

I’m experiencing the same issue. Upon signing in, the authenticated property is set to false, and the grantedRoles array is empty. However, if I navigate back from the “forbidden” page, the authenticated becomes true, and the grantedRoles is populated.

When using @Rezorl’s approach, the authenticated property is set to true upon signing in, but the grantedRoles array remains empty.