@clubedge/create-clubedge-app 0.2.0 → 0.3.0

package/template/apps/web/e2e/auth.spec.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "@playwright/test";
+import site from "../src/config/site.json";
+
+// The browser suite runs without Supabase credentials, so these checks cover the
+// unconfigured mode: pages stay explorable and redirects stay on this origin.
+
+test("dashboard stays explorable while authentication is not configured", async ({ page }) => {
+  await page.goto("/dashboard");
+  await expect(page).toHaveURL(/\/dashboard$/);
+  await expect(
+    page.getByRole("heading", { name: "A better place to start building." }),
+  ).toBeVisible();
+  await expect(page.getByRole("link", { name: "Sign in" }).first()).toBeVisible();
+});
+
+test("login keeps a same-origin destination and drops external ones", async ({ page }) => {
+  await page.goto("/login?next=%2Fprojects%3Ftab%3Da");
+  await expect(page.locator('input[name="next"]')).toHaveValue("/projects?tab=a");
+  await expect(page.getByRole("link", { name: "Create one" })).toHaveAttribute(
+    "href",
+    "/login?mode=signup&next=%2Fprojects%3Ftab%3Da",
+  );
+
+  await page.goto("/login?next=https%3A%2F%2Fevil.example");
+  await expect(page.locator('input[name="next"]')).toHaveValue("/dashboard");
+});
+
+test("login explains the rate limit error", async ({ page }) => {
+  await page.goto("/login?error=rate-limited");
+  await expect(page.getByRole("alert")).toContainText("Too many attempts");
+});
+
+test("health endpoint reports the configured service id", async ({ request }) => {
+  const health = await request.get("/api/health");
+  expect(health.ok()).toBeTruthy();
+  expect(await health.json()).toMatchObject({ status: "ok", service: site.serviceId });
+});

package/template/apps/web/e2e/home.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from "@playwright/test";
+
+test("starter landing page loads with setup guidance and a health endpoint", async ({
+  page,
+  request,
+}) => {
+  await page.goto("/");
+  await expect(
+    page.getByRole("heading", { name: "Start with the foundation. Build what matters." }),
+  ).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Up and running in three steps" })).toBeVisible();
+  const health = await request.get("/api/health");
+  expect(health.ok()).toBeTruthy();
+  expect((await health.json()).status).toBe("ok");
+});

package/template/apps/web/next-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+import "./.next/dev/types/root-params.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/apps/web/next.config.ts

@@ -0,0 +1,32 @@
+import type { NextConfig } from "next";
+import { fileURLToPath } from "node:url";
+
+const workspaceRoot = fileURLToPath(new URL("../..", import.meta.url));
+
+const securityHeaders = [
+  { key: "X-Content-Type-Options", value: "nosniff" },
+  { key: "X-Frame-Options", value: "DENY" },
+  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+  { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
+  { key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload" },
+];
+
+const nextConfig: NextConfig = {
+  poweredByHeader: false,
+  output: "standalone",
+  outputFileTracingRoot: workspaceRoot,
+  // Workspace packages ship TypeScript source and are compiled by the app.
+  transpilePackages: [
+    "@clubedge/auth",
+    "@clubedge/cache",
+    "@clubedge/core",
+    "@clubedge/db",
+    "@clubedge/storage",
+    "@clubedge/ui",
+  ],
+  async headers() {
+    return [{ source: "/:path*", headers: securityHeaders }];
+  },
+};
+
+export default nextConfig;

package/template/apps/web/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@clubedge/web",
+  "version": "0.3.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "node ../../scripts/start-standalone.mjs",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@clubedge/auth": "workspace:*",
+    "@clubedge/cache": "workspace:*",
+    "@clubedge/core": "workspace:*",
+    "@clubedge/db": "workspace:*",
+    "@clubedge/storage": "workspace:*",
+    "@clubedge/ui": "workspace:*",
+    "cn": "^0.4.0",
+    "lucide-react": "^0.468.0",
+    "next": "^16.1.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zod": "^4.1.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "tailwindcss": "^4.1.13"
+  }
+}

package/template/apps/web/postcss.config.mjs

@@ -0,0 +1,3 @@
+const config = { plugins: { "@tailwindcss/postcss": {} } };
+
+export default config;

package/template/apps/web/public/.well-known/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#2563eb;}.cls-2,.cls-3{fill:#fff;}.cls-2{fill-rule:evenodd;}</style></defs><rect class="cls-1" width="512" height="512"/><path class="cls-2" d="M364.36,283a359.51,359.51,0,0,0-43.5-10.18,364.29,364.29,0,0,1,5.24-55.17l30-15.13,20.83,5.63v34.6A43.79,43.79,0,0,0,364.36,283Zm-66.88-13.4a395.53,395.53,0,0,0-82.94,0,390.43,390.43,0,0,0-3-39L256,253l44.45-22.42A390.43,390.43,0,0,0,297.48,269.6Zm-106.32,3.22c-39.75,6.75-76,19.56-106.55,36.9a175.47,175.47,0,0,1-2.52-29.64,173.14,173.14,0,0,1,31-99.15l72.81,36.72a364.29,364.29,0,0,1,5.24,55.17Zm230.41,60.63A174.34,174.34,0,0,1,352.17,425c-17.72-36.5-28.9-80.53-31-128.34,37.9,6.89,72.13,19.67,100.42,36.78Zm-89.78,103.2a174.19,174.19,0,0,1-151.57,0c20-40.75,32.48-90.09,34.24-143.46a373.23,373.23,0,0,1,83.1,0C299.32,346.56,311.75,395.9,331.79,436.65ZM159.85,425a174.36,174.36,0,0,1-69.41-91.56c28.3-17.11,62.53-29.89,100.42-36.78-2.11,47.81-13.3,91.84-31,128.34Z"/><path class="cls-2" d="M256,58l173,84.17-33.81,17.05L280.05,128.07c-6.92-4.44-16-6.2-24-6.2-7.37,0-15.32,1.45-21.88,4.94s-11.85,9.19-11.85,16.9,5.42,13.48,11.85,16.9,14.51,4.94,21.88,4.94a54.52,54.52,0,0,0,9.29-.78l77.41,20.93L256,229.42,83,142.17,256,58Z"/><path class="cls-2" d="M256,130.18c8.43,0,15.9,2.18,20.52,5.55l140,37.84v72.75a29.68,29.68,0,0,0-18.51,0V192l-132.36-35.8a45,45,0,0,1-9.6,1c-14,0-25.42-6.05-25.42-13.53S242,130.18,256,130.18Z"/><circle class="cls-3" cx="407.23" cy="274.28" r="22.68"/></svg>

package/template/apps/web/src/app/actions/auth.ts

@@ -0,0 +1,85 @@
+"use server";
+
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { z } from "zod";
+import { getClientIp, safeRedirectPath } from "@clubedge/core";
+import { clientEnv } from "@/env/client";
+import { loginUrl } from "@/lib/login-url";
+import { getAuth } from "@/server/auth";
+import { createRateLimiter } from "@/server/cache";
+import { ensureUserProfile } from "@/server/users";
+
+const credentialsSchema = z.object({
+  email: z.email(),
+  password: z.string().min(8).max(128),
+});
+
+// Ten attempts per minute per client address and action.
+const authRateLimiter = createRateLimiter(10, 60);
+
+function readCredentials(formData: FormData) {
+  return credentialsSchema.safeParse({
+    email: formData.get("email"),
+    password: formData.get("password"),
+  });
+}
+
+async function isRateLimited(action: "sign-in" | "sign-up") {
+  const ip = getClientIp(await headers());
+  try {
+    const result = await authRateLimiter.limit(`auth:${action}:${ip}`);
+    return !result.success;
+  } catch (error) {
+    // Fail open: an unavailable limiter backend should not lock every user out.
+    console.error("Rate limiter unavailable", error);
+    return false;
+  }
+}
+
+export async function signIn(formData: FormData) {
+  const next = safeRedirectPath(formData.get("next"));
+  if (await isRateLimited("sign-in")) redirect(loginUrl({ error: "rate-limited", next }));
+
+  const parsed = readCredentials(formData);
+  if (!parsed.success) redirect(loginUrl({ error: "invalid-input", next }));
+
+  const auth = await getAuth();
+  const result = await auth.signInWithPassword(parsed.data);
+  if (!result.ok) redirect(loginUrl({ error: "invalid-credentials", next }));
+
+  await ensureUserProfile(result.value);
+  redirect(next);
+}
+
+export async function signUp(formData: FormData) {
+  const next = safeRedirectPath(formData.get("next"));
+  if (await isRateLimited("sign-up")) {
+    redirect(loginUrl({ mode: "signup", error: "rate-limited", next }));
+  }
+
+  const parsed = readCredentials(formData);
+  if (!parsed.success) redirect(loginUrl({ mode: "signup", error: "invalid-input", next }));
+
+  const callbackUrl = new URL("/auth/callback", clientEnv.NEXT_PUBLIC_APP_URL);
+  callbackUrl.searchParams.set("next", next);
+  const auth = await getAuth();
+  const result = await auth.signUp({ ...parsed.data, emailRedirectTo: callbackUrl.toString() });
+  if (!result.ok) redirect(loginUrl({ mode: "signup", error: "signup-failed", next }));
+  if (result.value.needsConfirmation || !result.value.user) {
+    redirect(loginUrl({ mode: "signup", checkEmail: true, next }));
+  }
+
+  await ensureUserProfile(result.value.user);
+  redirect(next);
+}
+
+export async function signOut() {
+  try {
+    const auth = await getAuth();
+    await auth.signOut();
+  } catch (error) {
+    console.error("Sign-out failed", error);
+  }
+  redirect("/login");
+}

package/template/apps/web/src/app/api/health/route.ts

@@ -0,0 +1,11 @@
+import { siteConfig } from "@/config/site";
+
+export const dynamic = "force-dynamic";
+
+export function GET() {
+  return Response.json({
+    status: "ok",
+    service: siteConfig.serviceId,
+    timestamp: new Date().toISOString(),
+  });
+}

package/template/apps/web/src/app/auth/callback/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse, type NextRequest } from "next/server";
+import { safeRedirectPath } from "@clubedge/core";
+import { loginUrl } from "@/lib/login-url";
+import { getAuth } from "@/server/auth";
+import { ensureUserProfile } from "@/server/users";
+
+export async function GET(request: NextRequest) {
+  const code = request.nextUrl.searchParams.get("code");
+  const next = safeRedirectPath(request.nextUrl.searchParams.get("next"));
+
+  if (code) {
+    const auth = await getAuth();
+    const result = await auth.exchangeCodeForSession(code);
+    if (result.ok) {
+      await ensureUserProfile(result.value);
+      return NextResponse.redirect(new URL(next, request.url));
+    }
+  }
+
+  return NextResponse.redirect(new URL(loginUrl({ error: "auth-callback" }), request.url));
+}

package/template/apps/web/src/app/dashboard/_components/account-button.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+
+import { signOut } from "@/app/actions/auth";
+import type { AuthUser } from "@clubedge/auth";
+import { Button } from "@clubedge/ui/components/button";
+
+type AccountButtonProps = {
+  user: AuthUser | null;
+  className?: string;
+};
+
+export function AccountButton({ user, className }: AccountButtonProps) {
+  if (!user) {
+    return (
+      <Button className={className} render={<Link href="/login" />} size="sm" variant="outline">
+        Sign in
+      </Button>
+    );
+  }
+
+  return (
+    <form action={signOut} className={className}>
+      <Button
+        className="w-full"
+        size="sm"
+        title={user.email ?? undefined}
+        type="submit"
+        variant="outline"
+      >
+        Sign out
+      </Button>
+    </form>
+  );
+}

package/template/apps/web/src/app/dashboard/_components/app-sidebar.tsx

@@ -0,0 +1,91 @@
+import { Activity, ArrowUpRight, Blocks, Github, LayoutDashboard } from "lucide-react";
+import Link from "next/link";
+
+import { ClubedgeMark } from "@/components/branding/clubedge-mark";
+import { siteConfig } from "@/config/site";
+import type { AuthUser } from "@clubedge/auth";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from "@clubedge/ui/components/sidebar";
+
+import { AccountButton } from "./account-button";
+
+const navigation = [
+  { href: "#overview", label: "Overview", icon: LayoutDashboard },
+  { href: "#modules", label: "Modules", icon: Blocks },
+  { href: "#activity", label: "Setup status", icon: Activity },
+];
+
+export function AppSidebar({ user }: { user: AuthUser | null }) {
+  return (
+    <Sidebar collapsible="icon" variant="inset">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              className="h-12"
+              render={<Link href="#overview" aria-label={`${siteConfig.name} home`} />}
+              size="lg"
+              tooltip={siteConfig.name}
+            >
+              <ClubedgeMark alt="" className="size-8 shrink-0 rounded-lg" />
+              <span className="grid min-w-0 text-start leading-tight">
+                <span className="truncate font-semibold">{siteConfig.shortName}</span>
+                <span className="truncate text-xs text-sidebar-foreground/70">
+                  {siteConfig.workspaceLabel}
+                </span>
+              </span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarSeparator />
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
+          <SidebarMenu>
+            {navigation.map(({ href, label, icon: Icon }, index) => (
+              <SidebarMenuItem key={href}>
+                <SidebarMenuButton
+                  render={<Link href={href} aria-current={index === 0 ? "page" : undefined} />}
+                  isActive={index === 0}
+                  tooltip={label}
+                >
+                  <Icon aria-hidden="true" />
+                  <span>{label}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              render={<Link href={siteConfig.links.repository} target="_blank" rel="noreferrer" />}
+              tooltip="Starter repository"
+            >
+              <Github aria-hidden="true" />
+              <span>Starter repository</span>
+              <ArrowUpRight aria-hidden="true" className="ms-auto" />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <AccountButton className="w-full" user={user} />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}