nuxt-x-auth
Authentication umbrella layer for Nuxt supporting Local, BetterAuth, and Stack Auth providers.
nuxt-x-auth
Authentication umbrella layer providing a unified interface across Local, BetterAuth, and Stack Auth providers. Includes 8 pre-built auth UI components.
Installation
npm install @xenterprises/nuxt-x-auth
// nuxt.config.ts
export default defineNuxtConfig({
extends: '@xenterprises/nuxt-x-auth',
})
Components
| Component | Description |
|---|---|
<XAuthLogin /> | Login form (email + password) |
<XAuthSignup /> | Registration form |
<XAuthForgotPassword /> | Password reset request |
<XAuthOtp /> | OTP/2FA verification |
<XAuthMagicLink /> | Magic link request |
<XAuthOAuthButton /> | Single OAuth provider button |
<XAuthOAuthButtonGroup /> | Multiple OAuth provider buttons |
<XAuthHandler /> | Auth callback handler |
Usage
<!-- pages/auth/login.vue -->
<template>
<div class="flex min-h-screen items-center justify-center">
<XAuthLogin
:providers="['google', 'github']"
redirect-to="/dashboard"
@success="handleSuccess"
/>
</div>
</template>
Composables
const { user, signIn, signOut, isAuthenticated } = useXAuth()
AI Context
package: "@xenterprises/nuxt-x-auth"
prefix: XAuth
use-when: Adding auth UI to any Nuxt app
composable: useXAuth() → { user, signIn, signOut, isAuthenticated }
components: [XAuthLogin, XAuthSignup, XAuthForgotPassword, XAuthOtp, XAuthMagicLink, XAuthOAuthButton, XAuthOAuthButtonGroup, XAuthHandler]
providers: configurable — local/better-auth/stack-auth
pages: auto-registers /auth/login, /auth/signup, /auth/forgot-password, /auth/handler