I have created just a basic react web client that allows me to sign into keycloak (keycloak login screen is displayed) but once I am logged in, it shows as a sesssion in keycloak under my user, but the keycloak.authenticated flag is not set in my react web client so I can never display a page that is waiting for the user to be authenticated.
Here are my basic pages:
App.js:
import React from “react”;
import { ReactKeycloakProvider } from “@react-keycloak/web”;
import keycloak from “./Keycloak”
import { BrowserRouter, Route, Routes } from “react-router-dom”;
import Nav from “./components/Nav”;
import WelcomePage from “./pages/Homepage”;
import SecuredPage from “./pages/Securedpage”;
import PrivateRoute from “./helpers/PrivateRoute”;
function App() {
return (
<ReactKeycloakProvider authClient={keycloak}>
<Nav />
<BrowserRouter>
<Routes>
<Route exact path="/" element={<WelcomePage />} />
<Route
path="/secured"
element={
<PrivateRoute>
<SecuredPage />
</PrivateRoute>
}
/> </Routes>
</BrowserRouter>
</ReactKeycloakProvider>
);
}
export default App;
Nav.js
import React from “react”;
import { useKeycloak } from “@react-keycloak/web”;
const Nav = () => {
const { keycloak } = useKeycloak();
return (
<div className="top-0 w-full flex flex-wrap">
<section className="x-auto">
<nav className="flex justify-between bg-gray-200 text-blue-800 w-screen">
<div className="px-5 xl:px-12 py-6 flex w-full items-center">
<h1 className="text-3xl font-bold font-heading">
Keycloak React AUTH.
</h1>
<ul className="hidden md:flex px-4 mx-auto font-semibold font-heading space-x-12">
<li>
<a className="hover:text-blue-800" href="/">
Home
</a>
</li>
<li>
<a className="hover:text-blue-800" href="/secured">
Secured Page
</a>
</li>
</ul>
<div className="hidden xl:flex items-center space-x-5">
<div className="hover:text-gray-200">
{!keycloak.authenticated && (
<button
type="button"
className="text-blue-800"
onClick={() => keycloak.login()}
>
Login
</button>
)}
{!!keycloak.authenticated && (
<button
type="button"
className="text-blue-800"
onClick={() => keycloak.logout()}
>
Logout ({keycloak.tokenParsed.preferred_username})
</button>
)}
</div>
</div>
</div>
</nav>
</section>
</div>
);
};
export default Nav;
PrivateRoute.js (is the spot looking for keycloak.authenticated) (note that I added a line setting isLoggedIn = true; ) If I have that in place, it works, but if not (currently commented out) it does not.
import { useKeycloak } from “@react-keycloak/web”;
const PrivateRoute = ({ children }) => {
const { keycloak } = useKeycloak();
console.log("Keycloak = " + keycloak.authenticated);
var isLoggedIn = keycloak.authenticated;
console.log("isLoggedIn = " + isLoggedIn);
//isLoggedIn = true;
return isLoggedIn ? children : null;
};
export default PrivateRoute;
========================================================
Keycloak.js:
import Keycloak from “keycloak-js”;
const keycloak = new Keycloak({
url: “http://wile-e.training/auth/”,
realm: “WILe-E”,
clientId: “kcClient”,
});
export default keycloak;
Homepage.js
import React from ‘react’;
const Home = () => {
return (
<h1 className="text-green-800 text-4xl">Welcome to the Homepage</h1>
);
};
export default Home;
Securedpage.js
import React from ‘react’;
const Secured = () => {
return (
<h1 className="text-black text-4xl">Welcome to the Protected Page.</h1>
);
};
export default Secured;
I have tried with multiple simple apps following examples and get the same results.
Again… when I click on the “login” button, I get the keycloak login screen and can log in and it shows as a session for the user in Keycloak admin screens. If I try to login again, it just puts more text into the URL at the top and does not bring up the keycloak login screen (assuming because it is already logged in). but still no value in keycloak.authenticated. If I use the keycloak admin screens and force the logout of that user, then the login button on the webclient again allows me to get the keycloak login screen and get logged in again and can be seen as a session in the keycloak admin screens.
Any Suggestions would be greatly appreciated.