MDK Logo
ReferenceUIComponents

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

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…

agent-ready

Props

PropTypeRequiredDefaultDescription
childrenReact.ReactNode-Rendered when a token is present.
fallbackReact.ReactNode-Rendered when no token is present — typically &lt;Navigate to="/signin" /&gt;.
rememberPathboolean | undefined-When true (default), the current location is persisted to sessionStorage before rendering the fallback so the sign-in f…

SignInGoogleButton

One-click Google OAuth sign-in trigger. Defaults to a full-page redirect to $&#123;oauthBaseUrl&#125;/oauth/google, mirroring the production MOS flow.

agent-ready

Props

PropTypeRequiredDefaultDescription
iconReact.ReactNode-Icon node rendered alongside children.
loadingboolean | undefined-Show a spinner instead of the content and disable the button.
variantButtonVariant | undefined-Visual variant (e.g. primary, secondary, ghost).
sizeComponentSize | undefined-Size token (sm, md, lg).
fullWidthboolean | undefined-Make the button stretch to fill its container.
contentClassNamestring | undefined-Class names applied to the inner content wrapper.
iconPositionButtonIconPosition | undefined-Icon placement relative to children.
oauthBaseUrlstring-Base URL of the OAuth backend (no trailing slash). Click navigates to $&#123;oauthBaseUrl&#125;/oauth/google.
labelstring | undefined-Override the visible button label.
onClick(() => void) | undefined-Override the click behaviour entirely. When set, oauthBaseUrl is ignored.

On this page