Auth Components
Authentication and sign-in components
Components for authentication flows and user sign-in.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
@tetherto/mdk-react-devkit
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 renders fallback — typically <Navigate to="/signin" replace /> from react-router. Router-agnostic by design.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
children | React.ReactNode | ✓ | - | Rendered when a token is present. |
fallback | React.ReactNode | ✓ | - | Rendered when no token is present — typically <Navigate to="/signin" />. |
rememberPath | boolean | undefined | - | When true (default), the current location is persisted to sessionStorage before rendering the fallback so the sign-in flow can return there. |
SignInGoogleButton
One-click Google OAuth sign-in trigger. Defaults to a full-page redirect to ${oauthBaseUrl}/oauth/google, mirroring the production MOS flow.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
icon | React.ReactNode | ✓ | - | Icon node rendered alongside children. |
loading | boolean | undefined | ✓ | - | Show a spinner instead of the content and disable the button. |
variant | ButtonVariant | undefined | ✓ | - | Visual variant (e.g. primary, secondary, ghost). |
size | ComponentSize | undefined | ✓ | - | Size token (sm, md, lg). |
fullWidth | boolean | undefined | ✓ | - | Make the button stretch to fill its container. |
contentClassName | string | undefined | ✓ | - | Class names applied to the inner content wrapper. |
iconPosition | ButtonIconPosition | undefined | ✓ | - | Icon placement relative to children. |
oauthBaseUrl | string | ✓ | - | Base URL of the OAuth backend (no trailing slash). Click navigates to ${oauthBaseUrl}/oauth/google. |
label | string | undefined | - | Override the visible button label. | |
onClick | (() => void) | undefined | - | Override the click behaviour entirely. When set, oauthBaseUrl is ignored. |