React + keycloak-js: #error=login_required loop when accessing home page

Krusty the Clown 0
Viewed 88

I'm having some trouble performing Authentication using keycloak-js and @react-keycloak/web in a basic React app. My code looks as follows:

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ReactKeycloakProvider } from "@react-keycloak/web";
import App from './App';
import Keycloak from "keycloak-js";

import { Routes, Route, BrowserRouter } from 'react-router-dom';

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

keycloak.init({
    redirectUri: "http://localhost:3000/home",
    pkceMethod: "S256"
});

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

root.render(
    <ReactKeycloakProvider authClient={keycloak}>
        <React.StrictMode>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<App keycloak={keycloak}/>} />
                </Routes>
            </BrowserRouter>
       </React.StrictMode>
    </ReactKeycloakProvider>
);

App.js:

function App({keycloak}) {
    return (
        <div>
            <p> 12345 </p>
            <button onClick={() => keycloak.login()}> Click me </button>
        </div>
    );
}

The issue occurs when I visit http://localhost:3000/ . I get stuck in a loop redirecting to my redirectUri (http://localhost:3000/home) with an error=login_required message appended to it, which seemed especially odd as I hadn't set onLoad to login-required; the full URL is below

http://localhost:3000/home#error=login_required&state=0d0fffaa-66f3-4cb6-9764-26f34539b7c0

Versions:

  • react: 18.2.0
  • @react-keycloak/web: 3.4.0
  • react-router-dom: 6.3.0
  • keycloak-js: 19.0.1

Please let me know if any other info is needed. Any help is greatly appreciated.

EDIT: Removing the pkceMethod option from keycloak.init() fixes the issue. I want to use PKCE authentication however so this is not a viable solution.

keycloak reactjs
1 Answers

I managed to fix this by just removing the ReactKeycloakProvider tag.

root.render(
//    <ReactKeycloakProvider authClient={keycloak}>
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<App keycloak={keycloak}/>} />
            </Routes>
        </BrowserRouter>
//    </ReactKeycloakProvider>

);

I have no clue why this works, but I take it it's something to do with the fact @react-keycloak/web hasn't been updated in about a year. Obviously this is a lot less ideal since I no longer have a hook to access my keycloak object, so if anyone has a better solution please post it.

Krusty the Clown0
Related