API reference

The public surface of

@thunderid/tanstack-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 TanStack Router context. :::

Props

onErroroptional

(error: Error) => void

Called when 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 TanStack Router's `router.navigate()`

Example

import { createRoute } from '@tanstack/react-router'
import { CallbackRoute } from '@thunderid/tanstack-router'

const callbackRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/callback',
  component: CallbackRoute,
})

function<ProtectedRoute />

The `ProtectedRoute` component wraps a route component 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 TanStack Router's router context: wrap your application with `RouterProvider`. :::

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`

Example

import { createRoute } from '@tanstack/react-router'
import { ProtectedRoute } from '@thunderid/tanstack-router'
import Dashboard from './pages/Dashboard'

export const dashboardRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  component: () => (
    <ProtectedRoute redirectTo="/signin">
      <Dashboard />
    </ProtectedRoute>
  ),
})