create-stackr 0.2.0

package/templates/features/web/auth/app/(auth)/verify-email/page.tsx.ejs

@@ -0,0 +1,198 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { verifyEmail } from "@/lib/auth/actions";
+
+export default function VerifyEmailPage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const token = searchParams.get("token");
+  const email = searchParams.get("email");
+
+  const [status, setStatus] = useState<"idle" | "verifying" | "success" | "error">(
+    token ? "verifying" : "idle"
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (token && status === "verifying") {
+      handleVerify(token);
+    }
+  }, [token, status]);
+
+  const handleVerify = async (verificationToken: string) => {
+    try {
+      const result = await verifyEmail(verificationToken);
+
+      if (!result.success) {
+        setStatus("error");
+        setError(result.error || "Failed to verify email");
+        return;
+      }
+
+      setStatus("success");
+      // Redirect to login after 3 seconds
+      setTimeout(() => {
+        router.push("/login?message=Email+verified+successfully");
+      }, 3000);
+    } catch (err) {
+      setStatus("error");
+      setError("An unexpected error occurred");
+      console.error("Email verification error:", err);
+    }
+  };
+
+  // Waiting for user to check their email
+  if (status === "idle" && email) {
+    return (
+      <div className="space-y-6">
+        <div className="space-y-2 text-center">
+          <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-950/20 rounded-full flex items-center justify-center">
+            <svg
+              className="w-6 h-6 text-blue-600 dark:text-blue-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+          <h2 className="text-2xl font-bold">Check your email</h2>
+          <p className="text-muted-foreground">
+            We&apos;ve sent a verification link to <strong>{email}</strong>
+          </p>
+        </div>
+
+        <div className="text-sm text-muted-foreground text-center space-y-2">
+          <p>Click the link in the email to verify your account.</p>
+          <p>
+            Didn&apos;t receive the email? Check your spam folder.
+          </p>
+        </div>
+
+        <Link href="/login">
+          <Button variant="outline" className="w-full">
+            Back to sign in
+          </Button>
+        </Link>
+      </div>
+    );
+  }
+
+  // Verifying token
+  if (status === "verifying") {
+    return (
+      <div className="space-y-6">
+        <div className="space-y-2 text-center">
+          <div className="mx-auto w-12 h-12 flex items-center justify-center">
+            <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+          </div>
+          <h2 className="text-2xl font-bold">Verifying your email</h2>
+          <p className="text-muted-foreground">
+            Please wait while we verify your email address...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Verification successful
+  if (status === "success") {
+    return (
+      <div className="space-y-6">
+        <div className="space-y-2 text-center">
+          <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-950/20 rounded-full flex items-center justify-center">
+            <svg
+              className="w-6 h-6 text-green-600 dark:text-green-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          </div>
+          <h2 className="text-2xl font-bold">Email verified!</h2>
+          <p className="text-muted-foreground">
+            Your email has been verified. Redirecting you to sign in...
+          </p>
+        </div>
+
+        <Link href="/login">
+          <Button className="w-full">Continue to sign in</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  // Verification error
+  if (status === "error") {
+    return (
+      <div className="space-y-6">
+        <div className="space-y-2 text-center">
+          <div className="mx-auto w-12 h-12 bg-red-100 dark:bg-red-950/20 rounded-full flex items-center justify-center">
+            <svg
+              className="w-6 h-6 text-red-600 dark:text-red-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </div>
+          <h2 className="text-2xl font-bold">Verification failed</h2>
+          <p className="text-muted-foreground">
+            {error || "Unable to verify your email address"}
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <p className="text-sm text-muted-foreground text-center">
+            The verification link may have expired or already been used.
+          </p>
+
+          <Link href="/login">
+            <Button variant="outline" className="w-full">
+              Back to sign in
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // No token or email - generic page
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2 text-center">
+        <h2 className="text-2xl font-bold">Verify your email</h2>
+        <p className="text-muted-foreground">
+          Please check your email for a verification link.
+        </p>
+      </div>
+
+      <Link href="/login">
+        <Button variant="outline" className="w-full">
+          Back to sign in
+        </Button>
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,152 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { AUTH_CONFIG, COOKIE_NAMES } from '@/lib/auth/config';
+
+/**
+ * OAuth Callback Route Handler
+ *
+ * This route handler processes the redirect from Fastify after OAuth authentication.
+ * It receives the exchange_token and state as query parameters.
+ *
+ * Using a Route Handler instead of a page component because we need to:
+ * 1. Read cookies from the request
+ * 2. Set/delete cookies on the response
+ * 3. Redirect to the appropriate page
+ *
+ * In Next.js 15+, cookies can only be modified in Server Actions or Route Handlers,
+ * not in React Server Components.
+ */
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const exchangeToken = searchParams.get('exchange_token');
+  const state = searchParams.get('state');
+  const error = searchParams.get('error');
+
+  const baseUrl = AUTH_CONFIG.appUrl;
+
+  // Handle errors from OAuth provider or Fastify
+  if (error) {
+    const errorMessage = getErrorMessage(error);
+    return NextResponse.redirect(
+      new URL(`/login?error=${encodeURIComponent(errorMessage)}`, baseUrl)
+    );
+  }
+
+  // Validate required parameters
+  if (!exchangeToken || !state) {
+    return NextResponse.redirect(
+      new URL('/login?error=missing_params', baseUrl)
+    );
+  }
+
+  // Read PKCE cookies from request
+  const storedState = request.cookies.get(COOKIE_NAMES.OAUTH_STATE)?.value;
+  const verifier = request.cookies.get(COOKIE_NAMES.OAUTH_PKCE_VERIFIER)?.value;
+
+  // Verify state matches (CSRF protection)
+  if (storedState !== state) {
+    const response = NextResponse.redirect(
+      new URL('/login?error=state_mismatch', baseUrl)
+    );
+    // Clean up cookies
+    response.cookies.delete(COOKIE_NAMES.OAUTH_PKCE_VERIFIER);
+    response.cookies.delete(COOKIE_NAMES.OAUTH_STATE);
+    return response;
+  }
+
+  // Verify we have the PKCE verifier
+  if (!verifier) {
+    const response = NextResponse.redirect(
+      new URL('/login?error=missing_verifier', baseUrl)
+    );
+    response.cookies.delete(COOKIE_NAMES.OAUTH_STATE);
+    return response;
+  }
+
+  try {
+    // Exchange token with PKCE verification
+    const exchangeResponse = await fetch(
+      `${AUTH_CONFIG.backendUrl}/api/auth/web/oauth/exchange`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          exchange_token: exchangeToken,
+          code_verifier: verifier,
+        }),
+        cache: 'no-store',
+      }
+    );
+
+    if (!exchangeResponse.ok) {
+      const errorData = await exchangeResponse
+        .json()
+        .catch(() => ({ error: 'exchange_failed' }));
+      const response = NextResponse.redirect(
+        new URL(
+          `/login?error=${encodeURIComponent(errorData.error || 'exchange_failed')}`,
+          baseUrl
+        )
+      );
+      // Clean up cookies
+      response.cookies.delete(COOKIE_NAMES.OAUTH_PKCE_VERIFIER);
+      response.cookies.delete(COOKIE_NAMES.OAUTH_STATE);
+      return response;
+    }
+
+    const { session_token } = await exchangeResponse.json();
+
+    // Success! Create response with session cookie and redirect to dashboard
+    const response = NextResponse.redirect(new URL('/dashboard', baseUrl));
+
+    // Set session cookie
+    response.cookies.set(COOKIE_NAMES.SESSION, session_token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/',
+      maxAge: AUTH_CONFIG.sessionMaxAge,
+    });
+
+    // Clean up PKCE cookies
+    response.cookies.delete(COOKIE_NAMES.OAUTH_PKCE_VERIFIER);
+    response.cookies.delete(COOKIE_NAMES.OAUTH_STATE);
+
+    return response;
+  } catch (error) {
+    console.error('OAuth exchange error:', error);
+    const response = NextResponse.redirect(
+      new URL('/login?error=exchange_failed', baseUrl)
+    );
+    // Clean up cookies
+    response.cookies.delete(COOKIE_NAMES.OAUTH_PKCE_VERIFIER);
+    response.cookies.delete(COOKIE_NAMES.OAUTH_STATE);
+    return response;
+  }
+}
+
+/**
+ * Convert error codes to user-friendly messages
+ */
+function getErrorMessage(error: string): string {
+  const errorMessages: Record<string, string> = {
+    invalid_state: 'Session expired. Please try again.',
+    missing_verifier: 'Authentication error. Please try again.',
+    state_mismatch: 'Security check failed. Please try again.',
+    exchange_failed: 'Failed to complete sign in. Please try again.',
+    oauth_failed: 'OAuth provider error. Please try again.',
+    no_session: 'Failed to create session. Please try again.',
+    service_unavailable: 'Service temporarily unavailable. Please try later.',
+    server_error: 'An unexpected error occurred. Please try again.',
+    missing_params: 'Invalid callback. Please try again.',
+    oauth_access_denied: 'Access was denied. Please try again.',
+  };
+
+  // Handle oauth_* prefixed errors
+  if (error.startsWith('oauth_')) {
+    const specificError = errorMessages[error];
+    if (specificError) return specificError;
+    return 'OAuth error. Please try again.';
+  }
+
+  return errorMessages[error] || 'An error occurred. Please try again.';
+}

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

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { signIn } from "@/lib/auth/actions";
+import { useAuthStore } from "@/store/auth.store";
+
+interface LoginFormProps {
+  redirectTo?: string;
+}
+
+export function LoginForm({ redirectTo = "/dashboard" }: LoginFormProps) {
+  const router = useRouter();
+  const setSession = useAuthStore((s) => s.setSession);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      const result = await signIn(email, password);
+      if (!result.success) {
+        setError(result.error || "Failed to sign in");
+        return;
+      }
+      if (result.session) setSession(result.session);
+      router.push(redirectTo);
+      router.refresh();
+    } catch {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-3">
+      <div className="space-y-1.5">
+        <Label htmlFor="email" className="text-sm">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="you@example.com"
+          required
+          disabled={isLoading}
+          autoComplete="email"
+        />
+      </div>
+
+      <div className="space-y-1.5">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="password" className="text-sm">Password</Label>
+<% if (features.authentication.passwordReset) { %>
+          <Link href="/forgot-password" className="text-xs text-primary hover:underline">
+            Forgot password?
+          </Link>
+<% } %>
+        </div>
+        <Input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Enter your password"
+          required
+          disabled={isLoading}
+          autoComplete="current-password"
+        />
+      </div>
+
+      {error && (
+        <div className="p-2.5 text-sm text-destructive bg-destructive/10 rounded-lg border border-destructive/20">
+          {error}
+        </div>
+      )}
+
+      <Button type="submit" className="w-full" disabled={isLoading}>
+        {isLoading ? "Signing in..." : "Sign in"}
+      </Button>
+
+      <p className="text-center text-sm text-muted-foreground">
+        Don&apos;t have an account?{" "}
+        <Link href="/register" className="text-primary hover:underline font-medium">
+          Sign up
+        </Link>
+      </p>
+    </form>
+  );
+}

package/templates/features/web/auth/components/auth/oauth-buttons.tsx.ejs

@@ -0,0 +1,126 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { getOAuthUrl } from "@/lib/auth/oauth";
+import { AUTH_CONFIG } from "@/lib/auth/config";
+
+type OAuthProvider = "google" | "apple" | "github";
+
+interface OAuthButtonsProps {
+  mode?: "login" | "register";
+}
+
+export function OAuthButtons({ mode = "login" }: OAuthButtonsProps) {
+  const [loadingProvider, setLoadingProvider] = useState<OAuthProvider | null>(null);
+
+  const handleOAuth = async (provider: OAuthProvider) => {
+    setLoadingProvider(provider);
+    try {
+      const url = await getOAuthUrl(provider);
+      // Redirect to backend OAuth URL (external navigation)
+      window.location.href = url;
+    } catch (error) {
+      console.error(`OAuth ${provider} error:`, error);
+      setLoadingProvider(null);
+    }
+  };
+
+  const actionText = mode === "login" ? "Sign in" : "Sign up";
+
+  // Check which providers are enabled
+  const hasAnyProvider = AUTH_CONFIG.googleEnabled || AUTH_CONFIG.appleEnabled || AUTH_CONFIG.githubEnabled;
+
+  if (!hasAnyProvider) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-card px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+
+      <div className="grid gap-2">
+<% if (features.authentication.providers.google) { %>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => handleOAuth("google")}
+          disabled={loadingProvider !== null}
+          className="w-full"
+        >
+          {loadingProvider === "google" ? (
+            <span className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+          ) : (
+            <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+              />
+              <path
+                fill="currentColor"
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+              />
+            </svg>
+          )}
+          {actionText} with Google
+        </Button>
+<% } %>
+
+<% if (features.authentication.providers.apple) { %>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => handleOAuth("apple")}
+          disabled={loadingProvider !== null}
+          className="w-full"
+        >
+          {loadingProvider === "apple" ? (
+            <span className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+          ) : (
+            <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
+            </svg>
+          )}
+          {actionText} with Apple
+        </Button>
+<% } %>
+
+<% if (features.authentication.providers.github) { %>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => handleOAuth("github")}
+          disabled={loadingProvider !== null}
+          className="w-full"
+        >
+          {loadingProvider === "github" ? (
+            <span className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+          ) : (
+            <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+            </svg>
+          )}
+          {actionText} with GitHub
+        </Button>
+<% } %>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { resetPassword } from "@/lib/auth/actions";
+
+interface PasswordResetFormProps {
+  token: string;
+}
+
+export function PasswordResetForm({ token }: PasswordResetFormProps) {
+  const router = useRouter();
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate passwords match
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    // Validate password strength
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const result = await resetPassword(token, password);
+
+      if (!result.success) {
+        setError(result.error || "Failed to reset password");
+        return;
+      }
+
+      // Redirect to login with success message
+      router.push("/login?message=Password+reset+successfully");
+    } catch (err) {
+      setError("An unexpected error occurred");
+      console.error("Password reset error:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <label htmlFor="password" className="text-sm font-medium">
+          New Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Enter new password"
+          required
+          disabled={isLoading}
+          className="w-full px-3 py-2 border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
+        />
+        <p className="text-xs text-muted-foreground">
+          Must be at least 8 characters
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <label htmlFor="confirmPassword" className="text-sm font-medium">
+          Confirm New Password
+        </label>
+        <input
+          id="confirmPassword"
+          type="password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          placeholder="Confirm new password"
+          required
+          disabled={isLoading}
+          className="w-full px-3 py-2 border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
+        />
+      </div>
+
+      {error && (
+        <div className="p-3 text-sm text-red-500 bg-red-50 dark:bg-red-950/20 rounded-md">
+          {error}
+        </div>
+      )}
+
+      <Button type="submit" className="w-full" disabled={isLoading}>
+        {isLoading ? "Resetting password..." : "Reset password"}
+      </Button>
+    </form>
+  );
+}