manfredsteyer / angular-oauth2-oidc

Support for OAuth 2 and OpenId Connect (OIDC) in Angular.
MIT License
1.9k stars 688 forks source link

Issuer is appended to URL after login redirect using keycloack. #1415

Open devl-up opened 5 months ago

devl-up commented 5 months ago

Hello.

After logging in and getting redirected to my app, the issuer URL is appended to my URL

image

This is my setup

bootstrapping the service

const authConfig: AuthConfig = {
  issuer: 'https://localhost:8443/realms/poc-dev-realm',
  redirectUri: window.location.origin,
  clientId: 'poc-dev-client',
  responseType: 'code',
  scope: 'openid profile email offline_access',
  oidc: true,
};

const initializeAuthentication = (oauthService: OAuthService) => () => {
  oauthService.configure(authConfig);
  oauthService.setStorage(sessionStorage);
  return oauthService.loadDiscoveryDocumentAndTryLogin();
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    provideOAuthClient(),
    {
      provide: APP_INITIALIZER,
      useFactory: initializeAuthentication,
      multi: true,
      deps: [OAuthService]
    }
  ]
};

And just to test, i have a login/logout button in my root component

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <h1>Hello, {{email?? "Stranger"}}!</h1>
    <button (click)="login()">Login</button>
    <button (click)="logout()">Logout</button>
    <router-outlet></router-outlet>
  `,
  styles: [],
})
export class AppComponent {
  private readonly oauthService = inject(OAuthService);

  public get email() {
    const claims = this.oauthService.getIdentityClaims();
    if (!claims) return null;
    return claims["email"];
  }

  public login() {
    this.oauthService.initLoginFlow();
  }

  public logout() {
    this.oauthService.logOut();
  }
}

I checked my Keycloak terminal logs and don't see it anywhere there

response_type="code", redirect_uri="http://localhost:4200", redirected_to_client="true", response_mode="query"

As for my Keycloak client settings, pretty standard too.

image

Thanks a lot !

aaronclawrence commented 2 months ago

This is not actually appended, its a modified form of the callback with most of the query string stripped out, which the library replaces for "security" reasons (?). See the setting /**