home / skills / bobmatnyc / claude-mpm-skills / better-auth-integrations

better-auth-integrations skill

/toolchains/platforms/auth/better-auth/better-auth-integrations

This skill helps wire authentication across frameworks by mounting the Better Auth handler, using framework helpers, and ensuring SSR cookies and headers flow.

npx playbooks add skill bobmatnyc/claude-mpm-skills --skill better-auth-integrations

Review the files below or copy the command above to add this skill to your agents.

Files (4)

SKILL.md

2.1 KB

---
name: better-auth-integrations
description: Better Auth framework integrations for TypeScript. Use when wiring route handlers in Next.js, SvelteKit, Remix, Express, Hono, or other web frameworks.
progressive_disclosure:
  entry_point:
    summary: "Better Auth framework integrations for TypeScript. Use when wiring route handlers in Next.js, SvelteKit, Remix, Express, Hono, or other web frameworks."
    when_to_use: "When implementing authentication, authorization, or security."
    quick_start: "1. Review the core concepts below. 2. Apply patterns to your use case. 3. Follow best practices for implementation."
  references:
    - frameworks.md
    - nextjs.md
---
# Better Auth Integrations

## Goals
- Mount the Better Auth handler at `/api/auth/*` (or a custom base path).
- Use framework helpers where available.
- Ensure cookies and headers flow correctly in SSR and server actions.

## Quick start
1. Create an `auth` instance (see `better-auth-core`).
2. Add a catch-all route for `/api/auth/*`.
3. Use a framework helper (or `auth.handler`) to return a Response.

### Next.js App Router
```ts
import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { GET, POST } = toNextJsHandler(auth);
```

### Next.js Pages Router
```ts
import { auth } from "@/lib/auth";
import { toNodeHandler } from "better-auth/node";

export const config = { api: { bodyParser: false } };
export default toNodeHandler(auth.handler);
```

## Cookie handling in Next.js server actions
Use the `nextCookies` plugin so server actions set cookies correctly.

```ts
import { betterAuth } from "better-auth";
import { nextCookies } from "better-auth/next-js";

export const auth = betterAuth({
  // ...config
  plugins: [nextCookies()],
});
```

## Guardrails
- Keep the base path consistent between server and client.
- Prefer framework helpers when available.
- Avoid running custom body parsers before the auth handler.

## References
- `toolchains/platforms/auth/better-auth/better-auth-integrations/references/nextjs.md`
- `toolchains/platforms/auth/better-auth/better-auth-integrations/references/frameworks.md`

Overview

This skill provides framework-specific integrations for Better Auth in TypeScript projects. It mounts the Better Auth handler at a configurable base path (commonly /api/auth/*) and supplies helpers for Next.js, SvelteKit, Remix, Express, Hono and other web frameworks. The goal is reliable cookie and header propagation for SSR, server actions, and API routes.

How this skill works

The integration exposes adapters that translate Better Auth handler responses into framework-native request/response lifecycles (for example toNextJsHandler or toNodeHandler). It wiring a catch-all route to forward requests to the auth instance, ensuring cookies and headers are preserved across proxies and server-side render flows. Optional plugins (e.g., nextCookies) inject framework-specific cookie handling so server actions can set cookies correctly.

When to use it

Adding authentication routes to a Next.js, SvelteKit, Remix, Express, Hono, or similar app
Mounting a catch-all auth endpoint (e.g., /api/auth/*) to centralize auth flows
Needing correct cookie/header flow for SSR and server actions
Preferring framework helpers over manual Response conversion
Avoiding custom body parsers that might interfere with the auth handler

Best practices

Keep the auth base path consistent between server and client to avoid mismatches
Prefer official framework helpers provided by the integration for cleaner wiring and fewer edge cases
Do not run custom body parsers on auth routes; use bodyParser: false or equivalent when required
Add the framework cookie plugin (like nextCookies) when using Next.js server actions so cookies are set properly
Treat the auth handler as a catch-all endpoint and avoid adding other middleware that mutates the request stream

Example use cases

Next.js App Router: use toNextJsHandler(auth) to export GET/POST for the app route
Next.js Pages Router: export toNodeHandler(auth.handler) and disable body parsing for the API route
SvelteKit: mount the adapter on a catch-all endpoint and let the adapter map cookies/headers for SSR
Express/Hono: use the node adapter to forward incoming requests to the Better Auth instance
Server actions: enable the framework cookie plugin so actions that initiate auth flows can set cookies from the server

FAQ

Do I need to change my auth configuration to use these integrations?

No. Use your existing Better Auth instance; the integrations wrap the handler and adapt it to framework request/response models.

How do I ensure cookies set during server actions are sent to the client?

Enable the framework cookie plugin (for example nextCookies for Next.js) so server action responses include proper Set-Cookie handling that the framework will forward to the browser.