@farm.js/create-app 0.1.0-beta.7 → 0.1.0-beta.71

package/dist/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../src/utils.ts"],"sourcesContent":["import pc from \"picocolors\";\n\nexport const logger = {\n  info: (message: string) => console.log(`${pc.blue(\"ℹ\")} ${message}`),\n  success: (message: string) => console.log(`${pc.green(\"✓\")} ${message}`),\n  warn: (message: string) => console.warn(`${pc.yellow(\"⚠\")} ${message}`),\n  error: (message: string) => console.error(`${pc.red(\"✗\")} ${message}`),\n};\n\nexport function showBanner() {\n  const art = [\n    \" _______                         \",\n    \"|  ___  |__ _ _ __ _ __ ___     \",\n    \"| |_ /| / _` | '__| '_ ` _ \\\\ \",\n    \"|  _ \\\\| | (_| | |  | | | | | | \",\n    \"|_| \\\\_\\\\_|\\\\__,_|_|  |_| |_| |_|\",\n  ];\n\n  console.log(\"\");\n  for (const line of art) {\n    console.log(pc.cyan(line));\n  }\n  console.log(pc.bold(pc.green(\"Create Farm.js App\")) + pc.dim(\"  modern React meta-framework\"));\n  console.log(\"\");\n}\n"],"mappings":";;AAEA,MAAa,SAAS;CACpB,OAAO,YAAoB,QAAQ,IAAI,GAAG,GAAG,KAAK,GAAG,EAAE,GAAG,SAAS;CACnE,UAAU,YAAoB,QAAQ,IAAI,GAAG,GAAG,MAAM,GAAG,EAAE,GAAG,SAAS;CACvE,OAAO,YAAoB,QAAQ,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,GAAG,SAAS;CACtE,QAAQ,YAAoB,QAAQ,MAAM,GAAG,GAAG,IAAI,GAAG,EAAE,GAAG,SAAS;AACvE;AAEA,SAAgB,aAAa;CAC3B,MAAM,MAAM;EACV;EACA;EACA;EACA;EACA;CACF;CAEA,QAAQ,IAAI,EAAE;CACd,KAAK,MAAM,QAAQ,KACjB,QAAQ,IAAI,GAAG,KAAK,IAAI,CAAC;CAE3B,QAAQ,IAAI,GAAG,KAAK,GAAG,MAAM,oBAAoB,CAAC,IAAI,GAAG,IAAI,+BAA+B,CAAC;CAC7F,QAAQ,IAAI,EAAE;AAChB"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../src/utils.ts"],"sourcesContent":["import pc from \"picocolors\";\n\nexport const logger = {\n  info: (message: string) => console.log(`${pc.blue(\"ℹ\")} ${message}`),\n  success: (message: string) => console.log(`${pc.green(\"✓\")} ${message}`),\n  warn: (message: string) => console.warn(`${pc.yellow(\"⚠\")} ${message}`),\n  error: (message: string) => console.error(`${pc.red(\"✗\")} ${message}`),\n};\n\nexport function showBanner() {\n  const art = [\n    \"░██████████   ░███    ░█████████  ░███     ░███         ░█████   ░██████\",\n    \"░██          ░██░██   ░██     ░██ ░████   ░████           ░██   ░██   ░██\",\n    \"░██         ░██  ░██  ░██     ░██ ░██░██ ░██░██           ░██  ░██\",\n    \"░█████████ ░█████████ ░█████████  ░██ ░████ ░██           ░██   ░████████\",\n    \"░██        ░██    ░██ ░██   ░██   ░██  ░██  ░██     ░██   ░██          ░██\",\n    \"░██        ░██    ░██ ░██    ░██  ░██       ░██     ░██   ░██   ░██   ░██\",\n    \"░██        ░██    ░██ ░██     ░██ ░██       ░██ ░██  ░██████     ░██████\",\n  ];\n\n  console.log(\"\");\n  for (const line of art) {\n    console.log(pc.cyan(line));\n  }\n  console.log(\"\");\n  console.log(\n    pc.bold(pc.green(\"Create FARMJS App\")) + pc.dim(\"  a framework for product-integrated apps\"),\n  );\n  console.log(\"\");\n}\n"],"mappings":";;AAEA,MAAa,SAAS;CACpB,OAAO,YAAoB,QAAQ,IAAI,GAAG,GAAG,KAAK,GAAG,EAAE,GAAG,SAAS;CACnE,UAAU,YAAoB,QAAQ,IAAI,GAAG,GAAG,MAAM,GAAG,EAAE,GAAG,SAAS;CACvE,OAAO,YAAoB,QAAQ,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,GAAG,SAAS;CACtE,QAAQ,YAAoB,QAAQ,MAAM,GAAG,GAAG,IAAI,GAAG,EAAE,GAAG,SAAS;AACvE;AAEA,SAAgB,aAAa;CAC3B,MAAM,MAAM;EACV;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,QAAQ,IAAI,EAAE;CACd,KAAK,MAAM,QAAQ,KACjB,QAAQ,IAAI,GAAG,KAAK,IAAI,CAAC;CAE3B,QAAQ,IAAI,EAAE;CACd,QAAQ,IACN,GAAG,KAAK,GAAG,MAAM,mBAAmB,CAAC,IAAI,GAAG,IAAI,2CAA2C,CAC7F;CACA,QAAQ,IAAI,EAAE;AAChB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@farm.js/create-app",
-  "version": "0.1.0-beta.7",
-  "description": "Create a new Farm.js application",
+  "version": "0.1.0-beta.71",
+  "description": "Create a new FARMJS application",
   "keywords": [
     "@farm.js/create-app",
     "create-app",

package/templates/_integrations/better-auth/preact/farm.config.ts

@@ -0,0 +1,17 @@
+import { betterAuth } from "@farm.js/better-auth";
+import { defineConfig } from "@farm.js/core/config";
+import { preact } from "@farm.js/preact";
+import { auth } from "./src/lib/auth.ts";
+
+export default defineConfig({
+  renderer: preact(),
+  theme: {
+    default: "dark",
+  },
+  integrations: {
+    auth: betterAuth({ instance: auth }),
+  },
+  deploy: {
+    target: "vercel",
+  },
+});

package/templates/_integrations/better-auth/preact/src/app/dashboard/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useState } from "preact/hooks";
+import { authClient } from "../../lib/auth-client";
+
+type SessionData = NonNullable<Awaited<ReturnType<typeof authClient.getSession>>["data"]>;
+
+export default function DashboardPage() {
+  const [session, setSession] = useState<SessionData | null>(null);
+  const [pending, setPending] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    authClient
+      .getSession()
+      .then((response) => {
+        if (!active) return;
+        if (response.error || !response.data?.user) {
+          window.location.replace("/sign-in");
+          return;
+        }
+        setSession(response.data);
+        setPending(false);
+      })
+      .catch(() => window.location.replace("/sign-in"));
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  async function signOut() {
+    setPending(true);
+    setError(null);
+    const response = await authClient.signOut();
+    if (response.error) {
+      setError(response.error.message ?? "Could not sign out.");
+      setPending(false);
+      return;
+    }
+    window.location.assign("/");
+  }
+
+  if (!session) {
+    return (
+      <main className="loading-shell" aria-live="polite">
+        <div className="loading-block">
+          <span className="loading-label">Verifying protected session</span>
+          <div className="loading-line wide" />
+          <div className="loading-line" />
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="dashboard-shell">
+      <div className="dashboard-heading">
+        <div>
+          <span className="section-index">PROTECTED / MIDDLEWARE VERIFIED</span>
+          <h1>Welcome back, {session.user.name}.</h1>
+          <p>{session.user.email}</p>
+        </div>
+        <div className="sign-out-control">
+          <button className="button button-secondary" disabled={pending} onClick={signOut}>
+            {pending ? "Signing out…" : "Sign out"}
+          </button>
+          {error ? <span className="inline-error">{error}</span> : null}
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/_integrations/better-auth/preact/src/app/layout.tsx

@@ -0,0 +1,14 @@
+import type { LayoutProps, Metadata } from "@farm.js/core";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "FARMJS Preact Better Auth Starter",
+  description: "Better Auth with FARMJS and Preact",
+  icons: {
+    icon: [{ url: "/favicon.svg", type: "image/svg+xml", sizes: "any" }],
+  },
+};
+
+export default function RootLayout({ children }: LayoutProps) {
+  return <>{children}</>;
+}

package/templates/_integrations/better-auth/preact/src/app/page.tsx

@@ -0,0 +1,36 @@
+import { ResourceLinks } from "../components/resource-links";
+
+export default function HomePage() {
+  return (
+    <main className="landing-main">
+      <section className="hero-section">
+        <div className="hero-copy">
+          <div className="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / Preact + Better Auth</span>
+          </div>
+
+          <h1>
+            Connect Postgres. Start at <code>/sign-up</code>.
+          </h1>
+
+          <div className="command-list" aria-label="Development commands">
+            <div className="command-row">
+              <span>01</span>
+              <code>cp .env.example .env.local</code>
+            </div>
+            <div className="command-row">
+              <span>02</span>
+              <code>pnpm dev</code>
+            </div>
+          </div>
+
+          <ResourceLinks
+            className="resource-links"
+            primary={{ href: "/sign-up", label: "Get started" }}
+          />
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/_integrations/better-auth/preact/src/app/sign-in/page.tsx

@@ -0,0 +1,10 @@
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export default function SignInPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-in" />
+    </AuthShell>
+  );
+}

package/templates/_integrations/better-auth/preact/src/app/sign-up/page.tsx

@@ -0,0 +1,10 @@
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export default function SignUpPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-up" />
+    </AuthShell>
+  );
+}

package/templates/_integrations/better-auth/preact/src/components/auth-form.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import type { JSX } from "preact";
+import { useState } from "preact/hooks";
+import { authClient } from "../lib/auth-client";
+
+export function AuthForm({ mode }: { mode: "sign-in" | "sign-up" }) {
+  const isSignUp = mode === "sign-up";
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit(event: JSX.TargetedSubmitEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+
+    const formData = new FormData(event.currentTarget);
+    const email = String(formData.get("email") ?? "").trim();
+    const password = String(formData.get("password") ?? "");
+    const name = String(formData.get("name") ?? "").trim();
+
+    try {
+      const response = isSignUp
+        ? await authClient.signUp.email({ email, name, password })
+        : await authClient.signIn.email({ email, password });
+      if (response.error) {
+        setError(response.error.message ?? "We could not complete that request.");
+        setPending(false);
+        return;
+      }
+      window.location.assign("/dashboard");
+    } catch {
+      setError("The authentication service could not be reached. Please try again.");
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="auth-form-panel">
+      <div className="auth-form-heading">
+        <span className="section-index">{isSignUp ? "01 / SIGN UP" : "01 / SIGN IN"}</span>
+        <h1>{isSignUp ? "Create account." : "Welcome back."}</h1>
+      </div>
+
+      <form className="auth-form" onSubmit={submit}>
+        {isSignUp ? (
+          <label className="field">
+            <span>
+              <small>01</small> Name
+            </span>
+            <input autoComplete="name" minLength={2} name="name" required type="text" />
+          </label>
+        ) : null}
+        <label className="field">
+          <span>
+            <small>{isSignUp ? "02" : "01"}</small> Email
+          </span>
+          <input autoComplete="email" name="email" required type="email" />
+        </label>
+        <label className="field">
+          <span>
+            <small>{isSignUp ? "03" : "02"}</small> Password
+          </span>
+          <input
+            autoComplete={isSignUp ? "new-password" : "current-password"}
+            minLength={8}
+            name="password"
+            required
+            type="password"
+          />
+        </label>
+
+        {error ? (
+          <div className="form-error" role="alert">
+            <strong>Authentication failed</strong>
+            <span>{error}</span>
+          </div>
+        ) : null}
+
+        <button className="button button-primary auth-submit" disabled={pending} type="submit">
+          <span>{pending ? "Please wait…" : isSignUp ? "Create account" : "Sign in"}</span>
+          <span aria-hidden="true">{pending ? "···" : "→"}</span>
+        </button>
+      </form>
+
+      <p className="auth-switch">
+        {isSignUp ? "Have an account?" : "Need an account?"}{" "}
+        <a href={isSignUp ? "/sign-in" : "/sign-up"}>{isSignUp ? "Sign in →" : "Sign up →"}</a>
+      </p>
+    </div>
+  );
+}

package/templates/_integrations/better-auth/preact/src/components/auth-shell.tsx

@@ -0,0 +1,16 @@
+import type { ComponentChildren } from "preact";
+import { ResourceLinks } from "./resource-links";
+
+export function AuthShell({ children }: { children: ComponentChildren }) {
+  return (
+    <main className="auth-shell">
+      <a className="auth-home-link" href="/" aria-label="Back to starter home">
+        <span>00</span>
+        <span>FARMJS / Preact + Better Auth</span>
+      </a>
+
+      <section className="auth-form-side">{children}</section>
+      <ResourceLinks className="auth-resource-links" />
+    </main>
+  );
+}

package/templates/_integrations/better-auth/preact/src/lib/auth-client.ts

@@ -0,0 +1,5 @@
+import { createAuthClient } from "better-auth/client";
+
+export const authClient = createAuthClient({
+  baseURL: "",
+});

package/templates/_integrations/better-auth/solid/farm.config.ts

@@ -0,0 +1,17 @@
+import { betterAuth } from "@farm.js/better-auth";
+import { defineConfig } from "@farm.js/core/config";
+import { solid } from "@farm.js/solid";
+import { auth } from "./src/lib/auth.ts";
+
+export default defineConfig({
+  renderer: solid(),
+  theme: {
+    default: "dark",
+  },
+  integrations: {
+    auth: betterAuth({ instance: auth }),
+  },
+  deploy: {
+    target: "vercel",
+  },
+});

package/templates/_integrations/better-auth/solid/src/app/dashboard/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { createSignal, onMount, Show } from "solid-js";
+import { authClient } from "../../lib/auth-client";
+
+type SessionData = NonNullable<Awaited<ReturnType<typeof authClient.getSession>>["data"]>;
+
+export default function DashboardPage() {
+  const [session, setSession] = createSignal<SessionData | null>(null);
+  const [pending, setPending] = createSignal(true);
+  const [error, setError] = createSignal<string | null>(null);
+
+  onMount(async () => {
+    const response = await authClient.getSession();
+    if (response.error || !response.data?.user) {
+      window.location.replace("/sign-in");
+      return;
+    }
+    setSession(response.data);
+    setPending(false);
+  });
+
+  async function signOut() {
+    setPending(true);
+    setError(null);
+    const response = await authClient.signOut();
+    if (response.error) {
+      setError(response.error.message ?? "Could not sign out.");
+      setPending(false);
+      return;
+    }
+    window.location.assign("/");
+  }
+
+  return (
+    <Show
+      when={session()}
+      fallback={
+        <main class="loading-shell" aria-live="polite">
+          <div class="loading-block">
+            <span class="loading-label">Verifying protected session</span>
+            <div class="loading-line wide" />
+            <div class="loading-line" />
+          </div>
+        </main>
+      }
+    >
+      {(current) => (
+        <main class="dashboard-shell">
+          <div class="dashboard-heading">
+            <div>
+              <span class="section-index">PROTECTED / MIDDLEWARE VERIFIED</span>
+              <h1>Welcome back, {current().user.name}.</h1>
+              <p>{current().user.email}</p>
+            </div>
+            <div class="sign-out-control">
+              <button class="button button-secondary" disabled={pending()} onClick={signOut}>
+                {pending() ? "Signing out…" : "Sign out"}
+              </button>
+              {error() ? <span class="inline-error">{error()}</span> : null}
+            </div>
+          </div>
+        </main>
+      )}
+    </Show>
+  );
+}

package/templates/_integrations/better-auth/solid/src/app/layout.tsx

@@ -0,0 +1,14 @@
+import type { LayoutProps, Metadata } from "@farm.js/core";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "FARMJS Solid Better Auth Starter",
+  description: "Better Auth with FARMJS and Solid",
+  icons: {
+    icon: [{ url: "/favicon.svg", type: "image/svg+xml", sizes: "any" }],
+  },
+};
+
+export default function RootLayout(props: LayoutProps) {
+  return <>{props.children}</>;
+}

package/templates/_integrations/better-auth/solid/src/app/page.tsx

@@ -0,0 +1,36 @@
+import { ResourceLinks } from "../components/resource-links";
+
+export default function HomePage() {
+  return (
+    <main class="landing-main">
+      <section class="hero-section">
+        <div class="hero-copy">
+          <div class="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / Solid + Better Auth</span>
+          </div>
+
+          <h1>
+            Connect Postgres. Start at <code>/sign-up</code>.
+          </h1>
+
+          <div class="command-list" aria-label="Development commands">
+            <div class="command-row">
+              <span>01</span>
+              <code>cp .env.example .env.local</code>
+            </div>
+            <div class="command-row">
+              <span>02</span>
+              <code>pnpm dev</code>
+            </div>
+          </div>
+
+          <ResourceLinks
+            className="resource-links"
+            primary={{ href: "/sign-up", label: "Get started" }}
+          />
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/_integrations/better-auth/solid/src/app/sign-in/page.tsx

@@ -0,0 +1,10 @@
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export default function SignInPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-in" />
+    </AuthShell>
+  );
+}

package/templates/_integrations/better-auth/solid/src/app/sign-up/page.tsx

@@ -0,0 +1,10 @@
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export default function SignUpPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-up" />
+    </AuthShell>
+  );
+}

package/templates/_integrations/better-auth/solid/src/components/auth-form.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { createSignal } from "solid-js";
+import { authClient } from "../lib/auth-client";
+
+export function AuthForm(props: { mode: "sign-in" | "sign-up" }) {
+  const isSignUp = () => props.mode === "sign-up";
+  const [pending, setPending] = createSignal(false);
+  const [error, setError] = createSignal<string | null>(null);
+
+  async function submit(event: SubmitEvent) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+
+    const formData = new FormData(event.currentTarget as HTMLFormElement);
+    const email = String(formData.get("email") ?? "").trim();
+    const password = String(formData.get("password") ?? "");
+    const name = String(formData.get("name") ?? "").trim();
+
+    try {
+      const response = isSignUp()
+        ? await authClient.signUp.email({ email, name, password })
+        : await authClient.signIn.email({ email, password });
+      if (response.error) {
+        setError(response.error.message ?? "We could not complete that request.");
+        setPending(false);
+        return;
+      }
+      window.location.assign("/dashboard");
+    } catch {
+      setError("The authentication service could not be reached. Please try again.");
+      setPending(false);
+    }
+  }
+
+  return (
+    <div class="auth-form-panel">
+      <div class="auth-form-heading">
+        <span class="section-index">{isSignUp() ? "01 / SIGN UP" : "01 / SIGN IN"}</span>
+        <h1>{isSignUp() ? "Create account." : "Welcome back."}</h1>
+      </div>
+
+      <form class="auth-form" onSubmit={submit}>
+        {isSignUp() ? (
+          <label class="field">
+            <span>
+              <small>01</small> Name
+            </span>
+            <input autocomplete="name" minlength={2} name="name" required type="text" />
+          </label>
+        ) : null}
+        <label class="field">
+          <span>
+            <small>{isSignUp() ? "02" : "01"}</small> Email
+          </span>
+          <input autocomplete="email" name="email" required type="email" />
+        </label>
+        <label class="field">
+          <span>
+            <small>{isSignUp() ? "03" : "02"}</small> Password
+          </span>
+          <input
+            autocomplete={isSignUp() ? "new-password" : "current-password"}
+            minlength={8}
+            name="password"
+            required
+            type="password"
+          />
+        </label>
+
+        {error() ? (
+          <div class="form-error" role="alert">
+            <strong>Authentication failed</strong>
+            <span>{error()}</span>
+          </div>
+        ) : null}
+
+        <button class="button button-primary auth-submit" disabled={pending()} type="submit">
+          <span>{pending() ? "Please wait…" : isSignUp() ? "Create account" : "Sign in"}</span>
+          <span aria-hidden="true">{pending() ? "···" : "→"}</span>
+        </button>
+      </form>
+
+      <p class="auth-switch">
+        {isSignUp() ? "Have an account?" : "Need an account?"}{" "}
+        <a href={isSignUp() ? "/sign-in" : "/sign-up"}>{isSignUp() ? "Sign in →" : "Sign up →"}</a>
+      </p>
+    </div>
+  );
+}

package/templates/_integrations/better-auth/solid/src/components/auth-shell.tsx

@@ -0,0 +1,16 @@
+import type { JSX } from "solid-js";
+import { ResourceLinks } from "./resource-links";
+
+export function AuthShell(props: { children: JSX.Element }) {
+  return (
+    <main class="auth-shell">
+      <a class="auth-home-link" href="/" aria-label="Back to starter home">
+        <span>00</span>
+        <span>FARMJS / Solid + Better Auth</span>
+      </a>
+
+      <section class="auth-form-side">{props.children}</section>
+      <ResourceLinks className="auth-resource-links" />
+    </main>
+  );
+}

package/templates/_integrations/better-auth/solid/src/lib/auth-client.ts

@@ -0,0 +1,5 @@
+import { createAuthClient } from "better-auth/solid";
+
+export const authClient = createAuthClient({
+  baseURL: "",
+});

package/templates/_integrations/better-auth/svelte/farm.config.ts

@@ -0,0 +1,17 @@
+import { betterAuth } from "@farm.js/better-auth";
+import { defineConfig } from "@farm.js/core/config";
+import { svelte } from "@farm.js/svelte";
+import { auth } from "./src/lib/auth.ts";
+
+export default defineConfig({
+  renderer: svelte(),
+  theme: {
+    default: "dark",
+  },
+  integrations: {
+    auth: betterAuth({ instance: auth }),
+  },
+  deploy: {
+    target: "vercel",
+  },
+});

package/templates/_integrations/better-auth/svelte/src/app/dashboard/page.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+  export const hydrate = true;
+</script>
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { authClient } from "../../lib/auth-client";
+
+  type SessionData = NonNullable<Awaited<ReturnType<typeof authClient.getSession>>["data"]>;
+
+  let session = $state<SessionData | null>(null);
+  let pending = $state(true);
+  let error = $state<string | null>(null);
+
+  onMount(async () => {
+    const response = await authClient.getSession();
+    if (response.error || !response.data?.user) {
+      window.location.replace("/sign-in");
+      return;
+    }
+    session = response.data;
+    pending = false;
+  });
+
+  async function signOut() {
+    pending = true;
+    error = null;
+    const response = await authClient.signOut();
+    if (response.error) {
+      error = response.error.message ?? "Could not sign out.";
+      pending = false;
+      return;
+    }
+    window.location.assign("/");
+  }
+</script>
+
+{#if !session}
+  <main class="loading-shell" aria-live="polite">
+    <div class="loading-block">
+      <span class="loading-label">Verifying protected session</span>
+      <div class="loading-line wide"></div>
+      <div class="loading-line"></div>
+    </div>
+  </main>
+{:else}
+  <main class="dashboard-shell">
+    <div class="dashboard-heading">
+      <div>
+        <span class="section-index">PROTECTED / MIDDLEWARE VERIFIED</span>
+        <h1>Welcome back, {session.user.name}.</h1>
+        <p>{session.user.email}</p>
+      </div>
+      <div class="sign-out-control">
+        <button class="button button-secondary" disabled={pending} onclick={signOut}>
+          {pending ? "Signing out…" : "Sign out"}
+        </button>
+        {#if error}<span class="inline-error">{error}</span>{/if}
+      </div>
+    </div>
+  </main>
+{/if}