Authentication is not working after upgrading to react 18

[VijayaSaiRam]

I have upgraded to React 18. after that when I load the page, it is not coming out of the loading spinner, authentication is not working.
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<AuthProvider {...oidcConfig} >






</React.StrictMode>
);
If I comment <React.StrictMode> then it is working
could you please help me on this

Thankyou.
Regards,
Vijaya

[zach-betz-hln]

@VijayaSaiRam - can confirm that this library works okay with react 18. See:

https://github.com/authts/sample-keycloak-react-oidc-context/blob/079d739d46521693d55a869e1e0d7109edcf81b8/react/package.json#L19-L20

Your issue may be elsewhere, but it's hard to tell from the snippet you provided.

Can you provide a minimal reproducible example?

[VijayaSaiRam]

I have upgraded to
"react": "^18.3.1",
"react-dom": "^18.3.1",

and to fix the warning [Deprecation notice: ReactDOM.render is no longer supported in React 18]

I have changed code in index.js to as follows.
import React, {StrictMode} from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';

After that authentication is not progressing further.

it is always in the sprinner loading

It is just getting the access code, after that token call is not happening, it always stays in the following code
useEffect(() => {
if (!auth.isAuthenticated && !auth.error && !auth.isLoading) {
auth.signinRedirect();
}
if (auth.error) {
authenticaionFailed();
}
if (auth.isAuthenticated && auth.user) {
authenticationPassed(auth.user);
}
auth.events.addSilentRenewError(error => {
if (AUTH_MESSAGES.indexOf(error.message) !== -1) {
setShowTimeoutModal(true);
}
else {
authenticaionFailed(error);
}
});
if (!authenticating && userInfo) {
if (scopes.length < 1) {
navigate(ERROR_PAGES.noAccessError.path);
} else if (//custom condition) {
// execute else if block
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [authenticating, auth.isAuthenticated, auth.error, auth.isLoading, auth.user]);

If I comment it is working..

Even if I don't fix the warning [Deprecation notice: ReactDOM.render is no longer supported in React 18] and leave the code as such

then it is working.

[zach-betz-hln]

After that authentication is not progressing further.
it is always in the sprinner loading

Is this "spinner" from Keycloak, or from your React app?

If it's from your React app, what is the code that toggles this spinner?

[Skezzowski]

Hi,

I stumbled upon the same issue but with oidc-client-ts.

I moved the Provider above the StrictMode and now it works.
Found this issue as well: react-keycloak/react-keycloak#182

Funny thing is, this only happened with Firefox for me. Chrome works fine without doing the workaround.

[zach-betz-hln]

Hi @Skezzowski - the sample repo uses react 18.x in strict mode and works fine.

Are you able to reproduce your issue there?