Skip to main content

​
<SignUpForm />

The <SignUpForm /> component provides a frictionless onboarding experience for new users. In modern identity systems, a secure registration flow is significantly more complex than simply saving a password to a database. You must cryptographically verify a user’s contact information before granting them access to your application. This component handles that entire lifecycle—from initial credential collection to verification and session establishment—safely and automatically.

​
Import

import { SignUpForm } from "@wacht/react-router";

​
Usage

Place the component on a dedicated public registration route. It will automatically render input fields based on the required attributes configured in your Wacht Dashboard. For example, if you require a user to provide a “First Name” and “Last Name”, those fields are instantly rendered with full validation. 
import { SignUpForm } from "@wacht/react-router";

export default function SignUpRoute() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 p-4">
      <div className="w-full max-w-md bg-white rounded-xl shadow-sm border border-zinc-200 p-6">
        <SignUpForm />
      </div>
    </div>
  );
}

​
The Verification Lifecycle

Unlike legacy sign-ups, modern identity platforms require strict contact verification to prevent spam and account takeover. Here is exactly what happens when a user registers via the <SignUpForm />:
  1. Collection: The user inputs their desired identifier (email address or phone number) alongside a strong password. If social providers (Google, GitHub) are enabled, they are prominently displayed as 1-click alternatives.
  2. Pre-Registration: Wacht securely creates an unverified “staged” user record in the backend.
  3. Delivery: If the user chose to sign up via email or phone, an OTP (One-Time Passcode) or Magic Link is immediately dispatched to their device.
  4. The Challenge: The component orchestrates a seamless UI transition to a verification modal, prompting the user for the code.
  5. Promotion: Once the code is verified cryptographically, Wacht promotes the staged record to an active User, establishes a secure HTTP-only browser session, and issues a redirect back into your application dashboard.

​
Need absolute design control?

If you are building a deeply immersive, multi-step onboarding wizard and need absolute, pixel-perfect control over every transition and generic input field, we recommend bypassing this pre-built component. Instead, utilize our primitive headless hooks to power your custom UI state: