Auth Core SPA

A production-ready OAuth 2.1 authentication library with complete UI components for Vue 3 SPAs. Implements the Backend-For-Frontend (BFF) pattern with zero client-side token storage, PKCE security, and automatic session management.

Features

🔐 Core Authentication

• OAuth 2.1 with PKCE flow
• Zero client-side token storage (HTTP-only cookies)
• CSRF protection via Sanctum
• Refresh token rotation with reuse detection
• Fixed 24-hour session lifetime
• Proactive + reactive token refresh
• Cross-tab logout via BroadcastChannel
• Role-based access control
• Magic link authentication
• Google OAuth integration

🎨 UI Components

• Ready-to-use login page with split-screen design
• Email login form with validation
• Google OAuth button with multiple variants
• Session expiration & device verification dialogs
• Pre-styled form components with Tailwind CSS
• Fully customizable and responsive
• TypeScript support

Installation

npm install @jpvaldez/auth-core-spa

Quick Start

1. Setup Authentication

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { setupAuth, getAuthRoutes } from '@jpvaldez/auth-core-spa'
import '@jpvaldez/auth-core-spa/css'

const app = createApp(App)
const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...getAuthRoutes(),
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { authType: 'authenticated' },
    },
  ],
})

// Setup authentication in one line
await setupAuth({
  app,
  router,
  apiUrl: 'http://localhost:8000/api/v1',
  spaUrl: 'http://localhost:3000',
  allowedDomain: 'example.com',
})

app.use(router)
app.mount('#app')

2. Use in Components

import { useAuth } from '@jpvaldez/auth-core-spa'

export default {
  setup() {
    const auth = useAuth()

    return {
      isLoggedIn: auth.isAuthenticated,
      user: auth.user,
      logout: auth.logout,
    }
  },
}

Available Components

Pages

• AuthPage - Complete login page with OAuth + email options

  import { AuthPage } from '@jpvaldez/auth-core-spa'

Forms

• LoginForm - Email login form with validation
• GoogleAuthButton - OAuth 2.1 sign-in button with variants
• WbInputText - Styled form input component

Dialogs

• SessionExpirationDialog - Warns user before session timeout
• DeviceVerificationDialog - Device verification & session management

Callbacks

• GoogleAuthCallbackPage - OAuth callback handler
• MagicLinkCallbackPage - Magic link verification

Layout

• AppFloatingBoxes - Decorative animated background elements

All components include:

• ✅ Full Tailwind CSS styling
• ✅ Accessible and responsive design
• ✅ TypeScript support
• ✅ Zero configuration needed

Documentation

See docs for full documentation and examples:

• Quick Start Guide
• API Reference
• Role Configuration

Changelog

v0.2.10

• ✨ Added DeviceVerificationDialog component
• 🐛 Fixed TypeScript errors in route guards
• 🎨 Enhanced responsive design
• 🔄 Improved token refresh mechanisms

v0.2.0

• Complete OAuth 2.1 BFF implementation
• Magic link authentication
• Google OAuth integration
• Session management

v0.1.0

• Initial release

License

MIT

Support

For issues, feature requests, or questions:

• 📖 Open an issue on GitHub
• 💬 Check existing discussions
• 🐛 Report bugs with reproduction steps