Example of use oidc-client-ts and react-oidc-context.

LoginPage.jsx

import {useAuth} from "react-oidc-context";

export default function LoginPage() {

  const auth = useAuth();
  
  return <>
    <div style={{display: "flex", alignItems: 'center', justifyContent: 'center'}}>
      <div style={{width: "25rem", display: "block", margin: "2rem"}}>
        <h1>Web Energy Monitor</h1>
        <p>Please log in in order to use application.</p>
        {!auth.isAuthenticated && <Button onClick={e => void auth.signinRedirect({})}>Login</Button> }
      </div>
    </div>
  </>
}

main.jsx

import {AuthProvider} from "react-oidc-context";
import {UserManager, WebStorageStateStore} from 'oidc-client-ts';
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {ReactQueryDevtools} from "@tanstack/react-query-devtools";
import {BrowserRouter} from "react-router-dom";

const basePath = window.location.pathname;
const redirectUri = new URL(window.location.href);

const manager = new UserManager({
  authority: window.location.protocol + '//' + window.location.host +'/realms/master',
  redirect_uri: new URL('/callback', redirectUri).toString(), // handled automatically by library
  client_id: 'ui',
  scope: 'openid profile',
  userStore: store,
  stateStore: store,

  checkSessionIntervalInSeconds: 30,
  accessTokenExpiringNotificationTimeInSeconds: 10
})

// debug hooks
const onSignIn = (user) => {
  console.log(`Signed in ${user}`)
};
const onSignOut = (user) => {
  console.log(`Sign out ${user}`)
}


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter basename={basePath}>
      <AuthProvider onSigninCallback={onSignIn} onSignoutCallback={onSignOut} userManager={manager}>
        <QueryClientProvider client={tanStackClient}>
          <UiShell>
            <App />
          </UiShell>
          {import.meta.env.DEV && (<ReactQueryDevtools initialIsOpen={false} />)}
        </QueryClientProvider>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>,
)

MessageLog.jsx

import {useQuery} from "@tanstack/react-query";
import {useState} from "react";
import {useAuth} from "react-oidc-context";


export function MessageLog() {
    let auth = useAuth();
    let oidc = {};

    const { isPending: pending, error, data } = useQuery({
      queryKey: ['audit'],
      queryFn: () => {
        let options = {
          headers: {
            "Accept": "application/json",
            // inject access token here from auth, if available
          },
        };
        return xhr().request('./api', options)
          .then((res) => res.json(), (error) => console.log(`Error ${error}`));
      },
    })

    return (
        <Tile>
          Keys: {JSON.stringify(Object.keys(auth))}!<br />

          isAuthenticated: {JSON.stringify(auth?.isAuthenticated)}<br />
          user: {JSON.stringify(auth?.settings)}<br />
        </Tile>
    )
}