client apis/nuxt

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Nuxt handler mount path

Mount the Better Auth handler to a catch-all Nitro route by creating a file at `server/api/auth/[...all].ts`. The file should import the auth config and export a default event handler that calls `auth.handler(toWebRequest(event))`. The path `/api/auth/[...all]` is recommended and can be customized in Better Auth configuration.

Create auth client for Nuxt with Vue refs

Create an auth client using `better-auth/vue` to make `useSession` return Vue refs. Import `createAuthClient` from `better-auth/vue` and call it with no arguments to create the client.

Load and hydrate session in Nuxt pages

Use `authClient.useSession(useFetch)` inside a page `setup()` to load the session on the server and hydrate it on the client. Pass Nuxt's `useFetch` so the request is made with incoming cookies and the payload is reused during hydration.

Use session in client-only Nuxt components

For client-only widgets like popovers or menus, call `authClient.useSession()` without an argument. It returns a reactive ref that updates on sign-in and sign-out.

Protect Nuxt pages with route middleware

Create a named route middleware in `app/middleware/auth.ts` that calls `authClient.useSession(useFetch)` and returns `navigateTo()` if no session exists. Opt pages into it using `definePageMeta({ middleware: 'auth' })`. To run on every route, rename to `app/middleware/auth.global.ts`. Always return the `navigateTo()` call; calling it without return is a no-op.

Protect Nuxt server routes

Call `auth.api.getSession({ headers: event.headers })` in a server route handler to get the session. Guard the route by throwing `createError({ statusCode: 401, statusMessage: 'Unauthorized' })` if `session?.user` is falsy. Factor the check into a `server/utils/` helper if reusing across many routes.

Forward cookies during SSR in Nuxt

AuthClient actions aside from `useSession(useFetch)` do not forward cookies during SSR by default and return as unauthenticated. Two approaches: (A) Call them on the client only by wrapping in `<ClientOnly>` or guarding with `import.meta.client`. (B) Create a request-scoped client using a `useAuth` composable that gets headers with `useRequestHeaders(['cookie'])` on server and passes them to `createAuthClient({ baseURL: url.origin, fetchOptions: { headers } })`.

Reuse Nuxt auth setup with layers

To reuse the same auth setup across multiple Nuxt apps, extract `lib/auth.ts`, `server/`, `app/middleware/`, and `app/composables/` into a Nuxt layer and extend it from each app using `extends: ['./layers/auth']` in `nuxt.config.ts`.

Nuxt integration example: page with session and social sign-in

A page can render different content based on session state. If session exists, display a welcome message with the user name and a sign-out button. If no session, display a sign-in button that calls `authClient.signIn.social({ provider: 'github' })`. Import session using `authClient.useSession(useFetch)` in the setup block.

Nuxt integration example: middleware protecting routes

Route middleware in `app/middleware/auth.ts` that checks for a session and redirects to login if missing: `import { authClient } from '~~/lib/auth-client'; export default defineNuxtRouteMiddleware(async (to) => { const { data: session } = await authClient.useSession(useFetch); if (!session.value) { return navigateTo({ path: '/login', query: { redirect: to.fullPath } }); } });`

Nuxt integration example: protecting server routes

Server route handler in `server/api/me.get.ts` that protects the endpoint: `import { auth } from '~~/lib/auth'; export default defineEventHandler(async (event) => { const session = await auth.api.getSession({ headers: event.headers }); if (!session?.user) { throw createError({ statusCode: 401, statusMessage: 'Unauthorized' }); } return { user: session.user }; });`

Nuxt integration example: request-scoped auth client for SSR

A composable `app/composables/useAuth.ts` that forwards cookies during SSR: `import { createAuthClient } from 'better-auth/vue'; export function useAuth() { const url = useRequestURL(); const headers = import.meta.server ? useRequestHeaders(['cookie']) : undefined; return createAuthClient({ baseURL: url.origin, fetchOptions: { headers }, }); }` Then use it in a page with `useAsyncData('accounts', () => useAuth().listAccounts().then((res) => res.data))`.

Nuxt integration example: handler mount

Mount handler in `server/api/auth/[...all].ts`: `import { auth } from '~~/lib/auth'; export default defineEventHandler((event) => { return auth.handler(toWebRequest(event)); });`

Nuxt integration example: create auth client

Create auth client in `lib/auth-client.ts`: `import { createAuthClient } from 'better-auth/vue'; export const authClient = createAuthClient(); export const { signIn, signUp, signOut, useSession } = authClient;`

Give your agent this brain