Veristone Nuxt Auth Stack Layer - Stack Auth integration with login, register, middleware
A Nuxt layer providing complete authentication functionality powered by Stack Auth.
- Email/password authentication (sign in, sign up, password reset)
- OAuth authentication (Google, GitHub, Microsoft, Facebook)
- Email verification
- Profile management
- Dark/light mode toggle
- Route protection middleware
- Configurable signup (enable/disable)
- Configurable OAuth providers
Extend this layer in your Nuxt app:
``ts`
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['nuxt-v-auth-stack'],
})
Configure Stack Auth credentials via runtime config:
`ts
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['nuxt-v-auth-stack'],
runtimeConfig: {
public: {
stackAuth: {
projectId: '', // Your Stack Auth project ID
publishableClientKey: '', // Your publishable client key
baseUrl: 'https://api.stack-auth.com', // Optional: custom API URL
signupEnabled: true, // Set to false to disable registration
oauthProviders: ['google', 'github', 'microsoft'], // Available OAuth providers
},
},
},
})
`
Or use environment variables:
`env`
NUXT_PUBLIC_STACK_AUTH_PROJECT_ID=your-project-id
NUXT_PUBLIC_STACK_AUTH_PUBLISHABLE_CLIENT_KEY=your-client-key
| Path | Description |
|------|-------------|
| /auth/login | Sign in with email/password or OAuth |/auth/register
| | Create new account |/auth/forgot-password
| | Request password reset email |/auth/reset-password
| | Set new password (from email link) |/auth/verify
| | Email verification |/auth/callback
| | OAuth callback handler |/settings
| | Profile settings with dark mode toggle |
All routes are protected by default. To make a route public:
`vue`
The primary composable for authentication:
`ts
const {
// State
user, // Current user object
isAuthenticated, // Boolean - is user logged in
isLoading, // Boolean - auth state loading
// User getters
userId, // User ID
userEmail, // User's email
userDisplayName, // Display name or email prefix
userAvatar, // Profile image URL
isEmailVerified, // Email verification status
// Config
signupEnabled, // Is registration enabled
oauthProviders, // Available OAuth providers
// Auth methods
signIn, // (email, password) => Promise
signUp, // (email, password) => Promise
signOut, // (redirectTo?) => Promise
signInWithOAuth, // (provider) => void
handleOAuthCallback, // (code) => Promise
refreshToken, // () => Promise
fetchCurrentUser, // () => Promise
initialize, // () => Promise
// Profile methods
updateProfile, // (data) => Promise
sendVerificationEmail, // (callbackUrl?) => Promise
verifyEmail, // (code) => Promise
} = useAuth()
`
`vue
Welcome, {{ user?.displayName }}
`
Applied globally - protects all routes except:
- /auth/* pagesdefinePageMeta({ auth: false })
- Routes with
For pages that should only be accessible to non-authenticated users:
`vue`
Authentication tokens are stored in secure cookies:
- stack_auth_access - Access token (7-day expiry)stack_auth_refresh
- - Refresh token (7-day expiry)
Cookie options:
- secure: true - HTTPS only in productionsameSite: 'lax'
- - CSRF protectionmaxAge: 604800
- - 7 days
Minimal layout for authentication pages. Applied automatically to /auth/* routes.
Create your own version of any auth page in your consuming app:
``
app/
pages/
auth/
login.vue # Your custom login page
Add auth-specific styles in the layer's CSS file:
`css`
/ app/assets/css/auth.css /
`ts
interface StackAuthUser {
id: string
primaryEmail: string | null
primaryEmailVerified: boolean
displayName: string | null
profileImageUrl: string | null
// ... see types/stack-auth.ts for full definition
}
interface StackAuthConfig {
projectId: string
publishableClientKey: string
baseUrl?: string
signupEnabled?: boolean
oauthProviders?: ('google' | 'github' | 'microsoft' | 'facebook')[]
}
`
`bashInstall dependencies
npm install
MIT