stackpatch 1.1.4 → 1.1.6

package/boilerplate/auth/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,124 @@
+import NextAuth from "next-auth";
+import type { NextAuthOptions } from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+import GitHubProvider from "next-auth/providers/github";
+import CredentialsProvider from "next-auth/providers/credentials";
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    CredentialsProvider({
+      name: "Credentials",
+      credentials: {
+        email: { label: "Email", type: "email" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials) {
+        // ⚠️ DEMO MODE: This is a placeholder implementation
+        //
+        // TO IMPLEMENT REAL AUTHENTICATION:
+        // 1. Set up a database (PostgreSQL, MongoDB, Prisma, etc.)
+        // 2. Install bcrypt: npm install bcryptjs @types/bcryptjs
+        // 3. Replace this function with database lookup:
+        //
+        // Example implementation:
+        // ```ts
+        // import bcrypt from "bcryptjs";
+        // import { db } from "@/lib/db"; // Your database connection
+        //
+        // async authorize(credentials) {
+        //   if (!credentials?.email || !credentials?.password) {
+        //     return null;
+        //   }
+        //
+        //   // Find user in database
+        //   const user = await db.user.findUnique({
+        //     where: { email: credentials.email },
+        //   });
+        //
+        //   if (!user) {
+        //     return null;
+        //   }
+        //
+        //   // Verify password
+        //   const isValid = await bcrypt.compare(
+        //     credentials.password,
+        //     user.password
+        //   );
+        //
+        //   if (!isValid) {
+        //     return null;
+        //   }
+        //
+        //   return {
+        //     id: user.id,
+        //     email: user.email,
+        //     name: user.name,
+        //   };
+        // }
+        // ```
+        //
+        // Current demo credentials (REMOVE IN PRODUCTION):
+        // Email: demo@example.com
+        // Password: demo123
+
+        if (!credentials?.email || !credentials?.password) {
+          return null;
+        }
+
+        // Demo check - REMOVE THIS IN PRODUCTION
+        if (
+          credentials.email === "demo@example.com" &&
+          credentials.password === "demo123"
+        ) {
+          return {
+            id: "1",
+            email: credentials.email,
+            name: "Demo User",
+          };
+        }
+
+        return null;
+      },
+    }),
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID!,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+    }),
+    GitHubProvider({
+      clientId: process.env.GITHUB_CLIENT_ID!,
+      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
+    }),
+  ],
+  pages: {
+    signIn: "/auth/login",
+    error: "/auth/error",
+  },
+  session: {
+    strategy: "jwt",
+  },
+  callbacks: {
+    async jwt({ token, user, account }) {
+      if (user) {
+        token.id = user.id;
+        token.email = user.email;
+        token.name = user.name;
+      }
+      if (account) {
+        token.accessToken = account.access_token;
+        token.provider = account.provider;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.id as string;
+        session.accessToken = token.accessToken as string;
+      }
+      return session;
+    },
+  },
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

package/boilerplate/auth/app/api/auth/signup/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+  try {
+    const { email, password, name } = await request.json();
+
+    // TODO: Replace with your actual signup logic
+    // This is a placeholder - you should:
+    // 1. Validate input
+    // 2. Check if user already exists
+    // 3. Hash password (use bcrypt or similar)
+    // 4. Save user to database
+    // 5. Return success or error
+
+    // Example validation
+    if (!email || !password || !name) {
+      return NextResponse.json(
+        { error: "Missing required fields" },
+        { status: 400 }
+      );
+    }
+
+    if (password.length < 6) {
+      return NextResponse.json(
+        { error: "Password must be at least 6 characters" },
+        { status: 400 }
+      );
+    }
+
+    // Placeholder: In production, save to database here
+    // const hashedPassword = await bcrypt.hash(password, 10);
+    // const user = await db.user.create({ email, password: hashedPassword, name });
+
+    return NextResponse.json(
+      { message: "Account created successfully" },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error("Signup error:", error);
+    return NextResponse.json(
+      { error: "Failed to create account" },
+      { status: 500 }
+    );
+  }
+}

package/boilerplate/auth/app/auth/login/page.tsx

@@ -1,59 +1,50 @@
 "use client";
 
-import { authClient } from "@/lib/auth-client";
-import { useState, useEffect } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { signIn } from "next-auth/react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
 import toast from "react-hot-toast";
 
-/**
- * Login Page
- *
- * 📝 TO CHANGE THE REDIRECT ROUTE AFTER LOGIN:
- * Change "/stackpatch" below to your desired route (e.g., "/dashboard", "/home")
- * Also update the same route in:
- * - app/page.tsx
- * - app/auth/signup/page.tsx
- */
 export default function LoginPage() {
   const router = useRouter();
-  const searchParams = useSearchParams();
-  const { data: session, isPending: sessionLoading } = authClient.useSession();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
-  // 🔧 CHANGE THIS ROUTE: Update "/stackpatch" to your desired landing page route
-  const LANDING_PAGE_ROUTE = "/stackpatch";
-
-  // Get redirect URL from query params (set by middleware when protecting routes)
-  const redirectTo = searchParams.get("redirect") || LANDING_PAGE_ROUTE;
-
-  // Redirect if already signed in
-  useEffect(() => {
-    if (!sessionLoading && session?.user) {
-      router.push(redirectTo);
-    }
-  }, [session, sessionLoading, router, redirectTo]);
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
     setLoading(true);
 
     try {
-      const result = await authClient.signIn.email({
+      // ⚠️ DEMO MODE: This is a placeholder implementation
+      //
+      // TO IMPLEMENT REAL AUTHENTICATION:
+      // 1. Set up a database (PostgreSQL, MongoDB, etc.)
+      // 2. Create a user registration API route (app/api/auth/signup/route.ts)
+      // 3. Hash passwords using bcrypt or similar
+      // 4. Update the authorize function in app/api/auth/[...nextauth]/route.ts
+      //    to check credentials against your database
+      // 5. Remove this demo check and implement proper database lookup
+      //
+      // Current demo credentials (REMOVE IN PRODUCTION):
+      // Email: demo@example.com
+      // Password: demo123
+
+      const result = await signIn("credentials", {
         email,
         password,
+        redirect: false,
       });
 
-      if (result.error) {
-        setError(result.error.message || "Invalid email or password");
-        toast.error(result.error.message || "Invalid email or password");
+      if (result?.error) {
+        setError("Invalid email or password");
+        toast.error("Invalid email or password");
       } else {
         toast.success("Login successful! Redirecting...");
         setTimeout(() => {
-          router.push(redirectTo);
+          router.push("/");
           router.refresh();
         }, 1000);
       }
@@ -67,29 +58,12 @@ export default function LoginPage() {
 
   const handleOAuthSignIn = async (provider: "google" | "github") => {
     try {
-      await authClient.signIn.social({ provider });
+      await signIn(provider, { callbackUrl: "/" });
     } catch (error) {
       toast.error(`Failed to sign in with ${provider}`);
     }
   };
 
-  // Show loading state while checking session
-  if (sessionLoading) {
-    return (
-      <div className="flex min-h-screen items-center justify-center">
-        <div className="text-center">
-          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent"></div>
-          <p className="mt-4 text-sm text-zinc-600 dark:text-zinc-400">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Don't show login form if already signed in (will redirect)
-  if (session?.user) {
-    return null;
-  }
-
   return (
     <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 py-12 dark:bg-black sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-8">

package/boilerplate/auth/app/auth/signup/page.tsx

@@ -1,23 +1,12 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { authClient } from "@/lib/auth-client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { signIn } from "next-auth/react";
 import toast from "react-hot-toast";
 
-/**
- * Signup Page
- *
- * 📝 TO CHANGE THE REDIRECT ROUTE AFTER SIGNUP:
- * Change "/stackpatch" below to your desired route (e.g., "/dashboard", "/home")
- * Also update the same route in:
- * - app/page.tsx
- * - app/auth/login/page.tsx
- */
 export default function SignupPage() {
   const router = useRouter();
-  const searchParams = useSearchParams();
-  const { data: session, isPending: sessionLoading } = authClient.useSession();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
@@ -25,19 +14,6 @@ export default function SignupPage() {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
-  // 🔧 CHANGE THIS ROUTE: Update "/stackpatch" to your desired landing page route
-  const LANDING_PAGE_ROUTE = "/stackpatch";
-
-  // Get redirect URL from query params (set by middleware when protecting routes)
-  const redirectTo = searchParams.get("redirect") || LANDING_PAGE_ROUTE;
-
-  // Redirect if already signed in
-  useEffect(() => {
-    if (!sessionLoading && session?.user) {
-      router.push(redirectTo);
-    }
-  }, [session, sessionLoading, router, redirectTo]);
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
@@ -57,35 +33,63 @@ export default function SignupPage() {
     setLoading(true);
 
     try {
-      // Better Auth handles signup natively
-      const result = await authClient.signUp.email({
+      // ⚠️ DEMO MODE: This is a placeholder implementation
+      //
+      // TO IMPLEMENT REAL SIGNUP:
+      // 1. Set up a database (PostgreSQL, MongoDB, etc.)
+      // 2. Create app/api/auth/signup/route.ts with:
+      //    - Password hashing (use bcrypt)
+      //    - User creation in database
+      //    - Email validation
+      //    - Duplicate user checking
+      // 3. Update this fetch call to use your actual signup endpoint
+      // 4. Handle errors properly (duplicate email, weak password, etc.)
+      //
+      // Example signup route structure:
+      // ```ts
+      // // app/api/auth/signup/route.ts
+      // import bcrypt from "bcryptjs";
+      // import { db } from "@/lib/db"; // Your database connection
+      //
+      // export async function POST(req: Request) {
+      //   const { email, password, name } = await req.json();
+      //   const hashedPassword = await bcrypt.hash(password, 10);
+      //   const user = await db.user.create({ data: { email, password: hashedPassword, name } });
+      //   return Response.json({ user });
+      // }
+      // ```
+
+      const response = await fetch("/api/auth/signup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password, name }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        setError(data.error || "Failed to create account");
+        toast.error(data.error || "Failed to create account");
+        return;
+      }
+
+      toast.success("Account created successfully! Signing you in...");
+
+      // Auto sign in after successful signup
+      const result = await signIn("credentials", {
         email,
         password,
-        name,
+        redirect: false,
       });
 
-      if (result.error) {
-        setError(result.error.message || "Failed to create account");
-        toast.error(result.error.message || "Failed to create account");
+      if (result?.error) {
+        setError("Account created but sign in failed. Please try logging in.");
+        toast.error("Account created but sign in failed. Please try logging in.");
       } else {
-        toast.success("Account created successfully! Signing you in...");
-
-        // Auto sign in after successful signup
-        const signInResult = await authClient.signIn.email({
-          email,
-          password,
-        });
-
-        if (signInResult.error) {
-          setError("Account created but sign in failed. Please try logging in.");
-          toast.error("Account created but sign in failed. Please try logging in.");
-        } else {
-          toast.success("Welcome! Redirecting...");
-          setTimeout(() => {
-            router.push(redirectTo);
-            router.refresh();
-          }, 1000);
-        }
+        toast.success("Welcome! Redirecting...");
+        setTimeout(() => {
+          router.push("/");
+          router.refresh();
+        }, 1000);
       }
     } catch (err) {
       setError("Something went wrong. Please try again.");
@@ -97,29 +101,12 @@ export default function SignupPage() {
 
   const handleOAuthSignIn = async (provider: "google" | "github") => {
     try {
-      await authClient.signIn.social({ provider });
+      await signIn(provider, { callbackUrl: "/" });
     } catch (error) {
       toast.error(`Failed to sign in with ${provider}`);
     }
   };
 
-  // Show loading state while checking session
-  if (sessionLoading) {
-    return (
-      <div className="flex min-h-screen items-center justify-center">
-        <div className="text-center">
-          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent"></div>
-          <p className="mt-4 text-sm text-zinc-600 dark:text-zinc-400">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Don't show signup form if already signed in (will redirect)
-  if (session?.user) {
-    return null;
-  }
-
   return (
     <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 py-12 dark:bg-black sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-8">

package/boilerplate/auth/app/dashboard/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import { useSession } from "next-auth/react";
+import { ProtectedRoute } from "@/components/protected-route";
+import { AuthNavbar } from "@/components/auth-navbar";
+
+/**
+ * Dashboard Page Example
+ *
+ * This is an example protected dashboard page.
+ *
+ * To use this:
+ * 1. Copy this file to your app/dashboard/page.tsx
+ * 2. The page is automatically protected using ProtectedRoute
+ * 3. The AuthNavbar shows session status and sign out button
+ *
+ * You can customize this page to show your dashboard content.
+ * If you have an existing navbar, replace AuthNavbar with your own.
+ */
+export default function DashboardPage() {
+  const { data: session } = useSession();
+
+  return (
+    <ProtectedRoute>
+      <div className="min-h-screen bg-zinc-50 dark:bg-black">
+        <AuthNavbar />
+        <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+          <div className="rounded-lg bg-white p-8 shadow dark:bg-zinc-900">
+            <h1 className="text-3xl font-bold text-zinc-900 dark:text-zinc-50">
+              Dashboard
+            </h1>
+            <p className="mt-2 text-zinc-600 dark:text-zinc-400">
+              Welcome to your protected dashboard!
+            </p>
+
+            {session && (
+              <div className="mt-6 rounded-md bg-zinc-100 p-4 dark:bg-zinc-800">
+                <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+                  Session Information
+                </h2>
+                <div className="mt-2 space-y-1 text-sm text-zinc-600 dark:text-zinc-400">
+                  <p>
+                    <span className="font-medium">Name:</span>{" "}
+                    {session.user?.name || "Not provided"}
+                  </p>
+                  <p>
+                    <span className="font-medium">Email:</span>{" "}
+                    {session.user?.email || "Not provided"}
+                  </p>
+                  {session.user?.image && (
+                    <p>
+                      <span className="font-medium">Image:</span>{" "}
+                      <img
+                        src={session.user.image}
+                        alt={session.user.name || "User"}
+                        className="mt-2 h-16 w-16 rounded-full"
+                      />
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-8">
+              <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-50">
+                Getting Started
+              </h2>
+              <p className="mt-2 text-zinc-600 dark:text-zinc-400">
+                This is a protected page. Only authenticated users can see this
+                content.
+              </p>
+              <p className="mt-2 text-zinc-600 dark:text-zinc-400">
+                Customize this page to add your dashboard features.
+              </p>
+            </div>
+          </div>
+        </main>
+      </div>
+    </ProtectedRoute>
+  );
+}

package/boilerplate/auth/app/login/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const result = await signIn("credentials", {
+        email,
+        password,
+        redirect: false,
+      });
+
+      if (result?.error) {
+        setError("Invalid email or password");
+      } else {
+        router.push("/");
+        router.refresh();
+      }
+    } catch (err) {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 py-12 dark:bg-black sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+            Sign in to your account
+          </h2>
+          <p className="mt-2 text-center text-sm text-zinc-600 dark:text-zinc-400">
+            Or{" "}
+            <a
+              href="/auth/signup"
+              className="font-medium text-zinc-950 hover:text-zinc-700 dark:text-zinc-50 dark:hover:text-zinc-300"
+            >
+              create a new account
+            </a>
+          </p>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="rounded-md bg-red-50 p-4 dark:bg-red-900/20">
+              <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+            </div>
+          )}
+          <div className="-space-y-px rounded-md shadow-sm">
+            <div>
+              <label htmlFor="email" className="sr-only">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="relative block w-full rounded-t-md border-0 px-3 py-2 text-zinc-900 ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-zinc-600 dark:bg-zinc-800 dark:text-zinc-50 dark:ring-zinc-700 dark:placeholder:text-zinc-500 dark:focus:ring-zinc-400 sm:text-sm sm:leading-6"
+                placeholder="Email address"
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="sr-only">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="relative block w-full rounded-b-md border-0 px-3 py-2 text-zinc-900 ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-zinc-600 dark:bg-zinc-800 dark:text-zinc-50 dark:ring-zinc-700 dark:placeholder:text-zinc-500 dark:focus:ring-zinc-400 sm:text-sm sm:leading-6"
+                placeholder="Password"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              <input
+                id="remember-me"
+                name="remember-me"
+                type="checkbox"
+                className="h-4 w-4 rounded border-zinc-300 text-zinc-600 focus:ring-zinc-600 dark:border-zinc-700 dark:bg-zinc-800"
+              />
+              <label
+                htmlFor="remember-me"
+                className="ml-2 block text-sm text-zinc-900 dark:text-zinc-50"
+              >
+                Remember me
+              </label>
+            </div>
+
+            <div className="text-sm">
+              <a
+                href="/auth/forgot-password"
+                className="font-medium text-zinc-600 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
+              >
+                Forgot your password?
+              </a>
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="group relative flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-white hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 disabled:opacity-50 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
+            >
+              {loading ? "Signing in..." : "Sign in"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}