How to retrieve the code verifier using Keycloak from Angular

I am trying to develop an application with Angular as front, and Java as backend.

I need to login via Keycloak, and then send the received code to the back, to generate the token and store it in the session of the application server.

I am using keycloak-angular 16.1.0 and keycloak-js 25.0.6.

So far, I successfully redirect login to Keycloak using this initialization:

this.keycloak.init({
config: {
url: json.keycloakURL,
realm: json.keycloakRealm,
clientId: json.keycloakClientId,
},
initOptions: {
checkLoginIframe: false,
redirectUri: this.baseURI + '-angular/login',
flow: 'standard', // Use Authorization Code Flow
pkceMethod: 'S256' // PKCE for additional security
},
enableBearerInterceptor: true, // Automatically attach tokens to HTTP requests
bearerPrefix: 'Bearer'
});


And then, I login using:

this.keycloak.login({});


Everything works fine, I get my code and send it to the backend. However, I need also a code verifier, or I get an error "PKCE code verifier not specified".

I of course would like to stick to the maximum security possible, so I wouldn't like to disable code verification unless mandatory.

Is there any way I can retrieve this code verifier from the keycloak variable in Angular? Am I missing any important point?

Continue reading...