I am developing a react app locally and using Keycloak to manage authentication. I used the keycloak.js package and the react-keycloak package to access the Keycloak server from the react app.

When the user isn’t logged in, the only accessible routes should be “/” and “/login”. The “/” route renders a landing page whilst the “/login” route redirects to the Keycloak login page. These routes are stored in the PublicView object.

If the user is logged in more routes should be accessible, such as “/collections”. For example, after log the user should be redirected to the “/” route, which then redirects to the “/collections” page instead of rendering the landing page.

Currently the react app functions as described for when the user isn’t logged in. Additionally, after login the user is properly redirected to the “/” route which then redirects to the “/collections” route and displays the relevant content.

However if I manually type any PrivateView route into the browser (i.e reload the single page app) it just shows the “authorising…” loading message. What it should be doing is serving the URI according to the PrivateView object.

Although this suggest that the client hasn’t been initialised yet, I know that the authentication must have succeeded since the line {console.log("rendering:", isAuth)}, in the return statement of the app, executes properly:
[]
However as seen in the image, a 404 error is thrown as if the page for the URI couldn’t be found. I have traced the 404 error back to the <NotFound errorMessage={new Error("404 not found")}/> component in the SharedView object. This is unexpected since all of the routes I am reloading/accessing are specified in the PrivateView object.

Does anyone have ideas how I could correct this behaviour?

Below is all the relevant code:

App.js:

import { Routes, Route, Navigate } from "react-router-dom"
import { useKeycloak } from "@react-keycloak/web"

// Components
import PrimaryLayout from "./components/layouts/PrimaryLayout"

// Pages
import About from "./pages/About/index"
import Collections from "./pages/Collections/index"
import Artworks from "./pages/Artworks/index"
import ArtworkPopup from "./pages/ArtworkPopup"
import Contact from "./pages/Contact/index"
import Login from "./pages/Login/index"
import Logout from "./pages/Logout/index"
import Landing from "./pages/Landing/index"
import NotFound from "./pages/NotFound/index"
import Tests from "./pages/__tests__/index"

// Styles
import './global.css'

function App() {
    const { keycloak, initialized } = useKeycloak()
    const isAuth = keycloak.authenticated

    const PrivateView = (
        <>
            <Route element={ <PrimaryLayout /> } >
                <Route path="about" element={ <About /> } />

                <Route path="collections" >
                    <Route index element={ <Collections /> } />
                    <Route path=":collectionId" element={ <Navigate replace to="a" /> } />

                    <Route path=":collectionId/a" element={ <Artworks /> } >
                    <Route path=":artworkId" element={ <ArtworkPopup />} />
                    </Route>
                </Route>

                <Route path="contact" element={ <Contact /> } />
                <Route path="logout" element={ <Logout /> } />
            </Route>

            <Route path="/" element={ <Navigate replace to="collections" /> } />
        </> 
    )

    const PublicView = (
        <>
            <Route path="/" element={ <Landing /> } />
            <Route path="login" element={ <Login /> } />
        </>
    )

    const SharedView = (
        <>
            <Route path="tests" element={ <Tests /> } />
            <Route path="*" element={ <NotFound errorMessage={new Error("404 not found")}/> } />
        </>
    )

    if (!initialized) {
        console.log("Still loading")
        return <div>Authenticating...</div>
    }

    return (
        <Routes>
            {console.log("rendering:", isAuth)}
            {isAuth ? PrivateView : PublicView}
            {SharedView}
        </Routes>
    )
}

export default App

Login.js:

import { useKeycloak } from "@react-keycloak/web"
import keycloakLogin from "../../data/keycloakLogin"

function Login() {
    const { keycloak } = useKeycloak()

    keycloak.login({redirectUri: "http://localhost:3001/")

    return (
        <main className="main">
            <div className="page-description">
                <h1 className="page-description__name">Login</h1>
            </div>
            <div>Redirecting to login...</div>
        </main>
    )
}

export default Login

index.js:

import React from "react"
import ReactDOM from 'react-dom/client'
import { ReactKeycloakProvider } from "@react-keycloak/web"
import { BrowserRouter } from "react-router-dom"
import './index.css'

// APP
import App from './App'

// Config
import keycloakClient from "./data/keycloakClient"
import keycloakInit from "./data/keycloakInit"

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

    /* IMPORTANT

    I wrapped the ReactKeycloakProvider around the React.StrictMode component to prevent double initialisation of the Keycloak client.

    */
    <ReactKeycloakProvider authClient={keycloakClient} initOptions={
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`,
        pkceMethod: "S256"
    }>
        <React.StrictMode>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </React.StrictMode>
    </ReactKeycloakProvider>
);