patterns

SignUpPage

Ready-made sign-up screen — name + email + password, optional OAuth row, terms link, sign-in escape-hatch. Drop-in for any product. Auth-provider-agnostic — wire onSignUp / onOAuth to Better Auth, Clerk, Supabase, anything.

Symmetric to <LoginPage>. The host doesn't compose this from primitives — it imports and mounts. The form uses the same AuthShell layout (centered single column, brand top-left, terms footer) so all auth screens read as one family.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/sign-up-page.json

Or import from the workspace package:

import { SignUpPage, SignUpPageProps } from "@8maverik8/auth";

Examples

Default with Google OAuth

Live preview embedded inside the doc page. Submit creates a fake delay; in production wire onSignUp to `signUp.email` from your Better Auth client.

import { SignUpPage } from "@8maverik8/auth";
import { signUp } from "@/lib/auth-client";

<SignUpPage
  wordmark="archi"
  title="Create your Archi account"
  subtitle="OAPPS internal compliance platform — invite-only."
  showGitHub={false}
  onSignUp={async ({ email, password, name }) => {
    const res = await signUp.email({ email, password, name });
    if (res.error) return { error: res.error.message ?? "Sign-up failed." };
    return { error: null };
  }}
  onOAuth={async (provider, next) => {
    await signIn.social({ provider, callbackURL: next });
    return { error: null };
  }}
/>

Guidelines

Use the high-level <SignUpPage> instead of composing AuthShell + AuthField + PasswordField + SubmitButton by hand.Hand-rolled forms drift in spacing, validation, error styling. The high-level component locks all of it.
Add a workspace-name / company field to this component.Multi-step onboarding (account → org → invite teammates) is a separate flow. SignUpPage covers the first step only.
Pass `showGitHub={false}` if your product only has Google SSO enabled (or vice versa).