@bagelink/auth 1.6.53 → 1.6.57

package/README.md

@@ -1,26 +1,11 @@
 # @bagelink/auth
 
-A user-centric authentication library with Vue support. Handles both person and entity accounts seamlessly.
-
-## Features
-
-- 🎯 **User-Centric Design** - Access user data directly, not buried in account objects
-- 🔄 **Multi-Account Support** - Works with person, entity, and service accounts
-- 🛡️ **Type-Safe** - Full TypeScript support
-- ⚡ **Vue Integration** - Reactive refs with Vue 3 composables
-- 🔐 **Complete Auth Flow** - Login, signup, password management, email verification
-- 📡 **Session Management** - View, refresh, and revoke sessions
-- 🎪 **Event System** - Listen to authentication state changes
-- 🌐 **Framework Agnostic** - Core auth logic works anywhere
+Authentication library for Bagelink applications with built-in SSO support, route management, and Vue components.
 
 ## Installation
 
 ```bash
-pnpm add @bagelink/auth
-# or
 npm install @bagelink/auth
-# or
-bun add @bagelink/auth
 ```
 
 ## Quick Start
@@ -28,282 +13,368 @@ bun add @bagelink/auth
 ### 1. Initialize Auth
 
 ```typescript
-import { initAuth, AuthState } from '@bagelink/auth'
+import { initAuth } from '@bagelink/auth'
 
-const auth = initAuth({ 
-  baseURL: 'https://api.example.com'
+initAuth({
+  apiEndpoint: 'https://api.your-app.com',
+  storageKey: 'auth_token',
+  // Optional: custom storage
+  storage: localStorage
 })
+```
 
-// Listen to auth events
-auth.on(AuthState.LOGIN, () => console.log('User logged in!'))
+### 2. Add Routes
+
+```typescript
+import { createRouter } from 'vue-router'
+import { createAuthRoutes, createAuthGuard } from '@bagelink/auth'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    // Add auth routes
+    ...createAuthRoutes({
+      basePath: '/auth',
+      redirectTo: '/dashboard'
+    }),
+    
+    // Your app routes
+    {
+      path: '/dashboard',
+      component: Dashboard,
+      meta: { requiresAuth: true }
+    }
+  ]
+})
+
+// Add auth guard to redirect authenticated users
+router.beforeEach(createAuthGuard({ redirectTo: '/dashboard' }))
+
+export default router
 ```
 
-### 2. Use in Vue Components
+### 3. Use in Components
 
 ```vue
-<script setup lang="ts">
+<script setup>
 import { useAuth } from '@bagelink/auth'
 
-const { 
-  user,           // Primary state - use this!
-  sso,            // SSO providers
-  getIsLoggedIn,
-  login,
-  logout 
-} = useAuth()
-
-const handlePasswordLogin = async () => {
-  await login({ 
-    email: 'user@example.com', 
-    password: 'password' 
-  })
-}
-
-const handleSSOLogin = async () => {
-  // SSO is just this simple!
-  await sso.google.redirect()
-}
+const { user, logout, isAuthenticated } = useAuth()
 </script>
 
 <template>
-  <div v-if="user">
-    <h1>Welcome, {{ user.name }}!</h1>
-    <p>Email: {{ user.email }}</p>
+  <div v-if="isAuthenticated">
+    <p>Welcome, {{ user.name }}</p>
     <button @click="logout">Logout</button>
   </div>
-  <div v-else>
-    <button @click="handlePasswordLogin">Login with Password</button>
-    <button @click="handleSSOLogin">Login with Google</button>
-  </div>
 </template>
 ```
 
-## Core Concepts
-
-### The `user` Object
+## Route Configuration
 
-The `user` is a **computed ref** that provides a unified interface for both person and entity accounts:
+### Basic Setup
 
 ```typescript
-const { user } = useAuth()
-
-// Available for all account types
-user.value?.id          // Person ID or Entity ID
-user.value?.name        // Display name
-user.value?.email       // Email address
-user.value?.type        // 'person', 'entity', or 'service'
-user.value?.isActive    // Is account active
-user.value?.isVerified  // Is account verified
-
-// Person-specific
-user.value?.roles       // User roles (e.g., ['admin', 'user'])
-
-// Entity-specific
-user.value?.entityType  // Entity type (e.g., 'company', 'organization')
-user.value?.metadata    // Additional entity metadata
+createAuthRoutes()
+// Creates routes: /login, /signup, /forgot-password, /reset-password, /callback
 ```
 
-### Account Info (Advanced)
-
-For authentication-specific data, use `accountInfo`:
+### Custom Base Path
 
 ```typescript
-const { accountInfo } = useAuth()
-
-accountInfo.value?.authentication_methods  // Auth methods
-accountInfo.value?.last_login              // Last login timestamp
-accountInfo.value?.person                  // Raw person data
-accountInfo.value?.entity                  // Raw entity data
+createAuthRoutes({
+  basePath: '/auth'
+})
+// Creates routes: /auth/login, /auth/signup, etc.
 ```
 
-## API Reference
-
-### State
+### Custom Route Names
 
 ```typescript
-const {
-  user,        // Computed<User | null> - Primary state
-  accountInfo, // Ref<AccountInfo | null> - Full account data
-} = useAuth()
+createAuthRoutes({
+  routeNames: {
+    login: 'UserLogin',
+    signup: 'UserRegister',
+    callback: 'OAuthCallback'
+  }
+})
 ```
 
-### Getters
+### With Layout Component
 
 ```typescript
-const {
-  getFullName,      // () => string
-  getIsLoggedIn,    // () => boolean
-  getEmail,         // () => string
-  getRoles,         // () => string[]
-  getAccountType,   // () => 'person' | 'entity' | 'service'
-  isPersonAccount,  // () => boolean
-  isEntityAccount,  // () => boolean
-} = useAuth()
+import AuthLayout from './layouts/AuthLayout.vue'
+
+createAuthRoutes({
+  layout: AuthLayout
+})
 ```
 
-### Authentication
+## Components
 
-```typescript
-// Login
-await login({ email: 'user@example.com', password: 'password' })
-
-// Signup
-await signup({ 
-  email: 'user@example.com',
-  first_name: 'John',
-  last_name: 'Doe',
-  password: 'password',
-  confirmPassword: 'password'
-})
+### Form Components
 
-// Logout
-await logout()
+Use these if you want to build custom pages:
 
-// Check auth status
-const isAuthenticated = await checkAuth()
+```vue
+<script setup>
+import { LoginForm, SignupForm } from '@bagelink/auth'
+</script>
 
-// Refresh session
-await refreshSession()
+<template>
+  <LoginForm
+    :texts="{ title: 'Welcome Back' }"
+    :show-github="true"
+    :show-google="true"
+    @switch-form="handleFormSwitch"
+  />
+</template>
 ```
 
-### Password Management
+### Page Components
 
-```typescript
-// Change password (requires current password)
-await changePassword({
-  current_password: 'oldPassword',
-  new_password: 'newPassword',
-  confirmNewPassword: 'newPassword'
-})
+Pre-built page components with layout:
 
-// Forgot password
-await forgotPassword('user@example.com')
-
-// Verify reset token
-await verifyResetToken(token)
+```vue
+<script setup>
+import { LoginPage } from '@bagelink/auth'
+</script>
 
-// Reset password with token
-await resetPassword(token, 'newPassword')
+<template>
+  <LoginPage
+    :texts="{ title: 'Sign In' }"
+    card-width="500px"
+  />
+</template>
 ```
 
-### Email Verification
+## SSO Configuration
 
-```typescript
-// Send verification email
-await sendVerification('user@example.com')
+### Available Providers
 
-// Verify email with token
-await verifyEmail(token)
-```
+- GitHub
+- Google
+- Microsoft
+- Apple
+- Okta
+- Facebook
 
-### Profile Management
+### Usage
 
 ```typescript
-// Update profile
-await updateProfile({
-  first_name: 'Jane',
-  last_name: 'Smith',
-  email: 'jane@example.com'
-})
+const { sso } = useAuth()
 
-// Delete current user account
-await deleteCurrentUser()
-```
+// Initiate SSO login
+await sso.login('github')
 
-### Session Management
+// Handle callback (automatically handled in /callback route)
+await sso.handleCallback()
 
-```typescript
-// Get active sessions
-const { data } = await getSessions()
-const sessions = data.sessions
+// Link additional account
+await sso.linkAccount('google')
+```
 
-// Revoke specific session
-await revokeSession(sessionToken)
+### Customizing SSO Buttons
 
-// Revoke all sessions
-await revokeAllSessions()
+```vue
+<LoginForm
+  :show-github="true"
+  :show-google="true"
+  :show-microsoft="false"
+  :sso-outline="true"
+  :sso-show-value="true"
+  :sso-brand-background="true"
+/>
 ```
 
-### Admin Actions
+## API
 
-```typescript
-// Activate/deactivate accounts
-await activateAccount(accountId)
-await deactivateAccount(accountId)
+### `useAuth()`
 
-// Delete account
-await deleteAccount(accountId)
-```
+Returns the authentication composable with:
 
-## Event System
+- `user` - Current user object (reactive)
+- `isAuthenticated` - Boolean indicating auth status (computed)
+- `accountInfo` - Extended account information (reactive)
+- `login(email, password)` - Login with credentials
+- `signup(data)` - Create new account
+- `logout()` - Logout current user
+- `forgotPassword(email)` - Request password reset
+- `resetPassword(token, password)` - Reset password with token
+- `sso` - SSO methods object
 
-Listen to authentication state changes:
+### `initAuth(config)`
+
+Initialize the auth module:
 
 ```typescript
-import { initAuth, AuthState } from '@bagelink/auth'
+initAuth({
+  apiEndpoint: string      // Required: Your API endpoint
+  storageKey?: string      // Optional: Storage key (default: 'auth_token')
+  storage?: Storage        // Optional: Storage mechanism (default: localStorage)
+})
+```
 
-const auth = initAuth({ axios })
+### `createAuthRoutes(config)`
 
-// Login
-auth.on(AuthState.LOGIN, () => {
-  console.log('User logged in')
-})
+Create auth routes for Vue Router:
 
-// Logout
-auth.on(AuthState.LOGOUT, () => {
-  console.log('User logged out')
+```typescript
+createAuthRoutes({
+  basePath?: string              // Base path for routes (default: '')
+  namePrefix?: string            // Prefix for route names (default: '')
+  routeNames?: {                 // Custom route names
+    login?: string
+    signup?: string
+    forgotPassword?: string
+    resetPassword?: string
+    callback?: string
+  }
+  redirectTo?: string            // Redirect after auth (default: '/')
+  layout?: Component             // Wrapper layout component
 })
+```
 
-// Signup
-auth.on(AuthState.SIGNUP, () => {
-  console.log('User signed up')
-})
+### `createAuthGuard(config)`
 
-// Password changed
-auth.on(AuthState.PASSWORD_CHANGE, () => {
-  console.log('Password changed')
-})
+Create a navigation guard:
 
-// Password reset
-auth.on(AuthState.PASSWORD_RESET, () => {
-  console.log('Password reset')
+```typescript
+createAuthGuard({
+  redirectTo?: string  // Where to redirect authenticated users (default: '/')
 })
+```
 
-// Profile updated
-auth.on(AuthState.PROFILE_UPDATE, () => {
-  console.log('Profile updated')
-})
+## Customization
+
+### Text Customization
+
+All forms support custom text via the `texts` prop:
 
-// Auth check completed
-auth.on(AuthState.AUTH_CHECK, () => {
-  console.log('Auth verified')
+```vue
+<LoginForm
+  :texts="{
+    title: 'Sign In',
+    emailLabel: 'Email Address',
+    passwordLabel: 'Password',
+    loginButton: 'Continue',
+    githubButton: 'Continue with GitHub'
+  }"
+/>
+```
+
+### Multi-language Support
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+import { LoginForm } from '@bagelink/auth'
+
+const locale = ref('en')
+
+const texts = computed(() => {
+  if (locale.value === 'he') {
+    return {
+      title: 'התחברות',
+      emailLabel: 'אימייל',
+      passwordLabel: 'סיסמה',
+      loginButton: 'התחברות'
+    }
+  }
+  return {
+    title: 'Login',
+    emailLabel: 'Email',
+    passwordLabel: 'Password',
+    loginButton: 'Login'
+  }
 })
+</script>
+
+<template>
+  <LoginForm :texts="texts" />
+</template>
+```
+
+### Custom Layout
 
-// Email verified
-auth.on(AuthState.EMAIL_VERIFIED, () => {
-  console.log('Email verified')
+Create a layout wrapper:
+
+```vue
+<!-- AuthLayout.vue -->
+<template>
+  <div class="auth-layout">
+    <header>
+      <img src="/logo.png" alt="Logo">
+    </header>
+    <main>
+      <router-view />
+    </main>
+    <footer>
+      © 2024 Your Company
+    </footer>
+  </div>
+</template>
+```
+
+Then use it:
+
+```typescript
+import AuthLayout from './AuthLayout.vue'
+
+createAuthRoutes({
+  layout: AuthLayout
 })
+```
 
-// Session refreshed
-auth.on(AuthState.SESSION_REFRESH, () => {
-  console.log('Session refreshed')
+## Advanced Usage
+
+### Protected Routes
+
+```typescript
+router.beforeEach(async (to, from, next) => {
+  const { isAuthenticated } = useAuth()
+  
+  if (to.meta.requiresAuth && !isAuthenticated.value) {
+    next('/login')
+  } else {
+    next()
+  }
 })
 ```
 
-### Event Methods
+### Programmatic Navigation
 
 ```typescript
-// Add listener
-auth.on(AuthState.LOGIN, handler)
+import { useRouter } from 'vue-router'
+import { useAuth } from '@bagelink/auth'
 
-// Remove listener
-auth.off(AuthState.LOGIN, handler)
+const router = useRouter()
+const { login } = useAuth()
 
-// Remove all listeners for an event
-auth.removeAllListeners(AuthState.LOGIN)
+async function handleLogin() {
+  try {
+    await login(email, password)
+    router.push('/dashboard')
+  } catch (error) {
+    console.error('Login failed:', error)
+  }
+}
+```
 
-// Remove all listeners
-auth.removeAllListeners()
+### Custom Error Handling
+
+```typescript
+const { login } = useAuth()
+
+try {
+  await login(email, password)
+} catch (error) {
+  if (error.code === 'INVALID_CREDENTIALS') {
+    // Handle invalid credentials
+  } else if (error.code === 'NETWORK_ERROR') {
+    // Handle network error
+  }
+}
 ```
 
 ## TypeScript Support
@@ -311,23 +382,17 @@ auth.removeAllListeners()
 Full TypeScript support with exported types:
 
 ```typescript
-import type { 
+import type {
+  AuthState,
   User,
   AccountInfo,
-  PersonInfo,
-  EntityInfo,
-  RegisterRequest,
-  UpdateAccountRequest,
-  AuthenticationResponse,
-  SessionInfo,
-  // ... and more
+  SSOProvider,
+  LoginTexts,
+  SignupTexts,
+  AuthRouteConfig
 } from '@bagelink/auth'
 ```
 
-## Migration
-
-Upgrading from an older version? See [MIGRATION.md](./MIGRATION.md) for detailed migration instructions.
-
 ## License
 
 MIT

package/dist/Callback-BHqVaZZm.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./index.cjs");
+exports.default = index.Callback;

package/dist/Callback-C-XghN_z.js

@@ -0,0 +1,4 @@
+import { Callback as _sfc_main } from "./index.mjs";
+export {
+  _sfc_main as default
+};

package/dist/ForgotPasswordPage-BV9tyhHl.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./index.cjs");
+exports.default = index.ForgotPasswordPage;

package/dist/ForgotPasswordPage-DvttMGb0.js

@@ -0,0 +1,4 @@
+import { ForgotPasswordPage as _sfc_main } from "./index.mjs";
+export {
+  _sfc_main as default
+};

package/dist/LoginPage-hv1wc54S.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./index.cjs");
+exports.default = index.LoginPage;

package/dist/LoginPage-klj1NV4J.js

@@ -0,0 +1,4 @@
+import { LoginPage as _sfc_main } from "./index.mjs";
+export {
+  _sfc_main as default
+};

package/dist/ResetPasswordPage-COPrJmW8.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./index.cjs");
+exports.default = index.ResetPasswordPage;

package/dist/ResetPasswordPage-nvQ4uupb.js

@@ -0,0 +1,4 @@
+import { ResetPasswordPage as _sfc_main } from "./index.mjs";
+export {
+  _sfc_main as default
+};

package/dist/SignupPage-m36w9PLJ.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./index.cjs");
+exports.default = index.SignupPage;

package/dist/SignupPage-oUFYApYW.js

@@ -0,0 +1,4 @@
+import { SignupPage as _sfc_main } from "./index.mjs";
+export {
+  _sfc_main as default
+};