Skip to content

Commit e22acc1

Browse files
committed
docs: rewrite developer documentation
1 parent bbf5b35 commit e22acc1

42 files changed

Lines changed: 536 additions & 891 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

README.md

Lines changed: 60 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,70 @@
1-
<p align="center">
2-
<img src="https://raw.githubusercontent.com/onmax/nuxt-better-auth/main/.github/og.png" alt="Nuxt Better Auth" width="100%">
3-
<br>
4-
<sub>Designed by <a href="https://github.com/HugoRCD">HugoRCD</a></sub>
5-
</p>
1+
# `@onmax/nuxt-better-auth`
62

7-
<h1 align="center">@onmax/nuxt-better-auth</h1>
3+
Nuxt module for [Better Auth](https://better-auth.com) with Nuxt-native route protection, SSR-safe session access, auto-imported helpers, and optional NuxtHub-backed schema generation.
84

9-
<p align="center">Nuxt module for <a href="https://better-auth.com">Better Auth</a></p>
5+
> [!WARNING]
6+
> This package is still in alpha. Expect API and behavior changes before a stable release.
107
11-
<p align="center">
12-
<a href="https://npmjs.com/package/@onmax/nuxt-better-auth"><img src="https://img.shields.io/npm/v/@onmax/nuxt-better-auth/latest.svg?style=flat&colorA=020420&colorB=00DC82" alt="npm version"></a>
13-
<a href="https://npm.chart.dev/@onmax/nuxt-better-auth"><img src="https://img.shields.io/npm/dm/@onmax/nuxt-better-auth.svg?style=flat&colorA=020420&colorB=00DC82" alt="npm downloads"></a>
14-
<a href="https://npmjs.com/package/@onmax/nuxt-better-auth"><img src="https://img.shields.io/npm/l/@onmax/nuxt-better-auth.svg?style=flat&colorA=020420&colorB=00DC82" alt="License"></a>
15-
<a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js" alt="Nuxt"></a>
16-
</p>
8+
## Who this is for
179

18-
> [!WARNING]
19-
> This library is a work in progress and not ready for production use.
10+
Use this module if you want Better Auth in a Nuxt 4 app and you want the Nuxt-specific pieces handled for you:
11+
12+
- `useUserSession()` for reactive auth state
13+
- `requireUserSession(event)` and related server helpers
14+
- route protection through `routeRules` and `definePageMeta({ auth })`
15+
- generated `server/auth.config.ts` and `app/auth.config.ts`
16+
- optional NuxtHub database integration and schema generation
17+
18+
## Install the module
19+
20+
For the fastest path in a Nuxt 4 app:
21+
22+
```bash
23+
npx nuxi module add @onmax/nuxt-better-auth@alpha
24+
```
25+
26+
Then create or confirm these files:
27+
28+
- `server/auth.config.ts`
29+
- `app/auth.config.ts`
30+
- `.env` with `NUXT_BETTER_AUTH_SECRET`
31+
32+
For the full setup flow, follow the [installation guide](https://better-auth.nuxt.dev/getting-started/installation).
33+
34+
## Choose your setup path
35+
36+
- Use [NuxtHub integration](https://better-auth.nuxt.dev/integrations/nuxthub) if you want the shortest path to database-backed auth.
37+
- Use [custom database setup](https://better-auth.nuxt.dev/guides/custom-database) if you already have your own database stack.
38+
- Use [external auth backend](https://better-auth.nuxt.dev/guides/external-auth-backend) if Better Auth runs in a separate service.
39+
- Use [database-less mode](https://better-auth.nuxt.dev/guides/database-less-mode) for stateless or OAuth-first setups with clear tradeoffs.
2040

2141
## Documentation
2242

23-
**[better-auth.nuxt.dev](https://better-auth.nuxt.dev/)**
43+
The documentation site is at [better-auth.nuxt.dev](https://better-auth.nuxt.dev).
44+
45+
Recommended reading order:
46+
47+
1. [Quickstart](https://better-auth.nuxt.dev/getting-started)
48+
2. [Installation](https://better-auth.nuxt.dev/getting-started/installation)
49+
3. [Configuration](https://better-auth.nuxt.dev/getting-started/configuration)
50+
4. [Client setup](https://better-auth.nuxt.dev/getting-started/client-setup)
51+
5. [Route protection](https://better-auth.nuxt.dev/core-concepts/route-protection)
52+
53+
## Development
54+
55+
```bash
56+
pnpm install
57+
pnpm dev:docs
58+
```
59+
60+
Useful commands:
61+
62+
- `pnpm dev` to run the playground
63+
- `pnpm dev:docs` to run the docs site
64+
- `pnpm lint` to lint the repo
65+
- `pnpm test` to run the test suite
66+
- `pnpm build:docs` to build the docs site
2467

2568
## License
2669

27-
MIT
70+
[MIT](https://github.com/nuxt-modules/better-auth/blob/main/LICENSE)

docs/content/1.getting-started/0.index.md

Lines changed: 46 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -4,112 +4,93 @@ description: Nuxt Better Auth integrates Better Auth with Nuxt for route protect
44
navigation.icon: i-lucide-sparkles
55
---
66

7-
Nuxt Better Auth integrates **Nuxt** and **Better Auth**, the TypeScript-first authentication library. You get route protection, session management, and schema generation with minimal setup. The plugin ecosystem adds features like 2FA, organizations, and passkeys.
7+
Use this page when you want the fastest path to a working Nuxt 4 setup.
88

9-
::card{to="https://demo-nuxt-better-auth.onmax.me" target="_blank" icon="i-lucide-external-link"}
10-
**Live Demo** – Try the authentication flow in action.
11-
::
9+
This quickstart assumes:
1210

13-
## Features
11+
- you want the default full-mode setup
12+
- you are using `pnpm`
13+
- you want a local login flow working before you customize providers or plugins
1414

15-
This module brings Nuxt-specific enhancements on top of Better Auth:
15+
If you already know you need a different architecture, jump to [NuxtHub](/integrations/nuxthub), [custom database](/guides/custom-database), or [external auth backend](/guides/external-auth-backend).
1616

17-
::docs-features
18-
---
19-
features:
20-
- title: Auto Configuration
21-
description: Auto-wires API routes, middleware, and schema with sensible defaults
22-
- title: Route Protection
23-
description: Declarative page and API route guards
24-
- title: Schema Generation
25-
description: Auto-generate Drizzle schemas
26-
- title: Reactive Sessions
27-
description: "`useUserSession()` with SSR support"
28-
- title: Database Flexibility
29-
description: Works standalone or with NuxtHub
30-
- title: Type Safety
31-
description: Full TypeScript inference
32-
- title: Auto Imports
33-
description: Composables and utils ready to use
34-
- title: Server Utilities
35-
description: Auth helpers for your API routes
36-
- title: Powered by Better Auth
37-
description: 2FA, OAuth, SSO, organizations, and more
38-
href: https://www.better-auth.com
39-
---
40-
::
17+
## What you will end up with
4118

42-
## Why Nuxt Better Auth?
19+
After this guide you should have:
4320

44-
Building authentication from scratch is hard. Wiring up Better Auth with Nuxt manually involves:
45-
- Setting up API handlers
46-
- Syncing client/server state
47-
- Handling redirects
48-
- Managing database schemas (if using a database)
21+
- `server/auth.config.ts` and `app/auth.config.ts`
22+
- Better Auth handlers mounted at `/api/auth/*`
23+
- a valid `NUXT_BETTER_AUTH_SECRET`
24+
- a reactive `useUserSession()` composable in your app
4925

50-
This module does all of that for you. Just configure your auth providers and the module handles the rest.
26+
## Before you begin
5127

52-
## Quick Start
28+
- Nuxt `4.x`
29+
- a local `.env` file
30+
- a development server you can start with `pnpm dev`
5331

54-
Get a working login in 5 minutes with NuxtHub (SQLite).
32+
## Quickstart
5533

5634
::steps
5735

58-
### Install
36+
### Install the module
5937

6038
```bash
61-
npx nuxi module add @onmax/nuxt-better-auth@alpha @nuxthub/core
39+
npx nuxi module add @onmax/nuxt-better-auth@alpha
6240
```
6341

64-
### Configure
42+
### Add your secret
6543

66-
```ts [nuxt.config.ts]
67-
export default defineNuxtConfig({
68-
hub: { db: 'sqlite' },
69-
})
70-
```
44+
Create or update `.env`:
7145

7246
```ini [.env]
73-
NUXT_BETTER_AUTH_SECRET="generate-a-32-char-secret"
47+
NUXT_BETTER_AUTH_SECRET="replace-with-a-random-32-character-secret"
7448
```
7549

76-
### Create Config Files
50+
Use a high-entropy value. The module also accepts `BETTER_AUTH_SECRET` as a fallback, but `NUXT_BETTER_AUTH_SECRET` is the recommended variable.
51+
52+
### Create the server config
7753

7854
```ts [server/auth.config.ts]
7955
import { defineServerAuth } from '@onmax/nuxt-better-auth/config'
8056

8157
export default defineServerAuth({
82-
emailAndPassword: { enabled: true },
58+
emailAndPassword: {
59+
enabled: true,
60+
},
8361
})
8462
```
8563

64+
### Create the client config
65+
8666
```ts [app/auth.config.ts]
8767
import { defineClientAuth } from '@onmax/nuxt-better-auth/config'
8868

8969
export default defineClientAuth({})
9070
```
9171

92-
### Run
72+
### Start Nuxt
9373

94-
::code-group{sync="pm"}
95-
```bash [pnpm]
74+
```bash
9675
pnpm dev
9776
```
98-
```bash [npm]
99-
npm run dev
100-
```
101-
::
10277

10378
::
10479

105-
You now have API routes at `/api/auth/*`, a reactive `useUserSession()` composable, and route protection via `definePageMeta`.
80+
## Verify the result
81+
82+
Check these success signals:
83+
84+
- your app starts without auth-related module errors
85+
- `/api/auth/*` routes are registered
86+
- `useUserSession()` is available in a page or component
87+
- the generated config files match your project structure
10688

107-
## Recommended Path for Beginners
89+
If you use a custom `srcDir`, the client config lives there instead of `app/`.
10890

109-
If this is your first setup, follow this order:
91+
## Next steps
11092

111-
1. [Installation](/getting-started/installation)
112-
2. [Configuration](/getting-started/configuration)
113-
3. [Client Setup](/getting-started/client-setup)
114-
4. [Route Protection](/core-concepts/route-protection)
115-
5. [API Reference](/api/composables)
93+
1. Follow [installation](/getting-started/installation) for the complete setup checklist.
94+
2. Read [configuration](/getting-started/configuration) before adding providers or plugins.
95+
3. Set up [client usage](/getting-started/client-setup) in your pages and forms.
96+
4. Add [route protection](/core-concepts/route-protection) once the login flow works.

docs/content/1.getting-started/1.installation.md

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,17 @@ Install @onmax/nuxt-better-auth in my Nuxt 4 app.
1515
- Create `server/auth.config.ts` using `defineServerAuth` from `@onmax/nuxt-better-auth/config`
1616
- Create `app/auth.config.ts` using `defineClientAuth` from `@onmax/nuxt-better-auth/config`
1717
- The module auto-injects `secret` and `baseURL` — do not configure them manually
18-
19-
Read more: https://better-auth.nuxt.dev/raw/getting-started/installation.md
20-
Source: https://github.com/nuxt-modules/better-auth
2118
```
2219

2320
::
2421

22+
Use this page when you want the full install checklist rather than the shorter quickstart.
23+
2524
## Prerequisites
2625

2726
- Nuxt v4.0+
27+
- a package manager configured for your app
28+
- a local `.env` file or deployment environment variable system
2829

2930
## Add to project
3031

@@ -36,7 +37,7 @@ Source: https://github.com/nuxt-modules/better-auth
3637
npx nuxi module add @onmax/nuxt-better-auth@alpha
3738
```
3839

39-
### Set Environment Variables
40+
### Set environment variables
4041

4142
::tip{icon="i-lucide-sparkles"}
4243
When you install the module with `nuxi module add`, it prompts you to generate `NUXT_BETTER_AUTH_SECRET` and can append it to your `.env`. `BETTER_AUTH_SECRET` still works as a compatibility fallback. In CI/test environments it auto-generates the secret.
@@ -73,7 +74,7 @@ The module auto-detects the URL on Vercel, Cloudflare Pages, and Netlify. Set ma
7374
NUXT_PUBLIC_SITE_URL=https://your-domain.com
7475
```
7576

76-
### Create Configuration Files
77+
### Create configuration files
7778

7879
::tip{icon="i-lucide-sparkles"}
7980
During module install, `server/auth.config.ts` and `<srcDir>/auth.config.ts` are scaffolded if missing. The client config is placed in your `srcDir` (e.g., `app/` or project root).
@@ -102,6 +103,21 @@ export default defineClientAuth({})
102103

103104
::
104105

106+
## Verify the installation
107+
108+
Confirm all of the following:
109+
110+
- Nuxt starts without missing-config errors
111+
- `server/auth.config.ts` exists
112+
- `app/auth.config.ts` or your `srcDir` equivalent exists
113+
- `NUXT_BETTER_AUTH_SECRET` is available at runtime
114+
115+
## Next steps
116+
117+
- Continue with [configuration](/getting-started/configuration) to set module options and route protection.
118+
- Continue with [client setup](/getting-started/client-setup) to wire sign-in and sign-out flows.
119+
- If you need durable persistence, pick either [NuxtHub integration](/integrations/nuxthub) or [custom database](/guides/custom-database).
120+
105121
::callout{icon="i-lucide-database" to="/integrations/nuxthub"}
106122
**Need database persistence?** See [NuxtHub Integration](/integrations/nuxthub) for auto-generated schemas and full database support.
107123
::

docs/content/1.getting-started/2.configuration.md

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,12 @@ Configure @onmax/nuxt-better-auth module options and server auth.
1616
- The module auto-injects `secret` and `baseURL` — do not set them in defineServerAuth
1717
- Base URL priority: runtimeConfig > request URL > platform env vars > localhost
1818
- Set `NUXT_PUBLIC_SITE_URL` for custom domains or deterministic OAuth callbacks
19-
20-
Read more: https://better-auth.nuxt.dev/raw/getting-started/configuration.md
21-
Source: https://github.com/nuxt-modules/better-auth
2219
```
2320

2421
::
2522

23+
Use this page when the module is installed and you want to control runtime behavior in `nuxt.config.ts`, `server/auth.config.ts`, and `app/auth.config.ts`.
24+
2625
## Module Configuration
2726

2827
```ts [nuxt.config.ts]
@@ -278,6 +277,21 @@ Use `NUXT_BETTER_AUTH_SECRET` as the primary secret variable. `BETTER_AUTH_SECRE
278277

279278
## For Module Authors
280279

280+
## Recommended order
281+
282+
1. Configure the module in `nuxt.config.ts`.
283+
2. Configure Better Auth behavior in `server/auth.config.ts`.
284+
3. Configure client plugins in `app/auth.config.ts`.
285+
4. Add route protection with `routeRules` or `definePageMeta({ auth })`.
286+
287+
## Verify the result
288+
289+
After configuration changes:
290+
291+
- restart the Nuxt dev server if you changed schema- or plugin-related settings
292+
- confirm your app boots without missing-config errors
293+
- confirm route protection works on at least one protected page and one protected API route
294+
281295
Other Nuxt modules can extend the authentication configuration:
282296

283297
```ts

docs/content/1.getting-started/3.client-setup.md

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,12 @@ Set up the client auth config for @onmax/nuxt-better-auth.
1414
- Add client plugin equivalents for every server plugin (e.g. `adminClient()` from `better-auth/client/plugins`)
1515
- The module calls the factory with the correct `baseURL` at runtime
1616
- `useUserSession()` is auto-imported and provides `user`, `session`, `loggedIn`, `ready`, `signIn`, `signUp`, `signOut`
17-
18-
Read more: https://better-auth.nuxt.dev/raw/getting-started/client-setup.md
19-
Source: https://github.com/nuxt-modules/better-auth
2017
```
2118

2219
::
2320

21+
Use this page when the server config exists and you want to wire the Better Auth client into your Nuxt app.
22+
2423
## Create the Client Config
2524

2625
Create `app/auth.config.ts` with a default export using `defineClientAuth`.
@@ -72,3 +71,31 @@ export default defineClientAuth({
7271
```
7372

7473
:read-more{to="https://www.better-auth.com/docs/plugins" title="All Better Auth plugins"}
74+
75+
## Use the client in your app
76+
77+
`useUserSession()` is auto-imported in pages and components.
78+
79+
```vue [pages/login.vue]
80+
<script setup lang="ts">
81+
definePageMeta({ auth: 'guest' })
82+
83+
const { signIn } = useUserSession()
84+
85+
async function login(email: string, password: string) {
86+
await signIn.email(
87+
{ email, password },
88+
{ onSuccess: () => navigateTo('/app') },
89+
)
90+
}
91+
</script>
92+
```
93+
94+
## Verify the result
95+
96+
Confirm all of the following:
97+
98+
- `useUserSession()` is available without a manual import
99+
- `client` is available on the browser after hydration
100+
- client plugins are registered on both server and client when required by Better Auth
101+
- sign-in and sign-out update `user`, `session`, and `loggedIn`

0 commit comments

Comments
 (0)