stackpatch 1.1.2 → 1.1.4

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

@@ -1,136 +0,0 @@
-"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>
-  );
-}

package/boilerplate/auth/app/page.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import React from "react";
-import { AuthNavbar } from "@/components/auth-navbar";
-import Link from "next/link";
-
-/**
- * Landing Page Example
- *
- * This is an example landing page with auth navbar.
- *
- * To use this:
- * 1. This replaces your existing app/page.tsx (only if it's the default Next.js page)
- * 2. The AuthNavbar automatically shows sign in/out based on session
- * 3. Customize this page with your content
- * 4. If you have an existing navbar, you can use AuthNavbar as reference or integrate its features
- */
-export default function HomePage() {
-  return (
-    <div className="min-h-screen bg-zinc-50 dark:bg-black">
-      <AuthNavbar />
-      <main className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
-        <div className="text-center">
-          <h1 className="text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50 sm:text-6xl">
-            Welcome to Your App
-          </h1>
-          <p className="mt-6 text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Get started by exploring the features below.
-          </p>
-          <div className="mt-10 flex items-center justify-center gap-x-6">
-            <Link
-              href="/dashboard"
-              className="rounded-md bg-zinc-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-            >
-              Go to Dashboard
-            </Link>
-            <Link
-              href="/auth/login"
-              className="text-sm font-semibold leading-6 text-zinc-900 dark:text-zinc-50"
-            >
-              Sign In <span aria-hidden="true">→</span>
-            </Link>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}

package/boilerplate/auth/components/auth-button.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { signIn, signOut, useSession } from "next-auth/react";
-
-export function AuthButton() {
-  const { data: session, status } = useSession();
-
-  if (status === "loading") {
-    return (
-      <button
-        disabled
-        className="rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50"
-      >
-        Loading...
-      </button>
-    );
-  }
-
-  if (session) {
-    return (
-      <div className="flex items-center gap-4">
-        <span className="text-sm text-zinc-600 dark:text-zinc-400">
-          {session.user?.email}
-        </span>
-        <button
-          onClick={() => signOut()}
-          className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-        >
-          Sign out
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <button
-      onClick={() => signIn()}
-      className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-    >
-      Sign in
-    </button>
-  );
-}

package/boilerplate/auth/components/auth-navbar.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import React from "react";
-import { useSession, signOut } from "next-auth/react";
-import Link from "next/link";
-
-/**
- * Auth Navbar Component (Demo/Example)
- *
- * Displays a navigation bar with session status and sign in/out button.
- * This is a demo component - rename or customize it to fit your needs.
- *
- * Usage:
- * ```tsx
- * import { AuthNavbar } from "@/components/auth-navbar";
- *
- * export default function Layout({ children }) {
- *   return (
- *     <>
- *       <AuthNavbar />
- *       {children}
- *     </>
- *   );
- * }
- * ```
- */
-export function AuthNavbar() {
-  const { data: session, status } = useSession();
-
-  const handleSignOut = async () => {
-    await signOut({ callbackUrl: "/" });
-  };
-
-  return (
-    <nav className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="flex h-16 items-center justify-between">
-          {/* Logo/Brand */}
-          <div className="flex items-center">
-            <Link
-              href="/"
-              className="text-xl font-bold text-zinc-900 hover:text-zinc-700 dark:text-zinc-50 dark:hover:text-zinc-200"
-            >
-              Your App
-            </Link>
-          </div>
-
-          {/* Navigation Links */}
-          <div className="hidden md:flex md:items-center md:space-x-6">
-            <Link
-              href="/"
-              className="text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
-            >
-              Home
-            </Link>
-            {session && (
-              <Link
-                href="/dashboard"
-                className="text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
-              >
-                Dashboard
-              </Link>
-            )}
-          </div>
-
-          {/* Auth Section */}
-          <div className="flex items-center space-x-4">
-            {status === "loading" ? (
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-600 dark:border-zinc-700 dark:border-t-zinc-400"></div>
-            ) : session ? (
-              <div className="flex items-center space-x-4">
-                {/* User Info */}
-                <div className="hidden sm:flex sm:flex-col sm:items-end">
-                  <span className="text-sm font-medium text-zinc-900 dark:text-zinc-50">
-                    {session.user?.name || session.user?.email}
-                  </span>
-                  <span className="text-xs text-zinc-500 dark:text-zinc-400">
-                    {session.user?.email}
-                  </span>
-                </div>
-
-                {/* User Avatar */}
-                {session.user?.image ? (
-                  <img
-                    src={session.user.image}
-                    alt={session.user.name || "User"}
-                    className="h-8 w-8 rounded-full"
-                  />
-                ) : (
-                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-600 text-sm font-medium text-white dark:bg-zinc-700">
-                    {session.user?.name?.charAt(0).toUpperCase() ||
-                      session.user?.email?.charAt(0).toUpperCase() ||
-                      "U"}
-                  </div>
-                )}
-
-                {/* Sign Out Button */}
-                <button
-                  onClick={handleSignOut}
-                  className="rounded-md bg-zinc-900 px-4 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 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-                >
-                  Sign Out
-                </button>
-              </div>
-            ) : (
-              <Link
-                href="/auth/login"
-                className="rounded-md bg-zinc-900 px-4 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 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-              >
-                Sign In
-              </Link>
-            )}
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}

package/boilerplate/auth/components/protected-route.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-interface ProtectedRouteProps {
-  children: React.ReactNode;
-  redirectTo?: string;
-}
-
-/**
- * ProtectedRoute Component
- *
- * Wrap any component or page with this to protect it from unauthorized access.
- *
- * Usage:
- * ```tsx
- * import { ProtectedRoute } from "@/components/protected-route";
- *
- * export default function DashboardPage() {
- *   return (
- *     <ProtectedRoute>
- *       <div>Your protected content here</div>
- *     </ProtectedRoute>
- *   );
- * }
- * ```
- *
- * Or protect an entire page:
- * ```tsx
- * // app/dashboard/page.tsx
- * import { ProtectedRoute } from "@/components/protected-route";
- *
- * export default function Dashboard() {
- *   return (
- *     <ProtectedRoute>
- *       <h1>Dashboard</h1>
- *       <p>This page is protected</p>
- *     </ProtectedRoute>
- *   );
- * }
- * ```
- */
-export function ProtectedRoute({
-  children,
-  redirectTo = "/auth/login"
-}: ProtectedRouteProps) {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (status === "unauthenticated") {
-      router.push(redirectTo);
-    }
-  }, [status, router, redirectTo]);
-
-  if (status === "loading") {
-    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 align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"></div>
-          <p className="mt-4 text-sm text-zinc-600 dark:text-zinc-400">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (status === "unauthenticated") {
-    return null; // Will redirect
-  }
-
-  return <>{children}</>;
-}

package/boilerplate/auth/components/session-provider.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import { SessionProvider } from "next-auth/react";
-
-export function AuthSessionProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <SessionProvider>{children}</SessionProvider>;
-}

package/boilerplate/auth/middleware.ts

@@ -1,51 +0,0 @@
-import { withAuth } from "next-auth/middleware";
-import { NextResponse } from "next/server";
-
-/**
- * Middleware for Protected Routes
- *
- * This middleware protects routes at the file system level.
- *
- * To protect a route, add it to the matcher array below.
- *
- * Example:
- * - To protect all routes under /dashboard: matcher: ["/dashboard/:path*"]
- * - To protect specific routes: matcher: ["/dashboard", "/profile", "/settings"]
- * - To protect all routes except public ones: matcher: ["/((?!api|auth|_next/static|_next/image|favicon.ico).*)"]
- *
- * Protected routes will automatically redirect to /auth/login if user is not authenticated.
- *
- * Usage:
- * 1. Add your protected route paths to the matcher array
- * 2. Users accessing these routes will be redirected to login if not authenticated
- * 3. Authenticated users can access the routes normally
- */
-export default withAuth(
-  function middleware(req) {
-    // You can add additional logic here if needed
-    // For example, role-based access control
-    return NextResponse.next();
-  },
-  {
-    callbacks: {
-      authorized: ({ token }) => !!token, // User must be authenticated
-    },
-    pages: {
-      signIn: "/auth/login", // Redirect to login page
-    },
-  }
-);
-
-// Configure which routes to protect
-// Add your protected routes here
-export const config = {
-  matcher: [
-    // Example: Protect dashboard routes
-    // "/dashboard/:path*",
-    // "/profile/:path*",
-    // "/settings/:path*",
-
-    // To protect all routes except public ones, uncomment:
-    // "/((?!api|auth|_next/static|_next/image|favicon.ico).*)",
-  ],
-};