@farm.js/create-app 0.1.0-beta.21 → 0.1.0-beta.22

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

@@ -0,0 +1,188 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { SignOutButton } from "../../components/sign-out-button";
+import { SiteHeader } from "../../components/site-header";
+import { authClient } from "../../lib/auth-client";
+
+type SessionState =
+  | { status: "loading" }
+  | { status: "unauthorized" }
+  | {
+      status: "ready";
+      session: {
+        user: {
+          createdAt: Date | string;
+          email: string;
+          name: string;
+        };
+        session: {
+          expiresAt: Date | string;
+          id: string;
+        };
+      };
+    };
+
+export default function DashboardPage() {
+  const [sessionState, setSessionState] = useState<SessionState>({ status: "loading" });
+
+  useEffect(() => {
+    let cancelled = false;
+
+    authClient
+      .getSession()
+      .then((response) => {
+        if (cancelled) {
+          return;
+        }
+
+        if (response.error || !response.data?.user) {
+          setSessionState({ status: "unauthorized" });
+          window.location.replace("/sign-in");
+          return;
+        }
+
+        setSessionState({
+          status: "ready",
+          session: response.data,
+        });
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setSessionState({ status: "unauthorized" });
+          window.location.replace("/sign-in");
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (sessionState.status === "loading") {
+    return (
+      <main className="loading-shell" aria-label="Loading account" 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 className="loading-grid">
+            <div />
+            <div />
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  if (sessionState.status === "unauthorized") {
+    return (
+      <main className="loading-shell" aria-label="Returning to sign in" aria-live="polite">
+        <div className="loading-block">
+          <span className="loading-label">Session unavailable</span>
+          <p className="loading-message">Returning you to the sign-in page…</p>
+        </div>
+      </main>
+    );
+  }
+
+  const { session } = sessionState;
+  const createdAt = new Date(session.user.createdAt).toLocaleDateString("en", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+  const expiresAt = new Date(session.session.expiresAt).toLocaleString("en", {
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    month: "short",
+  });
+
+  return (
+    <div className="site-frame">
+      <SiteHeader user={session.user} />
+
+      <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>Farm route middleware verified your session before this dashboard loaded.</p>
+          </div>
+          <SignOutButton />
+        </div>
+
+        <section className="dashboard-grid" aria-label="Account overview">
+          <article className="account-panel">
+            <div className="panel-heading">
+              <span>Account</span>
+              <span className="status-badge">
+                <span className="status-dot" aria-hidden="true" />
+                Active
+              </span>
+            </div>
+            <dl className="detail-list">
+              <div>
+                <dt>Name</dt>
+                <dd>{session.user.name}</dd>
+              </div>
+              <div>
+                <dt>Email</dt>
+                <dd>{session.user.email}</dd>
+              </div>
+              <div>
+                <dt>Created</dt>
+                <dd>{createdAt}</dd>
+              </div>
+            </dl>
+          </article>
+
+          <article className="session-panel">
+            <div className="panel-heading">
+              <span>Current session</span>
+              <code>httpOnly cookie</code>
+            </div>
+            <dl className="detail-list">
+              <div>
+                <dt>Session ID</dt>
+                <dd className="mono truncate">{session.session.id}</dd>
+              </div>
+              <div>
+                <dt>Expires</dt>
+                <dd>{expiresAt}</dd>
+              </div>
+              <div>
+                <dt>Storage</dt>
+                <dd>Neon Postgres</dd>
+              </div>
+            </dl>
+          </article>
+        </section>
+
+        <section className="next-steps" aria-labelledby="next-steps-title">
+          <div className="section-heading compact">
+            <span className="section-index">NEXT / MAKE IT YOURS</span>
+            <h2 id="next-steps-title">The account boundary is ready for product work.</h2>
+          </div>
+          <div className="next-step-list">
+            <div>
+              <span>01</span>
+              <p>Set the production auth URL, secret, and pooled database URL in your host.</p>
+            </div>
+            <div>
+              <span>02</span>
+              <p>
+                Add GitHub or Google inside <code>src/lib/auth.ts</code> when you need OAuth.
+              </p>
+            </div>
+            <div>
+              <span>03</span>
+              <p>Build your first protected feature beside this dashboard route.</p>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

package/templates/better-auth/src/app/error.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import type { ErrorProps } from "@farm.js/core";
+
+export default function ErrorBoundary({ error, reset }: ErrorProps) {
+  const message = error instanceof Error ? error.message : "An unexpected error occurred.";
+
+  return (
+    <main className="error-shell">
+      <section className="error-panel">
+        <span className="section-index">ERROR / RECOVERABLE</span>
+        <h1>That route did not finish loading.</h1>
+        <p>{message}</p>
+        <div className="hero-actions">
+          <button className="button button-primary" onClick={reset} type="button">
+            Try again
+          </button>
+          <a className="button button-secondary" href="/">
+            Return home
+          </a>
+        </div>
+      </section>
+    </main>
+  );
+}