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

package/templates/auth/src/app/layout.tsx

@@ -0,0 +1,11 @@
+import type { LayoutProps, Metadata } from "@farm.js/core";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "FARMJS Auth Starter",
+  description: "A production-shaped starter powered by FARMJS built-in authentication.",
+};
+
+export default function RootLayout({ children }: LayoutProps) {
+  return <>{children}</>;
+}

package/templates/auth/src/app/loading.tsx

@@ -0,0 +1,15 @@
+export default function Loading() {
+  return (
+    <main className="loading-shell" aria-label="Loading page" aria-live="polite">
+      <div className="loading-block">
+        <span className="loading-label">Loading account</span>
+        <div className="loading-line wide" />
+        <div className="loading-line" />
+        <div className="loading-grid">
+          <div />
+          <div />
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/auth/src/app/not-found.tsx

@@ -0,0 +1,26 @@
+interface NotFoundProps {
+  pathname?: string;
+}
+
+export default function NotFound({ pathname }: NotFoundProps) {
+  return (
+    <main className="error-shell">
+      <section className="error-panel">
+        <span className="section-index">404 / NOT FOUND</span>
+        <h1>This route is outside the starter.</h1>
+        <p>
+          {pathname ? (
+            <>
+              Nothing is registered at <code>{pathname}</code>.
+            </>
+          ) : (
+            "The page you requested does not exist."
+          )}
+        </p>
+        <a className="button button-primary" href="/">
+          Return home
+        </a>
+      </section>
+    </main>
+  );
+}

package/templates/auth/src/app/page.tsx

@@ -0,0 +1,46 @@
+import { auth } from "@farm.js/auth/server";
+import { ResourceLinks } from "../components/resource-links";
+
+export default async function HomePage() {
+  const session = await auth.session();
+
+  return (
+    <main className="landing-main">
+      <section className="hero-section">
+        <div className="hero-copy">
+          <div className="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / Auth starter</span>
+          </div>
+
+          <h1>
+            {session ? (
+              <>
+                Open your <code>/dashboard</code>.
+              </>
+            ) : (
+              <>
+                Start at <code>/sign-up</code>.
+              </>
+            )}
+          </h1>
+
+          <div className="command-list" aria-label="Development command">
+            <div className="command-row">
+              <span>01</span>
+              <code>pnpm dev</code>
+            </div>
+          </div>
+
+          <ResourceLinks
+            className="resource-links"
+            primary={{
+              href: session ? "/dashboard" : "/sign-up",
+              label: session ? "Dashboard" : "Get started",
+            }}
+          />
+        </div>
+      </section>
+    </main>
+  );
+}

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

@@ -0,0 +1,16 @@
+import type { Metadata } from "@farm.js/core";
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export const metadata: Metadata = {
+  title: "Sign in | FARMJS Auth Starter",
+  description: "Sign in with FARMJS Auth.",
+};
+
+export default function SignInPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-in" />
+    </AuthShell>
+  );
+}

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

@@ -0,0 +1,16 @@
+import type { Metadata } from "@farm.js/core";
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export const metadata: Metadata = {
+  title: "Create account | FARMJS Auth Starter",
+  description: "Create an account with FARMJS Auth.",
+};
+
+export default function SignUpPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-up" />
+    </AuthShell>
+  );
+}

package/templates/auth/src/components/auth-form.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import { signIn, signUp } from "@farm.js/auth/client";
+
+interface AuthFormProps {
+  mode: "sign-in" | "sign-up";
+}
+
+export function AuthForm({ mode }: AuthFormProps) {
+  const isSignUp = mode === "sign-up";
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit(event: React.FormEvent<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 signUp({
+            email,
+            name,
+            password,
+          })
+        : await signIn({
+            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"
+              placeholder="Ada Lovelace"
+              required
+              type="text"
+            />
+          </label>
+        ) : null}
+
+        <label className="field">
+          <span>
+            <small>{isSignUp ? "02" : "01"}</small> Email
+          </span>
+          <input
+            autoComplete="email"
+            name="email"
+            placeholder="you@example.com"
+            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"
+            placeholder="At least 8 characters"
+            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/auth/src/components/auth-shell.tsx

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

package/templates/auth/src/components/resource-links.tsx

@@ -0,0 +1,78 @@
+interface ResourceLinkAction {
+  href: string;
+  label: string;
+}
+
+interface ResourceLinksProps {
+  className: string;
+  primary?: ResourceLinkAction;
+}
+
+function DocsIcon() {
+  return (
+    <svg
+      className="resource-icon"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+      <path d="M14 2v6h6M8 13h8M8 17h6" />
+    </svg>
+  );
+}
+
+function GitHubIcon() {
+  return (
+    <svg
+      className="resource-icon"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2.23c-3.22.7-3.9-1.37-3.9-1.37-.52-1.34-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.57-.29-5.27-1.29-5.27-5.68 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.47.11-3.05 0 0 .96-.31 3.16 1.18A10.95 10.95 0 0 1 12 6.1c.98 0 1.95.13 2.87.39 2.2-1.49 3.16-1.18 3.16-1.18.62 1.58.23 2.76.11 3.05.74.81 1.18 1.83 1.18 3.09 0 4.4-2.71 5.38-5.29 5.67.42.36.79 1.07.79 2.16v3.27c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z" />
+    </svg>
+  );
+}
+
+function ResourceSeparator() {
+  return (
+    <span className="resource-separator" aria-hidden="true">
+      /
+    </span>
+  );
+}
+
+export function ResourceLinks({ className, primary }: ResourceLinksProps) {
+  return (
+    <nav className={className} aria-label="Starter resources">
+      {primary ? (
+        <span className="resource-link-item">
+          <a className="resource-link-primary" href={primary.href}>
+            {primary.label}
+          </a>
+        </span>
+      ) : null}
+      <span className="resource-link-item">
+        {primary ? <ResourceSeparator /> : null}
+        <a href="https://farm.js.dev">
+          <DocsIcon />
+          <span>Docs</span>
+        </a>
+      </span>
+      <span className="resource-link-item">
+        <ResourceSeparator />
+        <a href="https://github.com/farming-labs/farm.js">
+          <GitHubIcon />
+          <span>GitHub</span>
+        </a>
+      </span>
+    </nav>
+  );
+}

package/templates/auth/src/components/sign-out-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { signOut as endSession } from "@farm.js/auth/client";
+
+export function SignOutButton() {
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function signOut() {
+    setPending(true);
+    setError(null);
+
+    try {
+      const response = await endSession();
+      if (response.error) {
+        setError(response.error.message ?? "Could not sign out.");
+        setPending(false);
+        return;
+      }
+      window.location.assign("/");
+    } catch {
+      setError("Could not reach the authentication service.");
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="sign-out-control">
+      <button
+        className="button button-secondary"
+        disabled={pending}
+        onClick={signOut}
+        type="button"
+      >
+        {pending ? "Signing out…" : "Sign out"}
+      </button>
+      {error ? (
+        <span className="inline-error" role="alert">
+          {error}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/templates/auth/src/components/site-header.tsx

@@ -0,0 +1,46 @@
+interface HeaderUser {
+  email: string;
+  name: string;
+}
+
+interface SiteHeaderProps {
+  user: HeaderUser | null;
+}
+
+export function SiteHeader({ user }: SiteHeaderProps) {
+  return (
+    <header className="site-header">
+      <a className="brand" href="/" aria-label="FARMJS Auth Starter home">
+        <span className="brand-mark" aria-hidden="true">
+          F
+        </span>
+        <span>
+          <strong>FARMJS</strong>
+          <small>Auth Starter</small>
+        </span>
+      </a>
+
+      <nav className="header-nav" aria-label="Primary navigation">
+        <a href="https://farm.js.dev">Docs</a>
+        {user ? (
+          <a className="header-account" href="/dashboard">
+            <span className="avatar" aria-hidden="true">
+              {(user.name || user.email).slice(0, 1).toUpperCase()}
+            </span>
+            <span className="account-copy">
+              <small>Signed in</small>
+              <strong>{user.name || user.email}</strong>
+            </span>
+          </a>
+        ) : (
+          <>
+            <a href="/sign-in">Sign in</a>
+            <a className="button button-small button-primary" href="/sign-up">
+              Get started
+            </a>
+          </>
+        )}
+      </nav>
+    </header>
+  );
+}

package/templates/auth/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "farm.config.ts"]
+}

package/templates/basic/package.json

@@ -10,12 +10,14 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@farm.js/core": "0.1.0-beta.20",
+    "@farm.js/core": "0.1.0-beta.22",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@farm.js/cli": "0.1.0-beta.20",
+    "@farm.js/cli": "0.1.0-beta.22",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0",

package/templates/basic/pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+packages:
+  - "."
+
+allowBuilds:
+  "@prisma/client": true
+  esbuild: true
+  sharp: true
+  vue-demi: true