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(

); If I comment 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?