RequireAuth

RequireAuth is a guard component that ensures its children are only rendered when the user is authenticated. It handles token expiry and automatic refresh.

Installation

npm install oidc-js-solid

Usage

import { RequireAuth } from "oidc-js-solid";

function ProtectedPage() {
  return (
    <RequireAuth fallback={<div>Loading...</div>}>
      <h1>Protected Content</h1>
    </RequireAuth>
  );
}

Props

Prop	Type	Default	Description
children	JSX.Element	required	Content to render when authenticated
fallback	JSX.Element	-	Shown while loading or redirecting
autoRefresh	boolean	true	Auto-refresh expired tokens before redirecting to login
loginOptions	LoginOptions	-	Options passed to actions.login() when redirecting

Behavior

When RequireAuth renders:

1. If still loading (discovery, callback), render fallback
2. If authenticated with a valid token, render children
3. If the token is expired and autoRefresh is true, attempt a silent refresh
4. If refresh succeeds, render children with the new token
5. If refresh fails (or no refresh token), redirect to the IdP login

With Solid Router

import { Route } from "@solidjs/router";
import { RequireAuth } from "oidc-js-solid";

<Route path="/" component={Home} />
<Route path="/dashboard" component={() => (
  <RequireAuth fallback={<Spinner />}>
    <Dashboard />
  </RequireAuth>
)} />