Keycloak not securing angular and not showing login page

Securing applications
1

Hello everyone,

I am trying to secure my existing angular application which is not secured by any means.
So when ever I enter hostname for exmple in local, http://localhost:4200 it shows all pages as I defined.

I am trying to add security by keycloak, so I am following the keycloak-angular - npm and I tried other tutorials as well. It is not showing login page. When I enter localhost 4200 it should show keycloak login page but not doing it. I have created new realm, client and user in my keycloak instance. I have very good experience with keycloak as I have been securing spring boot apps when keycloak version was 4.

image
image1300×946 52.2 KB

Code snippets that I have added for securing my app:

  1. initializer in appmodule.ts
export function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://192.168.49.2:31316/auth',
        realm: 'dev-realm',
        clientId: 'my-ui',
      },
      initOptions: {
        onLoad: 'check-sso',
        checkLoginIframe: false
      },
    });
}

I did create realm dev-realm and client named my-ui.

  1. Providers in app
providers: [
    UIService,
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      multi: true,
      deps: [ConfigAssetLoaderService]
    },
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService],
    },
    AuthGuard,
    AuthService
  ],
  1. AuthGaurd and AuthService as they showed in the examples.

And also added canActivate in routing as well.

  1. package.json
"dependencies": {
    "@angular/animations": "^12.2.13",
    "@angular/cdk": "^12.2.12",
    "@angular/common": "~12.2.13",
    "@angular/compiler": "~12.2.13",
    "@angular/core": "~12.2.13",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "~12.2.13",
    "@angular/material": "^12.2.12",
    "@angular/material-moment-adapter": "^12.2.12",
    "@angular/platform-browser": "~12.2.13",
    "@angular/platform-browser-dynamic": "~12.2.13",
    "@angular/router": "~12.2.13",
    "file-saver": "^2.0.5",
    "keycloak-angular": "^8.4.0",
    "keycloak-js": "^15.0.2",
    "moment": "^2.29.1",
    "ngx-currency": "^2.5.3",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.4"
  },

Everything looks right, but its not showing login page instead its routing to my app directly.
Can you please help me here.

If I give wrong URL of keycloak like adding extra slash in inititalizer then I am getting error page page not found. So it is checking with keycloak but not showing login page.

Thanks in advance

2

You’ve set onLoad: 'check-sso' in your Keycloak config. This only checks if a user is authenticated or not, but doesn’t force user to authenticate. If you only want to have authenticated users throughout your complete application, then set onLoad: 'login-required'.

2 Likes
3

Thanks so much Niko, not sure how I missed that part.