Skip to content
Snapshot Docs

Login Page

A production-ready login page with every auth method. Copy this into your project and customize.

The full login page

Section titled “The full login page”
import { createSnapshot, isMfaChallenge } from "@lastshotlabs/snapshot";
import {
  InputField,
  ButtonBase,
  CardBase,
  OAuthButtonsBase,
  PasskeyButtonBase,
  RowBase,
  ColumnBase,
  AlertBase,
} from "@lastshotlabs/snapshot/ui";
import { useState, useEffect } from "react";


const snap = createSnapshot({
  apiUrl: "/api",
  loginPath: "/login",
  homePath: "/",
  auth: {
    providers: {
      google: {
        type: "google",
        clientId: "YOUR_GOOGLE_CLIENT_ID",
        scopes: ["email", "profile"],
        callbackPath: "/auth/callback",
      },
      github: {
        type: "github",
        clientId: "YOUR_GITHUB_CLIENT_ID",
        scopes: ["user:email"],
        callbackPath: "/auth/callback",
      },
    },
  },
});


export function LoginPage() {
  const {
    mutate: login,
    isPending,
    error: loginError,
    reset,
  } = snap.useLogin();
  const {
    mutate: verify,
    isPending: verifying,
    error: verifyError,
  } = snap.useMfaVerify();
  const challenge = snap.usePendingMfaChallenge();
  const { mutate: getPasskeyOptions } = snap.usePasskeyLoginOptions();
  const { mutate: passkeyLogin } = snap.usePasskeyLogin();


  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [mfaCode, setMfaCode] = useState("");
  const [passkeyError, setPasskeyError] = useState<string | null>(null);
  const [view, setView] = useState<"login" | "forgot" | "register">("login");


  // ── MFA verification ──────────────────────────────────────────────────
  if (challenge) {
    return (
      <CenteredCard title="Two-factor authentication">
        <p style={{ color: "var(--sn-color-muted-foreground)" }}>
          Enter the code from your{" "}
          {challenge.mfaMethods[0] === "totp" ? "authenticator app" : "email"}.
        </p>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            verify({ code: mfaCode, method: challenge.mfaMethods[0] });
          }}
        >
          <ColumnBase gap="md">
            <InputField
              label="Verification code"
              value={mfaCode}
              onChange={setMfaCode}
              placeholder="000000"
              maxLength={6}
            />
            {verifyError && (
              <AlertBase severity="error">
                {snap.formatAuthError(verifyError)}
              </AlertBase>
            )}
            <ButtonBase
              label={verifying ? "Verifying..." : "Verify"}
              type="submit"
              disabled={verifying || !mfaCode}
              fullWidth
            />
          </ColumnBase>
        </form>
      </CenteredCard>
    );
  }


  // ── Forgot password ───────────────────────────────────────────────────
  if (view === "forgot") {
    return <ForgotPasswordView onBack={() => setView("login")} />;
  }


  // ── Registration ──────────────────────────────────────────────────────
  if (view === "register") {
    return <RegisterView onBack={() => setView("login")} />;
  }


  // ── Login ─────────────────────────────────────────────────────────────
  return (
    <CenteredCard title="Sign in">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          reset(); // clear previous errors
          setPasskeyError(null);
          login({ email, password });
        }}
      >
        <ColumnBase gap="md">
          <InputField
            label="Email"
            type="email"
            value={email}
            onChange={setEmail}
            required
          />
          <InputField
            label="Password"
            type="password"
            value={password}
            onChange={setPassword}
            required
          />
          {loginError && (
            <AlertBase severity="error">
              {snap.formatAuthError(loginError)}
            </AlertBase>
          )}
          <ButtonBase
            label={isPending ? "Signing in..." : "Sign in"}
            type="submit"
            disabled={isPending}
            fullWidth
          />
        </ColumnBase>
      </form>


      <Divider />


      <OAuthButtonsBase
        providers={[
          {
            name: "google",
            label: "Continue with Google",
            url: snap.getOAuthUrl("google"),
          },
          {
            name: "github",
            label: "Continue with GitHub",
            url: snap.getOAuthUrl("github"),
          },
        ]}
        onProviderClick={(url) => {
          window.location.href = url;
        }}
      />


      <PasskeyButtonBase
        label="Sign in with passkey"
        onClick={() => {
          setPasskeyError(null);
          getPasskeyOptions(
            {},
            {
              onSuccess: async (response) => {
                try {
                  const assertion = await navigator.credentials.get({
                    publicKey: response.options as any,
                  });
                  if (assertion) {
                    const rawId = new Uint8Array((assertion as any).rawId);
                    const authData = new Uint8Array(
                      (assertion as any).response.authenticatorData,
                    );
                    const clientData = new Uint8Array(
                      (assertion as any).response.clientDataJSON,
                    );
                    const sig = new Uint8Array(
                      (assertion as any).response.signature,
                    );
                    passkeyLogin({
                      id: assertion.id,
                      rawId: btoa(String.fromCharCode(...rawId)),
                      response: {
                        authenticatorData: btoa(
                          String.fromCharCode(...authData),
                        ),
                        clientDataJSON: btoa(
                          String.fromCharCode(...clientData),
                        ),
                        signature: btoa(String.fromCharCode(...sig)),
                      },
                    });
                  }
                } catch (err) {
                  if ((err as Error).name !== "NotAllowedError") {
                    setPasskeyError(
                      "Passkey authentication failed. Try another method.",
                    );
                  }
                  // NotAllowedError = user cancelled the prompt, not an error
                }
              },
              onError: () => {
                setPasskeyError(
                  "Could not start passkey login. Your browser may not support it.",
                );
              },
            },
          );
        }}
      />


      {passkeyError && <AlertBase severity="error">{passkeyError}</AlertBase>}


      <RowBase justify="between">
        <ButtonBase
          label="Forgot password?"
          variant="link"
          onClick={() => setView("forgot")}
        />
        <ButtonBase
          label="Create account"
          variant="link"
          onClick={() => setView("register")}
        />
      </RowBase>
    </CenteredCard>
  );
}


// ── Registration Form ─────────────────────────────────────────────────────


function RegisterView({ onBack }: { onBack: () => void }) {
  const { mutate: register, isPending, error } = snap.useRegister();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");


  const passwordMismatch = confirm.length > 0 && confirm !== password;


  return (
    <CenteredCard title="Create account">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (passwordMismatch) return;
          register({ name, email, password });
        }}
      >
        <ColumnBase gap="md">
          <InputField
            label="Full name"
            value={name}
            onChange={setName}
            required
          />
          <InputField
            label="Email"
            type="email"
            value={email}
            onChange={setEmail}
            required
          />
          <InputField
            label="Password"
            type="password"
            value={password}
            onChange={setPassword}
            required
          />
          <InputField
            label="Confirm password"
            type="password"
            value={confirm}
            onChange={setConfirm}
            required
            errorText={passwordMismatch ? "Passwords don't match" : undefined}
          />
          {error && (
            <AlertBase severity="error">
              {snap.formatAuthError(error)}
            </AlertBase>
          )}
          <ButtonBase
            label={isPending ? "Creating account..." : "Create account"}
            type="submit"
            disabled={isPending || passwordMismatch}
            fullWidth
          />
        </ColumnBase>
      </form>
      <ButtonBase
        label="Already have an account? Sign in"
        variant="link"
        onClick={onBack}
      />
    </CenteredCard>
  );
}


// ── Forgot Password ───────────────────────────────────────────────────────


function ForgotPasswordView({ onBack }: { onBack: () => void }) {
  const {
    mutate: forgot,
    isSuccess,
    isPending,
    error,
  } = snap.useForgotPassword();
  const [email, setEmail] = useState("");


  if (isSuccess) {
    return (
      <CenteredCard title="Check your email">
        <p>
          We sent a password reset link to <strong>{email}</strong>. It expires
          in 1 hour.
        </p>
        <ButtonBase
          label="Back to sign in"
          variant="outline"
          onClick={onBack}
          fullWidth
        />
      </CenteredCard>
    );
  }


  return (
    <CenteredCard title="Reset password">
      <p style={{ color: "var(--sn-color-muted-foreground)" }}>
        Enter your email and we'll send a reset link.
      </p>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          forgot({ email });
        }}
      >
        <ColumnBase gap="md">
          <InputField
            label="Email"
            type="email"
            value={email}
            onChange={setEmail}
            required
          />
          {error && (
            <AlertBase severity="error">
              {snap.formatAuthError(error)}
            </AlertBase>
          )}
          <ButtonBase
            label={isPending ? "Sending..." : "Send reset link"}
            type="submit"
            disabled={isPending || !email}
            fullWidth
          />
        </ColumnBase>
      </form>
      <ButtonBase label="Back to sign in" variant="link" onClick={onBack} />
    </CenteredCard>
  );
}


// ── OAuth Callback Page ───────────────────────────────────────────────────


/**
 * Mount this component at your redirectUri (e.g. /auth/callback).
 * It reads the `code` and `provider` params, exchanges them for a session,
 * and redirects to homePath on success.
 */
export function OAuthCallbackPage() {
  const { mutate: exchange, error, isPending } = snap.useOAuthExchange();
  const params = new URLSearchParams(window.location.search);
  const code = params.get("code");
  const provider = params.get("provider") ?? params.get("state") ?? "google";


  useEffect(() => {
    if (code) exchange({ code, provider });
  }, []);


  if (error) {
    return (
      <CenteredCard title="Sign-in failed">
        <AlertBase severity="error">{snap.formatAuthError(error)}</AlertBase>
        <ButtonBase
          label="Try again"
          onClick={() => (window.location.href = "/login")}
          fullWidth
        />
      </CenteredCard>
    );
  }


  return (
    <CenteredCard title="Signing you in...">
      <p style={{ color: "var(--sn-color-muted-foreground)" }}>
        {isPending ? "Completing sign-in..." : "Redirecting..."}
      </p>
    </CenteredCard>
  );
}


// ── Shared Components ─────────────────────────────────────────────────────


function CenteredCard({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        minHeight: "100vh",
        padding: "1rem",
      }}
    >
      <CardBase
        title={title}
        style={{ width: "100%", maxWidth: "420px" }}
        gap="lg"
      >
        {children}
      </CardBase>
    </div>
  );
}


function Divider() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "1rem",
        margin: "0.5rem 0",
      }}
    >
      <hr
        style={{
          flex: 1,
          border: "none",
          borderTop: "1px solid var(--sn-color-border)",
        }}
      />
      <span
        style={{
          color: "var(--sn-color-muted-foreground)",
          fontSize: "0.875rem",
        }}
      >
        or
      </span>
      <hr
        style={{
          flex: 1,
          border: "none",
          borderTop: "1px solid var(--sn-color-border)",
        }}
      />
    </div>
  );
}

What this includes

Section titled “What this includes”
  • Email/password login with formatAuthError error display
  • MFA verification with TOTP and email OTP support
  • Google and GitHub OAuth with proper OAuthProvider objects
  • Passkey/WebAuthn login with try-catch for browser errors
  • Registration form with password confirmation
  • Forgot password flow with success confirmation
  • OAuth callback page that exchanges the auth code for a session

Adding the OAuth callback route

Section titled “Adding the OAuth callback route”

Mount OAuthCallbackPage at whatever path you set for the provider callbackPath. With TanStack Router:

routes/auth/callback.tsx
import { createFileRoute } from "@tanstack/react-router";
import { OAuthCallbackPage } from "./login";


export const Route = createFileRoute("/auth/callback")({
  component: OAuthCallbackPage,
});

Customizing

Section titled “Customizing”
  • Add providers — add objects to the providers array with { name, label, url }
  • Remove passkeys — delete the PasskeyButtonBase section
  • Remove OAuth — delete the OAuthButtonsBase section and OAuth config
  • Custom redirect — pass redirectTo to login(): login({ email, password, redirectTo: "/onboarding" })
  • Email verification — after registration, redirect to a verification page that calls snap.useVerifyEmail()
Section titled “Related”