create-zerotal 1.0.0 → 1.0.2

package/templates/react/app/routes/login.ts

@@ -0,0 +1,32 @@
+import type { HttpContext } from "zerotal";
+import { Inertia } from "@zerotal/inertia";
+import { Auth, GuestMiddleware } from "zerotal/auth";
+import { validate } from "zerotal/validator";
+
+// Signed-in visitors are sent away from the sign-in form rather than shown it.
+export const middleware = [GuestMiddleware];
+
+export const GET = async () => {
+  return Inertia.render("login", { title: "Sign in" });
+};
+
+export async function POST(http: HttpContext): Promise<void> {
+  const { email, password, remember } = await validate(http, (r) => ({
+    email: r.string().trim().email(),
+    password: r.string().min(1),
+    remember: r.boolean().optional(),
+  }));
+
+  const ok = await Auth.attempt({ email, password }, Boolean(remember));
+
+  if (!ok) {
+    // One message for a wrong address and a wrong password alike. Saying which
+    // was wrong would turn this form into a way to discover valid accounts.
+    http.flash("error", "Those credentials do not match our records.");
+    http.redirect("/login", 303);
+    return;
+  }
+
+  http.flash("success", "Welcome back.");
+  http.redirect("/profile", 303);
+}

package/templates/react/app/routes/logout.ts

@@ -0,0 +1,12 @@
+import type { HttpContext } from "zerotal";
+import { Auth, AuthMiddleware } from "zerotal/auth";
+
+export const middleware = [AuthMiddleware];
+
+// POST rather than GET: a link that signs you out can be triggered by any page
+// that manages to make your browser fetch it.
+export async function POST(http: HttpContext): Promise<void> {
+  await Auth.logout();
+  http.flash("success", "Signed out.");
+  http.redirect("/login", 303);
+}

package/templates/react/app/routes/profile/password.ts

@@ -0,0 +1,30 @@
+import type { HttpContext } from "zerotal";
+import { Auth, AuthMiddleware, Hash } from "zerotal/auth";
+import { validate } from "zerotal/validator";
+import { User } from "@app/models/User";
+
+export const middleware = [AuthMiddleware];
+
+// POST /profile/password
+export async function POST(http: HttpContext): Promise<void> {
+  const user = Auth.user() as User;
+
+  const { current_password, password } = await validate(http, (r) => ({
+    current_password: r.string().min(1),
+    password: r.string().min(8).confirmed(),
+  }));
+
+  // Proving the current password is what stops a borrowed session from locking
+  // the real owner out of their own account.
+  if (!(await Hash.check(current_password, user.password))) {
+    http.flash("error", "Your current password is not correct.");
+    http.redirect("/profile", 303);
+    return;
+  }
+
+  user.password = await Hash.make(password);
+  await user.save();
+
+  http.flash("success", "Password updated.");
+  http.redirect("/profile", 303);
+}

package/templates/react/app/routes/profile.ts

@@ -0,0 +1,39 @@
+import type { HttpContext } from "zerotal";
+import { Inertia } from "@zerotal/inertia";
+import { Auth, AuthMiddleware } from "zerotal/auth";
+import { validate } from "zerotal/validator";
+import { User } from "@app/models/User";
+
+// Only for signed-in visitors; everyone else is redirected to sign in.
+export const middleware = [AuthMiddleware];
+
+export const GET = async () => {
+  return Inertia.render("profile", { title: "Your profile" });
+};
+
+// Updates name and email. Changing the password is its own route, so a failure
+// in one form never discards what was typed in the other.
+export async function POST(http: HttpContext): Promise<void> {
+  const user = Auth.user() as User;
+
+  const { name, email } = await validate(http, (r) => ({
+    name: r.string().trim().min(2).max(80),
+    email: r.string().trim().email(),
+  }));
+
+  // Someone else holding this address is the only conflict — keeping your own
+  // is not a change at all.
+  const taken = await User.query().where("email", email).first();
+  if (taken && taken.id !== user.id) {
+    http.flash("error", "That email is already in use.");
+    http.redirect("/profile", 303);
+    return;
+  }
+
+  user.name = name;
+  user.email = email;
+  await user.save();
+
+  http.flash("success", "Details saved.");
+  http.redirect("/profile", 303);
+}

package/templates/react/app/routes/register.ts

@@ -0,0 +1,39 @@
+import type { HttpContext } from "zerotal";
+import { Inertia } from "@zerotal/inertia";
+import { Auth, GuestMiddleware, Hash } from "zerotal/auth";
+import { validate } from "zerotal/validator";
+import { User } from "@app/models/User";
+
+export const middleware = [GuestMiddleware];
+
+export const GET = async () => {
+  return Inertia.render("register", { title: "Create an account" });
+};
+
+export async function POST(http: HttpContext): Promise<void> {
+  const { name, email, password } = await validate(http, (r) => ({
+    name: r.string().trim().min(2).max(80),
+    email: r.string().trim().email(),
+    password: r.string().min(8).confirmed(),
+  }));
+
+  const taken = await User.query().where("email", email).first();
+  if (taken) {
+    http.flash("error", "That email is already registered.");
+    http.redirect("/register", 303);
+    return;
+  }
+
+  // `role` is not fillable, so it cannot arrive from the request at all — it is
+  // set here, in code, which is the whole point of leaving it off `fillable`.
+  const user = new User();
+  user.name = name;
+  user.email = email;
+  user.password = await Hash.make(password);
+  user.role = "user";
+  await user.save();
+
+  await Auth.attempt({ email, password });
+  http.flash("success", "Welcome aboard.");
+  http.redirect("/profile", 303);
+}

package/templates/react/app/routes/reset-password.ts

@@ -0,0 +1,37 @@
+import type { HttpContext } from "zerotal";
+import { Inertia } from "@zerotal/inertia";
+import { GuestMiddleware } from "zerotal/auth";
+import { validate } from "zerotal/validator";
+import { passwordReset } from "@app/auth/passwords";
+
+export const middleware = [GuestMiddleware];
+
+// The token and address arrive on the query string of the emailed link and are
+// handed to the page, which posts them back with the new password.
+export const GET = async (http: HttpContext) => {
+  const url = new URL(http.request.url);
+  return Inertia.render("reset-password", {
+    title: "Choose a new password",
+    token: url.searchParams.get("token") ?? "",
+    email: url.searchParams.get("email") ?? "",
+  });
+};
+
+export async function POST(http: HttpContext): Promise<void> {
+  const { email, token, password } = await validate(http, (r) => ({
+    email: r.string().trim().email(),
+    token: r.string().min(1),
+    password: r.string().min(8).confirmed(),
+  }));
+
+  const ok = await passwordReset.reset({ email, token, password });
+
+  if (!ok) {
+    http.flash("error", "This reset link is invalid or has expired.");
+    http.redirect(`/reset-password?token=${token}&email=${encodeURIComponent(email)}`, 303);
+    return;
+  }
+
+  http.flash("success", "Your password has been updated. Sign in with it below.");
+  http.redirect("/login", 303);
+}

package/templates/react/bootstrap/app.ts

@@ -1,6 +1,14 @@
 import { Application, basePath } from "zerotal";
 import providers from "./providers";
 import { Handler } from "../app/exceptions/Handler";
+import type { User } from "../app/models/User.ts";
+
+// Tell @zerotal/auth which model `Auth.user()` returns. The empty body is the
+// point: this augmentation exists to bind the type, not to add members.
+declare module "zerotal/auth" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface UserModel extends User {}
+}
 
 const app = Application.create({ providers })
   .fileBasedRouting({

package/templates/react/bootstrap/providers.ts

@@ -1,10 +1,13 @@
 import { LogProvider } from "zerotal/logger";
+import { DatabaseProvider } from "zerotal/orm";
 import { SessionProvider } from "zerotal/session";
+import { AuthProvider } from "zerotal/auth";
 import { InertiaProvider } from "@zerotal/inertia";
 
-// Order matters. Sessions come before Inertia because Inertia's shared props read
-// the flash, error and old-input bags out of the session on every render — that is
-// what carries a failed `validate()` back to the form it came from.
-const providers = [LogProvider, SessionProvider, InertiaProvider];
+// Order matters: the database backs the user model and the session underpins
+// auth, so both are registered before AuthProvider boots. AuthProvider installs
+// the middleware that puts the signed-in user on the request — which is what
+// makes `auth.user` appear in every Inertia page's props.
+const providers = [LogProvider, DatabaseProvider, SessionProvider, AuthProvider, InertiaProvider];
 
 export default providers;

package/templates/react/config/auth.ts

@@ -0,0 +1,7 @@
+import { AuthConfig } from "zerotal/auth";
+
+export default AuthConfig({
+  // argon2id is the default and what `Hash.make` uses unless told otherwise.
+  // Switch to 'bcrypt' only to stay compatible with an existing password table.
+  algorithm: "argon2id",
+});

package/templates/react/config/database.ts

@@ -0,0 +1,18 @@
+import { env } from "zerotal";
+import { DatabaseConfig } from "zerotal/orm";
+
+export default DatabaseConfig({
+  // The driver has to agree with the URL's protocol — boot validation rejects a
+  // sqlite driver pointed at postgres:// or mysql://. Change both together.
+  driver: "sqlite",
+
+  // ZT_DB_URL first: `bun zt test` sets it (defaults to :memory:) and that
+  // override has to beat the DATABASE_URL in .env, or the suite would run
+  // against your development database and leave its rows behind.
+  url: env("ZT_DB_URL", env("DATABASE_URL", "./database/db.sqlite")),
+
+  // Builds the schema from the models at boot, so `bun run dev` works with no
+  // migration step. Hard-off in production, where you run the migrations in
+  // database/migrations instead.
+  synchronize: env("APP_ENV", "development") !== "production",
+});

package/templates/react/database/migrations/0001_create_users_table.ts

@@ -0,0 +1,18 @@
+import { Migration, Schema } from "zerotal/orm";
+
+export default class CreateUsersTable extends Migration {
+  async up(): Promise<void> {
+    await Schema.create("users", (table) => {
+      table.increments("id");
+      table.string("name");
+      table.string("email").unique();
+      table.string("password");
+      table.string("role").nullable().default("user");
+      table.timestamps();
+    });
+  }
+
+  async down(): Promise<void> {
+    await Schema.drop("users");
+  }
+}

package/templates/react/database/migrations/0002_create_password_reset_tokens_table.ts

@@ -0,0 +1,23 @@
+import { Migration, Schema } from "zerotal/orm";
+
+/**
+ * One live reset token per address, keyed by email rather than user id so a
+ * request for an unknown address does the same work as a known one — the
+ * response must not reveal which addresses have accounts.
+ *
+ * `token` holds a SHA-256 hash, never the value that was sent: a leaked
+ * database should not hand out working reset links.
+ */
+export default class CreatePasswordResetTokensTable extends Migration {
+  async up(): Promise<void> {
+    await Schema.create("password_reset_tokens", (table) => {
+      table.string("email").primary();
+      table.string("token");
+      table.timestamp("created_at");
+    });
+  }
+
+  async down(): Promise<void> {
+    await Schema.drop("password_reset_tokens");
+  }
+}

package/templates/react/package.json

@@ -8,7 +8,8 @@
     "dev": "bun zt.ts serve --dev",
     "start": "bun zt.ts serve",
     "build": "bun zt.ts inertia:build --production",
-    "test": "bun zt.ts test"
+    "test": "bun zt.ts test",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@inertiajs/react": "^2.0.0",
@@ -21,6 +22,11 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "bun-plugin-tailwind": "latest",
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.8.0",
+    "@types/bun": "^1.3.14"
+  },
+  "engines": {
+    "bun": ">=1.3.14"
   }
 }

package/templates/react/resources/js/Layouts/AppLayout.tsx

@@ -5,6 +5,7 @@ import ThemeToggle from "../Components/ThemeToggle";
 import { CloseIcon, MenuIcon } from "../Components/Icons";
 import { APP_NAME, DOCS_URL } from "../lib/site";
 import { cn } from "../lib/cn";
+import type { SharedProps } from "../types";
 
 /**
  * Shared application shell — decorative backdrop, sticky header with
@@ -26,6 +27,14 @@ const NAV = [
   { href: "/contact", label: "Contact" },
 ];
 
+// Shown to signed-in visitors and guests respectively, so the header always
+// offers the next useful step rather than a link that would bounce them.
+const AUTHED_NAV = [{ href: "/profile", label: "Profile" }];
+const GUEST_NAV = [
+  { href: "/login", label: "Sign in" },
+  { href: "/register", label: "Register" },
+];
+
 const CONTAINER = "mx-auto w-full max-w-5xl px-6";
 
 function isActive(url: string, href: string): boolean {
@@ -33,7 +42,8 @@ function isActive(url: string, href: string): boolean {
 }
 
 export default function AppLayout({ children }: { children: ReactNode }) {
-  const { url } = usePage();
+  const { url, props } = usePage<SharedProps>();
+  const signedIn = Boolean(props.auth?.user);
   const [menuOpen, setMenuOpen] = useState(false);
 
   // Close the mobile menu once a visit lands, otherwise it stays open on top of
@@ -48,7 +58,7 @@ export default function AppLayout({ children }: { children: ReactNode }) {
         : "text-muted-foreground hover:bg-muted hover:text-foreground",
     );
 
-  const navItems = NAV.map((item) => (
+  const navItems = [...NAV, ...(signedIn ? AUTHED_NAV : GUEST_NAV)].map((item) => (
     <Link
       key={item.href}
       href={item.href}

package/templates/react/resources/js/pages/forgot-password.tsx

@@ -0,0 +1,65 @@
+import type { FormEvent, ReactNode } from "react";
+import { Head, Link, useForm } from "@inertiajs/react";
+import AppLayout from "../Layouts/AppLayout";
+import { Button } from "../Components/Button";
+import { Card } from "../Components/Card";
+import { TextField } from "../Components/Field";
+
+interface Props {
+  title: string;
+}
+
+function ForgotPassword({ title }: Props) {
+  const { data, setData, post, processing, errors } = useForm({ email: "" });
+
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    post("/forgot-password");
+  }
+
+  return (
+    <>
+      <Head title={title} />
+
+      <div className="mx-auto max-w-md">
+        <header>
+          <h1 className="text-3xl font-bold tracking-tight text-balance">{title}</h1>
+          <p className="mt-2 text-muted-foreground">
+            Give us the address you signed up with and we will send a link.
+          </p>
+        </header>
+
+        <Card className="mt-8 p-6 sm:p-8">
+          <form onSubmit={submit} className="space-y-5">
+            <TextField
+              label="Email"
+              type="email"
+              autoComplete="email"
+              hint="In development the link is written to the server log rather than emailed."
+              value={data.email}
+              error={errors.email}
+              onChange={(e) => setData("email", e.target.value)}
+              required
+            />
+
+            <Button type="submit" disabled={processing}>
+              {processing ? "Sending…" : "Send reset link"}
+            </Button>
+          </form>
+        </Card>
+
+        <p className="mt-6 text-sm text-muted-foreground">
+          <Link href="/login" className="text-accent hover:underline">
+            Back to sign in
+          </Link>
+        </p>
+      </div>
+    </>
+  );
+}
+
+(ForgotPassword as { layout?: (page: ReactNode) => ReactNode }).layout = (page) => (
+  <AppLayout>{page}</AppLayout>
+);
+
+export default ForgotPassword;

package/templates/react/resources/js/pages/login.tsx

@@ -0,0 +1,92 @@
+import type { FormEvent, ReactNode } from "react";
+import { Head, Link, useForm, usePage } from "@inertiajs/react";
+import AppLayout from "../Layouts/AppLayout";
+import { Button } from "../Components/Button";
+import { Card } from "../Components/Card";
+import { TextField } from "../Components/Field";
+import type { SharedProps } from "../types";
+
+interface Props {
+  title: string;
+}
+
+function Login({ title }: Props) {
+  const { old } = usePage<SharedProps>().props;
+
+  const { data, setData, post, processing, errors } = useForm({
+    email: typeof old["email"] === "string" ? old["email"] : "",
+    password: "",
+    remember: false,
+  });
+
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    post("/login");
+  }
+
+  return (
+    <>
+      <Head title={title} />
+
+      <div className="mx-auto max-w-md">
+        <header>
+          <h1 className="text-3xl font-bold tracking-tight text-balance">{title}</h1>
+          <p className="mt-2 text-muted-foreground">Enter your details to continue.</p>
+        </header>
+
+        <Card className="mt-8 p-6 sm:p-8">
+          <form onSubmit={submit} className="space-y-5">
+            <TextField
+              label="Email"
+              type="email"
+              autoComplete="email"
+              value={data.email}
+              error={errors.email}
+              onChange={(e) => setData("email", e.target.value)}
+              required
+            />
+
+            <TextField
+              label="Password"
+              type="password"
+              autoComplete="current-password"
+              value={data.password}
+              error={errors.password}
+              onChange={(e) => setData("password", e.target.value)}
+              required
+            />
+
+            <label className="flex items-center gap-2 text-sm text-muted-foreground">
+              <input
+                type="checkbox"
+                className="rounded border-input"
+                checked={data.remember}
+                onChange={(e) => setData("remember", e.target.checked)}
+              />
+              Remember me
+            </label>
+
+            <Button type="submit" disabled={processing}>
+              {processing ? "Signing in…" : "Sign in"}
+            </Button>
+          </form>
+        </Card>
+
+        <div className="mt-6 flex items-center justify-between text-sm">
+          <Link href="/forgot-password" className="text-accent hover:underline">
+            Forgot your password?
+          </Link>
+          <Link href="/register" className="text-accent hover:underline">
+            Create an account
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+}
+
+(Login as { layout?: (page: ReactNode) => ReactNode }).layout = (page) => (
+  <AppLayout>{page}</AppLayout>
+);
+
+export default Login;

package/templates/react/resources/js/pages/profile.tsx

@@ -0,0 +1,147 @@
+import type { FormEvent, ReactNode } from "react";
+import { Head, router, useForm, usePage } from "@inertiajs/react";
+import AppLayout from "../Layouts/AppLayout";
+import { Button } from "../Components/Button";
+import { Card } from "../Components/Card";
+import { TextField } from "../Components/Field";
+import type { SharedProps } from "../types";
+
+interface Props {
+  title: string;
+}
+
+function Profile({ title }: Props) {
+  // `auth.user` is shared into every page by @zerotal/inertia, so this route
+  // does not have to pass the signed-in user as a prop.
+  const { auth } = usePage<SharedProps>().props;
+
+  const details = useForm({
+    name: auth.user?.name ?? "",
+    email: auth.user?.email ?? "",
+  });
+
+  const password = useForm({
+    current_password: "",
+    password: "",
+    password_confirmation: "",
+  });
+
+  function saveDetails(event: FormEvent) {
+    event.preventDefault();
+    details.post("/profile", { preserveScroll: true });
+  }
+
+  function changePassword(event: FormEvent) {
+    event.preventDefault();
+    // Clear the fields whichever way it goes — a failed attempt should not
+    // leave the old password sitting in the DOM.
+    password.post("/profile/password", {
+      preserveScroll: true,
+      onFinish: () => password.reset(),
+    });
+  }
+
+  return (
+    <>
+      <Head title={title} />
+
+      <div className="mx-auto max-w-2xl space-y-6">
+        <header>
+          <h1 className="text-3xl font-bold tracking-tight text-balance">{title}</h1>
+          <p className="mt-2 text-muted-foreground">
+            Update your details or change your password.
+          </p>
+        </header>
+
+        <Card className="p-6 sm:p-8">
+          <h2 className="text-lg font-semibold">Details</h2>
+
+          <form onSubmit={saveDetails} className="mt-4 space-y-5">
+            <TextField
+              label="Name"
+              autoComplete="name"
+              value={details.data.name}
+              error={details.errors.name}
+              onChange={(e) => details.setData("name", e.target.value)}
+              required
+            />
+
+            <TextField
+              label="Email"
+              type="email"
+              autoComplete="email"
+              value={details.data.email}
+              error={details.errors.email}
+              onChange={(e) => details.setData("email", e.target.value)}
+              required
+            />
+
+            <Button type="submit" disabled={details.processing}>
+              {details.processing ? "Saving…" : "Save details"}
+            </Button>
+          </form>
+        </Card>
+
+        <Card className="p-6 sm:p-8">
+          <h2 className="text-lg font-semibold">Password</h2>
+
+          <form onSubmit={changePassword} className="mt-4 space-y-5">
+            <TextField
+              label="Current password"
+              type="password"
+              autoComplete="current-password"
+              value={password.data.current_password}
+              error={password.errors.current_password}
+              onChange={(e) => password.setData("current_password", e.target.value)}
+              required
+            />
+
+            <TextField
+              label="New password"
+              type="password"
+              autoComplete="new-password"
+              hint="At least 8 characters."
+              value={password.data.password}
+              error={password.errors.password}
+              onChange={(e) => password.setData("password", e.target.value)}
+              required
+            />
+
+            <TextField
+              label="Confirm new password"
+              type="password"
+              autoComplete="new-password"
+              value={password.data.password_confirmation}
+              error={password.errors.password_confirmation}
+              onChange={(e) => password.setData("password_confirmation", e.target.value)}
+              required
+            />
+
+            <Button type="submit" disabled={password.processing}>
+              {password.processing ? "Updating…" : "Change password"}
+            </Button>
+          </form>
+        </Card>
+
+        <Card className="p-6 sm:p-8">
+          <h2 className="text-lg font-semibold">Session</h2>
+          <p className="mt-1 text-sm text-muted-foreground">Sign out of this browser.</p>
+          <Button
+            type="button"
+            variant="secondary"
+            className="mt-4"
+            onClick={() => router.post("/logout")}
+          >
+            Sign out
+          </Button>
+        </Card>
+      </div>
+    </>
+  );
+}
+
+(Profile as { layout?: (page: ReactNode) => ReactNode }).layout = (page) => (
+  <AppLayout>{page}</AppLayout>
+);
+
+export default Profile;