Getting Started

Client Setup

Configure the client-side authentication client.

Create the Client Config

Create app/auth.config.ts with a default export using defineClientAuth.

The defineClientAuth helper supports two syntaxes: an object for simple configurations, or a function when you need access to context like the resolved site URL.

app/auth.config.ts

import { defineClientAuth } from '@onmax/nuxt-better-auth/config'

// Object syntax (simplest)
export default defineClientAuth({})

// Function syntax (access context)
export default defineClientAuth(({ siteUrl }) => ({
  // siteUrl contains the resolved base URL
}))

defineClientAuth returns a config factory. The module calls it with the resolved baseURL and creates the client at runtime.

Using Plugins

If you added a plugin in your server config (server/auth.config.ts), make sure to add its client equivalent here.

app/auth.config.ts

import { defineClientAuth } from '@onmax/nuxt-better-auth/config'
import { adminClient } from 'better-auth/client/plugins'

export default defineClientAuth({
  plugins: [
    adminClient() // Must match the server plugin
  ]
})

Extending Client Config via Hook

Modules can inject client plugins without requiring users to edit app/auth.config.ts.

nuxt.config.ts

export default defineNuxtConfig({
  hooks: {
    'better-auth:client:extend'(config) {
      config.plugins = [
        {
          from: 'better-auth/client/plugins',
          name: 'adminClient',
        },
      ]
    },
  },
})

Common Plugin Combinations

Admin + Two Factor

app/auth.config.ts

import { defineClientAuth } from '@onmax/nuxt-better-auth/config'
import { adminClient, twoFactorClient } from 'better-auth/client/plugins'

export default defineClientAuth({
  plugins: [adminClient(), twoFactorClient()]
})

Learn how to enable Type Augmentation for full type safety.