AuthCard

<AuthCard> is a single drop-in card that handles the whole credential surface: it wraps <SignIn>, <SignUp>, and the forgot-password step behind one component with an internal mode toggle. Switching between login, signup, and forgot-password happens in-place, no routing required, so one mount covers every credential screen.

Like its parts, everything (API base URL, provider list, labels, theme) is read from <ToriiProvider> via context.

When to use

• Use <AuthCard> when you want one component for the full sign-in / sign-up / forgot-password flow on a single route.
• Use <SignIn> or <SignUp> when each screen lives on its own page and you wire the navigation yourself.

Usage

import { SignedIn, SignedOut, AuthCard } from '@torii-js/torii-react';

function App() {
  return (
    <>
      <SignedOut>
        <AuthCard
          defaultMode="login"
          onLoginSuccess={() => navigate('/dashboard')}
          onSignupSuccess={() => navigate('/welcome')}
        />
      </SignedOut>
      <SignedIn>
        <Dashboard />
      </SignedIn>
    </>
  );
}

Props

All optional: the card is fully wired by context.

Prop	Type	Description
defaultMode	'login' | 'signup'	Which screen to show first. Defaults to 'signup'.
labels	Partial<ToriiSignupLabels>	Per-instance label overrides. Falls through to ToriiProvider labels.
onLoginSuccess	(tokens: AuthTokens) => void	Fired on successful sign-in. Password sign-in never redirects, use this to route after auth (or rely on render gates).
onLoginError	(error: ToriiError) => void	Fired on sign-in error.
onSignupSuccess	(tokens: AuthTokens) => void	Fired on successful sign-up. Password sign-up never redirects, use this to route after auth (or rely on render gates).
onSignupError	(error: ToriiError) => void	Fired on sign-up error.

Behaviour

• Internal mode toggle: the card holds its own 'login' | 'signup' | 'forgot-password' state. The footer links (sign in / sign up) and the “Forgot password?” link flip the mode in-place, and the forgot-password step’s “back” control returns to login.
• Runtime-gated: the underlying cards render null until the SDK runtime (CDN UI bundle + styles) is ready, so nothing flashes unstyled.
• Navigation: password flows never redirect; on success the card calls auth.signIn(tokens), so the session state flips and <SignedIn> swaps in-place. For explicit routing, navigate inside onLoginSuccess / onSignupSuccess. (afterOauthSign{In,Up}Path is for the OAuth callback only.)
• OAuth providers configured on the environment render automatically above each form, no extra props.

Theming

<AuthCard> honours the appearance prop on <ToriiProvider> (theme preset, token variables, per-slot elements). See theming and elements.

TypeScript

import type { AuthCardProps, ToriiError, AuthTokens } from '@torii-js/torii-react';