JS Adapter Auth Redirect Timeout

[mashurex]

Describe the bug

If a Keycloak auth server is down or is not reachable by the client (say due to firewall rules or DNS resolution problems) the user is stuck waiting infinitely at a blank page with no way for the application to detect or timeout and notify the user of the problem.

This is similar to, but a little bit different than previous tickets:

• https://issues.redhat.com/browse/KEYCLOAK-4879
• https://issues.redhat.com/browse/KEYCLOAK-4883

Our current issue is not that our auth server is down, but due to users' corporate firewall rules or other network problems between the user's browser and the Keycloak server prevent them from getting to the Keycloak Login/SSO page. Previous commentary recommended "making sure your auth system isn't down", however we know the auth server is up and healthy, but for any individual user, it may be unreachable for them.

I feel the lack of timeout or promise failure is the bug, a request for adding connectivity testing or other such things would be a feature request.

Version

16.1

Expected behavior

The JS Adapter should detect that it cannot connect to the auth server, timeout, and/or:

• Implement a test connection method that could be used
• Execute a callback method (like onTokenExpired or one provided to the init method via config)
• Fail the init promise, so it can be handled by the caller
• ... any other reasonable way to notify the app code that authentication cannot proceed

Actual behavior

Our Vue application that is wrapped in a keycloak.init(...) promise stays blank indefinitely and the user thinks the application is down. Our application is unaware that the user cannot contact the Keycloak server, and we have to manually craft a different application entry point to detect and prevent this.

How to Reproduce?

Have a simple Vue application like the JS adapter docs recommend and prevent connectivity to the configured Keycloak server.

Keycloak.init(config).then((authenticated) => { new Vue({ el: '#app', router, store, components: { App, }, template: '<App/>', });

Anything else?

No response