SignIn

<SignIn> is the prebuilt sign-in card. It composes the email/password LoginForm inside a styled card with a heading, the OAuth provider strip, and the “Powered by” footer already wired up. Everything, API base URL, provider list, labels, theme, is read from <ToriiProvider> via context.

This is the component most apps reach for. Drop it inside <SignedOut> and you have a complete sign-in surface.

When to use

• Use <SignIn> for the standard hosted-style sign-in card.
• Use <LoginForm> only when you need a custom layout around the bare fields (no card, no footer).

Usage

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

function App() {
  return (
    <>
      <SignedOut>
        <SignIn
          onSignUp={() => navigate('/sign-up')}
          onForgotPassword={() => navigate('/forgot-password')}
        />
      </SignedOut>
      <SignedIn>
        <Dashboard />
      </SignedIn>
    </>
  );
}

Props

All optional: the card is fully wired by context.

Prop	Type	Description
onSignUp	() => void	Called when the “Sign up” footer link is clicked. The link is hidden when omitted.
onForgotPassword	() => void	Called when “Forgot password?” is clicked. The link is hidden when omitted.
onLoginStart	() => void	Fired when the sign-in request starts.
onLoginError	(error: ToriiError) => void	Fired on sign-in error.
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).
labels	Partial<ToriiLoginLabels>	Per-instance label overrides. Falls through to ToriiProvider labels.

Behaviour

• Runtime-gated: renders null until the SDK runtime (CDN UI bundle + styles) is ready, so it never flashes unstyled.
• Auto sign-in: on success the card calls auth.signIn(tokens), so <SignedIn> flips immediately.
• Navigation: password sign-in does not redirect; auth.signIn flips the session state so your <SignedIn> gate swaps in-place. For explicit routing, navigate inside onLoginSuccess. (afterOauthSignInPath is for the OAuth callback only.)
• OAuth providers configured on the environment render automatically above the form, no extra props.
• Two-factor challenge: when the account has two-factor authentication enabled, password sign-in advances to a code-entry step (with a “use a recovery code instead” toggle) before the session is created: no extra props needed.

Theming

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

TypeScript

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