nuxt-better-auth

nuxt-better-auth

Features

• Flexable use better-auth
• Type safe

Installation

Add dependencies to your project

pnpm add nuxt-better-auth better-auth

npm install nuxt-better-auth better-auth

Add module in your nuxt.config.ts

export default defineNuxtConfig({
	modules: ['nuxt-better-auth'],
	betterAuth: {
		// [Optional]
	},
})

[!TIP] When you are using Postgresql as database with Hyperdrive in Cloudflare Worker, you should setup server singleton by request.

export default defineNuxtConfig({
	modules: ['nuxt-better-auth'],
	// Setup server singleton by request
	betterAuth: {
		server: {
			singleton: 'request',
		},
	},
	// [Optional] Enable async context: https://nitro.build/guide/utils#async-context-experimental
	nitro: {
		experimental: {
			asyncContext: true,
		},
	},
})

Usage

Create sign in / sign out button with useAuthClient

<script setup lang="ts">
const authClient = useAuthClient()

async function handleSignInClick() {
	await authClient.signIn.anonymous()
}
</script>

<template>
	<button @click="handleSignInClick">
		Sign In
	</button>
</template>

Get reactive user / session data with useAuthState

<script setup lang="ts">
const { session, user } = useAuthState()
</script>

<template>
	User: {{ user }}
	Session: {{ session }}
</template>

Get better-auth instance (in server)

export default eventHandler(() => {
	const betterAuth = useBetterAuth()
})

If use singleton for request, please put event to useBetterAuth, or used asyncContext first then you don't need that anymore.

export default eventHandler(async (event) => {
	const betterAuth = useBetterAuth(event)
})

Custom options

Can provide options by file, and with some magic to make it type safe.

Client options

Create file at nuxt's src dir (default same as root dir), e.g: better-auth/client-options.ts or app/better-auth/client-options.ts in nuxt 4

import type { ClientOptions } from 'better-auth'
import { anonymousClient } from 'better-auth/client/plugins'

export default () => ({
	plugins: [
		anonymousClient(),
	],
} satisfies ClientOptions)

Server options

Create file at nuxt's server dir (default is server/), e.g: server/better-auth/server-options.ts

import type { BetterAuthOptions } from 'better-auth'
import { anonymous } from 'better-auth/plugins'

export default () => ({
	plugins: [
		anonymous(),
	],
} satisfies BetterAuthOptions)

License

Made with ❤️

Published under the MIT License.