TypeError on Logout - Keycloak

[GrigorisPapapostolou]

Description

I'm encountering a runtime error when attempting to log out using react-oidc-context version ^3.2.0 with a React application (^19.0.0) integrated with Keycloak. The error message "TypeError: Cannot read properties of undefined (reading 'profile')" appears just before the redirect action is completed during the logout process.

Set up

1. Below are the OIDC configuration details provided in my .env file:

REACT_APP_OIDC_AUTHORITY=http://localhost:9080/realms/realm-name
REACT_APP_OIDC_CLIENT_ID=realm-name
REACT_APP_OIDC_REDIRECT_URI=http://localhost:3000/
REACT_APP_OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:3000/

2. Then they consumed in the index.js of my application as follow:

const oidcConfig = {
  authority: process.env.REACT_APP_OIDC_AUTHORITY,
  client_id: process.env.REACT_APP_OIDC_CLIENT_ID,
  redirect_uri: process.env.REACT_APP_OIDC_REDIRECT_URI,
  post_logout_redirect_uri: process.env.REACT_APP_OIDC_REDIRECT_URI,
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <AuthProvider {...oidcConfig}>
          <App />
        </AuthProvider>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

3. In the App.js I use it to check if the user is authenticated:

function App() {
  const auth = useAuth();
  const [showSpinner, setShowSpinner] = useState(true);
  const [errorMessage, setErrorMessage] = useState(null);

  useEffect(() => {
    const timeout = setTimeout(() => {
      if (showSpinner) {
        setErrorMessage("Loading timeout exceeded. Please try again later.");
        setShowSpinner(false);
      }
    }, 8000);

    return () => clearTimeout(timeout);
  }, [showSpinner, auth.isLoading]);

  useEffect(() => {
    if (!auth.isLoading && !auth.isAuthenticated) {
      auth.signinRedirect().catch((err) => {
        console.error("Authentication redirection error:", err);
        setErrorMessage(err.message || "Failed to authenticate.");
      });
    }
  }, [auth.isLoading, auth.isAuthenticated]);

  if (showSpinner) {
    return (
      <Box
        display="flex"
        justifyContent="center"
        alignItems="center"
        minHeight="100vh"
      >
        <CircularProgress />
      </Box>
    );
  }

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="app">
          <LeftSidebar />
          <main className="content">
            <Topbar />
            {/* More content goes here... */}
          </main>
        </div>
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

4. And finally in the topbar I have a logout button:

const Topbar = () => {
  const auth = useAuth();

  const handleLogout = () => {
    auth.signoutRedirect();
  };

  return (
    <Box display="flex" justifyContent="space-between" p={2}>
      <Box display="flex">
        <IconButton onClick={handleLogout}>
          <LogoutOutlinedIcon />
        </IconButton>
      </Box>
    </Box>
  );
};

I also tried solutions from similar issues like this one:

auth
  .removeUser()
  .then(() => {
    void auth.signoutRedirect();
  })
  .catch((error) => {
    // Unable to remove user...
  });

but it does not work.