Auth Components

import { SignInButton } from "@/features/auth/sign-in-button";

export default function Home() {
  return (
    <div>
      <SignInButton size="lg" variant="default" />
    </div>
  );
}

{
  user: {
    name?: string | null;
    email?: string | null;
    image?: string | null;
  }
}

import { LoggedInButton } from "@/features/auth/sign-in-button";

export default function Home() {
  const user = await getUser();
  if (!user) return null;

  return (
    <div>
      <LoggedInButton user={user} />
    </div>
  );
}

import { AuthButton } from "@/features/auth/auth-button";

export default function Header() {
  return (
    <div>
      <AuthButton />
    </div>
  );
}

import { AuthButtonClient } from "@/features/auth/auth-button-client";

export default function ClientHeader() {
  return (
    <div>
      <AuthButtonClient />
    </div>
  );
}

Logout

Logout is handled via the dropdown menu in LoggedInButton. UserDropdownLogout signs the user out and then does a full reload to the marketing home / (in production, https://trueroyalties.com/) — not to /auth/signin. Because signOut already clears the auth cookie, the server renders the public landing directly, with no auth-page flash.

To avoid the protected /app page briefly throwing "You need to be signed in" while the session tears down, a global LogoutOverlay (backed by a small Zustand store, logout-store.ts, and mounted in __root.tsx above every route error boundary) raises a full-screen curtain the instant Logout is clicked and keeps it up until the reload lands.

Sign-in & sign-up modals

Sign-in and sign-up are also available as intercepted modals so visitors can authenticate without leaving the page they're on.

• SignInDialog and SignUpDialog (src/features/auth/) are mounted once, globally, in src/routes/__root.tsx.
• Any <Link> opens them by setting the modal search param and masking the URL:
  • sign-in → search: { modal: "signin" }, mask={{ to: "/auth/signin" }}
  • sign-up → search: { modal: "signup" }, mask={{ to: "/auth/signup" }}
• On reload the mask resolves to the real /auth/signin or /auth/signup page.
• The switch links swap modal-to-modal: "Sign up" inside the sign-in modal opens the sign-up modal, and vice-versa (SignInProviders accepts a variant="modal" for this). The standalone /auth/signin page keeps its page-to-page link (variant="page", the default).

SignInButton and the landing "Start free" CTAs use this modal pattern.

Email verification & WelcomeCelebration

After sign-up, email/password accounts land on /auth/verify to enter the emailed 6-digit code. On success, instead of a toast, the page shows a full-screen WelcomeCelebration (src/features/auth/welcome-celebration.tsx): a rainbow canvas-confetti burst plus a large spring-animated "Welcome" (via motion). It holds briefly, fades out, then calls onComplete to navigate into the app.

Props:

{
  title?: string;        // default "Welcome"
  subtitle?: string;     // default product tagline
  onComplete?: () => void; // fired once, after the fade-out
  durationMs?: number;   // hold before the fade — default 2600
}