SignUp

<SignUp> is the prebuilt registration card, the sign-up counterpart to <SignIn>. It renders the heading, the sign-up form, the OAuth provider strip, and the “Powered by” footer, all wired from <ToriiProvider> context.

When to use

Render it inside <SignedOut> on your sign-up route. Pair it with <SignIn> and toggle between them, or give each its own page.

Usage

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

function SignUpPage() {
  return (
    <SignedOut>
      <SignUp onSignIn={() => navigate('/sign-in')} />
    </SignedOut>
  );
}

Props

All optional: the card is fully wired by context.

Prop	Type	Description
onSignIn	() => void	Called when the “Sign in” footer link is clicked. The link is hidden when omitted.
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.

Behaviour

• Runtime-gated: renders null until the SDK runtime is ready.
• OAuth continuation: if the page loads with a signup-continuation token in the URL fragment (the return leg of an OAuth sign-up), the card captures it once on mount and renders the sign-up continuation step (which collects legal consent, when the environment requires it) instead of the empty form, so a fragment clear mid-flow can’t bounce the user back to the start.
• Navigation: password sign-up does not redirect; the session state flips in-place, so render gates swap. For explicit routing, navigate inside onSignupSuccess. (afterOauthSignUpPath is for the OAuth callback only.)
• Email verification: when the environment requires email verification, submitting the form does not immediately create a session: it emails a 6-digit code and the card advances to a code-entry step, with a resend control. The session is created only after the code is verified. (The step is skipped for already-verified accounts, e.g. invitation flows.)

Theming

Honours the appearance prop on <ToriiProvider>. See theming and elements.

TypeScript

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