@marvs13/marvinel-nextjs-supabase-starting-kit 1.0.2

package/cli.js

@@ -0,0 +1,95 @@
+#!/usr/bin/env node
+
+const { execSync } = require("child_process");
+const path = require("path");
+const fs = require("fs");
+
+// Detect which package manager is being used
+const userAgent = process.env.npm_config_user_agent || "";
+let packageManager = "npm";
+let execCommand = "npx";
+
+if (userAgent.includes("bun")) {
+  packageManager = "bun";
+  execCommand = "bunx";
+} else if (userAgent.includes("pnpm")) {
+  packageManager = "pnpm";
+  execCommand = "pnpm dlx";
+}
+
+const projectName = process.argv[2] || "my-auth-app";
+const projectPath = path.join(process.cwd(), projectName);
+const templatePath = path.join(__dirname, "template");
+
+try {
+  console.log(`🚀 Using ${packageManager} to create: ${projectName}...`);
+
+  // 1. Run Next.js installer (Dynamic manager)
+  // We pass --use-${packageManager} to force Next.js to use the same manager
+  execSync(
+    `${execCommand} create-next-app@latest ${projectName} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-${packageManager} --yes`,
+    { stdio: "inherit" },
+  );
+
+  process.chdir(projectPath);
+
+  // 2. Install Dependencies
+  console.log(
+    `📦 Installing Supabase and Auth dependencies via ${packageManager}...`,
+  );
+  const deps = [
+    "zod",
+    "react-hook-form",
+    "lucide-react",
+    "@hookform/resolvers",
+    "@supabase/ssr",
+  ];
+  const installCmd =
+    packageManager === "bun" ? "bun add" : `${packageManager} install`;
+  execSync(`${installCmd} ${deps.join(" ")}`, { stdio: "inherit" });
+
+  // 3. Initialize shadcn/ui
+  console.log("🎨 Initializing shadcn UI...");
+  execSync(`${execCommand} shadcn@latest init -d`, { stdio: "inherit" });
+
+  // 4. Install shadcn components
+  console.log("🧩 Adding shadcn components...");
+  const components = [
+    "button",
+    "card",
+    "input",
+    "label",
+    "separator",
+    "textarea",
+    "field",
+    "input-group",
+    "spinner",
+  ];
+  execSync(`${execCommand} shadcn@latest add ${components.join(" ")} -y`, {
+    stdio: "inherit",
+  });
+
+  // 5. COPY TEMPLATE FILES
+  console.log("🛠️ 📂 Injecting Marvinel's Template files...");
+  const copyFolderSync = (from, to) => {
+    if (!fs.existsSync(to)) fs.mkdirSync(to, { recursive: true });
+    fs.readdirSync(from).forEach((element) => {
+      const stat = fs.lstatSync(path.join(from, element));
+      if (stat.isFile()) {
+        fs.copyFileSync(path.join(from, element), path.join(to, element));
+      } else if (stat.isDirectory()) {
+        copyFolderSync(path.join(from, element), path.join(to, element));
+      }
+    });
+  };
+
+  copyFolderSync(templatePath, path.join(projectPath, "src"));
+
+  console.log(`\n✅ Setup complete! Project is ready.`);
+  console.log(
+    `\nNext steps:\ncd ${projectName}\n${packageManager === "bun" ? "bun dev" : "npm run dev"}`,
+  );
+} catch (error) {
+  console.error("❌ Installation failed:", error);
+  process.exit(1);
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@marvs13/marvinel-nextjs-supabase-starting-kit",
+  "version": "1.0.2",
+  "description": "A modern Next.js + Supabase starting kit with Tailwind, Zod, and shadcn/ui.",
+  "main": "cli.js",
+  "bin": {
+    "@marvs13/marvinel-nextjs-supabase-starting-kit": "./cli.js"
+  },
+  "type": "module",
+  "files": [
+    "cli.js",
+    "template/"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "nextjs",
+    "supabase",
+    "auth",
+    "shadcn",
+    "tailwind",
+    "starter-kit"
+  ],
+  "author": "Marvinel Torres Santos",
+  "license": "MIT"
+}

package/template/.env.local_example

@@ -0,0 +1,5 @@
+# TODO : Rename this to .env.local technically remove the "_example"
+# TODO : Copy your SUPABASE URL AND SUPABASE PUBLISHABLE KEY from your Supabase
+
+NEXT_PUBLIC_SUPABASE_URL=<YOUR_SUPABASE_URL>
+NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<YOUR_SUPABASE_PUBLISHABLE_KEY>

package/template/src/app/(auth)/change-password/page.tsx

@@ -0,0 +1,11 @@
+import { ChangePasswordForm } from "@/components/forms/change-password";
+
+const Page = () => {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center">
+      <ChangePasswordForm />
+    </div>
+  );
+};
+
+export default Page;

package/template/src/app/(auth)/login/page.tsx

@@ -0,0 +1,11 @@
+import { LogInForm } from "@/components/forms/login-form";
+
+const Page = () => {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center px-2">
+      <LogInForm />
+    </div>
+  );
+};
+
+export default Page;

package/template/src/app/(auth)/request-reset-password/page.tsx

@@ -0,0 +1,11 @@
+import { RequestResetPassword } from "@/components/forms/request-reset-password-form";
+
+const Page = () => {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center">
+      <RequestResetPassword />
+    </div>
+  );
+};
+
+export default Page;

package/template/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,11 @@
+import { ResetPasswordForm } from "@/components/forms/reset-password-form";
+
+const Page = () => {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center">
+      <ResetPasswordForm />
+    </div>
+  );
+};
+
+export default Page;

package/template/src/app/(auth)/signup/page.tsx

@@ -0,0 +1,11 @@
+import SignUpForm from "@/components/forms/signup-form";
+
+const Page = () => {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center px-2">
+      <SignUpForm />
+    </div>
+  );
+};
+
+export default Page;

package/template/src/app/(auth)/signup-success/page.tsx

@@ -0,0 +1,34 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const Page = () => {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-2xl">
+                Thank you for signing up!
+              </CardTitle>
+              <CardDescription>Check your email to confirm</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className="text-muted-foreground text-sm">
+                You&apos;ve successfully signed up. Please check your email to
+                confirm your account before signing in.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;

package/template/src/app/globals.css

@@ -0,0 +1,124 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+    --radius-3xl: calc(var(--radius) + 12px);
+    --radius-4xl: calc(var(--radius) + 16px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+}

package/template/src/app/home/page.tsx

@@ -0,0 +1,35 @@
+import Link from "next/link";
+
+import { LogOutButton } from "@/components/logout-button";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const Page = () => {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center">
+      <Card className="w-full max-w-xl rounded">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl">Welcome to Home Page</CardTitle>
+          <CardDescription className="my-3 text-lg">
+            This is a protected page or routes. Only the authenticated user can
+            access this page. Customize this page depends on your needs
+          </CardDescription>
+        </CardHeader>
+        <CardFooter className="flex justify-center gap-3">
+          <LogOutButton />
+          <Link href={"/change-password"}>
+            <Button variant="outline">Change Password</Button>
+          </Link>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export default Page;

package/template/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Authentication Form",
+  description:
+    "This is my authentication form template using NextJS with supabase",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/template/src/app/not-found.tsx

@@ -0,0 +1,9 @@
+import { PageNotFound } from "@/components/page-not-found";
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center">
+      <PageNotFound />
+    </div>
+  );
+}

package/template/src/app/page.tsx

@@ -0,0 +1,11 @@
+import { Hero } from "@/components/hero";
+
+const Main = () => {
+  return (
+    <main>
+      <Hero />
+    </main>
+  );
+};
+
+export default Main;

package/template/src/components/forms/change-password.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { useAuthForm } from "@/hooks/use-auth-form";
+import { createClient } from "@/lib/supabase/client";
+import { UpdatePasswordSchema } from "@/schema/form-schema";
+
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "../ui/field";
+import { Input } from "../ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "../ui/input-group";
+import { Spinner } from "../ui/spinner";
+
+export const ChangePasswordForm = () => {
+  const { updatepasswordform: form } = useAuthForm();
+
+  const [open, setOpen] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [success, setSuccess] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Show password toggle function
+  const isOpen = () => {
+    setOpen((prev) => !prev);
+  };
+
+  async function onSubmit(values: z.infer<typeof UpdatePasswordSchema>) {
+    // NOTE!!
+    //This change password form is only for the user who currently logged in
+    //This is a direct update of password so there is no link send thru the email of the user
+    const supabase = createClient();
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { error } = await supabase.auth.updateUser({
+        password: values.password,
+      });
+
+      if (error) throw error;
+
+      setSuccess(true);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "An error occurred!");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (success) {
+    return (
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle className="text-lg">
+            Password Successfully Change
+          </CardTitle>
+          <CardDescription>
+            <p>You can login to your account using your new password.</p>
+            <p className="mt-4">
+              Go back to
+              <Link
+                href={"/home"}
+                className="text-neutral-800 underline underline-offset-4 hover:text-neutral-950"
+              >
+                {" "}
+                Home
+              </Link>
+            </p>
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  return (
+    // customize this depends of your needs (eg. background color, size, etc.)
+    // you can add props if you want too
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-lg">Change Your Password</CardTitle>
+        <CardDescription className="text-base">
+          Enter your new password below.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="reset-password-form" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            {/* Password input */}
+            <Controller
+              control={form.control}
+              name="password"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="new-password-input">
+                    New Password
+                  </FieldLabel>
+                  <InputGroup>
+                    <InputGroupInput
+                      {...field}
+                      id="new-password-input"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="Enter new password"
+                      autoComplete="off"
+                      type={open ? "text" : "password"}
+                    />
+                    <InputGroupAddon align="inline-end">
+                      <Button
+                        type="button"
+                        className="hover:text-muted-foreground hover:bg-transparent"
+                        size="icon"
+                        variant="ghost"
+                        onClick={isOpen}
+                      >
+                        {open ? <EyeIcon /> : <EyeOffIcon />}
+                      </Button>
+                    </InputGroupAddon>
+                  </InputGroup>
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            {/* Confirm Password input */}
+            <Controller
+              control={form.control}
+              name="confirmPassword"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="confirm-password-input">
+                    Confirm Password
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id="confirm-password-input"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Confirm password"
+                    autoComplete="off"
+                    type="password"
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            {error && <p className="text-red-500">{error}</p>}
+            <FieldContent className="flex flex-row justify-end">
+              <Button
+                type="submit"
+                form="reset-password-form"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Spinner /> Saving...
+                  </>
+                ) : (
+                  "Save password"
+                )}
+              </Button>
+
+              <Link href={"/home"}>
+                <Button variant="outline">Cancel</Button>
+              </Link>
+            </FieldContent>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};