From 8f7af71a5c202245126903ee8535c8f3bea7e981 Mon Sep 17 00:00:00 2001
From: Taesu <bytaesu@gmail.com>
Date: Tue, 13 Jan 2026 23:12:50 +0900
Subject: [PATCH 1/4] feat: add Better Auth add-on for React

---
 .../react-cra/add-ons/better-auth/README.md   |  32 +++
 .../better-auth/assets/_dot_env.local.append  |   3 +
 .../integrations/better-auth/header-user.tsx  |  43 ++++
 .../better-auth/assets/src/lib/auth-client.ts |   3 +
 .../better-auth/assets/src/lib/auth.ts        |   7 +
 .../assets/src/routes/api/auth/$.ts           |  11 +
 .../assets/src/routes/demo/better-auth.tsx    | 232 ++++++++++++++++++
 .../react-cra/add-ons/better-auth/info.json   |  26 ++
 .../react-cra/add-ons/better-auth/logo.svg    |   7 +
 .../add-ons/better-auth/package.json          |   5 +
 .../add-ons/better-auth/small-logo.svg        |   9 +
 11 files changed, 378 insertions(+)
 create mode 100644 frameworks/react-cra/add-ons/better-auth/README.md
 create mode 100644 frameworks/react-cra/add-ons/better-auth/assets/_dot_env.local.append
 create mode 100644 frameworks/react-cra/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx
 create mode 100644 frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth-client.ts
 create mode 100644 frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth.ts
 create mode 100644 frameworks/react-cra/add-ons/better-auth/assets/src/routes/api/auth/$.ts
 create mode 100644 frameworks/react-cra/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx
 create mode 100644 frameworks/react-cra/add-ons/better-auth/info.json
 create mode 100644 frameworks/react-cra/add-ons/better-auth/logo.svg
 create mode 100644 frameworks/react-cra/add-ons/better-auth/package.json
 create mode 100644 frameworks/react-cra/add-ons/better-auth/small-logo.svg

diff --git a/frameworks/react-cra/add-ons/better-auth/README.md b/frameworks/react-cra/add-ons/better-auth/README.md
new file mode 100644
index 00000000..3676c31a
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/README.md
@@ -0,0 +1,32 @@
+## Setting up Better Auth
+
+1. Generate and set the `BETTER_AUTH_SECRET` environment variable in your `.env.local`:
+
+   ```bash
+   npx @better-auth/cli secret
+   ```
+
+2. Visit the [Better Auth documentation](https://www.better-auth.com) to unlock the full potential of authentication in your app.
+
+### Adding a Database (Optional)
+
+Better Auth can work in stateless mode, but to persist user data, add a database:
+
+```typescript
+// src/lib/auth.ts
+import { betterAuth } from "better-auth";
+import { Pool } from "pg";
+
+export const auth = betterAuth({
+  database: new Pool({
+    connectionString: process.env.DATABASE_URL,
+  }),
+  // ... rest of config
+});
+```
+
+Then run migrations:
+
+```bash
+npx @better-auth/cli migrate
+```
diff --git a/frameworks/react-cra/add-ons/better-auth/assets/_dot_env.local.append b/frameworks/react-cra/add-ons/better-auth/assets/_dot_env.local.append
new file mode 100644
index 00000000..92d03dda
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/assets/_dot_env.local.append
@@ -0,0 +1,3 @@
+# Better Auth configuration
+BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_SECRET= # Generate a secret key: `npx @better-auth/cli secret`
\ No newline at end of file
diff --git a/frameworks/react-cra/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx b/frameworks/react-cra/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx
new file mode 100644
index 00000000..e6f9556f
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx
@@ -0,0 +1,43 @@
+import { authClient } from "@/lib/auth-client";
+import { Link } from "@tanstack/react-router";
+
+export default function BetterAuthHeader() {
+  const { data: session, isPending } = authClient.useSession();
+
+  if (isPending) {
+    return (
+      <div className="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 animate-pulse" />
+    );
+  }
+
+  if (session?.user) {
+    return (
+      <div className="flex items-center gap-2">
+        {session.user.image ? (
+          <img src={session.user.image} alt="" className="h-8 w-8" />
+        ) : (
+          <div className="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
+            <span className="text-xs font-medium text-neutral-600 dark:text-neutral-400">
+              {session.user.name?.charAt(0).toUpperCase() || "U"}
+            </span>
+          </div>
+        )}
+        <button
+          onClick={() => authClient.signOut()}
+          className="flex-1 h-9 px-4 text-sm font-medium bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors"
+        >
+          Sign out
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <Link
+      to="/demo/better-auth"
+      className="h-9 px-4 text-sm font-medium bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors inline-flex items-center"
+    >
+      Sign in
+    </Link>
+  );
+}
diff --git a/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth-client.ts b/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth-client.ts
new file mode 100644
index 00000000..ddded485
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth-client.ts
@@ -0,0 +1,3 @@
+import { createAuthClient } from 'better-auth/react'
+
+export const authClient = createAuthClient()
\ No newline at end of file
diff --git a/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth.ts b/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth.ts
new file mode 100644
index 00000000..9bda4a75
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth.ts
@@ -0,0 +1,7 @@
+import { betterAuth } from 'better-auth'
+
+export const auth = betterAuth({
+  emailAndPassword: {
+    enabled: true,
+  },
+})
diff --git a/frameworks/react-cra/add-ons/better-auth/assets/src/routes/api/auth/$.ts b/frameworks/react-cra/add-ons/better-auth/assets/src/routes/api/auth/$.ts
new file mode 100644
index 00000000..8e228fb6
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/assets/src/routes/api/auth/$.ts
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { auth } from '@/lib/auth'
+
+export const Route = createFileRoute('/api/auth/$')({
+  server: {
+    handlers: {
+      GET: ({ request }) => auth.handler(request),
+      POST: ({ request }) => auth.handler(request),
+    },
+  },
+})
diff --git a/frameworks/react-cra/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx b/frameworks/react-cra/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx
new file mode 100644
index 00000000..a2325a85
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx
@@ -0,0 +1,232 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+
+export const Route = createFileRoute("/demo/better-auth")({
+  component: BetterAuthDemo,
+});
+
+function BetterAuthDemo() {
+  const { data: session, isPending } = authClient.useSession();
+  const [isSignUp, setIsSignUp] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  if (isPending) {
+    return (
+      <div className="flex items-center justify-center py-10">
+        <div className="h-5 w-5 animate-spin rounded-full border-2 border-neutral-200 border-t-neutral-900 dark:border-neutral-800 dark:border-t-neutral-100" />
+      </div>
+    );
+  }
+
+  if (session?.user) {
+    return (
+      <div className="flex justify-center py-10 px-4">
+        <div className="w-full max-w-md p-6 space-y-6">
+          <div className="space-y-1.5">
+            <h1 className="text-lg font-semibold leading-none tracking-tight">
+              Welcome back
+            </h1>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              You're signed in as {session.user.email}
+            </p>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {session.user.image ? (
+              <img src={session.user.image} alt="" className="h-10 w-10" />
+            ) : (
+              <div className="h-10 w-10 bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center">
+                <span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                  {session.user.name?.charAt(0).toUpperCase() || "U"}
+                </span>
+              </div>
+            )}
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">
+                {session.user.name}
+              </p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400 truncate">
+                {session.user.email}
+              </p>
+            </div>
+          </div>
+
+          <button
+            onClick={() => authClient.signOut()}
+            className="w-full h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+          >
+            Sign out
+          </button>
+
+          <p className="text-xs text-center text-neutral-400 dark:text-neutral-500">
+            Built with{" "}
+            <a
+              href="https://better-auth.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+            >
+              BETTER-AUTH
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      if (isSignUp) {
+        const result = await authClient.signUp.email({
+          email,
+          password,
+          name,
+        });
+        if (result.error) {
+          setError(result.error.message || "Sign up failed");
+        }
+      } else {
+        const result = await authClient.signIn.email({
+          email,
+          password,
+        });
+        if (result.error) {
+          setError(result.error.message || "Sign in failed");
+        }
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex justify-center py-10 px-4">
+      <div className="w-full max-w-md p-6">
+        <h1 className="text-lg font-semibold leading-none tracking-tight">
+          {isSignUp ? "Create an account" : "Sign in"}
+        </h1>
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2 mb-6">
+          {isSignUp
+            ? "Enter your information to create an account"
+            : "Enter your email below to login to your account"}
+        </p>
+
+        <form onSubmit={handleSubmit} className="grid gap-4">
+          {isSignUp && (
+            <div className="grid gap-2">
+              <label
+                htmlFor="name"
+                className="text-sm font-medium leading-none"
+              >
+                Name
+              </label>
+              <input
+                id="name"
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                required
+              />
+            </div>
+          )}
+
+          <div className="grid gap-2">
+            <label htmlFor="email" className="text-sm font-medium leading-none">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+              required
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <label
+              htmlFor="password"
+              className="text-sm font-medium leading-none"
+            >
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+              required
+              minLength={8}
+            />
+          </div>
+
+          {error && (
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3">
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full h-9 px-4 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <span className="flex items-center justify-center gap-2">
+                <span className="h-4 w-4 animate-spin rounded-full border-2 border-neutral-400 border-t-white dark:border-neutral-600 dark:border-t-neutral-900" />
+                <span>Please wait</span>
+              </span>
+            ) : isSignUp ? (
+              "Create account"
+            ) : (
+              "Sign in"
+            )}
+          </button>
+        </form>
+
+        <div className="mt-4 text-center">
+          <button
+            type="button"
+            onClick={() => {
+              setIsSignUp(!isSignUp);
+              setError("");
+            }}
+            className="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
+          >
+            {isSignUp
+              ? "Already have an account? Sign in"
+              : "Don't have an account? Sign up"}
+          </button>
+        </div>
+
+        <p className="mt-6 text-xs text-center text-neutral-400 dark:text-neutral-500">
+          Built with{" "}
+          <a
+            href="https://better-auth.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+          >
+            BETTER-AUTH
+          </a>
+          .
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/frameworks/react-cra/add-ons/better-auth/info.json b/frameworks/react-cra/add-ons/better-auth/info.json
new file mode 100644
index 00000000..4c3f8f67
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/info.json
@@ -0,0 +1,26 @@
+{
+  "name": "Better Auth",
+  "description": "Add Better Auth authentication to your application.",
+  "phase": "add-on",
+  "type": "add-on",
+  "priority": 26,
+  "link": "https://www.better-auth.com",
+  "modes": ["file-router"],
+  "tailwind": true,
+  "dependsOn": ["start"],
+  "routes": [
+    {
+      "url": "/demo/better-auth",
+      "name": "Better Auth",
+      "path": "src/routes/demo/better-auth.tsx",
+      "jsName": "BetterAuthDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "jsName": "BetterAuthHeader",
+      "path": "src/integrations/better-auth/header-user.tsx"
+    }
+  ]
+}
diff --git a/frameworks/react-cra/add-ons/better-auth/logo.svg b/frameworks/react-cra/add-ons/better-auth/logo.svg
new file mode 100644
index 00000000..62a7d1c6
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/logo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<path d="M0 0 C165 0 330 0 500 0 C500 165 500 330 500 500 C335 500 170 500 0 500 C0 335 0 170 0 0 Z " fill="#000000" transform="translate(0,0)"/>
+<path d="M0 0 C28.71 0 57.42 0 87 0 C87 27.39 87 54.78 87 83 C119.01 83 151.02 83 184 83 C184 55.61 184 28.22 184 0 C242.41 0 300.82 0 361 0 C361 85.47 361 170.94 361 259 C302.59 259 244.18 259 184 259 C184 231.61 184 204.22 184 176 C151.99 176 119.98 176 87 176 C87 203.39 87 230.78 87 259 C58.29 259 29.58 259 0 259 C0 173.53 0 88.06 0 0 Z " fill="#FCFCFC" transform="translate(69,121)"/>
+<path d="M0 0 C58.41 0 116.82 0 177 0 C177 85.47 177 170.94 177 259 C118.59 259 60.18 259 0 259 C0 231.61 0 204.22 0 176 C28.05 176 56.1 176 85 176 C85 145.31 85 114.62 85 83 C56.95 83 28.9 83 0 83 C0 55.61 0 28.22 0 0 Z " fill="#FFFFFF" transform="translate(253,121)"/>
+<path d="M0 0 C27.72 0 55.44 0 84 0 C84 30.03 84 60.06 84 91 C56.28 91 28.56 91 0 91 C0 60.97 0 30.94 0 0 Z " fill="#000000" transform="translate(253,205)"/>
+</svg>
diff --git a/frameworks/react-cra/add-ons/better-auth/package.json b/frameworks/react-cra/add-ons/better-auth/package.json
new file mode 100644
index 00000000..7a879444
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "better-auth": "^1.4.12"
+  }
+}
diff --git a/frameworks/react-cra/add-ons/better-auth/small-logo.svg b/frameworks/react-cra/add-ons/better-auth/small-logo.svg
new file mode 100644
index 00000000..be7bf8c1
--- /dev/null
+++ b/frameworks/react-cra/add-ons/better-auth/small-logo.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 128 128" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 0 0 C 42.238281 0 84.480469 0 128 0 C 128 42.238281 128 84.480469 128 128 C 85.761719 128 43.519531 128 0 128 C 0 85.761719 0 43.519531 0 0 Z M 0 0 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.823529%,98.823529%,98.823529%);fill-opacity:1;" d="M 17.664062 30.976562 C 25.015625 30.976562 32.363281 30.976562 39.9375 30.976562 C 39.9375 37.988281 39.9375 45 39.9375 52.222656 C 48.128906 52.222656 56.324219 52.222656 64.769531 52.222656 C 64.769531 45.210938 64.769531 38.199219 64.769531 30.976562 C 79.722656 30.976562 94.675781 30.976562 110.078125 30.976562 C 110.078125 52.855469 110.078125 74.738281 110.078125 97.28125 C 95.128906 97.28125 80.175781 97.28125 64.769531 97.28125 C 64.769531 90.269531 64.769531 83.257812 64.769531 76.03125 C 56.574219 76.03125 48.378906 76.03125 39.9375 76.03125 C 39.9375 83.042969 39.9375 90.054688 39.9375 97.28125 C 32.585938 97.28125 25.238281 97.28125 17.664062 97.28125 C 17.664062 75.398438 17.664062 53.519531 17.664062 30.976562 Z M 17.664062 30.976562 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 64.769531 30.976562 C 79.722656 30.976562 94.675781 30.976562 110.078125 30.976562 C 110.078125 52.855469 110.078125 74.738281 110.078125 97.28125 C 95.128906 97.28125 80.175781 97.28125 64.769531 97.28125 C 64.769531 90.269531 64.769531 83.257812 64.769531 76.03125 C 71.949219 76.03125 79.128906 76.03125 86.527344 76.03125 C 86.527344 68.175781 86.527344 60.320312 86.527344 52.222656 C 79.347656 52.222656 72.167969 52.222656 64.769531 52.222656 C 64.769531 45.210938 64.769531 38.199219 64.769531 30.976562 Z M 64.769531 30.976562 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 64.769531 52.480469 C 71.863281 52.480469 78.960938 52.480469 86.273438 52.480469 C 86.273438 60.167969 86.273438 67.855469 86.273438 75.777344 C 79.175781 75.777344 72.078125 75.777344 64.769531 75.777344 C 64.769531 68.089844 64.769531 60.402344 64.769531 52.480469 Z M 64.769531 52.480469 "/>
+</g>
+</svg>

From cb31009ed049b9ce4035e8c33b2bb7755acf34b2 Mon Sep 17 00:00:00 2001
From: Taesu <bytaesu@gmail.com>
Date: Tue, 13 Jan 2026 23:13:26 +0900
Subject: [PATCH 2/4] feat: add Better Auth add-on for Solid

---
 .../solid/add-ons/better-auth/README.md       |  32 +++
 .../better-auth/assets/_dot_env.local.append  |   3 +
 .../integrations/better-auth/header-user.tsx  |  51 ++++
 .../better-auth/assets/src/lib/auth-client.ts |   3 +
 .../better-auth/assets/src/lib/auth.ts        |   7 +
 .../assets/src/routes/api/auth/$.ts           |  11 +
 .../assets/src/routes/demo.better-auth.tsx    | 237 ++++++++++++++++++
 .../solid/add-ons/better-auth/info.json       |  24 ++
 frameworks/solid/add-ons/better-auth/logo.svg |   7 +
 .../solid/add-ons/better-auth/package.json    |   5 +
 .../solid/add-ons/better-auth/small-logo.svg  |   9 +
 11 files changed, 389 insertions(+)
 create mode 100644 frameworks/solid/add-ons/better-auth/README.md
 create mode 100644 frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append
 create mode 100644 frameworks/solid/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx
 create mode 100644 frameworks/solid/add-ons/better-auth/assets/src/lib/auth-client.ts
 create mode 100644 frameworks/solid/add-ons/better-auth/assets/src/lib/auth.ts
 create mode 100644 frameworks/solid/add-ons/better-auth/assets/src/routes/api/auth/$.ts
 create mode 100644 frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx
 create mode 100644 frameworks/solid/add-ons/better-auth/info.json
 create mode 100644 frameworks/solid/add-ons/better-auth/logo.svg
 create mode 100644 frameworks/solid/add-ons/better-auth/package.json
 create mode 100644 frameworks/solid/add-ons/better-auth/small-logo.svg

diff --git a/frameworks/solid/add-ons/better-auth/README.md b/frameworks/solid/add-ons/better-auth/README.md
new file mode 100644
index 00000000..3676c31a
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/README.md
@@ -0,0 +1,32 @@
+## Setting up Better Auth
+
+1. Generate and set the `BETTER_AUTH_SECRET` environment variable in your `.env.local`:
+
+   ```bash
+   npx @better-auth/cli secret
+   ```
+
+2. Visit the [Better Auth documentation](https://www.better-auth.com) to unlock the full potential of authentication in your app.
+
+### Adding a Database (Optional)
+
+Better Auth can work in stateless mode, but to persist user data, add a database:
+
+```typescript
+// src/lib/auth.ts
+import { betterAuth } from "better-auth";
+import { Pool } from "pg";
+
+export const auth = betterAuth({
+  database: new Pool({
+    connectionString: process.env.DATABASE_URL,
+  }),
+  // ... rest of config
+});
+```
+
+Then run migrations:
+
+```bash
+npx @better-auth/cli migrate
+```
diff --git a/frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append b/frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append
new file mode 100644
index 00000000..92d03dda
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append
@@ -0,0 +1,3 @@
+# Better Auth configuration
+BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_SECRET= # Generate a secret key: `npx @better-auth/cli secret`
\ No newline at end of file
diff --git a/frameworks/solid/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx b/frameworks/solid/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx
new file mode 100644
index 00000000..2893a122
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx
@@ -0,0 +1,51 @@
+import { Show } from "solid-js";
+import { Link } from "@tanstack/solid-router";
+import { authClient } from "../../lib/auth-client";
+
+export default function BetterAuthHeader() {
+  const session = authClient.useSession();
+
+  return (
+    <Show
+      when={!session().isPending}
+      fallback={
+        <div class="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 animate-pulse" />
+      }
+    >
+      <Show
+        when={session().data?.user}
+        fallback={
+          <Link
+            to="/demo/better-auth"
+            class="h-9 px-4 text-sm font-medium bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors inline-flex items-center"
+          >
+            Sign in
+          </Link>
+        }
+      >
+        {(user) => (
+          <div class="flex items-center gap-2">
+            <Show
+              when={user().image}
+              fallback={
+                <div class="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
+                  <span class="text-xs font-medium text-neutral-600 dark:text-neutral-400">
+                    {user().name?.charAt(0).toUpperCase() || "U"}
+                  </span>
+                </div>
+              }
+            >
+              {(image) => <img src={image()} alt="" class="h-8 w-8" />}
+            </Show>
+            <button
+              onClick={() => authClient.signOut()}
+              class="flex-1 h-9 px-4 text-sm font-medium bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors"
+            >
+              Sign out
+            </button>
+          </div>
+        )}
+      </Show>
+    </Show>
+  );
+}
diff --git a/frameworks/solid/add-ons/better-auth/assets/src/lib/auth-client.ts b/frameworks/solid/add-ons/better-auth/assets/src/lib/auth-client.ts
new file mode 100644
index 00000000..492f8f53
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/assets/src/lib/auth-client.ts
@@ -0,0 +1,3 @@
+import { createAuthClient } from 'better-auth/solid'
+
+export const authClient = createAuthClient()
diff --git a/frameworks/solid/add-ons/better-auth/assets/src/lib/auth.ts b/frameworks/solid/add-ons/better-auth/assets/src/lib/auth.ts
new file mode 100644
index 00000000..9bda4a75
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/assets/src/lib/auth.ts
@@ -0,0 +1,7 @@
+import { betterAuth } from 'better-auth'
+
+export const auth = betterAuth({
+  emailAndPassword: {
+    enabled: true,
+  },
+})
diff --git a/frameworks/solid/add-ons/better-auth/assets/src/routes/api/auth/$.ts b/frameworks/solid/add-ons/better-auth/assets/src/routes/api/auth/$.ts
new file mode 100644
index 00000000..17c74003
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/assets/src/routes/api/auth/$.ts
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { auth } from '../../../lib/auth'
+
+export const Route = createFileRoute('/api/auth/$')({
+  server: {
+    handlers: {
+      GET: ({ request }) => auth.handler(request),
+      POST: ({ request }) => auth.handler(request),
+    },
+  },
+})
diff --git a/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx b/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx
new file mode 100644
index 00000000..b54ec435
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx
@@ -0,0 +1,237 @@
+import { createFileRoute } from "@tanstack/solid-router";
+import { createSignal, Show } from "solid-js";
+import { authClient } from "../lib/auth-client";
+
+export const Route = createFileRoute("/demo/better-auth")({
+  component: BetterAuthDemo,
+});
+
+function BetterAuthDemo() {
+  const session = authClient.useSession();
+  const [isSignUp, setIsSignUp] = createSignal(false);
+  const [email, setEmail] = createSignal("");
+  const [password, setPassword] = createSignal("");
+  const [name, setName] = createSignal("");
+  const [error, setError] = createSignal("");
+  const [loading, setLoading] = createSignal(false);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      if (isSignUp()) {
+        const result = await authClient.signUp.email({
+          email: email(),
+          password: password(),
+          name: name(),
+        });
+        if (result.error) {
+          setError(result.error.message || "Sign up failed");
+        }
+      } else {
+        const result = await authClient.signIn.email({
+          email: email(),
+          password: password(),
+        });
+        if (result.error) {
+          setError(result.error.message || "Sign in failed");
+        }
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Show
+      when={!session().isPending}
+      fallback={
+        <div class="flex items-center justify-center py-10">
+          <div class="h-5 w-5 animate-spin rounded-full border-2 border-neutral-200 border-t-neutral-900 dark:border-neutral-800 dark:border-t-neutral-100" />
+        </div>
+      }
+    >
+      <Show
+        when={session().data?.user}
+        fallback={
+          <div class="flex justify-center py-10 px-4">
+            <div class="w-full max-w-md p-6">
+              <h1 class="text-lg font-semibold leading-none tracking-tight">
+                {isSignUp() ? "Create an account" : "Sign in"}
+              </h1>
+              <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2 mb-6">
+                {isSignUp()
+                  ? "Enter your information to create an account"
+                  : "Enter your email below to login to your account"}
+              </p>
+
+              <form onSubmit={handleSubmit} class="grid gap-4">
+                <Show when={isSignUp()}>
+                  <div class="grid gap-2">
+                    <label for="name" class="text-sm font-medium leading-none">
+                      Name
+                    </label>
+                    <input
+                      id="name"
+                      type="text"
+                      value={name()}
+                      onInput={(e) => setName(e.currentTarget.value)}
+                      class="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                      required
+                    />
+                  </div>
+                </Show>
+
+                <div class="grid gap-2">
+                  <label for="email" class="text-sm font-medium leading-none">
+                    Email
+                  </label>
+                  <input
+                    id="email"
+                    type="email"
+                    value={email()}
+                    onInput={(e) => setEmail(e.currentTarget.value)}
+                    class="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                    required
+                  />
+                </div>
+
+                <div class="grid gap-2">
+                  <label
+                    for="password"
+                    class="text-sm font-medium leading-none"
+                  >
+                    Password
+                  </label>
+                  <input
+                    id="password"
+                    type="password"
+                    value={password()}
+                    onInput={(e) => setPassword(e.currentTarget.value)}
+                    class="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                    required
+                    minLength={8}
+                  />
+                </div>
+
+                <Show when={error()}>
+                  <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3">
+                    <p class="text-sm text-red-600 dark:text-red-400">
+                      {error()}
+                    </p>
+                  </div>
+                </Show>
+
+                <button
+                  type="submit"
+                  disabled={loading()}
+                  class="w-full h-9 px-4 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <Show
+                    when={!loading()}
+                    fallback={
+                      <span class="flex items-center justify-center gap-2">
+                        <span class="h-4 w-4 animate-spin rounded-full border-2 border-neutral-400 border-t-white dark:border-neutral-600 dark:border-t-neutral-900" />
+                        <span>Please wait</span>
+                      </span>
+                    }
+                  >
+                    {isSignUp() ? "Create account" : "Sign in"}
+                  </Show>
+                </button>
+              </form>
+
+              <div class="mt-4 text-center">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setIsSignUp(!isSignUp());
+                    setError("");
+                  }}
+                  class="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
+                >
+                  {isSignUp()
+                    ? "Already have an account? Sign in"
+                    : "Don't have an account? Sign up"}
+                </button>
+              </div>
+
+              <p class="mt-6 text-xs text-center text-neutral-400 dark:text-neutral-500">
+                Built with{" "}
+                <a
+                  href="https://better-auth.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+                >
+                  BETTER-AUTH
+                </a>
+                .
+              </p>
+            </div>
+          </div>
+        }
+      >
+        {(user) => (
+          <div class="flex justify-center py-10 px-4">
+            <div class="w-full max-w-md p-6 space-y-6">
+              <div class="space-y-1.5">
+                <h1 class="text-lg font-semibold leading-none tracking-tight">
+                  Welcome back
+                </h1>
+                <p class="text-sm text-neutral-500 dark:text-neutral-400">
+                  You're signed in as {user().email}
+                </p>
+              </div>
+
+              <div class="flex items-center gap-3">
+                <Show
+                  when={user().image}
+                  fallback={
+                    <div class="h-10 w-10 bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center">
+                      <span class="text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                        {user().name?.charAt(0).toUpperCase() || "U"}
+                      </span>
+                    </div>
+                  }
+                >
+                  {(image) => <img src={image()} alt="" class="h-10 w-10" />}
+                </Show>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium truncate">{user().name}</p>
+                  <p class="text-xs text-neutral-500 dark:text-neutral-400 truncate">
+                    {user().email}
+                  </p>
+                </div>
+              </div>
+
+              <button
+                onClick={() => authClient.signOut()}
+                class="w-full h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+              >
+                Sign out
+              </button>
+
+              <p class="text-xs text-center text-neutral-400 dark:text-neutral-500">
+                Built with{" "}
+                <a
+                  href="https://better-auth.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+                >
+                  BETTER-AUTH
+                </a>
+                .
+              </p>
+            </div>
+          </div>
+        )}
+      </Show>
+    </Show>
+  );
+}
diff --git a/frameworks/solid/add-ons/better-auth/info.json b/frameworks/solid/add-ons/better-auth/info.json
new file mode 100644
index 00000000..be41d737
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/info.json
@@ -0,0 +1,24 @@
+{
+  "name": "Better Auth",
+  "description": "Add Better Auth authentication to your application.",
+  "phase": "add-on",
+  "type": "add-on",
+  "link": "https://www.better-auth.com/",
+  "modes": ["file-router"],
+  "dependsOn": ["start"],
+  "routes": [
+    {
+      "url": "/demo/better-auth",
+      "name": "Better Auth",
+      "path": "src/routes/demo.better-auth.tsx",
+      "jsName": "BetterAuthDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "jsName": "BetterAuthHeader",
+      "path": "src/integrations/better-auth/header-user.tsx"
+    }
+  ]
+}
diff --git a/frameworks/solid/add-ons/better-auth/logo.svg b/frameworks/solid/add-ons/better-auth/logo.svg
new file mode 100644
index 00000000..62a7d1c6
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/logo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<path d="M0 0 C165 0 330 0 500 0 C500 165 500 330 500 500 C335 500 170 500 0 500 C0 335 0 170 0 0 Z " fill="#000000" transform="translate(0,0)"/>
+<path d="M0 0 C28.71 0 57.42 0 87 0 C87 27.39 87 54.78 87 83 C119.01 83 151.02 83 184 83 C184 55.61 184 28.22 184 0 C242.41 0 300.82 0 361 0 C361 85.47 361 170.94 361 259 C302.59 259 244.18 259 184 259 C184 231.61 184 204.22 184 176 C151.99 176 119.98 176 87 176 C87 203.39 87 230.78 87 259 C58.29 259 29.58 259 0 259 C0 173.53 0 88.06 0 0 Z " fill="#FCFCFC" transform="translate(69,121)"/>
+<path d="M0 0 C58.41 0 116.82 0 177 0 C177 85.47 177 170.94 177 259 C118.59 259 60.18 259 0 259 C0 231.61 0 204.22 0 176 C28.05 176 56.1 176 85 176 C85 145.31 85 114.62 85 83 C56.95 83 28.9 83 0 83 C0 55.61 0 28.22 0 0 Z " fill="#FFFFFF" transform="translate(253,121)"/>
+<path d="M0 0 C27.72 0 55.44 0 84 0 C84 30.03 84 60.06 84 91 C56.28 91 28.56 91 0 91 C0 60.97 0 30.94 0 0 Z " fill="#000000" transform="translate(253,205)"/>
+</svg>
diff --git a/frameworks/solid/add-ons/better-auth/package.json b/frameworks/solid/add-ons/better-auth/package.json
new file mode 100644
index 00000000..7a879444
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "better-auth": "^1.4.12"
+  }
+}
diff --git a/frameworks/solid/add-ons/better-auth/small-logo.svg b/frameworks/solid/add-ons/better-auth/small-logo.svg
new file mode 100644
index 00000000..be7bf8c1
--- /dev/null
+++ b/frameworks/solid/add-ons/better-auth/small-logo.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 128 128" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 0 0 C 42.238281 0 84.480469 0 128 0 C 128 42.238281 128 84.480469 128 128 C 85.761719 128 43.519531 128 0 128 C 0 85.761719 0 43.519531 0 0 Z M 0 0 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.823529%,98.823529%,98.823529%);fill-opacity:1;" d="M 17.664062 30.976562 C 25.015625 30.976562 32.363281 30.976562 39.9375 30.976562 C 39.9375 37.988281 39.9375 45 39.9375 52.222656 C 48.128906 52.222656 56.324219 52.222656 64.769531 52.222656 C 64.769531 45.210938 64.769531 38.199219 64.769531 30.976562 C 79.722656 30.976562 94.675781 30.976562 110.078125 30.976562 C 110.078125 52.855469 110.078125 74.738281 110.078125 97.28125 C 95.128906 97.28125 80.175781 97.28125 64.769531 97.28125 C 64.769531 90.269531 64.769531 83.257812 64.769531 76.03125 C 56.574219 76.03125 48.378906 76.03125 39.9375 76.03125 C 39.9375 83.042969 39.9375 90.054688 39.9375 97.28125 C 32.585938 97.28125 25.238281 97.28125 17.664062 97.28125 C 17.664062 75.398438 17.664062 53.519531 17.664062 30.976562 Z M 17.664062 30.976562 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 64.769531 30.976562 C 79.722656 30.976562 94.675781 30.976562 110.078125 30.976562 C 110.078125 52.855469 110.078125 74.738281 110.078125 97.28125 C 95.128906 97.28125 80.175781 97.28125 64.769531 97.28125 C 64.769531 90.269531 64.769531 83.257812 64.769531 76.03125 C 71.949219 76.03125 79.128906 76.03125 86.527344 76.03125 C 86.527344 68.175781 86.527344 60.320312 86.527344 52.222656 C 79.347656 52.222656 72.167969 52.222656 64.769531 52.222656 C 64.769531 45.210938 64.769531 38.199219 64.769531 30.976562 Z M 64.769531 30.976562 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 64.769531 52.480469 C 71.863281 52.480469 78.960938 52.480469 86.273438 52.480469 C 86.273438 60.167969 86.273438 67.855469 86.273438 75.777344 C 79.175781 75.777344 72.078125 75.777344 64.769531 75.777344 C 64.769531 68.089844 64.769531 60.402344 64.769531 52.480469 Z M 64.769531 52.480469 "/>
+</g>
+</svg>

From b67dcfae7d38d77a3f27c36e34ea53514bc5e9e8 Mon Sep 17 00:00:00 2001
From: Taesu <bytaesu@gmail.com>
Date: Tue, 13 Jan 2026 23:48:12 +0900
Subject: [PATCH 3/4] refactor: add newline at end of file

---
 .../react-cra/add-ons/better-auth/assets/src/lib/auth-client.ts | 2 +-
 .../solid/add-ons/better-auth/assets/_dot_env.local.append      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth-client.ts b/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth-client.ts
index ddded485..fc6c795b 100644
--- a/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth-client.ts
+++ b/frameworks/react-cra/add-ons/better-auth/assets/src/lib/auth-client.ts
@@ -1,3 +1,3 @@
 import { createAuthClient } from 'better-auth/react'
 
-export const authClient = createAuthClient()
\ No newline at end of file
+export const authClient = createAuthClient()
diff --git a/frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append b/frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append
index 92d03dda..408cfc28 100644
--- a/frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append
+++ b/frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append
@@ -1,3 +1,3 @@
 # Better Auth configuration
 BETTER_AUTH_URL=http://localhost:3000
-BETTER_AUTH_SECRET= # Generate a secret key: `npx @better-auth/cli secret`
\ No newline at end of file
+BETTER_AUTH_SECRET= # Generate a secret key: `npx @better-auth/cli secret`

From f2e78a37718215a333d5e93b5ab7a6e12c1c7f12 Mon Sep 17 00:00:00 2001
From: Taesu <bytaesu@gmail.com>
Date: Wed, 14 Jan 2026 00:07:40 +0900
Subject: [PATCH 4/4] refactor: add newline at end of file

---
 .../react-cra/add-ons/better-auth/assets/_dot_env.local.append  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frameworks/react-cra/add-ons/better-auth/assets/_dot_env.local.append b/frameworks/react-cra/add-ons/better-auth/assets/_dot_env.local.append
index 92d03dda..408cfc28 100644
--- a/frameworks/react-cra/add-ons/better-auth/assets/_dot_env.local.append
+++ b/frameworks/react-cra/add-ons/better-auth/assets/_dot_env.local.append
@@ -1,3 +1,3 @@
 # Better Auth configuration
 BETTER_AUTH_URL=http://localhost:3000
-BETTER_AUTH_SECRET= # Generate a secret key: `npx @better-auth/cli secret`
\ No newline at end of file
+BETTER_AUTH_SECRET= # Generate a secret key: `npx @better-auth/cli secret`