Skip to main content

​
<SignInForm />

Building a secure and robust authentication flow from scratch can be a complex undertaking. The <SignInForm /> component eliminates this complexity by providing a comprehensive, drop-in user interface that securely manages the entire authentication lifecycle. Instead of engineering complex state machines to handle passwords, magic links, WebAuthn (passkeys), and OAuth redirects, you only need to mount this single component. Furthermore, the interface is fully dynamic. If you enable Passkeys or add a social provider like GitHub in your Wacht Dashboard, the UI instantly adapts—requiring no additional code changes.

​
Import

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

​
Usage

Drop the component into your dedicated sign-in component bound to a TanStack Router route. 
import { SignInForm } from "@wacht/tanstack-router";
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/sign-in')({
  component: SignInRoute,
});

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 a Custom Identity UI?

While the <SignInForm /> covers the vast majority of standard authentication use cases with a secure and pre-built design, your application may require a highly bespoke layout. If you are building a deeply custom authentication flow (such as a multi-step modal integrated directly into a unique design system), 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: