How to secure some routes in angular

Hi all,

I installed keycloak package for angular and it works fine, but now I have two pages that do not need to be redirect to keycloak login page.

what i did i create two separate two modules (A and B ) module A has some components that need to be secure and the module B has two-component that do not need to be secure.

in module A, i added those line in provider part :

providers: [{

provide: AppAuthGuard,

useFactory: initializer,

deps: [KeycloakService]}]

}

whereas AppAuthGuard has canactivate method and initializer has init function for establishing a keycloak and KeycloakService is the built-in serivce in keycloak package.

and each components inside this module has canactivate to AppAuthGuard class.

for module B i did add anything related to keycloak.

and in app module i just import module A and B.

after applying those steps in angular and run the application now i can access the component in module B without redirect to keycloak.

but if access any components in module A (secured module) it always redirect to login page in keycloak but the issue here if enter the credentials and click sign in it always show a blank page and i did not find any error in inspect view in chrome .

please your help as i trying many solution but still the issue appears.

Contemporary applications use OpenID Connect for Authentication and OAuth 2.0 for Authorization.

This means that you can use one of the certified OpenID Connect (OIDC) implementations that provide OIDC and OAuth 2.0 protocal support for browser-based applications.

For example (OIDC Auth guard):

...

@Injectable({
  providedIn: 'root'
})
export class OidcAuthGuard implements CanActivate {

  constructor(private router: Router,
              private authService: AuthService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if (this.authService.isAuthenticated()) {
      return true;
    }

    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});

    return false;
  }

}

Ref:

thanks brother for your help but i do not understand how is auth service linked to keycloak service ?

anyway , i start a new angular project and i followed this setup : https://www.npmjs.com/package/keycloak-angular

in the last part they mention that i can execlude some routes using bearerExcludedUrls property like this :
try {

await keycloak.init({

config: {

  url: 'http://localhost:8080/auth',

  realm: 'your-realm',

  clientId: 'client-id'

},

initOptions: {

  onLoad: 'login-required',

  checkLoginIframe: false

},

enableBearerInterceptor: true,

bearerExcludedUrls: ['/assets']

});

resolve();

} catch (error) {}

but it seems like keycloak ignore this setting and whenever i visit asset page it always redirect to login page , any idea how to resolve this in order to access asset page without redirect to login page in keycloak ?

My recommendation is that you use one of the certified OpenID Connect (OIDC) implementations that provide OIDC and OAuth 2.0 protocal support for browser-based applications.

That way you can chose to use Keycloak or Okta or Auth0, etc.

1 Like