Low-level Forms

The drop-in cards (<SignIn>, <SignUp>, <ForgotPassword>) compose a bare form inside a styled card with a heading, the OAuth provider strip, and the “Powered by” footer. These low-level forms are those bare forms without the card chrome: reach for them only when you need a fully custom layout around the fields.

Everything else still comes from <ToriiProvider> context: API base URL, OAuth provider list, labels, theme. All four must be rendered inside <ToriiProvider>.

Reach for the cards first. Use these only when the card’s layout doesn’t fit your design.

Overview

Component	Card equivalent
<LoginForm>	<SignIn>
<SignupForm>	<SignUp>
<ForgotPasswordForm>	<ForgotPassword>

LoginForm

The bare two-step email/password sign-in form: email → password.

Usage

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

function CustomSignIn() {
  return (
    <SignedOut>
      <LoginForm onForgotPassword={() => navigate('/forgot-password')} />
    </SignedOut>
  );
}

Props

All optional: the form is fully wired by context.

Name	Type	Default	Description
onForgotPassword	() => void	None	Called when “Forgot password?” is clicked. The link is hidden when omitted.
onLoginStart	() => void	None	Fired when the sign-in request starts.
onLoginError	(error: ToriiError) => void	None	Fired on sign-in error.
onLoginSuccess	(tokens: AuthTokens) => void	None	Fired on successful sign-in. Password sign-in never navigates; route here (or rely on render gates).
labels	Partial<ToriiLoginLabels>	None	Per-instance label overrides. Falls through to ToriiProvider labels.

Behaviour

• Two-step flow: email → password, with a “use a different email” affordance on the password step.
• Auto sign-in: on success the form calls auth.signIn(tokens), so <SignedIn> flips immediately. Password sign-in does not redirect; route inside onLoginSuccess if you need to navigate.
• OAuth providers configured on the environment render below the fields automatically.
• Inline errors: invalid credentials, banned accounts, and network failures show inline. OAuth callback errors captured from the URL fragment are surfaced into the form’s error slot too.

SignupForm

The bare email/password sign-up form, with the legal-consent checkbox wired in when enabled on the environment.

Usage

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

function CustomSignUp() {
  return (
    <SignedOut>
      <SignupForm signInUrl="/sign-in" />
    </SignedOut>
  );
}

Props

All optional: the form is fully wired by context.

Name	Type	Default	Description
signInUrl	string	None	URL for the “Sign in” footer link. Omit to hide it. Renders an <a href> (full navigation), unlike <SignUp>’s onSignIn, which is an in-app callback.
onSignupStart	() => void	None	Fired when the sign-up request starts.
onSignupError	(error: ToriiError) => void	None	Fired on sign-up error.
onSignupSuccess	(tokens: AuthTokens) => void	None	Fired on successful sign-up. Password sign-up never navigates; route here (or rely on render gates).
labels	Partial<ToriiSignupLabels>	None	Per-instance label overrides. Falls through to ToriiProvider labels.

Behaviour

• Auto sign-in: once sign-up completes (after the 6-digit code is verified, when verification is required) the form calls auth.signIn(tokens), so render gates swap immediately. No redirect; route via onSignupSuccess.
• Email verification: when the server requires it, submitting does not create a session: it emails a 6-digit code and the form advances to a second step where the user enters the code, with a resend control. The session is created only after the code is verified. (If the account is already verified, e.g. invite flows, that step is skipped.)
• Signups disabled: when the environment disables sign-up, the form is replaced by a labeled fallback.
• OAuth providers render below the fields automatically.

ForgotPasswordForm

The bare multi-step password-reset form: email → reset code → new password.

Usage

import { ForgotPasswordForm } from '@torii-js/torii-react';

function CustomForgotPassword() {
  return <ForgotPasswordForm onBackToSignIn={() => navigate('/sign-in')} />;
}

Props

Name	Type	Default	Description
labels	Partial<ToriiSignupLabels>	None	Per-instance label overrides. Falls through to ToriiProvider labels.
onBackToSignIn	() => void	None	Called after a successful reset or when the user clicks “Back to sign in”.

Behaviour

• Three-step flow: request a code by email, enter the code, set the new password.
• Invalid-code and weak-password errors surface inline; on success a confirmation replaces the form.

Theming

All three forms honour the appearance prop on <ToriiProvider> (theme preset, token variables, per-slot elements). The form slots (formFieldLabel, formFieldInput, formFieldError, formError, formButtonPrimary, forgotPasswordLink) are the same ones the cards use, so overrides stay consistent across both. See theming and elements.

TypeScript

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