Keycloak Authentication Tokens Not Persisting After Redirect #37897

nurlanov0105 · 2025-03-07T04:30:26Z

nurlanov0105
Mar 7, 2025

Code on front

——  import Keycloak from "keycloak-js";
const keycloak = new Keycloak({
url: "https://keycloak.ont-os.com",
realm: "master",
clientId: "ont-os-test-app",
});
export default keycloak; 
 ——main.tsx 
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactKeycloakProvider } from "@react-keycloak/web";
import App from "./App";
import keycloak from "@/shared/api/keycloak";

const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 4,
},
},
});

const rootElement = document.getElementById("root");

if (!rootElement) {
throw new Error("Root element not found. Check your HTML file.");
}

ReactDOM.createRoot(rootElement).render(

<ReactKeycloakProvider
initOptions={{
onLoad: "check-sso", // Проверяет активную сессию
silentCheckSsoRedirectUri: ${window.location.origin}/silent-check-sso.html,
responseMode: "fragment",
flow: "standard",
pkceMethod: "S256",
enableLogging: true,
}}
authClient={keycloak}
>

);

 —— public/silent-check-sso.html
 

——App.tsx import Routers from "./routers/Routers";
import { useKeycloak } from "@react-keycloak/web";
import { useAuthStore } from "@/features/auth";
import { useTheme } from "@/shared/lib/hooks";
import "@/shared/styles/index.scss";
import { useEffect } from "react";

const App = () => {
const { keycloak, initialized } = useKeycloak();
const setIsAuth = useAuthStore((state) => state.setIsAuth);

useEffect(() => {
if (!initialized) {
console.log("Keycloak not initialized yet...");
return;
}

console.log("Keycloak initialized:", initialized);
console.log("Keycloak instance:", keycloak);
console.log("Keycloak authenticated:", keycloak.authenticated);

setIsAuth(!!keycloak.authenticated);

}, [keycloak, initialized, setIsAuth]);

useTheme();
return ;
};

export default App;

——ProtectedRoute.tsx  import { FC } from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useAuthStore } from "@/features/auth";
import AgoraRTC, { AgoraRTCProvider } from "agora-rtc-react";
// import { useKeycloak } from "@react-keycloak/web";
import { PublicRoutes } from "@/shared/types";
// import { PublicRoutes } from "@/shared/types";

const ProtectedRoute: FC = () => {
// const { keycloak } = useKeycloak();
const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
const isAuth = useAuthStore((state) => state.isAuth);
// const location = useLocation();

if (!isAuth) {
return (
<Navigate to={PublicRoutes.MAIN} state={{ from: location.pathname }} />
);
}

return (

);

// return isAuth ? (
//
//
//
// ) : (
// <Navigate to={PublicRoutes.LOGIN} state={{ from: location.pathname }} />
// );
};

export default ProtectedRoute;

 ———— Error Reproduction Scenario 
 

I visit the website (https://example/.com).
I click the Login button, which redirects me to the Keycloak authentication page.
I successfully log in to Keycloak.
After authentication, Keycloak redirects me back to https://example.com/

Issue:
When I return to the main site after logging in, the authentication state is missing, and the console shows the error: "Keycloak not initialized yet..." 

Possible Cause:
It seems that tokens are not being stored or retrieved correctly after the redirect, leading to the loss of authentication on the main site. 

Question:
How can I ensure that authentication tokens persist after the redirect so that the user remains logged in?

I would greatly appreciate any help!

Navigation Menu

Repository navigation

Keycloak Authentication Tokens Not Persisting After Redirect #37897

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Select a reply

Uh oh!

Keycloak Authentication Tokens Not Persisting After Redirect #37897

Uh oh!

nurlanov0105 Mar 7, 2025

Replies: 1 comment

nurlanov0105
Mar 7, 2025