Keycloak configuration tutorial?

[ruediger-h]

Issue and Steps to Reproduce

I try to get the react-demo up and running as a reference to develop a Vue-implementation and saw appear different issues. I can not rule out that Keycloak is not configured as expected although it does kind of work.

Is there any documentation / information / tutorial about how to configure a certain version (probably the newest one?) of Keycloak so it is known to cooperate with the react-demo without problems.

Of course a fitting example-configuration for the oidc-client would be nice, as well. Just to go sure the working-sample does get set up properly.

Versions

Axa oicd-client: 7.22.32
Keycloak: 22.0.1 (for example)

Expected

Work without issues as expected by Guillaume.

Actual

Example of the "latest issue":

1. Open Incognito-Tab in Chromium
2. Load Home screen
3. Click "Login"
4. Login on the Keycloak-Login-Page and get redirected back
5. Get displayed the home-screen for a part of a second
6. Get displayed http://localhost:5173/profile with info: "Session timed out - Your session has expired. Please re-authenticate."

Console-Output:

Additional Details

Keycloak does not output errors or information about problems (anymore, after I corrected scope).

[guillaume-chervet]

Hi @ruediger-h , i will do a video but before you can use this tutorial.
https://skycloak.io/keycloak-how-to-create-a-pkce-authorization-flow-client/

Set access_token lifetime to 5 minutes .

[esomore]

@ruediger-h I spent a few days making it work. I cannot remember the configuration bit that fixed your issue, but here are the realm and client dumps with my current working configuration; you can import them to your keycloak instance, and it should also work. Ensure you create the user on the new realm and set the email to verified.

pwa-app.json
realm.json

also, here is my OIDC config:

import { OidcComponents } from '@/components/Oidc/oidcComponents';

export const configurationIdentityServerWithoutDiscoveryKeyCloak = {
   client_id: 'pwa-app',
   redirect_uri: `${window.location.origin}/authentication/callback`,
   silent_redirect_uri: window.location.origin + '/authentication/silent-callback',
   scope: 'openid profile email',
   authority: 'https://keycloak.domain.com',
   authority_configuration: {
       issuer: 'https://keycloak.domain.com/realms/cosmic',
       authorization_endpoint: 'https://keycloak.domain.com/realms/cosmic/protocol/openid-connect/auth',
       token_endpoint: 'https://keycloak.domain.com/realms/cosmic/protocol/openid-connect/token',
       userinfo_endpoint: 'https://keycloak.domain.com/realms/cosmic/protocol/openid-connect/userinfo',
       end_session_endpoint: 'https://keycloak.domain.com/realms/cosmic/protocol/openid-connect/logout',
       revocation_endpoint: 'https://keycloak.domain.com/realms/cosmic/protocol/openid-connect/revoke',
       check_session_iframe: 'https://keycloak.domain.com/realms/cosmic/protocol/openid-connect/login-status-iframe.html',
   },
   refresh_time_before_tokens_expiration_in_second: 10,
   service_worker_only: false,
   loadingComponent: OidcComponents.loadingComponent,
   sessionLostComponent: OidcComponents.sessionLostComponent,
   authenticating: OidcComponents.authenticating,
   authenticatingErrorComponent: OidcComponents.authenticatingErrorComponent,
   callbackSuccessComponent: OidcComponents.callbackSuccessComponent,
   serviceWorkerNotSupportedComponent: OidcComponents.serviceWorkerNotSupportedComponent,
   onSessionLost: () => {
       console.log('Session lost! Handle your logic here.');
   },
};