I am using keycloak-js & @react-keycloak/web packages in my react app to implement keycloak.
Below is the basic wrapper :
<ReactKeycloakProvider
authClient={keycloakInstance}
initOptions={initOptions}
LoadingComponent={<Loader />}
onTokens={tokenLogger}
onEvent={eventLogger}
>
<App />
</ReactKeycloakProvider>
It works fine, within App Component I am utilizing the values keycloak & initialized to either to show loader, or routes, but the App component is rendered when keycloak is initialized properly provided the keyclaok server is up and running and we don't have any network issue:
const { keycloak, initialized } = useKeycloak();
Case : However, when keycloak server is down or we have network issue, the onEvent is called back with error "
{error: 'Timeout when waiting for 3rd party check iframe message.'}" and event type onInitError , ending up rendering the Loader or an Error Page by setting up the state. This won't render the App Component at all. Correct me if I am wrong.
I am trying to find a way if we can render the App Component even if keycloak server or network has issues at least in the dev environment. I tried the naïve way, conditionally rendering with or without the ReactKeycloakProvider but that would throw error where ever I am using hook useKeycloak as the context will be missing.
Have checked for options that might help from https://www.keycloak.org/docs/latest/securing_apps/index.html#javascript-adapter-reference