Auth Core SPA

A complete OAuth 2.1 authentication library with ready-to-use UI components for Vue 3 SPAs using the Backend-For-Frontend (BFF) pattern.

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

Included UI Components

• Ready-to-use login page with email + OAuth options
• Session expiration dialog
• Pre-styled form components with validation
• Dark mode support with Tailwind CSS
• Fully customizable and reusable

Installation

npm install @jpvaldez/auth-core-spa

Quick Start

1. Setup Authentication

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createAuth, registerRouterGuards, AuthPage } from '@jpvaldez/auth-core-spa'
import '@jpvaldez/auth-core-spa/css'

const app = createApp(App)

// Create auth system (all configuration built-in)
const auth = createAuth({
  apiUrl: 'http://localhost:8000/api/v1',
  spaUrl: 'http://localhost:3000',
})

// Create router with auth-protected routes
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/auth/login',
      component: AuthPage,
      meta: { authType: 'unauthenticated' },
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { authType: 'authenticated' },
    },
  ],
})

// Register route guards
registerRouterGuards(router, {
  apiUrl: 'http://localhost:8000/api/v1',
  spaUrl: 'http://localhost:3000',
})

app.use(auth.plugin)
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
• WbInputText - Styled form input component

Dialogs

• SessionExpirationDialog - Warns user before session timeout

Layout

• AppFloatingBoxes - Decorative animated background elements

All components include:

• ✅ Dark mode support
• ✅ Full Tailwind CSS styling
• ✅ Accessible and responsive
• ✅ TypeScript support
• ✅ PrimeVue components

Documentation

See docs for full documentation and examples:

• Quick Start Guide
• API Reference
• Role Configuration

License

MIT