keycloak-js - not authenticated after reloading page

Question

I'm testing a basic React app with Authorization Code / PKCE, and ran into a strange issue. The app looks as follows:

index.js:

const root = ReactDOM.createRoot(document.getElementById('root'));

initKeycloak();

root.render(
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<App/>} />
            </Routes>
         </BrowserRouter>
);

function App() {
    return (
        <div>
            <button onClick={() => keycloak.login()}> Login </button>
        </div>
    );
}

Provider.js:

let keycloak = new Keycloak({
    url: "http://localhost:8081/",
    realm: "test",
    clientId: "test-public"
});

export function initKeycloak() {
    keycloak.init({
        redirectUri: "http://localhost:3000",
        pkceMethod: "S256"
    }).then(() => console.log(keycloak));
}

export default keycloak;

It couldn't be simpler. Everything works fine; I press the login button, redirect and sign in, redirect back, and I'm authenticated (as printing the keycloak object will show). However, when I reload the page and the keycloak object is printed, it tells me I'm not authenticated.

Only by clicking the login button again, it will reload the page (without redirecting to the login page) and show that I'm authenticated.

From what I'm seeing, this is not expected behavior - it should keep me authenticated when I refresh the page. Does anyone have a solution?

score 0 · Answer 1 · answered Sep 10 '22 at 20:31

Issue turned out to be I didn't set it to check for a single sign on in my initialization.

export function initKeycloak() {
    keycloak.init({
        onLoad: 'check-sso',
        redirectUri: "http://localhost/user",
        pkceMethod: "S256"
    }).then(() => console.log(keycloak));
}

keycloak-js - not authenticated after reloading page

1 Answers1