Integrations

i18n

Translate authentication errors with @nuxtjs/i18n.

This integration enables translated authentication error messages using your existing @nuxtjs/i18n setup.

Setup

Install @nuxtjs/i18n

pnpm add @nuxtjs/i18n

Configure nuxt.config.ts

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n', '@onmax/nuxt-better-auth'],
  i18n: {
    locales: ['en', 'es'],
    defaultLocale: 'en'
  }
})

Translation Files

Add error translations to your locale files using the auth.errors.* prefix:

auth:
  errors:
    USER_NOT_FOUND: "User not found"
    INVALID_PASSWORD: "Invalid password"
    INVALID_EMAIL_OR_PASSWORD: "Invalid email or password"
    EMAIL_NOT_VERIFIED: "Please verify your email first"
    SESSION_EXPIRED: "Session expired, please sign in again"

auth:
  errors:
    USER_NOT_FOUND: "Usuario no encontrado"
    INVALID_PASSWORD: "Contraseña incorrecta"
    INVALID_EMAIL_OR_PASSWORD: "Email o contraseña incorrectos"
    EMAIL_NOT_VERIFIED: "Por favor verifica tu email primero"
    SESSION_EXPIRED: "Sesión expirada, inicia sesión de nuevo"

Client-Side Error Handling

Better Auth errors include a code property that you can translate using useI18n():

pages/login.vue

<script setup lang="ts">
const {
  execute: signInWithEmail,
  error,
} = useSignIn('email')
const { t, te } = useI18n()

async function handleLogin(email: string, password: string) {
  await signInWithEmail(
    { email, password },
    {
      onSuccess: () => navigateTo('/app'),
    }
  )
}

const localizedErrorMessage = computed(() => {
  const code = error.value?.code
  if (!code)
    return error.value?.message
  const key = `auth.errors.${code}`
  return te(key) ? t(key) : error.value?.message
})
</script>

<template>
  <div v-if="localizedErrorMessage" class="error">{{ localizedErrorMessage }}</div>
</template>

This pattern uses typed error.code for translation and falls back to error.message when no localized key exists.

Server-Side Locale Detection

For auth config callbacks like sendResetPassword, use @intlify/utils/h3 to detect the user's locale:

@intlify/utils is installed as a dependency of @nuxtjs/i18n, but you need to import it explicitly in server code.

server/auth.config.ts

import { tryCookieLocale, tryHeaderLocale } from '@intlify/utils/h3'
import { defineServerAuth } from '@onmax/nuxt-better-auth/config'

export default defineServerAuth(() => ({
  emailAndPassword: {
    enabled: true,
    sendResetPassword: async ({ user, url }, request) => {
      const locale = tryCookieLocale(request)?.toString()
        ?? tryHeaderLocale(request)?.toString()
        ?? 'en'

      // Use locale for email content...
    }
  }
}))

Error Codes Reference

Code	Default Message
`USER_NOT_FOUND`	User not found
`INVALID_PASSWORD`	Invalid password
`INVALID_EMAIL_OR_PASSWORD`	Invalid email or password
`EMAIL_NOT_VERIFIED`	Email not verified
`SESSION_EXPIRED`	Session expired
`INVALID_TOKEN`	Invalid token
`TOKEN_EXPIRED`	Token expired
`USER_ALREADY_EXISTS`	User already exists
`INVALID_EMAIL`	Invalid email
`PASSWORD_TOO_SHORT`	Password too short

See Better Auth Error Codes for the complete list of error codes.

For comprehensive translations, see better-auth-localization plugin with 30+ languages.