feat: better-auth

cli/src/cli/index.ts

@@ -7,11 +7,13 @@ export interface CliResults {
   orm: "none" | "drizzle" | undefined
   dialect?: "postgres" | undefined
   provider?: "neon" | "postgres" | "vercel-postgres" | "planetscale" | undefined
+  auth: "better-auth" | "none"
   noInstall?: boolean
 }
 
 export type Dialect = CliResults["dialect"]
 export type Orm = CliResults["orm"]
+export type Auth = CliResults["auth"]
 
 export async function runCli(): Promise<CliResults | undefined> {
   console.clear()
@@ -55,6 +57,8 @@ export async function runCli(): Promise<CliResults | undefined> {
 
   let dialect = undefined
   let provider = undefined
+  let auth: "better-auth" | "none" = "none"
+
   if (orm === "drizzle") {
     dialect = "postgres" as const // Only offering postgres
 
@@ -71,6 +75,22 @@ export async function runCli(): Promise<CliResults | undefined> {
       outro("Setup cancelled.")
       return undefined
     }
+
+    // Only show auth option when using Drizzle ORM
+    const authResult = await select<"better-auth" | "none">({
+      message: "Which authentication system would you like to use?",
+      options: [
+        { value: "better-auth", label: "Better Auth" },
+        { value: "none", label: "None" },
+      ],
+    })
+
+    if (isCancel(authResult)) {
+      outro("Setup cancelled.")
+      return undefined
+    }
+
+    auth = authResult
   }
 
   let noInstall = noInstallFlag
@@ -97,6 +117,7 @@ export async function runCli(): Promise<CliResults | undefined> {
     orm,
     dialect,
     provider,
+    auth,
     noInstall,
   }
 }

cli/src/helpers/install-packages.ts

@@ -29,5 +29,14 @@ export const installPackages = (options: InstallPackagesOptions) => {
     }
   }
 
+  // Handle auth installers
+  for (const [name, pkgOpts] of Object.entries(installers.auth)) {
+    if (pkgOpts.inUse) {
+      const spinner = ora(`Boilerplating auth: ${name}...`).start()
+      pkgOpts.installer(options)
+      spinner.succeed(chalk.green(`Successfully setup boilerplate for auth: ${chalk.green.bold(name)}`))
+    }
+  }
+
   logger.info("")
 }

cli/src/helpers/scaffold-project.ts

@@ -1,4 +1,4 @@
-import { Dialect, Orm } from "@/cli/index.js"
+import { Dialect, Orm, Auth } from "@/cli/index.js"
 import { buildInstallerMap, InstallerMap, Provider } from "@/installers/index.js"
 import { getUserPkgManager } from "@/utils/get-user-pkg-manager.js"
 import path from "path"
@@ -11,9 +11,10 @@ interface ScaffoldProjectOptions {
   dialect: Dialect
   installers: InstallerMap
   databaseProvider: Provider
+  auth: Auth
 }
 
-export const scaffoldProject = async ({ databaseProvider, projectName, installers, orm }: ScaffoldProjectOptions) => {
+export const scaffoldProject = async ({ databaseProvider, projectName, installers, orm, auth }: ScaffoldProjectOptions) => {
   const projectDir = path.resolve(process.cwd(), projectName)
   const pkgManager = getUserPkgManager()
 

cli/src/index.ts

@@ -16,16 +16,17 @@ const main = async () => {
     return
   }
 
-  const { projectName, orm, dialect, provider } = results
+  const { projectName, orm, dialect, provider, auth } = results
 
-  const installers = buildInstallerMap(orm, provider)
+  const installers = buildInstallerMap(orm, provider, auth)
 
   const projectDir = await scaffoldProject({
     orm,
     dialect,
     databaseProvider: provider ?? "neon",
     installers,
     projectName,
+    auth
   })
 
   const pkgJson = fs.readJSONSync(path.join(projectDir, "package.json"))

cli/src/installers/better-auth.ts

@@ -0,0 +1,55 @@
+import fs from "fs-extra"
+import path from "path"
+import { type Installer } from "@/installers/index.js"
+import { PKG_ROOT } from "@/constants.js"
+import { addPackageDependency } from "@/utils/add-package-dep.js"
+
+export const betterAuthInstaller: Installer = ({ projectDir, databaseProvider }) => {
+  addPackageDependency({
+    projectDir,
+    dependencies: ["better-auth"],
+    devDependencies: false,
+  })
+
+  const extrasDir = path.join(PKG_ROOT, "template/extras")
+
+  // auth routes
+  const routerSrc = path.join(extrasDir, `src/app/api/auth/[...all]/route.ts`)
+  const routerDest = path.join(projectDir, `src/app/api/auth/[...all]/route.ts`)
+
+  // auth client
+  const clientSrc = path.join(extrasDir, `src/lib/auth-client.ts`)
+  const clientDest = path.join(projectDir, `src/lib/auth-client.ts`)
+
+  // auth lib
+  const libSrc = path.join(extrasDir, `src/lib/auth.ts`)
+  const libDest = path.join(projectDir, `src/lib/auth.ts`)
+
+  // auth schema
+  const schemaSrc = path.join(extrasDir, `src/server/db/schema/with-postgres-auth.ts`)
+  const schemaDest = path.join(projectDir, `src/server/db/schema.ts`)
+
+  // auth page
+  const pageSrc = path.join(extrasDir, `src/app/with-better-auth-page.tsx`)
+  const pageDest = path.join(projectDir, `src/app/page.tsx`)
+
+  // auth components
+  const componentsSrc = path.join(extrasDir, `src/app/with-better-auth-form.tsx`)
+  const componentsDest = path.join(projectDir, `src/app/components/signup.tsx`)
+
+  // env handling
+  const envSrc = path.join(extrasDir, `config/_env-drizzle-better-auth`)
+  const envDest = path.join(projectDir, ".env")
+
+  // copy all files
+  fs.copySync(routerSrc, routerDest)
+  fs.copySync(clientSrc, clientDest)
+  fs.copySync(libSrc, libDest)
+  fs.copySync(componentsSrc, componentsDest)
+  fs.copySync(pageSrc, pageDest)
+  fs.copySync(schemaSrc, schemaDest)
+
+  // append env vars instead of overwriting
+  const betterAuthEnv = fs.readFileSync(envSrc, "utf-8")
+  fs.appendFileSync(envDest, `\n\n# Better Auth\n${betterAuthEnv}`)
+}

cli/src/installers/dep-version-map.ts

@@ -9,6 +9,9 @@ export const dependencyVersionMap = {
   // vercel postgres
   "@vercel/postgres": "^0.10.0",
 
+  // better auth
+  "better-auth": "^1.2.5",
+
   // Drizzle
   "drizzle-kit": "^0.30.1",
   "drizzle-orm": "^0.39.0",

cli/src/installers/index.ts

@@ -5,6 +5,7 @@ import { noOrmInstaller } from "./no-orm.js"
 import { postgresInstaller } from "./postgres.js"
 import { vercelPostgresInstaller } from "./vercel-postgres.js"
 import { planetscaleInstaller } from "./planetscale.js"
+import { betterAuthInstaller } from "./better-auth.js"
 
 // Turning this into a const allows the list to be iterated over for programmatically creating prompt options
 // Should increase extensibility in the future
@@ -30,6 +31,16 @@ export type InstallerMap = {
       installer: Installer
     }
   }
+  auth: {
+    "better-auth": {
+      inUse: boolean
+      installer: Installer
+    }
+    none: {
+      inUse: boolean
+      installer: Installer
+    }
+  }
 }
 
 export interface InstallerOptions {
@@ -46,8 +57,19 @@ export type Installer = (opts: InstallerOptions) => void
 
 export const buildInstallerMap = (
   selectedOrm: Orm = "none",
-  selectedProvider?: Provider
+  selectedProvider?: Provider,
+  selectedAuth: "better-auth" | "none" = "none"
 ): InstallerMap => ({
+  auth: {
+    "better-auth": {
+      inUse: selectedOrm === "drizzle" && selectedAuth === "better-auth",
+      installer: betterAuthInstaller,
+    },
+    none: {
+      inUse: selectedOrm === "none" || selectedAuth === "none",
+      installer: () => {},
+    },
+  },
   orm: {
     none: {
       inUse: selectedOrm === "none",

cli/src/installers/neon.ts

@@ -20,13 +20,18 @@ export const neonInstaller: Installer = ({ projectDir }) => {
   const schemaSrc = path.join(extrasDir, "src/server/db/schema", `with-postgres.ts`)
   const schemaDest = path.join(projectDir, "src/server/db/schema.ts")
 
+  // neon db instance
+  const dbSrc = path.join(extrasDir, `src/server/db/index-neon.ts`)
+  const dbDest = path.join(projectDir, `src/server/db/index.ts`)
+
   const jstackSrc = path.join(extrasDir, "src/server/jstack", `drizzle-with-neon.ts`)
   const jstackDest = path.join(projectDir, "src/server/jstack.ts")
 
   fs.ensureDirSync(path.dirname(configDest))
   fs.ensureDirSync(path.dirname(schemaDest))
   fs.ensureDirSync(path.dirname(jstackDest))
 
+  fs.copySync(dbSrc, dbDest)
   fs.copySync(configFile, configDest)
   fs.copySync(schemaSrc, schemaDest)
   fs.copySync(jstackSrc, jstackDest)

cli/src/installers/postgres.ts

@@ -29,6 +29,11 @@ export const postgresInstaller: Installer = ({ projectDir }) => {
   fs.ensureDirSync(path.dirname(schemaDest))
   fs.ensureDirSync(path.dirname(jstackDest))
 
+  // postgres db instance
+  const dbSrc = path.join(extrasDir, `src/server/db/index-postgres.ts`)
+  const dbDest = path.join(projectDir, `src/server/db/index.ts`)
+
+  fs.copySync(dbSrc, dbDest)
   fs.copySync(configFile, configDest)
   fs.copySync(schemaSrc, schemaDest)
   fs.copySync(jstackSrc, jstackDest)

cli/src/installers/vercel-postgres.ts

@@ -23,11 +23,17 @@ export const vercelPostgresInstaller: Installer = ({ projectDir }) => {
   const jstackSrc = path.join(extrasDir, "src/server/jstack", `drizzle-with-vercel-postgres.ts`)
   const jstackDest = path.join(projectDir, "src/server/jstack.ts")
 
+  // db instance for vercel
+  const dbSrc = path.join(extrasDir, `src/server/db/index-vercel.ts`)
+  const dbDest = path.join(projectDir, `src/server/db/index.ts`)
+
   fs.ensureDirSync(path.dirname(configDest))
   fs.ensureDirSync(path.dirname(schemaDest))
   fs.ensureDirSync(path.dirname(jstackDest))
+  fs.ensureDirSync(path.dirname(dbDest))
 
   fs.copySync(configFile, configDest)
   fs.copySync(schemaSrc, schemaDest)
   fs.copySync(jstackSrc, jstackDest)
+  fs.copySync(dbSrc, dbDest)
 }

cli/template/extras/config/_env-drizzle-better-auth

@@ -0,0 +1,7 @@
+
+
+BETTER_AUTH_SECRET=
+BETTER_AUTH_URL=http://localhost:3000
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+GOOGLE_REDIRECT_URI=http://localhost:3000/api/auth/callback/google

cli/template/extras/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { GET, POST } = toNextJsHandler(auth.handler);

cli/template/extras/src/app/with-better-auth-form.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { useState } from "react"
+import { authClient } from "@/lib/auth-client"
+
+export const AuthComponent = () => {
+  const {
+    data: session,
+    isPending,
+  } = authClient.useSession()
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleGoogleAuth = async () => {
+    setIsLoading(true)
+    try {
+      await authClient.signIn.social({
+        provider: "google",
+        callbackURL: "/",
+      })
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSignOut = async () => {
+    setIsLoading(true)
+    try {
+      await authClient.signOut()
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="w-full max-w-sm backdrop-blur-lg bg-black/15 px-8 py-6 rounded-md text-zinc-100/75 space-y-4">
+      {isPending ? (
+        <p className="text-center">Checking session...</p>
+      ) : session?.user?.email ? (
+        <div className="flex flex-col items-center gap-6 p-6 bg-zinc-900 rounded-xl shadow-lg">
+          <div className="text-center">
+            <p className="text-zinc-400 text-sm">Logged in as</p>
+            <p className="font-semibold text-lg text-white">{session.user.email}</p>
+          </div>
+
+          <button
+            onClick={handleSignOut}
+            disabled={isLoading}
+            className="cursor-pointer w-full max-w-xs flex items-center justify-center gap-3 rounded-md text-base font-medium ring-2 ring-offset-2 ring-offset-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white ring-transparent hover:ring-white h-12 px-6 py-3 bg-gradient-to-tr from-zinc-800 to-zinc-700 text-zinc-100 transition disabled:opacity-60"
+          >
+            {isLoading ? "Signing out..." : "Sign Out"}
+          </button>
+        </div>  
+
+      ) : (
+        <div className="flex justify-center">
+          <button
+            onClick={handleGoogleAuth}
+            disabled={isLoading}
+            className="cursor-pointer w-full flex items-center justify-center gap-3 rounded-md text-base/6 ring-2 ring-offset-2 ring-offset-white focus-visible:outline-none focus-visible:ring-zinc-900 ring-transparent hover:ring-zinc-900 h-12 px-10 py-3 bg-zinc-800 text-zinc-100 font-medium bg-gradient-to-tl from-zinc-900 to-zinc-800 transition hover:bg-zinc-700 disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {isLoading ? "Signing up..." : "Sign Up with Google"}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

cli/template/extras/src/app/with-better-auth-page.tsx

@@ -0,0 +1,32 @@
+import { cn } from "@/lib/utils"
+import { AuthComponent } from "./components/signup"
+import { RecentPost } from "./components/post"
+
+export default async function Home() {
+  return (
+    <main className="flex min-h-screen bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 flex-col items-center justify-center relative isolate">
+      <div className="absolute inset-0 -z-10 opacity-50 mix-blend-soft-light bg-[url('/noise.svg')] [mask-image:radial-gradient(ellipse_at_center,black,transparent)]" />
+      <div className="container flex flex-col items-center justify-center gap-6 px-4 py-16">
+      <h1
+          className={cn(
+            "inline-flex tracking-tight flex-col gap-1 transition text-center",
+            "font-display text-4xl sm:text-5xl md:text-6xl font-semibold leading-none lg:text-[4rem]",
+            "bg-gradient-to-r from-20% bg-clip-text text-transparent",
+            "from-white to-gray-50"
+          )}
+        >
+          <span>JStack</span>
+        </h1>
+
+        <p className="text-[#ececf399] text-lg/7 md:text-xl/8 text-pretty sm:text-wrap sm:text-center text-center mb-8">
+          The stack for building seriously fast, lightweight and{" "}
+          <span className="inline sm:block">
+            end-to-end typesafe Next.js apps.
+          </span>
+        </p>
+        <RecentPost />
+        <AuthComponent />
+      </div>
+    </main>
+  )
+}

cli/template/extras/src/lib/auth-client.ts

@@ -0,0 +1,5 @@
+import { createAuthClient } from "better-auth/react"
+
+export const authClient =  createAuthClient({
+    baseURL: process.env.BETTER_AUTH_URL,
+})