create-stackrjs 1.4.0

package/template/extras/supabase/src/app/register/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { createClient } from "@/lib/supabase/client";
+import { Alert, AuthShell, Field, FooterLinks, SubmitButton, TextLink } from "@/components/auth/ui";
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    const data = new FormData(event.currentTarget);
+    const supabase = createClient();
+    const { data: result, error } = await supabase.auth.signUp({
+      email: String(data.get("email")),
+      password: String(data.get("password")),
+    });
+    setPending(false);
+    if (error) {
+      setError(error.message);
+    } else if (result.session) {
+      router.push("/account");
+      router.refresh();
+    } else {
+      // Email confirmation is enabled on the project — prompt the user.
+      setMessage("Check your inbox to confirm your email, then sign in.");
+    }
+  }
+
+  return (
+    <AuthShell title="Create account">
+      {error && <Alert kind="error">{error}</Alert>}
+      {message && <Alert kind="success">{message}</Alert>}
+      <form onSubmit={onSubmit}>
+        <Field label="Email" name="email" type="email" required autoComplete="email" />
+        <Field label="Password" name="password" type="password" required minLength={8} autoComplete="new-password" />
+        <SubmitButton disabled={pending}>{pending ? "Creating…" : "Create account"}</SubmitButton>
+      </form>
+      <FooterLinks>
+        <p>
+          Already have an account? <TextLink href="/login">Sign in</TextLink>
+        </p>
+      </FooterLinks>
+    </AuthShell>
+  );
+}

package/template/extras/supabase/src/components/auth/sign-out-button.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { createClient } from "@/lib/supabase/client";
+
+export function SignOutButton() {
+  const router = useRouter();
+
+  async function signOut() {
+    const supabase = createClient();
+    await supabase.auth.signOut();
+    router.push("/login");
+    router.refresh();
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={signOut}
+      className="w-full rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white transition hover:bg-gray-700"
+    >
+      Sign out
+    </button>
+  );
+}

package/template/extras/supabase/src/components/auth/ui.tsx

@@ -0,0 +1,58 @@
+import type { ComponentProps, ReactNode } from "react";
+import Link from "next/link";
+
+/** Centered card shell shared by all auth pages. */
+export function AuthShell({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
+      <div className="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
+        <h1 className="mb-6 text-2xl font-semibold tracking-tight">{title}</h1>
+        {children}
+      </div>
+    </main>
+  );
+}
+
+export function Field({ label, ...props }: { label: string } & ComponentProps<"input">) {
+  return (
+    <label className="mb-4 block">
+      <span className="mb-1 block text-sm font-medium text-gray-700">{label}</span>
+      <input
+        {...props}
+        className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-gray-900"
+      />
+    </label>
+  );
+}
+
+export function SubmitButton({ children, ...props }: ComponentProps<"button">) {
+  return (
+    <button
+      {...props}
+      type="submit"
+      className="w-full rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white transition hover:bg-gray-700 disabled:opacity-60"
+    >
+      {children}
+    </button>
+  );
+}
+
+export function Alert({ kind, children }: { kind: "error" | "success"; children: ReactNode }) {
+  const styles =
+    kind === "error"
+      ? "bg-red-50 text-red-700 border-red-200"
+      : "bg-green-50 text-green-700 border-green-200";
+  return <p className={`mb-4 rounded-md border px-3 py-2 text-sm ${styles}`}>{children}</p>;
+}
+
+export function FooterLinks({ children }: { children: ReactNode }) {
+  return <div className="mt-6 space-y-1 text-center text-sm text-gray-500">{children}</div>;
+}
+
+export function TextLink({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <Link href={href} className="font-medium text-gray-900 underline-offset-2 hover:underline">
+      {children}
+    </Link>
+  );
+}

package/template/extras/supabase/src/lib/supabase/client.ts

@@ -0,0 +1,9 @@
+import { createBrowserClient } from "@supabase/ssr";
+
+/** Supabase client for use in Client Components. */
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+  );
+}

package/template/extras/supabase/src/lib/supabase/middleware.ts

@@ -0,0 +1,34 @@
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+import { NextResponse, type NextRequest } from "next/server";
+
+type CookieToSet = { name: string; value: string; options: CookieOptions };
+
+/** Refresh the Supabase auth session on every request and propagate cookies. */
+export async function updateSession(request: NextRequest) {
+  let supabaseResponse = NextResponse.next({ request });
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll();
+        },
+        setAll(cookiesToSet: CookieToSet[]) {
+          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value));
+          supabaseResponse = NextResponse.next({ request });
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options),
+          );
+        },
+      },
+    },
+  );
+
+  // Touch the user so Supabase rotates tokens; do not run logic between this and
+  // returning supabaseResponse.
+  await supabase.auth.getUser();
+
+  return supabaseResponse;
+}

package/template/extras/supabase/src/lib/supabase/server.ts

@@ -0,0 +1,29 @@
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+import { cookies } from "next/headers";
+
+type CookieToSet = { name: string; value: string; options: CookieOptions };
+
+/** Supabase client for use in Server Components, Route Handlers and Server Actions. */
+export async function createClient() {
+  const cookieStore = await cookies();
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet: CookieToSet[]) {
+          // Can throw in Server Components; the middleware refreshes the session.
+          try {
+            cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
+          } catch {
+            // ignore — set from a Server Component
+          }
+        },
+      },
+    },
+  );
+}

package/template/extras/tailwind/postcss.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/template/extras/tailwind/src/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/template/extras/tailwind/tailwind.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./src/**/*.{ts,tsx,js,jsx,mdx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;