create-stackr 0.2.0 → 0.3.0

package/templates/features/web/auth/app/{(app) → (protected)}/dashboard/dashboard-client.tsx.ejs

@@ -21,7 +21,6 @@ export function DashboardClient({ user }: DashboardClientProps) {
     try {
       await signOut();
       router.push("/login");
-      router.refresh();
     } catch (error) {
       console.error("Sign out error:", error);
       setIsSigningOut(false);
@@ -139,6 +138,47 @@ export function DashboardClient({ user }: DashboardClientProps) {
               />
             </svg>
           </Link>
+<% if (features.authentication.twoFactor) { %>
+          <Link
+            href="/settings/security"
+            className="flex items-center justify-between p-3 rounded-lg hover:bg-muted/50 transition-colors group"
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-lg bg-muted/50 dark:bg-muted/30 flex items-center justify-center group-hover:bg-muted transition-colors">
+                <svg
+                  className="w-5 h-5 text-muted-foreground"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <span className="font-medium">Security Settings</span>
+                <p className="text-sm text-muted-foreground">Two-factor authentication</p>
+              </div>
+            </div>
+            <svg
+              className="w-5 h-5 text-muted-foreground group-hover:translate-x-0.5 transition-transform"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </Link>
+<% } %>
         </div>
       </div>
 <% } %>

package/templates/features/web/auth/app/{(app) → (protected)}/dashboard/page.tsx.ejs

@@ -4,8 +4,10 @@ import { DashboardClient } from "./dashboard-client";
 
 export default async function DashboardPage() {
   const session = await getSession();
+
+  // Handle concurrent rendering - layout redirects but page may render first
   if (!session) {
-    redirect("/login?redirect=/dashboard");
+    redirect("/auth/session-expired");
   }
 
   return (

package/templates/features/web/auth/app/(protected)/layout.tsx.ejs

@@ -0,0 +1,67 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getSession } from "@/lib/auth/actions";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+export default async function ProtectedLayout({ children }: { children: React.ReactNode }) {
+  const session = await getSession();
+
+  // CRITICAL: Use route handler to properly clear stale cookies
+  // Direct redirect("/login") doesn't clear browser cookies because Server Components
+  // can't send Set-Cookie headers. This causes infinite redirect loops when:
+  // 1. User has stale cookie
+  // 2. Backend returns 401
+  // 3. Redirect to /login
+  // 4. Proxy sees cookie, redirects back to /dashboard
+  // 5. Loop repeats
+  if (!session) {
+    redirect("/auth/session-expired");
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col bg-background">
+      {/* App Header - matching landing page style */}
+      <header className="w-full border-b bg-background/80 backdrop-blur-sm sticky top-0 z-50">
+        <div className="max-w-4xl mx-auto px-6 h-16 flex items-center justify-between">
+          <div className="flex items-center gap-8">
+            <Link href="/dashboard" className="text-xl font-semibold tracking-tight">
+              <%= projectName %>
+            </Link>
+            <nav className="hidden sm:flex items-center gap-6">
+              <Link
+                href="/dashboard"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Dashboard
+              </Link>
+<% if (features.sessionManagement) { %>
+              <Link
+                href="/settings/sessions"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Sessions
+              </Link>
+<% } %>
+<% if (features.authentication.twoFactor) { %>
+              <Link
+                href="/settings/security"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Security
+              </Link>
+<% } %>
+            </nav>
+          </div>
+          <ThemeToggle />
+        </div>
+      </header>
+
+      {/* Main content area */}
+      <main className="flex-1">
+        <div className="max-w-4xl mx-auto px-6 py-8">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}

package/templates/features/web/auth/app/(protected)/settings/security/page.tsx.ejs

@@ -0,0 +1,19 @@
+import { getSession } from "@/lib/auth/actions";
+import { SecuritySettings } from "./security-settings";
+
+export default async function SecurityPage() {
+  // Session is guaranteed by (protected) layout - it redirects if not authenticated
+  const session = (await getSession())!;
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-bold tracking-tight">Security Settings</h1>
+        <p className="text-muted-foreground">
+          Manage your account security settings including two-factor authentication.
+        </p>
+      </div>
+      <SecuritySettings user={session.user} />
+    </div>
+  );
+}

package/templates/features/web/auth/app/(protected)/settings/security/security-settings.tsx.ejs

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { TwoFactorSetup } from '@/components/settings/two-factor-setup';
+import { TwoFactorManage } from '@/components/settings/two-factor-manage';
+import { SetPasswordForm } from '@/components/settings/set-password-form';
+import { checkHasPassword, type User } from '@/lib/auth/actions';
+import { Loader2 } from 'lucide-react';
+
+interface SecuritySettingsProps {
+  user: User;
+}
+
+type SetupStep = 'idle' | 'checking' | 'set-password' | 'setup-2fa';
+
+export function SecuritySettings({ user }: SecuritySettingsProps) {
+  const router = useRouter();
+  const [setupStep, setSetupStep] = useState<SetupStep>('idle');
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState(user.twoFactorEnabled);
+
+  const handleEnableClick = async () => {
+    setSetupStep('checking');
+    const { hasPassword } = await checkHasPassword();
+    setSetupStep(hasPassword ? 'setup-2fa' : 'set-password');
+  };
+
+  // Show loading state while checking password
+  if (setupStep === 'checking') {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  // Show set password form for OAuth users
+  if (setupStep === 'set-password') {
+    return (
+      <SetPasswordForm
+        onComplete={() => setSetupStep('setup-2fa')}
+        onCancel={() => setSetupStep('idle')}
+      />
+    );
+  }
+
+  // Show 2FA setup form
+  if (setupStep === 'setup-2fa') {
+    return (
+      <TwoFactorSetup
+        onComplete={() => {
+          setSetupStep('idle');
+          setTwoFactorEnabled(true);
+          router.refresh();
+        }}
+      />
+    );
+  }
+
+  // Default: show 2FA manage (enable/disable) UI
+  return (
+    <div className="space-y-6">
+      <TwoFactorManage
+        enabled={twoFactorEnabled}
+        onSetupClick={handleEnableClick}
+        onDisabled={() => {
+          setTwoFactorEnabled(false);
+          router.refresh();
+        }}
+      />
+    </div>
+  );
+}

package/templates/features/web/auth/app/{(app) → (protected)}/settings/sessions/page.tsx.ejs

@@ -1,14 +1,10 @@
-import { redirect } from "next/navigation";
 import { getSession } from "@/lib/auth/actions";
 import { listSessions } from "@/lib/auth/sessions";
 import { SessionsClient } from "./sessions-client";
 
 export default async function SessionsPage() {
-  const authSession = await getSession();
-  if (!authSession) {
-    redirect("/login?redirect=/settings/sessions");
-  }
-
+  // Session is guaranteed by (protected) layout - it redirects if not authenticated
+  const authSession = (await getSession())!;
   const { sessions } = await listSessions();
 
   return (

package/templates/features/web/auth/app/auth/callback/route.ts.ejs

@@ -93,7 +93,11 @@ export async function GET(request: NextRequest) {
       return response;
     }
 
-    const { session_token } = await exchangeResponse.json();
+    const data = await exchangeResponse.json();
+
+    // Note: We trust OAuth providers for 2FA - they typically handle 2FA themselves.
+    // Better Auth by design doesn't support 2FA for OAuth users.
+    const { session_token } = data;
 
     // Success! Create response with session cookie and redirect to dashboard
     const response = NextResponse.redirect(new URL('/dashboard', baseUrl));

package/templates/features/web/auth/app/auth/session-expired/route.ts.ejs

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { COOKIE_NAMES } from '@/lib/auth/config';
+
+/**
+ * Session Expiration Route Handler
+ *
+ * CRITICAL: We use a Route Handler because:
+ * - Route Handlers can delete cookies that are sent to the browser
+ * - Server Components that call redirect() never send Set-Cookie headers
+ * - This prevents infinite redirect loops with stale cookies
+ *
+ * Flow:
+ * 1. Protected layout detects invalid session (backend returns 401)
+ * 2. Layout redirects to this route handler
+ * 3. This handler clears the session cookie (browser receives Set-Cookie header)
+ * 4. Redirects to /login with error message
+ * 5. User can log in fresh - no more stale cookie causing loops
+ */
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const callbackUrl = searchParams.get('callbackUrl');
+
+  // Build login URL with error message
+  const loginUrl = new URL('/login', request.url);
+  loginUrl.searchParams.set('error', 'session_expired');
+  if (callbackUrl) {
+    loginUrl.searchParams.set('redirect', callbackUrl);
+  }
+
+  // Create redirect response
+  const response = NextResponse.redirect(loginUrl);
+
+  // CRITICAL: Clear session cookie - Route Handler properly sends Set-Cookie header
+  // This is the key difference from Server Components where cookies().delete() only
+  // affects the server-side cookie jar and doesn't send headers to the browser
+  response.cookies.delete(COOKIE_NAMES.SESSION);
+
+  return response;
+}

package/templates/features/web/auth/app/auth/two-factor-expired/route.ts.ejs

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { COOKIE_NAMES } from '@/lib/auth/config';
+
+/**
+ * Route handler for 2FA session expiration
+ * Clears all 2FA-related cookies and redirects to login with error message
+ */
+export async function GET(request: NextRequest) {
+  const loginUrl = new URL('/login', request.url);
+  loginUrl.searchParams.set('error', 'two_factor_expired');
+
+  const response = NextResponse.redirect(loginUrl);
+
+  // Clear 2FA cookies
+  response.cookies.delete(COOKIE_NAMES.TWO_FACTOR);
+  response.cookies.delete(COOKIE_NAMES.TWO_FACTOR_EXPIRES_AT);
+
+  // Clear session cookie (the temporary 2FA session is no longer valid)
+  response.cookies.delete(COOKIE_NAMES.SESSION);
+
+  return response;
+}

package/templates/features/web/auth/components/auth/login-form.tsx.ejs

@@ -28,10 +28,28 @@ export function LoginForm({ redirectTo = "/dashboard" }: LoginFormProps) {
 
     try {
       const result = await signIn(email, password);
+
+<% if (features.authentication.twoFactor) { %>
+      // Check if 2FA is required
+      if (result.requiresTwoFactor) {
+        router.push('/login/two-factor');
+        return;
+      }
+<% } %>
+
+<% if (features.authentication.emailVerification) { %>
+      // Check if email verification is needed (can happen on success)
+      if (result.needsEmailVerification) {
+        router.push(`/verify-email?email=${encodeURIComponent(email)}`);
+        return;
+      }
+<% } %>
+
       if (!result.success) {
         setError(result.error || "Failed to sign in");
         return;
       }
+
       if (result.session) setSession(result.session);
       router.push(redirectTo);
       router.refresh();

package/templates/features/web/auth/components/auth/two-factor-verify.tsx.ejs

@@ -0,0 +1,173 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { verifyTotpLogin, verifyBackupCode } from '@/lib/auth/actions';
+import { useAuthStore } from '@/store/auth.store';
+
+interface TwoFactorVerifyProps {
+  redirectTo?: string;
+  expiresAt?: number | null;
+}
+
+export function TwoFactorVerify({
+  redirectTo = '/dashboard',
+  expiresAt
+}: TwoFactorVerifyProps) {
+  const router = useRouter();
+  const setSession = useAuthStore((s) => s.setSession);
+  const [code, setCode] = useState('');
+  const [trustDevice, setTrustDevice] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [useBackupCode, setUseBackupCode] = useState(false);
+
+  // Single delayed redirect at exact expiration time
+  useEffect(() => {
+    if (!expiresAt) return;
+
+    const now = Math.floor(Date.now() / 1000);
+    const remainingMs = (expiresAt - now) * 1000;
+
+    // Already expired
+    if (remainingMs <= 0) {
+      router.push('/auth/two-factor-expired');
+      return;
+    }
+
+    // Schedule redirect at exact expiration time
+    const timeout = setTimeout(() => {
+      router.push('/auth/two-factor-expired');
+    }, remainingMs);
+
+    return () => clearTimeout(timeout);
+  }, [expiresAt, router]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!code) {
+      toast.error('Please enter a code');
+      return;
+    }
+
+    // Check if expired before submitting
+    if (expiresAt) {
+      const now = Math.floor(Date.now() / 1000);
+      if (now >= expiresAt) {
+        router.push('/auth/two-factor-expired');
+        return;
+      }
+    }
+
+    setIsLoading(true);
+
+    const result = useBackupCode
+      ? await verifyBackupCode(code)
+      : await verifyTotpLogin(code, trustDevice);
+
+    setIsLoading(false);
+
+    if (!result.success) {
+      const errorLower = (result.error || '').toLowerCase();
+      if (
+        errorLower.includes('expired') ||
+        errorLower.includes('invalid session') ||
+        errorLower.includes('two factor')
+      ) {
+        router.push('/auth/two-factor-expired');
+        return;
+      }
+
+      toast.error(result.error || 'Invalid code');
+      return;
+    }
+
+    if (result.session) {
+      setSession(result.session);
+    }
+
+    router.push(redirectTo);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2 text-center">
+        <h2 className="text-2xl font-bold">
+          {useBackupCode ? 'Enter Backup Code' : 'Two-Factor Authentication'}
+        </h2>
+        <p className="text-muted-foreground">
+          {useBackupCode
+            ? 'Enter one of your backup codes to sign in'
+            : 'Enter the 6-digit code from your authenticator app'}
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="code" className="text-sm">
+            {useBackupCode ? 'Backup Code' : 'Verification Code'}
+          </Label>
+          <Input
+            id="code"
+            value={code}
+            onChange={(e) => {
+              const value = useBackupCode
+                ? e.target.value
+                : e.target.value.replace(/\D/g, '').slice(0, 6);
+              setCode(value);
+            }}
+            placeholder={useBackupCode ? 'Enter backup code' : '000000'}
+            className={useBackupCode ? 'font-mono' : 'text-center font-mono text-lg tracking-widest'}
+            maxLength={useBackupCode ? 20 : 6}
+            autoComplete="one-time-code"
+            autoFocus
+          />
+        </div>
+
+        {!useBackupCode && (
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="trust-device"
+              checked={trustDevice}
+              onCheckedChange={(checked) => setTrustDevice(checked === true)}
+            />
+            <Label htmlFor="trust-device" className="text-sm font-normal">
+              Trust this device for 30 days
+            </Label>
+          </div>
+        )}
+
+        <Button type="submit" disabled={isLoading} className="w-full">
+          {isLoading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Verifying...
+            </>
+          ) : (
+            'Verify'
+          )}
+        </Button>
+
+        <Button
+          type="button"
+          variant="link"
+          className="w-full text-sm"
+          onClick={() => {
+            setUseBackupCode(!useBackupCode);
+            setCode('');
+          }}
+        >
+          {useBackupCode
+            ? 'Use authenticator app instead'
+            : 'Use a backup code instead'}
+        </Button>
+      </form>
+    </div>
+  );
+}

package/templates/features/web/auth/components/settings/set-password-form.tsx.ejs

@@ -0,0 +1,123 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { KeyRound, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { setInitialPassword } from '@/lib/auth/actions';
+
+interface SetPasswordFormProps {
+  onComplete: () => void;
+  onCancel: () => void;
+}
+
+export function SetPasswordForm({ onComplete, onCancel }: SetPasswordFormProps) {
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!newPassword) {
+      toast.error('Please enter a password');
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      toast.error('Password must be at least 8 characters');
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      toast.error('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+    const result = await setInitialPassword(newPassword);
+    setIsLoading(false);
+
+    if (!result.success) {
+      toast.error(result.error || 'Failed to set password');
+      return;
+    }
+
+    toast.success('Password set successfully');
+    onComplete();
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <KeyRound className="h-5 w-5" />
+          Set Account Password
+        </CardTitle>
+        <CardDescription>
+          To enable two-factor authentication, you need to set a password for your account first.
+          This password will allow you to sign in with email and password.
+          <span className="block mt-2 text-amber-600 dark:text-amber-400">
+            Note: Two-factor authentication only applies when signing in with email and password.
+            OAuth providers (Google, Apple, etc.) handle their own security verification.
+          </span>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="new-password">New Password</Label>
+            <Input
+              id="new-password"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              placeholder="Enter a password"
+              disabled={isLoading}
+              autoComplete="new-password"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="confirm-password">Confirm Password</Label>
+            <Input
+              id="confirm-password"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Confirm your password"
+              disabled={isLoading}
+              autoComplete="new-password"
+            />
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Password must be at least 8 characters long.
+          </p>
+          <div className="flex gap-2">
+            <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading} className="flex-1">
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Setting password...
+                </>
+              ) : (
+                'Set Password & Continue'
+              )}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}