@strands.gg/accui 0.0.6 → 0.0.8

package/README.md

@@ -8,9 +8,22 @@ 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.7
+
+- ✅ **Auto-Import Styles** - Styles automatically imported with components (no manual CSS import needed)
+- ✅ **Custom Styling Control** - `autoImportStyles: false` option for developers who want full styling control
+- ✅ **Enhanced Nuxt Integration** - CSS automatically included in Nuxt builds
+- ✅ **Simplified Setup** - Just install and use, styles are handled automatically
+- ✅ **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
 
 ## 📦 Installation
 
@@ -18,13 +31,25 @@ Modern authentication UI components for Vue 3 with magic link support and OAuth
 npm install @strands.gg/accui
 ```
 
-### Import Styles
+### Styles Auto-Import
+
+**Styles are automatically imported!** No manual CSS import needed.
+
+- **Vue 3**: Styles load automatically when you import any component
+- **Nuxt 3**: Styles are automatically included when you add the module
+
+<details>
+<summary>Manual CSS Import (if needed)</summary>
+
+If you need to manually import styles for any reason:
 
 ```javascript
 // Import the CSS in your main.js or app.vue
 import '@strands.gg/accui/style.css'
 ```
 
+</details>
+
 ## 🎯 Quick Start
 
 ### Basic Vue 3 Usage
@@ -52,6 +77,7 @@ import {
   StrandsSignUp,
   useStrandsAuth 
 } from "@strands.gg/accui"
+// Styles are automatically imported! ✨
 
 // Access auth state globally
 const { user, isAuthenticated, signOut } = useStrandsAuth()
@@ -74,16 +100,188 @@ const handleSignUpSuccess = (data: { email: string }) => {
 
 Add the module to your `nuxt.config.ts`:
 
+```typescript
+export default defineNuxtConfig({
+  modules: ['@strands.gg/accui/nuxt'], // Styles auto-imported! ✨
+  
+  // 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'
+  autoImportStyles?: boolean // Default: true (disable for custom styling)
+  
+  // 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'],
-  strandsAuth: {
-    apiBaseUrl: 'https://your-api.com',
-    // Other configuration options
+  
+  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',
+        autoImportStyles: true, // Set to false for custom styling
+        
+        // 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 +316,77 @@ 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
+- **Styles**: CSS automatically included in your Nuxt build
+
+### 🎨 **Auto-Import Styles**
+The Nuxt module automatically includes all necessary CSS:
+```typescript
+// Automatically added to your project:
+// - Main component styles (@strands.gg/accui/style.css)
+// - Custom accent color variables
+// - Responsive design classes
+// - Dark/light mode support
+```
+
+**Custom Styling (Disable Auto-Import):**
+```typescript
+export default defineNuxtConfig({
+  modules: ['@strands.gg/accui/nuxt'],
+  runtimeConfig: {
+    public: {
+      strandsAuth: {
+        apiBaseUrl: 'https://accounts.strands.dev',
+        clientId: 'your-client-id',
+        autoImportStyles: false, // Disable auto-import
+        // ... other options
+      }
+    }
+  },
+  // Manually control CSS imports
+  css: [
+    // Import only base styles
+    '@strands.gg/accui/style.css',
+    // Or use your own custom styles
+    '~/assets/css/custom-auth.css'
+  ]
+})
+```
+
+### 🔒 **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 +504,82 @@ 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']
+```
+
+**Styles not loading:**
+```typescript
+// Check if auto-import is enabled (default: true)
+runtimeConfig: {
+  public: {
+    strandsAuth: {
+      autoImportStyles: true // Enable auto-import
+    }
+  }
+}
+
+// Or manually import styles:
+export default defineNuxtConfig({
+  css: ['@strands.gg/accui/style.css'] // Manual import
+})
+
+// For completely custom styling:
+runtimeConfig: {
+  public: {
+    strandsAuth: {
+      autoImportStyles: false // Disable auto-import
+    }
+  }
+}
+```
+
+**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 +611,7 @@ import type {
 - **Vue**: 3.5+ 
 - **Node**: 16+
 - **TypeScript**: 5+ (optional but recommended)
+- **Nuxt**: 3.0+ (for Nuxt module)
 
 ## 📄 License
 

package/dist/auto-import-styles.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+export declare function autoImportStyles(): void;
+export declare const StrandsStylesPlugin: {
+    install(app: App): void;
+};
+//# sourceMappingURL=auto-import-styles.d.ts.map

package/dist/auto-import-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-import-styles.d.ts","sourceRoot":"","sources":["../../../apps/accounts-ui/src/auto-import-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAKzB,wBAAgB,gBAAgB,SAU/B;AAGD,eAAO,MAAM,mBAAmB;iBACjB,GAAG;CAIjB,CAAA"}

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
@@ -63,6 +53,12 @@ export interface StrandsAuthConfig {
      * @default false
      */
     devMode?: boolean;
+    /**
+     * Automatically import CSS styles
+     * Set to false if you want to manually import styles or use custom styling
+     * @default true
+     */
+    styles?: boolean;
 }
 declare const _default: import('@nuxt/schema').NuxtModule<StrandsAuthConfig, StrandsAuthConfig, false>;
 export default _default;

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;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;;AAED,wBAoIE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/strands-auth-ui.umd.js",
@@ -12,7 +12,7 @@
       "import": "./dist/strands-auth-ui.es.js",
       "require": "./dist/strands-auth-ui.umd.js"
     },
-    "./style.css": "./dist/style.css",
+    "./style.css": "./dist/accui.css",
     "./nuxt": {
       "types": "./dist/nuxt.d.ts",
       "import": "./dist/nuxt.d.ts"