SignIn

<SignIn> is the prebuilt authentication card. It is a single self-contained surface that owns the whole credential flow: email/password + OAuth sign-in, an in-place Forgot password? step, and a footer link that switches to sign-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 authentication surface — no need to wire the sign-up or forgot-password links yourself.

Don’t want to mount it at all? The hosted portal serves this same component on a host under your own domain, configured from the dashboard instead of in code. The two approaches are compared in hosted pages or your own UI.

When to use

• Use <SignIn> for the standard hosted-style authentication card.
• Start it on the sign-up surface with defaultMode="sign-up".
• Use <LoginForm> only when you need a custom layout around the bare fields (no card, no footer, no toggles).

Usage

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

function App() {
  return (
    <>
      <SignedOut>
        <SignIn />
      </SignedOut>
      <SignedIn>
        <Dashboard />
      </SignedIn>
    </>
  );
}

Props

All optional: the card is fully wired by context.

Prop	Type	Description
defaultMode	'sign-in' | 'sign-up'	Which surface to open on. Defaults to 'sign-in'.
hideSignUp	boolean	Hide the “Sign up” link and refuse the sign-up surface, even when the environment allows sign-up. Use for sign-in-only surfaces (e.g. an invitation-accept page for an address that already has an account).
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).
onSignupStart	() => void	Fired when the sign-up request starts.
onSignupError	(error: ToriiError) => void	Fired on sign-up 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).
labels	Partial<ToriiSignupLabels>	Per-instance label overrides. Falls through to ToriiProvider labels.

The “Forgot password?” link is always present; the “Sign up” link is shown only when the environment allows sign-up (it is hidden under deployment lockdown, or when you pass hideSignUp). The links switch the card between its sign-in, sign-up, and forgot-password surfaces in place — no host wiring.

Behaviour

• Self-contained: one component renders the sign-in, sign-up, and forgot-password surfaces; the footer links toggle between them in place.
• 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/up does not redirect; auth.signIn flips the session state so your <SignedIn> gate swaps in-place. For explicit routing, navigate inside onLoginSuccess / onSignupSuccess. (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';