authClient has not been assigned to ReactKeycloakProvider

[lincymathew-mobile]

Describe the bug
When my React app that has been integrated with keycloak loads in production I get the following error in the console before correctly redirecting to MFA:
authClient has not been assigned to ReactKeycloakProvider

To Reproduce
Steps to reproduce the behavior:

1. Go to React app integrated with keycloak in production
2. See error -
   ​ Error: Minified React error 31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
   at ki (main.bb68bd09.js:2)
   at main.bb68bd09.js:2
   at Da (main.bb68bd09.js:2)
   at Ys (main.bb68bd09.js:2)
   at Ic (main.bb68bd09.js:2)
   at Rc (main.bb68bd09.js:2)
   at Tc (main.bb68bd09.js:2)
   at bc (main.bb68bd09.js:2)
   at main.bb68bd09.js:2
   at t.unstable_runWithPriority (main.bb68bd09.js:2)
3. Remove minification and I get the error as - authClient has not been assigned to ReactKeycloakProvider

Expected behavior
The keycloak authentication should go through without any JS errors in console.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[danielr94]

I'm facing this issue while testing with cypress. This error doesn't appear when running the app...

[RMCampos]

Same here. I'm not able to test components with useKeycloak hook.

[tjercus]

Same here, seems broken. Even when I inline assign the authClient Object, the error is thrown:

ReactKeycloakProvider authClient={ new Keycloak({ url: "http://localhost:8080/auth", realm: "myrealm", clientId: "myapp", }) } >

[tjercus]

Ah, found out that you cannot use the hook and the provider in the same component, then a race condition will occur. The solution is to move the usage of the provider up higher in your component hierarchy.