@strands.gg/accui 0.0.5 → 0.0.7

package/README.md

@@ -8,9 +8,19 @@ Modern authentication UI components for Vue 3 with magic link support and OAuth
 - **OAuth Providers** - Dynamic OAuth provider discovery from API
 - **Vue 3 Composition API** - Built with modern Vue patterns
 - **TypeScript Support** - Full type safety
-- **Nuxt Module** - First-class Nuxt 3 support
+- **Nuxt Module** - First-class Nuxt 3 support with auto-imports
 - **Customizable UI** - Consistent design system with Tailwind CSS
 - **Responsive Design** - Mobile-first approach
+- **Route Protection** - Built-in middleware for authentication
+
+## 🆕 What's New in v0.0.6
+
+- ✅ **Fixed Nuxt Module** - Complete rewrite with proper configuration
+- ✅ **Magic Link Signup** - Passwordless authentication flow
+- ✅ **Auto-imports** - Components and composables automatically available
+- ✅ **Route Middleware** - Built-in `auth` and `guest` middleware
+- ✅ **Updated Dependencies** - Vue 3.5.18, Vite 6.3.5, Node.js 22 support
+- ✅ **Enhanced Documentation** - Complete setup guides and examples
 
 ## 📦 Installation
 
@@ -77,13 +87,183 @@ Add the module to your `nuxt.config.ts`:
 ```typescript
 export default defineNuxtConfig({
   modules: ['@strands.gg/accui/nuxt'],
-  strandsAuth: {
-    apiBaseUrl: 'https://your-api.com',
-    // Other configuration options
+  
+  // Public runtime configuration
+  runtimeConfig: {
+    public: {
+      strandsAuth: {
+        apiBaseUrl: 'https://accounts.strands.dev',
+        clientId: 'your-client-id',
+        onSignInUrl: '/dashboard',
+        onSignOutUrl: '/',
+        accentColor: '#EA00A8'
+      }
+    }
+  }
+})
+```
+
+**Available Configuration Options:**
+
+```typescript
+interface StrandsAuthConfig {
+  // Required
+  apiBaseUrl?: string       // Default: 'https://your-api.example.com'
+  clientId?: string         // Required for production
+  
+  // Navigation
+  onSignInUrl?: string      // Default: '/dashboard'
+  onSignOutUrl?: string     // Default: '/'
+  redirectUrl?: string      // OAuth callback URL
+  
+  // Styling
+  accentColor?: string      // Default: '#EA00A8'
+  
+  // Security & Performance
+  autoRefresh?: boolean     // Default: true
+  refreshInterval?: number  // Default: 4 (minutes)
+  
+  // Route Protection
+  protectedRoutes?: string[]     // Routes requiring authentication
+  guestOnlyRoutes?: string[]     // Default: ['/auth', '/login', '/register']
+  
+  // Development
+  devMode?: boolean         // Default: false
+}
+```
+
+**Complete Configuration Example:**
+
+```typescript
+export default defineNuxtConfig({
+  modules: ['@strands.gg/accui/nuxt'],
+  
+  runtimeConfig: {
+    public: {
+      strandsAuth: {
+        // API Configuration
+        apiBaseUrl: 'https://accounts.strands.dev',
+        clientId: 'your-production-client-id',
+        
+        // Navigation URLs
+        onSignInUrl: '/dashboard',
+        onSignOutUrl: '/welcome',
+        redirectUrl: '/auth/callback',
+        
+        // Styling
+        accentColor: '#8b5cf6',
+        
+        // Route Protection
+        protectedRoutes: [
+          '/dashboard/*',
+          '/profile',
+          '/settings/*',
+          '/admin/*'
+        ],
+        guestOnlyRoutes: [
+          '/auth',
+          '/login',
+          '/register',
+          '/welcome'
+        ],
+        
+        // Token Management
+        autoRefresh: true,
+        refreshInterval: 4, // minutes
+        
+        // Development
+        devMode: process.env.NODE_ENV === 'development'
+      }
+    }
   }
 })
 ```
 
+**Auto-imported Components & Composables:**
+
+```vue
+<template>
+  <!-- Authentication Components (auto-imported) -->
+  <StrandsAuth @success="handleAuth" />
+  <StrandsSignIn @success="handleSignIn" />
+  <StrandsSignUp @success="handleSignUp" />
+  <StrandsPasswordReset @success="handleReset" />
+  <StrandsUserProfile />
+  <StrandsMFASetup />
+  
+  <!-- Utility Components (auto-imported) -->
+  <SignedIn>
+    <p>Welcome back, {{ user?.firstName }}!</p>
+    <UiButton @click="signOut">Sign Out</UiButton>
+  </SignedIn>
+  
+  <SignedOut>
+    <p>Please sign in to continue</p>
+    <StrandsAuth />
+  </SignedOut>
+  
+  <!-- Configuration & Branding -->
+  <StrandsConfigProvider :config="customConfig">
+    <!-- Scoped configuration -->
+  </StrandsConfigProvider>
+  
+  <StrandsSecuredFooter />
+</template>
+
+<script setup lang="ts">
+// Composables are auto-imported in Nuxt
+const { user, isAuthenticated, signOut, signIn } = useStrandsAuth()
+const authUser = useAuthUser() // Reactive user object
+const { isAuthenticated: authState, isLoading } = useAuthState()
+
+// Event handlers
+const handleAuth = (userData: any) => {
+  console.log('Authentication successful:', userData)
+  // User is automatically redirected based on onSignInUrl
+}
+
+const handleSignUp = (data: { email: string }) => {
+  console.log('Magic link sent to:', data.email)
+  // Show success message to user
+}
+</script>
+```
+
+**Route Protection with Middleware:**
+
+```vue
+<!-- pages/dashboard/index.vue -->
+<script setup lang="ts">
+// Protect this route - redirects to auth if not signed in
+definePageMeta({
+  middleware: 'auth'
+})
+</script>
+
+<template>
+  <div>
+    <h1>Dashboard</h1>
+    <p>Protected content here</p>
+  </div>
+</template>
+```
+
+```vue
+<!-- pages/auth.vue -->
+<script setup lang="ts">
+// Guest-only route - redirects away if already signed in
+definePageMeta({
+  middleware: 'guest'
+})
+</script>
+
+<template>
+  <div>
+    <StrandsAuth />
+  </div>
+</template>
+```
+
 ## 🧩 Components
 
 ### Authentication Components
@@ -118,7 +298,42 @@ export default defineNuxtConfig({
 | `UiAlert` | Status messages | `variant`, `message` |
 | `UiLink` | Styled link | `variant`, `size` |
 
-## 🔧 Composables
+## � Nuxt Module Features
+
+The Nuxt module provides a complete authentication solution with:
+
+### ✨ **Auto-Registration**
+- **Components**: All authentication and UI components are automatically imported
+- **Composables**: Authentication state management available globally
+- **Middleware**: Route protection built-in (`auth`, `guest`, global middleware)
+- **Types**: Full TypeScript support with auto-completion
+
+### 🔒 **Route Protection**
+```typescript
+// Automatic protection based on configuration
+protectedRoutes: ['/dashboard/*', '/profile', '/settings/*']
+guestOnlyRoutes: ['/auth', '/login', '/register']
+```
+
+### 🎨 **Styling Integration**
+- Custom CSS variables for theming
+- Configurable accent colors
+- TailwindCSS compatibility
+- Dark/light mode support
+
+### ⚡ **Performance Optimized**
+- Client-side hydration with SSR support
+- Automatic token refresh
+- Minimal bundle size impact
+- Tree-shaking optimized
+
+### 🛠️ **Developer Experience**
+- Hot reload support
+- Development mode with debug logging
+- TypeScript definitions included
+- Comprehensive error handling
+
+## �🔧 Composables
 
 ### `useStrandsAuth()`
 
@@ -236,6 +451,56 @@ All components are mobile-first and responsive:
 - **Tablet**: Adaptive spacing and sizing
 - **Desktop**: Full-featured experience
 
+## 🔧 Troubleshooting
+
+### Nuxt Module Issues
+
+**Module not found:**
+```bash
+npm install @strands.gg/accui
+# Ensure module is in nuxt.config.ts modules array
+```
+
+**TypeScript errors:**
+```typescript
+// Add type declaration in nuxt.config.ts
+declare module '@nuxt/schema' {
+  interface RuntimeConfig {
+    public: {
+      strandsAuth: StrandsAuthConfig
+    }
+  }
+}
+```
+
+**Components not auto-importing:**
+```typescript
+// Verify module configuration
+modules: ['@strands.gg/accui/nuxt']
+```
+
+**Middleware not working:**
+```vue
+<!-- Ensure pages are in pages/ directory -->
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth' // or 'guest'
+})
+</script>
+```
+
+### Common Issues
+
+**Build errors:**
+- Ensure Node.js 16+ is installed
+- Clear `.nuxt` and `node_modules`, reinstall dependencies
+- Check for conflicting CSS frameworks
+
+**Runtime errors:**
+- Verify `apiBaseUrl` and `clientId` configuration
+- Check browser console for detailed error messages
+- Enable `devMode: true` for debugging
+
 ## 🎨 Theming
 
 Components use CSS custom properties for theming:
@@ -267,6 +532,7 @@ import type {
 - **Vue**: 3.5+ 
 - **Node**: 16+
 - **TypeScript**: 5+ (optional but recommended)
+- **Nuxt**: 3.0+ (for Nuxt module)
 
 ## 📄 License
 

package/dist/nuxt/module.d.ts

@@ -3,15 +3,11 @@ export interface StrandsAuthConfig {
      * Base URL for the Strands Auth API
      * @default 'https://your-api.example.com'
      */
-    baseUrl?: string;
+    apiBaseUrl?: string;
     /**
-     * Application ID for Strands Auth
+     * Client ID for authentication
      */
-    applicationId?: string;
-    /**
-     * Public key for client-side authentication
-     */
-    publicKey?: string;
+    clientId?: string;
     /**
      * Primary accent color for the auth components
      * @default '#EA00A8'
@@ -32,12 +28,6 @@ export interface StrandsAuthConfig {
      * @default '/'
      */
     onSignOutUrl?: string;
-    /**
-     * OAuth providers to enable
-     * @deprecated OAuth providers are now dynamically fetched from API
-     * @default []
-     */
-    oauthProviders?: string[];
     /**
      * Enable automatic token refresh
      * @default true

package/dist/nuxt/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../apps/accounts-ui/src/nuxt/module.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;;AAED,wBAyHE"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../apps/accounts-ui/src/nuxt/module.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;;AAED,wBAyHE"}