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?

Edit: To summarize and try to make it more clear:

My problem resides not on the Angular side, but on the backend Java side.

I only have the client secret on the backend (Java), so I cannot retrieve the token on the Angular front.

I send the code to the backend, so that the token can be retrieved using the secret. But I don't have the code verifier.

Maybe the architecture is not the right one, but it's what I've understood to be the best option from what I've read. I'd be glad to hear more options if this isn't the right one.

In the end, if you want to configure the secret in the backend, you need to create two different clients.

• One for the frontend, public, without secret, to retrieve the code and the token.
• One for the backend, confidential, with secret, to get the information from the received token.

Following this blog helped me a lot to understanding it: Secure Frontend (React.js) and Backend (Node.js/Express Rest API) with Keycloak