Skip to main content

​
<SignInForm />

Building a secure, robust authentication flow from scratch is notoriously difficult. The <SignInForm /> component eliminates this complexity by providing a complete, drop-in user interface that handles the entire authentication lifecycle. Instead of wiring up complex state machines to manage passwords, magic links, WebAuthn (passkeys), and OAuth redirects, you can simply mount this single component. The best part? It’s fully dynamic. If you decide to toggle “Enable Passkeys” or add “Sign in with GitHub” in your Wacht Dashboard, the UI instantly adapts—no code changes required.

​
Import

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

​
Usage

Drop the component into your dedicated sign-in boundary. For React Router applications, you typically render this on a specific route that unauthenticated users are directed to. 
import { SignInForm } from "@wacht/react-router";

export default function SignInRoute() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 p-4">
      <div className="w-full max-w-md">
        <SignInForm />
      </div>
    </div>
  );
}

​
How It Works Under the Hood

When a user interacts with the <SignInForm />, it orchestrates a secure, multi-step state machine against the Wacht API:
  1. Identification: The user enters their initial identifier—whether that’s an email address, username, or phone number.
  2. Strategy Resolution: The component securely queries the Wacht backend to determine which authentication strategies the user has enrolled in.
  3. Primary Challenge: The user completes their primary factor (e.g., verifying an email Magic Link, authenticating via a Passkey, or entering a traditional password).
  4. Step-Up (2FA): If two-factor authentication is globally enforced for your deployment or enabled for this specific user, the component seamlessly surfaces a secondary challenge (like an SMS or Authenticator App OTP).
  5. Session Promotion: Upon successful verification, a secure, HTTP-only session is established.

​
Routing & Redirection

Once authentication is complete, the user needs to be redirected into your application. Wacht intelligently evaluates the correct destination in this specific order of precedence:
  1. URL Query Parameter: If the user was redirected to the sign-in page from a protected route, the URL might contain an explicit destination, e.g., ?redirect_uri=/dashboard/settings.
  2. Dashboard Configuration: The After Sign-In URL configured in your deployment settings.
  3. Fallback: The root URL (/) of your application.

​
Need to build a custom UI?

The <SignInForm /> was designed to cover 95% of standard authentication use cases with a beautiful, secure default. However, if your design system strictly requires a highly bespoke layout (such as a multi-step modal flow deeply integrated into your app), you can bypass this pre-built component entirely. Instead, you can build your own interface and wire it directly into the Wacht state machine using our low-level React hooks: