API reference

The public surface of

@thunderid/react-router, as documented in its reference pages.

function<CallbackRoute />

The `CallbackRoute` component handles the OAuth 2.0 authorization code callback. Mount it at your application's redirect URI path. It processes the authorization code, validates the CSRF state parameter, exchanges the code for tokens, and navigates the user back to their original destination. :::note `CallbackRoute` must be rendered inside a `ThunderIDProvider` and a React Router context. :::

Props

onErroroptional

(error: Error) => void

Called when the callback processing fails (e.g., invalid state, token exchange error)

onNavigateoptional

(path: string) => void

Override the default post-callback navigation. Receives the resolved destination path. Defaults to React Router's `navigate()`

Example

import { BrowserRouter, Routes, Route } from 'react-router'
import { ThunderIDProvider } from '@thunderid/react'
import { CallbackRoute } from '@thunderid/react-router'

function App() {
  return (
    <ThunderIDProvider
      clientId="<your-client-id>"
      baseUrl="https://localhost:8090"
      afterSignInUrl="http://localhost:5173/callback"
    >
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/callback" element={<CallbackRoute />} />
        </Routes>
      </BrowserRouter>
    </ThunderIDProvider>
  )
}

function<ProtectedRoute />

The `ProtectedRoute` component wraps a route's element and enforces authentication. When the user is not signed in it either redirects to a specified URL or renders a fallback element. While authentication state is being resolved it shows a loading state. :::note `ProtectedRoute` must be rendered inside a `ThunderIDProvider`. It also requires React Router's router context: place it within a `BrowserRouter`, `HashRouter`, or similar. :::

Props

childrenrequired

ReactElement

The element to render when the user is authenticated

redirectTooptional

string

Path to redirect unauthenticated users to. Either `redirectTo` or `fallback` must be provided

fallbackoptional

ReactElement

Element to render when the user is not authenticated. Either `redirectTo` or `fallback` must be provided

loaderoptional

ReactNode

Element to render while authentication state is being resolved. Defaults to `null`

onSignInoptional

(defaultSignIn: (options?: Record) => void, signInOptions?: Record) => void

Override the default sign-in trigger. Called with the built-in `defaultSignIn` function and the `signInOptions` value

signInOptionsoptional

Record

Additional parameters forwarded to the authorization request (e.g., `prompt`, `fidp`, `login_hint`, `max_age`, `ui_locales`)

Example

import { BrowserRouter, Routes, Route } from 'react-router'
import { ThunderIDProvider } from '@thunderid/react'
import { ProtectedRoute } from '@thunderid/react-router'
import Dashboard from './pages/Dashboard'

function App() {
  return (
    <ThunderIDProvider clientId="<your-client-id>" baseUrl="https://localhost:8090">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route
            path="/dashboard"
            element={
              <ProtectedRoute redirectTo="/signin">
                <Dashboard />
              </ProtectedRoute>
            }
          />
        </Routes>
      </BrowserRouter>
    </ThunderIDProvider>
  )
}