Auth
Authentication and sign-in components
Components for authentication flows and user sign-in.
Prerequisites
- Complete the installation
- Add the dependency to your app's
package.json
{
"dependencies": {
"@tetherto/mdk-react-devkit": "*",
"@tetherto/mdk-react-adapter": "*",
"@tetherto/mdk-ui-foundation": "*"
}
}Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
@tetherto/mdk-react-devkit
Import the public APIs on this page from @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 | Status | Type / Options | 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 | true | 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 reference app's production flow
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
oauthBaseUrl | Required | string | - | Base URL of the OAuth backend (no trailing slash). Click navigates to ${oauthBaseUrl}/oauth/google |
contentClassName | Optional | string | - | Class names applied to the inner content wrapper |
disabled | Optional | boolean | false | Disable the button |
fullWidth | Optional | boolean | false | Make the button stretch to fill its container |
icon | Optional | React.ReactNode | - | Icon node rendered alongside children |
iconPosition | Optional | "left" | "right" | "left" | Icon placement relative to children |
label | Optional | string | "Sign in with Google" | Override the visible button label |
loading | Optional | boolean | false | Show a spinner instead of the content and disable the button |
onClick | Optional | (() => void) | redirect | Override the click behaviour entirely. When set, oauthBaseUrl is ignored |
size | Optional | "sm" | "md" | "lg" | - | Size token (sm, md, lg) |
type | Optional | "button" | "submit" | "reset" | "button" | Native button type |
variant | Optional | "icon" | "link" | "primary" | "danger" | "secondary" | "tertiary" | "nav-link" | "outline" | "ghost" | "secondary" | Visual variant (e.g. primary, secondary, ghost) |