Angular-oauth2-oidc: Authorization Code with PKCE Flow with keycloak 7.0 is failing

[phrouv]

The id_token validation is failing with the error :

TypeError: Cannot read property 'replace' of undefined
    at JwksValidationHandler.<anonymous> (validation-handler.ts:53)
    at step (null-validation-handler.ts:14)
    at Object.next (null-validation-handler.ts:14)
    at fulfilled (null-validation-handler.ts:14)
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:24349)
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:910
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

The id_token sent back by Keycloak is :

{
  "jti": "978dabf2-16e7-4b38-8828-c4c0a71df313",
  "exp": 1568364182,
  "nbf": 0,
  "iat": 1568363882,
  "iss": "http://localhost:8180/auth/realms/test",
  "aud": "test-client",
  "sub": "7a9f8ed9-db07-429a-958b-6624606448f9",
  "typ": "ID",
  "azp": "test-client",
  "nonce": "lwccfU506IhjrL8zuGPT3LTFGWxoLa0X7Z2ZcqMVWcLKw",
  "auth_time": 1568363880,
  "session_state": "0f8c8ae0-057d-4bb7-840b-1bf5eb8c72b5",
  "acr": "1",
  "email_verified": false,
  "name": "Philippe Rouvray",
  "preferred_username": "phrouv",
  "given_name": "Philippe",
  "family_name": "Rouvray",
  "email": "[email protected]"
}

In contrast, here is the id_token sent back by Identity Server of the original source code (https://demo.identityserver.io) :

{
"nbf": 1568365232,
"exp": 1568365532,
"iss": "https://demo.identityserver.io",
"aud": "spa",
"nonce": "-asTKhO30AhnXMn4MIZIk1Y3lK0QVHfyslEDmUI8WFK7M",
"iat": 1568365232,
"at_hash": "ylLg7Kon6gt2ersyc-GLiw",
"sid": "dff7a11f68065241266fb30c31115941",
"sub": "1",
"auth_time": 1568365229,
"idp": "local",
"amr": [
  "pwd"
  ]
}

[jeroenheijmans]

Could you try to make a reproducible example, e.g. on StackBlitz?

[phrouv]

Actually there is no need to create an example on StackBlitz. I only changed 3 lines in auth-code-flow.config.ts file of the sample code.
From

export const authCodeFlowConfig: AuthConfig = {
issuer: 'https://demo.identityserver.io',
redirectUri: window.location.origin + '/index.html',
clientId: 'spa',
responseType: 'code',
scope: 'openid profile email offline_access api',
showDebugInformation: true
};

To

export const authCodeFlowConfig: AuthConfig = {
issuer: 'http://localhost:8180/auth/realms/test',
redirectUri: window.location.origin + '/index.html',
clientId: 'test-client',
responseType: 'code',
scope: 'openid profile email offline_access heroes',
showDebugInformation: true
};

I'm targeting my local keycloak where I created first a "test" realm, then a "test_client" client in this realm. Nothing fancy really.

[phrouv]

I will bring the solution to my own question thanks to the blog entry of Jeroen at https://ordina-jworks.github.io/security/2019/08/22/Securing-Web-Applications-With-Keycloak.html :
__Keycloak is not returning the at_hash claim in the access token. For this reason, the client library would crash while parsing it. This is why we disable it in the config but also use the NullValidationHandler instead of the JwksValidationHandler as it would also make the application crash._
In the configureCodeFlow() method, just replace the line this.oauthService.tokenValidationHandler = new JwksValidationHandler(); by this.oauthService.tokenValidationHandler = new NullValidationHandler();

[dorianweidler]

The part with the NullValidationHandler can be omitted as soon as https://github.com/manfredsteyer/angular-oauth2-oidc/pull/613 is merged.