Keycloak-angular: Question

[Codinger386]

Hey there!

I got a question: I am working on a web app with Docker + Angular2 + Java Backend + Keycloak. The library works fine! But I cannot figure out how to do the following:

I have a landing page, that should be unprotected, like: mydomain.de/home. Every visiter should land there if not logged in. If logged in, users should instead be redirected to mydomain.de/main. By logging out, back to mydomain.de/home. So the most natural thing there is. But when I initialize the app with keycloak (like described), I always end up in the keycloak login.

I know how to use AuthGuards and Router redirects in Angular, but I feel stuck, as I am already trying for hours.

Please help if you can.

Best,
Benjamin

[mauriciovigolo]

Hello @CodeBenson,

Sure we can help! So this is probably related to the initOptions you passed in the keycloak initialization. If you followed the examples in the README.md, the initOptions.onLoad has a value === 'login-required'. This value in the keycloak-js library, redirects the user to the login page.

Look at the example below:

 await keycloak.init({
    config: {
      url: 'http://localhost:8080/auth',
      realm: 'your-realm',
      clientId: 'client-id'
    },
    initOptions: {
      onLoad: 'login-required', // redirects to the login page
      checkLoginIframe: false
    },
    bearerExcludedUrls: [
      '/assets',
      '/clients/public'
    ],
  });
  resolve();
} catch (error) {}

In your case, the problem is related to this configuration or with the auth guard.

From the keycloak javascript adapter documentation:

By default to authenticate you need to call the login function. However, there are two options available to make the adapter automatically authenticate. You can pass login-required or check-sso to the init function. login-required will authenticate the client if the user is logged-in to Keycloak or display the login page if not. check-sso will only authenticate the client if the user is already logged-in, if the user is not logged-in the browser will be redirected back to the application and remain unauthenticated.

Try to change this value and also take a look at your routes, if the landing page has an auth guard configured. If it has an auth guard (the landing page), try to remove it.

Thanks!

[mauriciovigolo]

@CodeBenson,

Will close this issue, since it seems to be ok. If you have any other doubts you can also use our slack at: keycloak-angular.slack.com .

See you there!

[Codinger386]

Yeah sure, sorry should have told you. It worked with setting 'login-required' to 'check-sso'. Thanks again! 👍

[SandyKnock]

Is it possible to use a string in this form?

const str = JSON.stringify(        {
          "realm": "test",
          "auth-server-url": "http://localhost:8080/auth",
          "ssl-required": "external",
          "resource": "test",
          "public-client": true,
          "confidential-port": 0
        });

await keycloak.init({
    config: str ,
    initOptions: {
      onLoad: 'login-required', // redirects to the login page
      checkLoginIframe: false
    },
    bearerExcludedUrls: [
      '/assets',
      '/clients/public'
    ],
  });
  resolve();
} catch (error) {}

I get an error "GET http://localhost:4200/%7B%22realm%22:%22test%22,%22auth-server-url%22:%22http://localhost:8080/auth%22,%22ssl-required%22:%22external%22,%22resource%22:%22test%22,%22public-client%22:true,%22confidential-port%22:0%7D 404 (Not Found)" and "ERROR An error happened during Keycloak initialization."

kind of like config allows : "config?: string | KeycloakConfig;"