RequireAuth
Route guard that reads the session token from the headless `authStore` (via `useAuth`) and renders the children only when a token is present. Otherwise it re…
Route guard that reads the session token from the headless authStore (via useAuth) and renders the children only when a token is present. Otherwise it renders fallback — typically <Navigate to="/signin" replace /> from react-router. Router-agnostic by design.
import { RequireAuth } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
children | Required | React.ReactNode | — | Rendered when a token is present. |
fallback | Required | React.ReactNode | — | Rendered when no token is present — typically `<Navigate to="/signin" />`. |
rememberPath | Optional | boolean | undefined | — | When true (default), the current location is persisted to sessionStorage before rendering the fallback so the sign-in flow can return there. |
Usage
Route guard that reads the session token from the headless authStore (via
useAuth) and renders children only when a token is present. Router-agnostic
— pass any node (typically <Navigate />) as the fallback.
Also exports consumeLastVisitedPath() so the sign-in page can return the
user to wherever they were redirected from.
Example
/** * Runnable example for RequireAuth. * * Wraps the application content in an auth guard. When `authStore.token` is * null, renders the fallback (typically a `<Navigate />` to `/signin`). */import { RequireAuth } from '@tetherto/mdk-react-devkit'const PretendDashboard = () => <div>Authenticated dashboard content</div>const PretendRedirect = () => <div>Redirecting to sign in…</div>export const RequireAuthExample = () => ( <RequireAuth fallback={<PretendRedirect />}> <PretendDashboard /> </RequireAuth>)