Better Auth on Cloudflare Workers with Hono and D1

better auth


A TypeScript-based lightweight authentication service optimized for Cloudflare Workers

Stack Summary

🔥 Hono

A fast, lightweight web framework built on web standards.

🔒 Better Auth

A comprehensive authentication framework for TypeScript.

🧩 Drizzle ORM

A lightweight, high-performance ORM for TypeScript, built with DX in mind.

🐘 Cloudflare D1

A serverless Sqlite optimized for the cloud.

Installation

Hono

Select cloudflare-workers template

npm create hono

Better Auth

npm i better-auth

Drizzle ORM

npm i drizzle-orm
npm i -D drizzle-kit

Environment Variables

Set the following environment variables to connect your application to Better Auth.

echo "BETTER_AUTH_URL=http://localhost:8787" >> .env
echo "BETTER_AUTH_SECRET=$(openssl rand -base64 32)" >> .env
cp .env .dev.vars
npx wrangler d1 create myDb --update-config

Required Files: 

.dev.vars 

Used by Wrangler in local development
In production, these should be set as Cloudflare Worker Secrets.

.env

Used for local development and CLI tools such as:
- Drizzle CLI
- Better Auth CLI

BETTER_AUTH_URL=
BETTER_AUTH_SECRET=

Wrangler

After setting your environment variables, run the following script to generate types for your Cloudflare Workers configuration:

npx wrangler types --env-interface CloudflareBindings
OR
npm run cf-typegen

Then, make sure your tsconfig.json includes the generated types.

tsconfig.json

{
"compilerOptions": {
"types": ["worker-configuration.d.ts"]
}
}

Drizzle

To use the Drizzle Kit CLI, add the following Drizzle configuration file to the root of your project.

drizzle.config.ts

import { defineConfig } from 'drizzle-kit';

export default defineConfig({
out: './migrations',
schema: './src/db/auth-schema.ts',
dialect: 'sqlite',
});

Application

Better Auth Instance

Create a Better Auth instance using Cloudflare Workers bindings.

import { drizzle } from 'drizzle-orm/d1';
import { drizzleAdapter } from 'better-auth/adapters/drizzle';
import { betterAuth, BetterAuthOptions } from 'better-auth';
import { betterAuthOptions } from './auth-options';

/**
* Better Auth Instance
*/
export const auth = (env: CloudflareBindings): ReturnType<typeof betterAuth> => {
const db = drizzle(env.myDb);
const database = drizzleAdapter(db, {
provider: "sqlite",
});

const options: BetterAuthOptions = {
...betterAuthOptions,
database,
baseURL: env.BETTER_AUTH_URL,
secret: env.BETTER_AUTH_SECRET
};

return betterAuth(options);
};

There are many available configuration options, far more than can be covered in this example. Please refer to the official documentation and configure it according to your project’s needs:
(Docs: Better Auth - Options)

import { BetterAuthOptions } from 'better-auth';

/**
* Custom options for Better Auth
*
* Docs: https://www.better-auth.com/docs/reference/options
*/
export const betterAuthOptions: BetterAuthOptions = {
/**
* The name of the application.
*/
appName: 'YOUR_APP_NAME',
/**
* Base path for Better Auth.
* @default "/api/auth"
*/
basePath: '/api',

// .... More options
};

Better Auth Schema

To create the required tables for Better Auth, first add the following file to the root directory:

auth.ts

/**
* Better Auth CLI configuration file
*
* Docs: https://www.better-auth.com/docs/concepts/cli
*/

import { drizzle } from 'drizzle-orm/d1';
import { drizzleAdapter } from 'better-auth/adapters/drizzle';
import { betterAuth, BetterAuthOptions } from 'better-auth';
import { betterAuthOptions } from './src/lib/auth-options';

const { myDb, BETTER_AUTH_URL, BETTER_AUTH_SECRET } = process.env;
const db = drizzle(myDb!);

export const auth = betterAuth({
database: drizzleAdapter(db, {
provider: "sqlite",
}),
baseURL: BETTER_AUTH_URL,
secret: BETTER_AUTH_SECRET
});

Then, execute the following script:

mkdir ./src/db & npx auth generate --output=\"./src/db/auth-schema.ts\" -y

Apply Schema to Database

After generating the schema file, run the following commands to create and apply the database migration: Check your wrangler config to read the process.env correctly for the wrangler dev to work later. You need node_compatibility setup.

npx drizzle-kit generate
npx wrangler d1 migrations apply myDb #this replaces drizzle-kit migrate

Mount the handler

Mount the Better Auth handler to a Hono endpoint, ensuring that the mount path matches the basePath setting in your Better Auth instance.

import { Hono } from 'hono';
import { auth } from './lib/better-auth';

const app = new Hono<{ Bindings: CloudflareBindings }>();

app.get('/', (c) => {
return c.json({ message: 'Welcome to the Hono + Better Auth + D1 example!' });
});

app.on(['GET', 'POST'], '/api/*', (c) => {
return auth(c.env).handler(c.req.raw);
});

app.get('/api/user', (c) => {
return c.json({ message: 'Authorized!' });
});

export default app



Comments

Post a Comment

Popular posts from this blog

Tutorial Expo React Native Google AdMob

Image
Getting Started The AdMob module allows you to display adverts to your users. All adverts are served over the Google AdMob network, meaning a Google AdMob account is required. First steps Installation # Install the admob module and config plugin npx expo install react-native-google-mobile-ads On Android, before releasing your app, you must select "Yes, my app contains ads" in the Google Play Console under "Policy and programmes" > "App content" > "Manage". Optionally configure iOS static frameworks Follow these steps on iOS if you need to use static frameworks (that is, use_frameworks! :linkage => :static in your Podfile). You may need this if you use this module in combination with react-native-firebase v15 and higher since it requires use_frameworks !. Expo users may enable static frameworks by using the expo-build-properties plugin. To do so follow the official expo-build-properties installation instructions and merge the followin...
Read more

Tutorial VNC Server on Linux Debian Bookworm

Image
To set up an X11 VNC server on Debian, the recommended package is x11vnc , which provides remote access to an existing X session. Alternatively, you can use other VNC servers like TightVNC or TigerVNC to create a new, virtual X desktop session.  Using x11vnc to Access the Current Desktop  x11vnc is ideal for remote assistance or accessing the same desktop visible on the physical monitor.  Installation: sudo apt update && sudo apt install x11vnc Configuration and Usage: Set a VNC password (optional but highly recommended): x11vnc -storepasswd This creates a password file, typically located at ~/.vnc/passwd . Run the server: To run it in your current terminal session, use: x11vnc -display :0 You will likely need to use the -auth option or set the XAUTHORITY environment variable to grant x11vnc permission to connect to the X server.  x11vnc -auth -forever -loop -noxdamage -repeat -rfbauth ~/.vnc/passwd -rfbport 5900 -shared ncache_cr -ncache 10 -forever : k...
Read more

Tutorial React Navigation React Native

Image
  Getting started The Fundamentals section covers the most important aspects of React Navigation. It should be enough to build a typical mobile application and give you the background to dive deeper into the more advanced topics. Minimum requirements react-native >= 0.72.0 expo >= 52 (if you use Expo Go) typescript >= 5.0.0 (if you use TypeScript) Installation The @react-navigation/native package contains the core functionality of React Navigation. In your project directory, run: npm install @react-navigation/native Installing dependencies Next, install the dependencies used by most navigators: react-native-screens and react-native-safe-area-context. In your project directory, run: npm install react-native-screens react-native-safe-area-context If you're on a Mac and developing for iOS, install the pods via Cocoapods to complete the linking: npx pod-install ios Configuring react-native-screens on Android react-native-screens requires one additional configuration to properl...
Read more