better-auth-cloudflare
Version:
Seamlessly integrate better-auth with Cloudflare Workers, D1, Hyperdrive, KV, R2, and geolocation services.
480 lines (371 loc) • 17.5 kB
Markdown
# better-auth-cloudflare
Seamlessly integrate [Better Auth](https://github.com/better-auth/better-auth) with Cloudflare Workers, D1, Hyperdrive, KV, R2, and geolocation services.
[](https://www.npmjs.com/package/better-auth-cloudflare)
[](https://www.npmjs.com/package/better-auth-cloudflare)
[](https://opensource.org/licenses/MIT)
**LIVE DEMOS**:
- **OpenNextJS**: [https://better-auth-cloudflare.zpg6.workers.dev](https://better-auth-cloudflare.zpg6.workers.dev/)
- **Hono**: [https://better-auth-cloudflare-hono.zpg6.workers.dev](https://better-auth-cloudflare-hono.zpg6.workers.dev/)
Demo implementations are available in the [`examples/`](./examples/) directory for **OpenNextJS ◆** and **Hono 🔥**, along with recommended scripts for generating database schema, migrating, and more. The library is compatible with any framework that runs on Cloudflare Workers.
## Features
- 🗄️ **Database Integration**: Support for D1 (SQLite), Postgres, and MySQL databases via Drizzle ORM.
- 🚀 **Hyperdrive Support**: Connect to Postgres and MySQL databases through Cloudflare Hyperdrive.
- 🔌 **KV Storage Integration**: Optionally use Cloudflare KV for secondary storage (e.g., session caching).
- 📁 **R2 File Storage**: Upload, download, and manage user files with Cloudflare R2 object storage and database tracking.
- 📍 **Automatic Geolocation Tracking**: Enrich user sessions with location data derived from Cloudflare.
- 🌐 **Cloudflare IP Detection**: Utilize Cloudflare's IP detection headers out-of-the-box.
- 🔍 **Rich Client-Side Context**: Access timezone, city, country, region, and more via the client plugin.
- 📦 **CLI**: Tools for getting started quickly with Hono or Next.js, managing database schema, and more.
## Roadmap
- [x] IP Detection
- [x] Geolocation
- [x] D1
- [x] Hyperdrive (Postgres/MySQL)
- [x] KV
- [x] R2
- [ ] Cloudflare Images
- [ ] Durable Objects
- [ ] D1 Multi-Tenancy
**CLI:**
- [x] `generate` - Create new projects from Hono/Next.js templates with automatic Cloudflare resource setup
- [ ] `integrate` - Add `better-auth-cloudflare` to existing projects, creating/updating auth and schema files
- [x] `migrate` - Update auth schema and run database migrations when configuration changes
- [ ] `plugin` - Generate empty Better Auth plugin for quickly adding typesafe endpoints and schema fields
- [x] `version` - Check the version of the CLI
- [x] `help` - Show all commands and their usage
**Examples:**
- [x] Hono
- [x] OpenNextJS
- [ ] SvelteKit (+ Hyperdrive)
- [ ] TanStack Start (+ Durable Objects)
## Table of Contents
- [Quick Start with CLI](#quick-start-with-cli)
- [Configuration Options](#configuration-options)
- [Manual Installation](#manual-installation)
- [Manual Setup](#manual-setup)
- [1. Define Your Database Schema (`src/db/schema.ts`)](#1-define-your-database-schema-srcdbschemats)
- [2. Initialize Drizzle ORM (`src/db/index.ts`)](#2-initialize-drizzle-orm-srcdbindexts)
- [3. Configure Better Auth (`src/auth/index.ts`)](#3-configure-better-auth-srcauthindexts)
- [4. Generate and Manage Auth Schema](#4-generate-and-manage-auth-schema)
- [5. Configure KV as Secondary Storage (Optional)](#5-configure-kv-as-secondary-storage-optional)
- [6. Set Up API Routes](#6-set-up-api-routes)
- [7. Initialize the Client](#7-initialize-the-client)
- [Usage Examples](#usage-examples)
- [Accessing Geolocation Data](#accessing-geolocation-data)
- [R2 File Storage Guide](./docs/r2.md)
- [License](#license)
- [Contributing](#contributing)
## Quick Start with CLI
⚡️ For the fastest setup, use the CLI to generate a complete project (including the resources on Cloudflare):
**Interactive mode** (asks questions and provides helpful defaults):
```bash
npx -auth-cloudflare/cli generate
```
**Non-interactive mode** (use arguments):
```bash
# Simple D1 app with KV (fully deployed to Cloudflare)
npx -auth-cloudflare/cli generate \
--app-name=my-auth-app \
--template=hono \
--database=d1 \
--kv=true \
--r2=false \
--apply-migrations=prod
```
**Migration workflow**:
```bash
npx -auth-cloudflare/cli migrate # Interactive
npx -auth-cloudflare/cli migrate --migrate-target=prod # Non-interactive
```
The CLI creates projects from Hono or Next.js templates and can automatically set up D1, KV, R2, and Hyperdrive resources. See [CLI Documentation](./cli/README.md) for full documentation and all available arguments.
## Manual Installation
```bash
npm install better-auth-cloudflare
# or
yarn add better-auth-cloudflare
# or
pnpm add better-auth-cloudflare
# or
bun add better-auth-cloudflare
```
## Configuration Options
| Option | Type | Default | Description |
| --------------------- | ------- | ----------- | ---------------------------------------------- |
| `autoDetectIpAddress` | boolean | `true` | Auto-detect IP address from Cloudflare headers |
| `geolocationTracking` | boolean | `true` | Track geolocation data in the session table |
| `cf` | object | `{}` | Cloudflare geolocation context |
| `r2` | object | `undefined` | R2 bucket configuration for file storage |
## Setup
Integrating `better-auth-cloudflare` into your project involves a few key steps to configure your database, authentication logic, and API routes. Follow these instructions to get started:
<br>
### 1. Define Your Database Schema (`src/db/schema.ts`)
You'll need to merge the Better Auth schema with any other Drizzle schemas your application uses. This ensures that Drizzle can manage your entire database structure, including the tables required by Better Auth.
```typescript
import * as authSchema from "./auth.schema"; // This will be generated in a later step
// Combine all schemas here for migrations
export const schema = {
...authSchema,
// ... your other application schemas
} as const;
```
_Note: The `auth.schema.ts` file will be generated by the Better Auth CLI in a subsequent step._
<br>
### 2. Initialize Drizzle ORM (`src/db/index.ts`)
Properly initialize Drizzle with your database. This function will provide a database client instance to your application. For D1, you'll use Cloudflare D1 bindings, while Postgres/MySQL will use Hyperdrive connection strings.
```typescript
import { getCloudflareContext } from "@opennextjs/cloudflare";
import { drizzle } from "drizzle-orm/d1";
import { schema } from "./schema";
export async function getDb() {
// Retrieves Cloudflare-specific context, including environment variables and bindings
const { env } = await getCloudflareContext({ async: true });
// Initialize Drizzle with your D1 binding (e.g., "DB" or "DATABASE" from wrangler.toml)
return drizzle(env.DATABASE, {
// Ensure "DATABASE" matches your D1 binding name in wrangler.toml
schema,
logger: true, // Optional
});
}
```
<br>
### 3. Configure Better Auth (`src/auth/index.ts`)
Set up your Better Auth configuration, wrapping it with `withCloudflare` to enable Cloudflare-specific features. The exact configuration depends on your framework:
**For most frameworks (Hono, etc.):**
```typescript
import type { D1Database, IncomingRequestCfProperties } from "@cloudflare/workers-types";
import { betterAuth } from "better-auth";
import { withCloudflare } from "better-auth-cloudflare";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { drizzle } from "drizzle-orm/d1";
import { schema } from "../db";
// Single auth configuration that handles both CLI and runtime scenarios
function createAuth(env?: CloudflareBindings, cf?: IncomingRequestCfProperties) {
// Use actual DB for runtime, empty object for CLI
const db = env ? drizzle(env.DATABASE, { schema, logger: true }) : ({} as any);
return betterAuth({
...withCloudflare(
{
autoDetectIpAddress: true,
geolocationTracking: true,
cf: cf || {},
d1: env
? {
db,
options: {
usePlural: true,
debugLogs: true,
},
}
: undefined,
kv: env?.KV,
// Optional: Enable R2 file storage
r2: {
bucket: env.R2_BUCKET,
maxFileSize: 10 * 1024 * 1024, // 10MB
allowedTypes: [".jpg", ".jpeg", ".png", ".gif", ".pdf", ".doc", ".docx"],
additionalFields: {
category: { type: "string", required: false },
isPublic: { type: "boolean", required: false },
description: { type: "string", required: false },
},
},
},
{
emailAndPassword: {
enabled: true,
},
rateLimit: {
enabled: true,
},
}
),
// Only add database adapter for CLI schema generation
...(env
? {}
: {
database: drizzleAdapter({} as D1Database, {
provider: "sqlite",
usePlural: true,
debugLogs: true,
}),
}),
});
}
// Export for CLI schema generation
export const auth = createAuth();
// Export for runtime usage
export { createAuth };
```
**For OpenNext.js with complex async requirements:**
See the [OpenNext.js example](./examples/opennextjs/README.md) for a more complex configuration that handles async database initialization and singleton patterns.
**Using Hyperdrive (MySQL):**
```typescript
import { drizzle } from "drizzle-orm/mysql2";
import mysql from "mysql2/promise";
async function getDb() {
const { env } = await getCloudflareContext({ async: true });
const connection = mysql.createPool(env.HYPERDRIVE_URL);
return drizzle(connection, { schema });
}
const auth = betterAuth({
...withCloudflare(
{
mysql: {
db: await getDb(),
},
// other cloudflare options...
},
{
// your auth options...
}
),
});
```
**Using Hyperdrive (Postgres):**
```typescript
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
async function getDb() {
const { env } = await getCloudflareContext({ async: true });
const sql = postgres(env.HYPERDRIVE_URL);
return drizzle(sql, { schema });
}
const auth = betterAuth({
...withCloudflare(
{
postgres: {
db: await getDb(),
},
// other cloudflare options...
},
{
// your auth options...
}
),
});
```
### 4. Generate and Manage Auth Schema
Better Auth uses Drizzle ORM for database interactions, allowing for automatic schema management for your database (D1/SQLite, Postgres, or MySQL).
To generate or update your authentication-related database schema, run the Better Auth CLI:
```bash
npx -auth/cli generate
```
This command inspects your `src/auth/index.ts` (specifically the `auth` export) and creates/updates `src/db/auth.schema.ts` with the necessary Drizzle schema definitions for tables like users, sessions, accounts, etc.
**Recommended Usage:**
Specify your configuration file and output path for more precise control:
```bash
npx -auth/cli@latest generate --config src/auth/index.ts --output src/db/auth.schema.ts -y
```
This command will:
- Read the `export const auth` configuration from `src/auth/index.ts`.
- Output the generated Drizzle schema to `src/db/auth.schema.ts`.
- Automatically confirm prompts (`-y`).
After generation, you can use Drizzle Kit to create and apply migrations to your database. Refer to the [Drizzle ORM documentation](https://orm.drizzle.team/kit/overview) for managing migrations.
For integrating the generated `auth.schema.ts` with your existing Drizzle schema, see [managing schema across multiple files](https://orm.drizzle.team/docs/sql-schema-declaration#schema-in-multiple-files). More details on schema generation are available in the [Better Auth docs](https://www.better-auth.com/docs/adapters/drizzle#schema-generation--migration).
### 5. Configure KV as Secondary Storage (Optional)
If you provide a KV namespace in the `withCloudflare` configuration (as shown in `src/auth/index.ts`), it will be used as [Secondary Storage](https://www.better-auth.com/docs/concepts/database#secondary-storage) by Better Auth. This is typically used for caching or storing session data that doesn't need to reside in your primary database.
Ensure your KV namespace (e.g., `USER_SESSIONS`) is correctly bound in your `wrangler.toml` file.
### 6. Set Up API Routes
Create API routes to handle authentication requests. Better Auth provides a handler that can be used for various HTTP methods.
```typescript
// Example: src/app/api/auth/[...all]/route.ts
// Adjust the path based on your project structure (e.g., Next.js App Router)
import { initAuth } from "@/auth"; // Adjust path to your auth/index.ts
export async function POST(req: Request) {
const auth = await initAuth();
return auth.handler(req);
}
export async function GET(req: Request) {
const auth = await initAuth();
return auth.handler(req);
}
// You can also add handlers for PUT, DELETE, PATCH if needed by your auth flows
```
### 7. Initialize the Client
Set up the Better Auth client, including the Cloudflare plugin, to interact with authentication features on the front-end.
```typescript
// Example: src/lib/authClient.ts or similar client-side setup file
import { createAuthClient } from "better-auth/client";
import { cloudflareClient } from "better-auth-cloudflare/client";
const authClient = createAuthClient({
plugins: [cloudflareClient()], // includes geolocation and R2 file features (if configured)
});
export default authClient;
```
## Usage Examples
### Accessing Geolocation Data
This library enables access to Cloudflare's geolocation data both on the client and server-side.
**Client-side API:**
Use the `authClient` to fetch geolocation information.
```typescript
import authClient from "@/lib/authClient"; // Adjust path to your client setup
const displayLocationInfo = async () => {
try {
const result = await authClient.cloudflare.geolocation();
if (result.error) {
console.error("Error fetching geolocation:", result.error);
} else if (result.data && !("error" in result.data)) {
console.log("📍 Geolocation data:", {
timezone: result.data.timezone,
city: result.data.city,
country: result.data.country,
region: result.data.region,
regionCode: result.data.regionCode,
colo: result.data.colo,
latitude: result.data.latitude,
longitude: result.data.longitude,
});
}
} catch (err) {
console.error("Failed to get geolocation data:", err);
}
};
displayLocationInfo();
```
### R2 File Storage
If you've configured R2 in your server setup, you can upload and manage files:
```typescript
import authClient from "@/lib/authClient";
// Upload a file with metadata
const uploadFile = async (file: File) => {
const result = await authClient.uploadFile(file, {
category: "documents",
isPublic: false,
description: "Important document",
});
if (result.error) {
console.error("Upload failed:", result.error.message || "Failed to upload file. Please try again.");
} else {
console.log("File uploaded:", result.data);
}
};
// List user's files
const listFiles = async () => {
const result = await authClient.files.list();
if (result.data) {
console.log("User files:", result.data);
}
};
// Download a file
const downloadFile = async (fileId: string, filename: string) => {
const result = await authClient.files.download({ fileId });
if (result.error) {
console.error("Download failed:", result.error);
return;
}
// Extract blob and create download
const response = result.data;
const blob = response instanceof Response ? await response.blob() : response;
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
};
```
For complete R2 file storage documentation, see the [R2 File Storage Guide](./docs/r2.md).
## License
[MIT](./LICENSE)
## Contributing
Contributions are welcome! Whether it's bug fixes, feature additions, or documentation improvements, we appreciate your help in making this project better. For major changes or new features, please open an issue first to discuss what you would like to change.