Infinite loop after successful login with keycloak

[SoniaGarciaMind]

Issue and Steps to Reproduce

I am using this library with keycloak but i am having some issues after login successful. The configuration of the provider is this:

const configuration: OidcConfiguration = { client_id: process.env.APP_KEYCLOAK_CLIENT_ID ?? '', redirect_uri: ${window.location.origin}/route_of_my_app, silent_redirect_uri: ${window.location.origin}/route_of_my_app, silent_login_uri: ${window.location.origin}/route_of_my_app, scope: 'openid', authority: 'https://url/realms/app', service_worker_relative_url: '/OidcServiceWorker.js', service_worker_only: true, authority_configuration: { issuer: 'https://url/realms/app', authorization_endpoint: 'https://url/realms/app/protocol/openid-connect/auth', token_endpoint: 'https://url/realms/app/protocol/openid-connect/token', revocation_endpoint: 'https://url/realms/app/protocol/openid-connect/revoke', end_session_endpoint: 'https://url/realms/app/protocol/openid-connect/logout', }, extras: { response_mode: 'fragment', response_type: 'code', } };

I am not sure about the route that I have to put in the redirect_uri field because I have seen that in the examples are using /authentication/callback and in my case I am using a route of the react-router. Maybe I am having a bug in my code but I think that I am not understanding the correct way to do a successful redirect.

Thanks in advance!

Versions

Screenshots

Expected

Actual

Additional Details

• Installed packages:

[guillaume-chervet]

Hi @SoniaGarciaMind , Thank you for your issue. You do not need to set up a declared route. You need to set up an unused route as a callback and to declare it in keycloack.

[SoniaGarciaMind]

Hi I test this possible solution introducing this url in the valid redirect URIs http://localhost:3000/authentication/callback/* but now I am receiving a 404 error:

In addition, I am not sure how is it possible to redirect to my app if this route is not supported by react-router. Thanks in advance!

[guillaume-chervet]

Hi @SoniaGarciaMind It is because it is a single page application and your server need to return your index configuration. It is a configuration to set at server side.

You may try to use hash url like: http://localhost:3000/#authentication/callback/

With # url you do not need new server configuration.

[SoniaGarciaMind]

Hi @guillaume-chervet I continue with the infinite loop that goes to the application and returns to the path http://localhost:3000/#authentication/callback/ I removed from the keycloak server the redirect uri http://localhost:3000/authentication/callback/

[SoniaGarciaMind]

@guillaume-chervet It´s seems that this problem is solved but now I am receiving this error although I have this domain in the file

OidcServiceWorker.js:19 Uncaught Error: Domain https://url/realms/app/protocol/openid-connect/token is not trusted, please add domain in OidcTrustedDomains.js at x (OidcServiceWorker.js:19:11) at OidcServiceWorker.js:310:9 at Array.forEach ()

File:

const trustedDomains = { default: [ 'https://url', 'https://url/realms/app/protocol/openid-connect/token' ] };

Thanks in advanced!

[guillaume-chervet]

Hi @SoniaGarciaMind , you can try to disable service worker to check if it works?

[SoniaGarciaMind]

Hi @guillaume-chervet I tried to comment the lines in the configuration object that I am passing to the OidcProvider but this cause a crash in my application because I am using the useOid hook. Is there any different way to disable de service-worker? I disable the cache of the navigator (Chrome) and unregister the service-worker but it produces the same error:

OidcServiceWorker.js:19 Uncaught Error: Domain https://url/realms/app/protocol/openid-connect/token is not trusted, please add domain in OidcTrustedDomains.js at x (OidcServiceWorker.js:19:11) at OidcServiceWorker.js:310:9 at Array.forEach ()

[guillaume-chervet]

Hi @SoniaGarciaMind , did you success to make it works? Do you have more detail about your code?