feat(auth): add signup route and refactor auth form with state machine (#2148)

Author: AchuAshwath

.env

@@ -18,7 +18,7 @@ GOOGLE_CLOUD_PROJECT=kriasoft
 GOOGLE_CLOUD_REGION=us-central1
 
 # Database
-# https://console.neon.tech/
+# https://get.neon.com/HD157BR (referral — helps support this project)
 DATABASE_URL=postgres://postgres:postgres@localhost:5432/example
 
 # Cloudflare Hyperdrive for local development

README.md

@@ -61,7 +61,7 @@ Be sure to join our [Discord channel](https://discord.gg/2nKEnKq) for assistance
 ### Database & ORM
 
 - [Drizzle ORM](https://orm.drizzle.team/) — TypeScript ORM with excellent DX
-- [Neon PostgreSQL](https://neon.tech/) — Serverless PostgreSQL database
+- [Neon PostgreSQL](https://get.neon.com/HD157BR) — Serverless PostgreSQL (referral — supports the project)
 
 ### Development Tools
 

apps/app/components/auth/auth-error-boundary.tsx

@@ -1,61 +1,31 @@
+import { getErrorMessage, isUnauthenticatedError } from "@/lib/errors";
 import { sessionQueryKey } from "@/lib/queries/session";
-import { queryClient } from "@/lib/query";
 import { Button } from "@repo/ui";
-import { useQueryErrorResetBoundary } from "@tanstack/react-query";
+import {
+  useQueryClient,
+  useQueryErrorResetBoundary,
+} from "@tanstack/react-query";
 import { AlertCircle } from "lucide-react";
-import * as React from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
-interface AuthErrorFallbackProps {
-  error: Error;
+interface ResetProps {
   resetErrorBoundary: () => void;
 }
 
-// Error type that may include status code
-// NOTE: This extends Error to handle both tRPC errors (with status) and native JS errors
-interface ErrorWithStatus extends Error {
-  status?: number;
-}
-
-// Determine if an error is authentication-related
-// WARNING: This function must catch all auth errors to prevent infinite error loops
-// when wrapped components try to access protected resources
-function isAuthError(error: Error): boolean {
-  // Check for explicit status codes
-  const status = (error as ErrorWithStatus)?.status;
-  if (status === 401 || status === 403) return true;
+// Fallback for auth errors in protected routes
+function AuthErrorFallback({ resetErrorBoundary }: ResetProps) {
+  const queryClient = useQueryClient();
 
-  // Check for auth-related error messages
-  const message = error.message?.toLowerCase() || "";
-  return (
-    message.includes("unauthorized") ||
-    message.includes("unauthenticated") ||
-    message.includes("session expired") ||
-    message.includes("401") ||
-    message.includes("403")
-  );
-}
-
-// Fallback component for auth errors
-function AuthErrorFallback({
-  error,
-  resetErrorBoundary,
-}: AuthErrorFallbackProps) {
   const handleRetry = () => {
-    // Reset React Query errors and component errors
-    // NOTE: resetQueries() clears error state but preserves cached data,
-    // allowing immediate retry without full data refetch
-    queryClient.resetQueries();
+    queryClient.resetQueries({ queryKey: sessionQueryKey });
     resetErrorBoundary();
   };
 
   const handleSignIn = () => {
-    // Clear auth caches and redirect to login
-    // WARNING: removeQueries() permanently deletes cached auth data.
-    // Using window.location.href (not router navigation) ensures full page reload,
-    // clearing all React state that might hold stale auth tokens
-    queryClient.removeQueries({ queryKey: ["auth"] });
-    window.location.href = "/login";
+    queryClient.removeQueries({ queryKey: sessionQueryKey });
+    const { pathname, search, hash } = window.location;
+    const returnTo = encodeURIComponent(pathname + search + hash);
+    window.location.href = `/login?returnTo=${returnTo}`;
   };
 
   return (
@@ -64,10 +34,7 @@ function AuthErrorFallback({
         <AlertCircle className="mx-auto mb-4 h-12 w-12 text-destructive" />
         <h1 className="mb-2 text-2xl font-bold">Authentication Required</h1>
         <p className="mb-6 text-muted-foreground">
-          {error.message === "Unauthorized" ||
-          (error as ErrorWithStatus)?.status === 401
-            ? "Your session has expired. Please sign in again."
-            : "You need to sign in to access this page."}
+          Please sign in to access this page.
         </p>
         <div className="flex justify-center gap-3">
           <Button variant="outline" onClick={handleRetry}>
@@ -80,53 +47,61 @@ function AuthErrorFallback({
   );
 }
 
-interface AuthErrorBoundaryProps {
-  children: React.ReactNode;
+interface ErrorFallbackProps {
+  error: unknown;
+  resetErrorBoundary: () => void;
 }
 
-// General error fallback that handles both auth and other errors
-// This wrapper ensures auth errors get special UI treatment while preserving
-// generic error handling for all other failures
-function ErrorFallbackWrapper({
+// Generic error fallback for non-auth errors
+function GenericErrorFallback({
   error,
   resetErrorBoundary,
-}: AuthErrorFallbackProps) {
-  // If it's not an auth error, show a generic error message
-  if (!isAuthError(error)) {
-    return (
-      <div className="flex min-h-svh flex-col items-center justify-center p-6">
-        <div className="mx-auto max-w-md text-center">
-          <AlertCircle className="mx-auto mb-4 h-12 w-12 text-destructive" />
-          <h1 className="mb-2 text-2xl font-bold">Something went wrong</h1>
-          <p className="mb-6 text-muted-foreground">
-            {error.message || "An unexpected error occurred"}
-          </p>
-          <Button onClick={resetErrorBoundary}>Try Again</Button>
-        </div>
+}: ErrorFallbackProps) {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center p-6">
+      <div className="mx-auto max-w-md text-center">
+        <AlertCircle className="mx-auto mb-4 h-12 w-12 text-destructive" />
+        <h1 className="mb-2 text-2xl font-bold">Something went wrong</h1>
+        <p className="mb-6 text-muted-foreground">{getErrorMessage(error)}</p>
+        <Button onClick={resetErrorBoundary}>Try Again</Button>
       </div>
-    );
-  }
+    </div>
+  );
+}
 
-  // For auth errors, use the auth-specific UI
-  return (
-    <AuthErrorFallback error={error} resetErrorBoundary={resetErrorBoundary} />
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+// Routes auth errors to AuthErrorFallback, others to GenericErrorFallback
+function AuthAwareErrorFallback({
+  error,
+  resetErrorBoundary,
+}: ErrorFallbackProps) {
+  return isUnauthenticatedError(error) ? (
+    <AuthErrorFallback resetErrorBoundary={resetErrorBoundary} />
+  ) : (
+    <GenericErrorFallback
+      error={error}
+      resetErrorBoundary={resetErrorBoundary}
+    />
   );
 }
 
-// Modern auth error boundary using react-error-boundary
-export function AuthErrorBoundary({ children }: AuthErrorBoundaryProps) {
+// Auth error boundary for protected routes only.
+// Catches auth errors (tRPC UNAUTHORIZED or HTTP 401) and shows recovery UI.
+// 403 (forbidden) falls through to generic handler since user IS authenticated.
+export function AuthErrorBoundary({ children }: ErrorBoundaryProps) {
+  const queryClient = useQueryClient();
   const { reset } = useQueryErrorResetBoundary();
 
   return (
     <ErrorBoundary
-      FallbackComponent={ErrorFallbackWrapper}
+      FallbackComponent={AuthAwareErrorFallback}
       onReset={reset}
-      onError={(error, errorInfo) => {
-        console.error("Error caught by boundary:", error, errorInfo);
-        // Clear stale session data for auth errors
-        // NOTE: sessionQueryKey is imported from queries/session - ensures we clear
-        // the exact query key used by useSession() hook to prevent stale auth state
-        if (isAuthError(error)) {
+      onError={(error) => {
+        console.error("Error caught by boundary:", error);
+        if (isUnauthenticatedError(error)) {
           queryClient.removeQueries({ queryKey: sessionQueryKey });
         }
       }}
@@ -135,3 +110,18 @@ export function AuthErrorBoundary({ children }: AuthErrorBoundaryProps) {
     </ErrorBoundary>
   );
 }
+
+// Generic error boundary for app root - no auth-specific handling
+export function AppErrorBoundary({ children }: ErrorBoundaryProps) {
+  const { reset } = useQueryErrorResetBoundary();
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={GenericErrorFallback}
+      onReset={reset}
+      onError={(error) => console.error("Uncaught error:", error)}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}