@percepta/create 3.0.1 → 3.1.2

package/templates/webapp/src/app/(auth)/auth/signup/CredentialsSignUpForm.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Input } from "@percepta/design";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import React, { useCallback } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import z from "zod";
+import { FormItem } from "../../../../components/form/FormItem";
+import { authClient } from "../../../../lib/auth-client";
+
+const CREDENTIALS_SCHEMA = z.object({
+  name: z.string().min(1, "Name is required"),
+  email: z.string().email("Enter a valid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+type Credentials = z.infer<typeof CREDENTIALS_SCHEMA>;
+
+export function CredentialsSignUpForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+  } = useForm<Credentials>({
+    resolver: zodResolver(CREDENTIALS_SCHEMA),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+    },
+  });
+
+  const callbackUrl = searchParams.get("callbackUrl") ?? "/";
+
+  const submit = useCallback(
+    async ({ name, email, password }: Credentials): Promise<void> => {
+      const { error } = await authClient.signUp.email({
+        name,
+        email,
+        password,
+        callbackURL: callbackUrl,
+      });
+
+      if (error != null) {
+        toast.error(error.message ?? "Unable to create account.");
+        return;
+      }
+
+      router.push(callbackUrl);
+      router.refresh();
+    },
+    [callbackUrl, router],
+  );
+
+  return (
+    <div className="space-y-8">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold text-foreground">Create Account</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Already have an account?{" "}
+          <Link
+            className="font-medium text-primary underline-offset-4 hover:underline"
+            href={`/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`}
+          >
+            Sign in
+          </Link>
+        </p>
+      </div>
+      <form className="space-y-6" onSubmit={handleSubmit(submit)}>
+        <div className="space-y-4">
+          <Controller
+            control={control}
+            name="name"
+            render={({ field, fieldState }) => (
+              <FormItem label="Name" fieldState={fieldState}>
+                <Input {...field} autoComplete="name" />
+              </FormItem>
+            )}
+          />
+          <Controller
+            control={control}
+            name="email"
+            render={({ field, fieldState }) => (
+              <FormItem label="Email" fieldState={fieldState}>
+                <Input {...field} type="email" autoComplete="email" />
+              </FormItem>
+            )}
+          />
+          <Controller
+            control={control}
+            name="password"
+            render={({ field, fieldState }) => (
+              <FormItem label="Password" fieldState={fieldState}>
+                <Input {...field} type="password" autoComplete="new-password" />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="flex justify-end">
+          <Button type="submit" loading={isSubmitting}>
+            Create Account
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/templates/webapp/src/app/(auth)/auth/signup/page.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { auth } from "../../../../lib/auth";
+import { CredentialsSignUpForm } from "./CredentialsSignUpForm";
+
+export const metadata: Metadata = {
+  title: "Create Account — __APP_TITLE__",
+};
+
+export default async function SignUpPage() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (session?.user != null) {
+    redirect("/");
+  }
+
+  return (
+    <Suspense
+      fallback={
+        <p className="text-center text-sm text-muted-foreground">Loading...</p>
+      }
+    >
+      <CredentialsSignUpForm />
+    </Suspense>
+  );
+}

package/templates/webapp/src/app/global-error.tsx

@@ -8,7 +8,9 @@ export default function GlobalError({
   reset: () => void;
 }) {
   try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-assignment
     const { faro } = require("@grafana/faro-web-sdk");
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     faro.api?.pushError(error);
   } catch {
     // Faro may not be initialized yet — don't let reporting break the error page
@@ -16,7 +18,7 @@ export default function GlobalError({
 
   return (
     <html lang="en">
-      <body suppressHydrationWarning>
+      <body suppressHydrationWarning={true}>
         <div style={{ padding: "2rem", textAlign: "center" }}>
           <h1>Something went wrong</h1>
           <button onClick={() => reset()}>Try again</button>

package/templates/webapp/src/components/FaroProvider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Alert, AlertDescription, AlertTitle, Button } from "@percepta/design";
 import { FaroProvider as BaseFaroProvider } from "@percepta/next-utils/faro";
-import { Alert, AlertTitle, AlertDescription, Button } from "@percepta/design";
 import { type ReactNode } from "react";
 
 // Import to trigger Faro initialization at module scope (earliest possible)
@@ -9,9 +9,7 @@ import "../services/observability/initFaro";
 
 export function AppFaroProvider({ children }: { children: ReactNode }) {
   return (
-    <BaseFaroProvider fallback={<ErrorFallback />}>
-      {children}
-    </BaseFaroProvider>
+    <BaseFaroProvider fallback={<ErrorFallback />}>{children}</BaseFaroProvider>
   );
 }
 

package/templates/webapp/src/components/form/FormItem.tsx

@@ -34,7 +34,7 @@ export const FormItem: React.FC<FormItemProps> = ({
     return (
       <p
         id={messageId}
-        className="text-destructive-foreground text-sm"
+        className="text-sm text-destructive-foreground"
         data-slot="form-message"
       >
         {body}
@@ -70,7 +70,7 @@ export const FormItem: React.FC<FormItemProps> = ({
       {description != null && (
         <p
           id={descriptionId}
-          className="text-muted-foreground text-sm"
+          className="text-sm text-muted-foreground"
           data-slot="form-description"
         >
           {description}

package/templates/webapp/src/config/getEnvConfig.ts

@@ -16,6 +16,7 @@ export const { getEnvConfig, schema: ENV_CONFIG_SCHEMA } = createEnvConfig(
     DATABASE_USERNAME: z.string().default("postgres"),
     DATABASE_PASSWORD: z.string().default("postgres"),
     DATABASE_NAME: z.string().default("__DB_NAME__"),
+    DATABASE_SCHEMA: z.string().optional(),
     DATABASE_USE_SSL: z
       .string()
       .transform((value: string): boolean => value === "true")

package/templates/webapp/src/drizzle/db.ts

@@ -2,6 +2,8 @@ import { type NodePgDatabase, drizzle } from "drizzle-orm/node-postgres";
 import { Pool } from "pg";
 import { getEnvConfig } from "../config/getEnvConfig";
 import * as schema from "./schema";
+import { getPgSearchPathOption } from "./searchPath";
+import { getPgSslConfig } from "./ssl";
 
 export const { client, db } = createDb();
 
@@ -12,6 +14,7 @@ function createDb(): { client: Pool; db: NodePgDatabase<typeof schema> } {
     DATABASE_USERNAME: user,
     DATABASE_PASSWORD: password,
     DATABASE_NAME: database,
+    DATABASE_SCHEMA: databaseSchema,
     DATABASE_USE_SSL: useSSL,
   } = getEnvConfig();
 
@@ -21,7 +24,8 @@ function createDb(): { client: Pool; db: NodePgDatabase<typeof schema> } {
     user,
     password,
     database,
-    ssl: useSSL,
+    ssl: getPgSslConfig(useSSL),
+    options: getPgSearchPathOption(databaseSchema),
   });
 
   return { client: _client, db: drizzle(_client, { schema }) };

package/templates/webapp/src/drizzle/migrations/0000_eager_grandmaster.sql

@@ -52,6 +52,6 @@ CREATE TABLE "verification" (
 	"updated_at" timestamp
 );
 --> statement-breakpoint
-ALTER TABLE "account" ADD CONSTRAINT "account_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
-ALTER TABLE "session" ADD CONSTRAINT "session_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
-CREATE UNIQUE INDEX "lower_email_index" ON "users" USING btree (lower("email"));
+ALTER TABLE "account" ADD CONSTRAINT "account_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "session" ADD CONSTRAINT "session_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE UNIQUE INDEX "lower_email_index" ON "users" USING btree (lower("email"));

package/templates/webapp/src/drizzle/migrations/meta/0000_snapshot.json

@@ -99,12 +99,8 @@
           "name": "account_user_id_users_id_fk",
           "tableFrom": "account",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -180,12 +176,8 @@
           "name": "session_user_id_users_id_fk",
           "tableFrom": "session",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -195,9 +187,7 @@
         "session_token_unique": {
           "name": "session_token_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "token"
-          ]
+          "columns": ["token"]
         }
       },
       "policies": {},
@@ -303,9 +293,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -373,4 +361,4 @@
     "schemas": {},
     "tables": {}
   }
-}
+}

package/templates/webapp/src/drizzle/searchPath.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { getPgSearchPathOption } from "./searchPath";
+
+describe("getPgSearchPathOption", () => {
+  it("includes public so extension functions remain resolvable", () => {
+    expect(getPgSearchPathOption("my_app")).toBe(
+      "-c search_path=my_app,public",
+    );
+  });
+
+  it("returns undefined for blank schema names", () => {
+    expect(getPgSearchPathOption(undefined)).toBeUndefined();
+    expect(getPgSearchPathOption("   ")).toBeUndefined();
+  });
+
+  it("rejects unsafe unquoted identifiers", () => {
+    expect(() => getPgSearchPathOption("my-app")).toThrow(
+      "DATABASE_SCHEMA must be a valid unquoted Postgres identifier",
+    );
+  });
+});

package/templates/webapp/src/drizzle/searchPath.ts

@@ -0,0 +1,16 @@
+const POSTGRES_IDENTIFIER_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+export function getPgSearchPathOption(
+  schemaName: string | undefined,
+): string | undefined {
+  const searchPath = schemaName?.trim();
+  if (!searchPath) return undefined;
+
+  if (!POSTGRES_IDENTIFIER_PATTERN.test(searchPath)) {
+    throw new Error(
+      `DATABASE_SCHEMA must be a valid unquoted Postgres identifier. Received: ${searchPath}`,
+    );
+  }
+
+  return `-c search_path=${searchPath},public`;
+}

package/templates/webapp/src/drizzle/ssl.ts

@@ -0,0 +1,5 @@
+export function getPgSslConfig(
+  useSSL: boolean,
+): false | { rejectUnauthorized: false } {
+  return useSSL ? { rejectUnauthorized: false } : false;
+}

package/templates/webapp/src/lib/auth/index.ts

@@ -1,12 +1,12 @@
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { admin } from "better-auth/plugins";
+import { getEnvConfig } from "../../config/getEnvConfig";
 import { db } from "../../drizzle/db";
 import { accounts } from "../../drizzle/schema/auth/accounts";
 import { sessions } from "../../drizzle/schema/auth/sessions";
 import { users } from "../../drizzle/schema/auth/users";
 import { verifications } from "../../drizzle/schema/auth/verifications";
-import { getEnvConfig } from "../../config/getEnvConfig";
 import { getLogger } from "../../services/logger/AppLogger";
 
 // eslint-disable-next-line n/no-process-env -- detecting Next.js build phase

package/templates/webapp/src/lib/auth-client.ts

@@ -1,5 +1,5 @@
-import { createAuthClient } from "better-auth/react";
 import { adminClient } from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
 
 export const authClient = createAuthClient({
   plugins: [adminClient()],

package/templates/webapp/src/services/observability/initFaro.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { createFaroInstance } from "@percepta/next-utils/faro";
 import { TracingInstrumentation } from "@grafana/faro-web-tracing";
+import { createFaroInstance } from "@percepta/next-utils/faro";
 import { getClientEnvConfig } from "../../config/clientEnvConfig";
 
 const {

package/templates/webapp/src/styles/globals.css

@@ -13,13 +13,6 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);