Search code examples
angularkeycloak

Keycloak: Receiving a "Invalid parameter: redirect_uri" when reloading the page manually

It's an Angular 17 SPA Application. And it's using the currently most recent version of keycloak-angular (at time of writing 15.2.1) It's something that I simply do not understand. In the default setup, I can authenticate just fine and logout. But if I dare reload the page, the entire page bricks and on inspection I noticed I receive a 400 Bad Request error. "Invalid parameter: redirect_uri" it says. But why?

My configuration looks for the most part the same as the example from the project, so I do not understand what the issue could be.

enter image description here

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'https://local.dev.auth/',
        realm: 'my-test',
        clientId: 'my-app'
      },
      initOptions: {
        flow: 'standard',
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + 'ui/assets/silent-check-sso.html'
      }
    });
}

For my testing purposes, I even kept the locally running docker instance of keycloak dirt simple

enter image description here

Solution

  • You need to define the client details correctly both in the Keycloak client and in the angular app. For my app redirect uri is kept as / then it gets redirected by my routing startegy, you'll have to update as per your strategy You should define in this format enter image description here

    and for the silentCheckSsoRedirectUri I've used the Identity providers RedirectURI which you can get from

    (Sidenav)Identity Providers->"your provider"->Redirect URI

    Also for Keycloak Init you'll have to use valid_redirect_url which as per my config is http://localhost:4200/

    initOptions: {
        flow: 'standard',
        onLoad: 'check-sso',
        redirectUri: valid_redirect_url,
        silentCheckSsoRedirectUri: valid_sso_redirect_url
      }