Stack Auth authentication layer for Nuxt with OAuth, OTP, and Magic Link support
Stack Auth authentication layer for Nuxt 4 with OAuth, OTP, and Magic Link support.
- Drop-in authentication - Works out of the box with just 2 env vars
- Stack Auth SDK - Uses @stackframe/js with automatic token management
- OAuth support - Google, GitHub, Microsoft, Apple, and more
- Magic Link - Passwordless email authentication
- OTP - One-time password verification
- Pre-built UI - Login, Signup, Forgot Password, OTP, Magic Link pages
- Route protection - Global middleware for authenticated routes
- Nuxt UI v4 - Beautiful, responsive design
``bash`
npm install @xenterprises/nuxt-x-auth-stack
`ts`
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@xenterprises/nuxt-x-auth-stack']
})
`env`.env
NUXT_PUBLIC_STACK_PROJECT_ID=your-project-id
NUXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=your-publishable-key
Get these values from your Stack Auth dashboard.
That's it! Your app now has full authentication at /auth/login.
Customize features and UI in app.config.ts:
`ts
// app.config.ts
export default defineAppConfig({
xAuth: {
// Redirect paths
redirects: {
afterLogin: '/dashboard',
afterSignup: '/onboarding',
afterLogout: '/auth/login',
},
// Enable/disable features
features: {
oauth: true,
magicLink: true,
otp: true,
forgotPassword: true,
signup: true,
},
// OAuth providers (requires Stack Auth dashboard setup)
oauthProviders: [
{ id: 'google', label: 'Google', icon: 'i-simple-icons-google' },
{ id: 'github', label: 'GitHub', icon: 'i-simple-icons-github' },
],
// UI customization
ui: {
showLogo: true,
logoUrl: '/logo.svg',
brandName: 'My App',
tagline: 'Welcome back',
layout: 'centered', // or 'split'
},
},
})
`
`vue`
| Component | Description |
|-----------|-------------|
| XAuthLogin | Email/password login form with OAuth |XAuthSignup
| | Registration form with OAuth |XAuthForgotPassword
| | Password reset request |XAuthOtp
| | OTP verification flow |XAuthMagicLink
| | Magic link authentication |XAuthHandler
| | Callback handler for OAuth/Magic Link |XAuthOAuthButton
| | Single OAuth provider button |XAuthOAuthButtonGroup
| | All configured OAuth buttons |
These pages are automatically registered:
| Route | Description |
|-------|-------------|
| /auth/login | Login page |/auth/signup
| | Registration page |/auth/forgot-password
| | Password reset request |/auth/otp
| | OTP authentication |/auth/magic-link
| | Magic link authentication |/auth/logout
| | Logout handler |/auth/handler/*
| | OAuth/Magic Link callbacks |
Routes are protected automatically by global middleware:
- Guest-only - /auth/login, /auth/signup, etc. (redirects authenticated users away)/auth/handler/*
- Public - , /auth/logout (accessible to everyone)
- Protected - All other routes (requires authentication)
1. Create a project at Stack Auth
2. Copy your Project ID and Publishable Client Key
3. Configure OAuth providers if needed (Google, GitHub, etc.)
4. Add your domain to allowed callback URLs:
- https://yourdomain.com/auth/handler/oauth-callbackhttps://yourdomain.com/auth/handler/magic-link-callback`
-
- Nuxt 4+
- @nuxt/ui 4+
- Node.js 18+
MIT