@main12/auth-login 0.3.0 → 0.3.2

package/README.md

@@ -10,8 +10,9 @@ plugins: [
   authLoginPlugin({
     projectName: 'My SaaS',
     domain: 'https://myapp.com',
-    logo: 'https://myapp.com/logo.png',  // shown in all auth pages + emails
-    style: 'hero-ui',                     // 'tailwind' (default) | 'hero-ui'
+    logo: 'https://myapp.com/logo.png',
+    style: 'tailwind',
+    routeRedirects: true,
   }),
 ]
 ```
@@ -21,12 +22,19 @@ plugins: [
 ## Features
 
 - **5 auth pages** — login (multi-step), signup, forgot password, verify OTP, set password
+- **Single catch-all route** — one file handles all auth pages (`AuthPages` component)
+- **Route redirects** — automatic `/login` → `/auth/login`, `/admin/login` → `/auth/login` via Next.js 16 proxy
 - **Multi-style** — `tailwind` (zero UI deps) or `hero-ui` (HeroUI + framer-motion). Set once in config
+- **Google OAuth** — optional, enable via `providers` config (hidden by default)
 - **5 API endpoints** — `check-email`, `otp/send`, `otp/verify`, `set-password`, `signup`
 - **OTP engine** — SHA-256 hashing + `timingSafeEqual` comparison, 10-min expiry, 3 attempts
 - **Email templates** — welcome, OTP login, password reset, password changed (EN/ES)
 - **Powered by Main 12** — bundled inline SVG, linked to main12.com by default (URL overridable)
 - **Global logo** — pass once in plugin config, automatically shown on all pages and email headers
+- **Configurable login methods** — `passwordLogin` and `otpLogin` options for flexible auth flows
+- **Auto-verify OTP** — automatically verifies when all 6 digits are entered
+- **Smart redirects** — logged-in users are redirected away from auth pages
+- **Google account picker** — always shows account selection by default (`prompt: 'select_account'`)
 - **Zero runtime deps** (Tailwind mode) — Next.js + React are peer dependencies
 
 ---
@@ -41,6 +49,20 @@ pnpm add @main12/auth-login
 
 No extra dependencies needed. The Tailwind style uses standard utility classes that work in any Tailwind project, including ShadCN-based ones.
 
+If you are using Tailwind CSS in your host app, add the plugin to your Tailwind source scanning so custom utility classes compile properly:
+
+- **Tailwind v4** (in your `globals.css`):
+  ```css
+  @source './node_modules/@main12/auth-login/**/*.{js,ts,jsx,tsx}';
+  ```
+- **Tailwind v3** (in your `tailwind.config.js`):
+  ```js
+  content: [
+    './node_modules/@main12/auth-login/**/*.{js,ts,jsx,tsx}',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ]
+  ```
+
 ### HeroUI mode
 
 ```bash
@@ -49,11 +71,14 @@ pnpm add @heroui/react framer-motion @iconify/react
 
 ---
 
-## Quick Start
+## Quick Start (Simplified Setup)
+
+The fastest way to get all auth pages running with just **2 files**.
 
 ### 1. Add the plugin + Users collection
 
 ```ts
+// payload.config.ts
 import { authLoginPlugin } from '@main12/auth-login'
 
 export default buildConfig({
@@ -63,9 +88,6 @@ export default buildConfig({
       auth: { tokenExpiration: 7200, verify: false, maxLoginAttempts: 5 },
       fields: [
         { name: 'name', type: 'text' },
-        { name: 'otpHash', type: 'text', admin: { hidden: true } },
-        { name: 'otpAttempts', type: 'number', admin: { hidden: true } },
-        { name: 'otpExpiresAt', type: 'text', admin: { hidden: true } },
       ],
     },
   ],
@@ -74,45 +96,52 @@ export default buildConfig({
       projectName: 'My App',
       domain: 'https://myapp.com',
       logo: '/logo.png',
-      style: 'hero-ui',
+      style: 'tailwind',
+      routeRedirects: true,   // enables /login → /auth/login redirects
     }),
   ],
 })
 ```
 
-### 2. Create one-line route files
-
-```tsx
-// src/app/(frontend)/(auth)/login/page.tsx
-export { LoginPage as default } from '@main12/auth-login/client'
+> **Note:** OTP data is stored in a hidden `auth-otps` collection that the plugin registers automatically. No OTP fields needed on your `users` collection.
 
-// src/app/(frontend)/(auth)/signup/page.tsx
-export { SignupPage as default } from '@main12/auth-login/client'
+### 2. Create the catch-all auth route (1 file)
 
-// src/app/(frontend)/(auth)/forgot-password/page.tsx
-export { ForgotPasswordPage as default } from '@main12/auth-login/client'
+```tsx
+// src/app/(frontend)/(auth)/auth/[...slug]/page.tsx
+'use client'
 
-// src/app/(frontend)/(auth)/verify-otp/page.tsx
-export { VerifyOtpPage as default } from '@main12/auth-login/client'
+import { use } from 'react'
+import { AuthPages } from '@main12/auth-login/client'
 
-// src/app/(frontend)/(auth)/set-password/page.tsx
-export { SetPasswordPage as default } from '@main12/auth-login/client'
+export default function Page({ params }: { params: Promise<{ slug: string[] }> }) {
+  const { slug } = use(params)
+  return <AuthPages slug={slug} />
+}
 ```
 
-### 3. Wire up the login action
+This single file handles all routes:
+- `/auth/login`
+- `/auth/signup`
+- `/auth/forgot-password`
+- `/auth/verify-otp`
+- `/auth/set-password`
 
-```tsx
-// login/page.tsx
-'use client'
-import { LoginPage } from '@main12/auth-login/client'
-import { useAuth } from '@/providers/Auth'
+### 3. Add the proxy for route redirects (1 file)
 
-export default function Page() {
-  const { login } = useAuth()
-  return <LoginPage onPasswordLogin={login} redirectTo="/dashboard" />
-}
+```ts
+// src/proxy.ts (Next.js 16+)
+export { proxy, config } from '@main12/auth-login/proxy'
 ```
 
+This redirects:
+- `/login` → `/auth/login`
+- `/signup` → `/auth/signup`
+- `/forgot-password` → `/auth/forgot-password`
+- `/verify-otp` → `/auth/verify-otp`
+- `/set-password` → `/auth/set-password`
+- `/admin/login` → `/auth/login` (**always**, regardless of `routeRedirects` setting)
+
 ### 4. Visit `/login` — done.
 
 ---
@@ -121,26 +150,163 @@ export default function Page() {
 
 ```ts
 authLoginPlugin({
+  // Core
   projectName: 'My App',          // Email subjects + footers
   contactEmail: 'hi@myapp.com',   // Email footer contact
   domain: 'https://myapp.com',    // Links in emails
   logo: '/logo.png',              // All auth pages + email headers
   style: 'tailwind',              // 'tailwind' | 'hero-ui'
   enabled: true,
+
+  // Login methods
+  passwordLogin: true,            // Allow password-based login (default: true)
+  otpLogin: true,                 // Allow OTP-based login (default: true)
+
+  // Route redirects
+  routeRedirects: true,           // Enable /login → /auth/login redirects
+  // or with custom base path:
+  // routeRedirects: { basePath: '/auth' },
+
+  // OAuth providers (optional — hidden by default)
+  providers: {
+    google: {
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+      prompt: 'select_account',   // Always show account picker (default)
+    },
+  },
+})
+```
+
+### Route Redirects
+
+| Value | Behavior |
+|-------|----------|
+| `false` (default) | No redirects. You manage your own routes. |
+| `true` | Redirects `/login`, `/signup`, etc. → `/auth/login`, `/auth/signup`, etc. |
+| `{ basePath: '/myauth' }` | Same, but redirects to `/myauth/login`, etc. |
+
+> **Note:** `/admin/login` is **always** redirected to the plugin login page when the proxy is active, regardless of the `routeRedirects` setting.
+
+### Google OAuth (Providers)
+
+Google OAuth is **hidden by default**. To enable it, just add `providers.google` — the plugin handles everything (UI buttons + server-side OAuth flow via `payload-oauth2` under the hood):
+
+```ts
+authLoginPlugin({
+  providers: {
+    google: {
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+      successRedirect: '/dashboard',    // optional, defaults to '/admin'
+      failureRedirect: '/login?error=failed', // optional
+    },
+  },
+})
+```
+
+That's it. No extra packages to install, no extra plugins to configure.
+
+| Config | Behavior |
+|--------|----------|
+| Omitted / not set | Google OAuth hidden |
+| `google: true` | Auto-detect `GOOGLE_CLIENT_ID` + `GOOGLE_CLIENT_SECRET` from env |
+| `google: { clientId, clientSecret }` | Enable with explicit credentials |
+| `google: false` | Force disable |
+
+#### Google Account Picker
+
+By default, Google always shows the account selection screen (`prompt: 'select_account'`). This prevents confusion when users have multiple Google accounts.
+
+| `prompt` value | Behavior |
+|----------------|----------|
+| `'select_account'` (default) | Always show account picker |
+| `'consent'` | Prompt for consent every time |
+| `'none'` | Skip picker, use existing session |
+
+### Login Methods
+
+Control which login methods are available:
+
+```ts
+authLoginPlugin({
+  passwordLogin: false,  // Disable password login
+  otpLogin: true,        // Enable OTP login
 })
 ```
 
+| `passwordLogin` | `otpLogin` | User has password | Behavior |
+|---|---|---|---|
+| ✅ | ✅ | Yes | Password step |
+| ✅ | ✅ | No | OTP → straight to app |
+| ❌ | ✅ | Any | OTP → straight to app |
+| ✅ | ❌ | No | OTP → set password prompt |
+| ✅ | ❌ | Yes | Password step |
+
+When `otpLogin` is enabled, users are never prompted to set a password after OTP verification — they go straight to the app. The set-password prompt only appears when `passwordLogin` is enabled and `otpLogin` is disabled.
+
+---
+
+## AuthPages Props
+
+The `AuthPages` component accepts these props for customization:
+
+```tsx
+<AuthPages
+  slug={slug}                    // Required — from catch-all route params
+  redirectTo="/dashboard"        // Where to go after login/set-password (default: '/admin')
+  logo={<MyLogo />}             // Custom logo component
+  basePath="/auth"               // Base path for sibling links (default: '/auth')
+  showGoogleOAuth={true}         // Override Google OAuth visibility
+  onPasswordLogin={customLogin}  // Custom login handler
+  onSignup={customSignup}        // Custom signup handler
+/>
+```
+
+---
+
+## Individual Page Setup (Advanced)
+
+If you need full control over each page, create separate route files instead of using `AuthPages`:
+
+```tsx
+// login/page.tsx
+'use client'
+import { LoginPage } from '@main12/auth-login/client'
+
+export default function Page() {
+  return (
+    <LoginPage
+      onPasswordLogin={async ({ email, password }) => {
+        const res = await fetch('/api/users/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password }),
+        })
+        if (!res.ok) throw new Error('Login failed')
+      }}
+      redirectTo="/dashboard"
+      signupUrl="/signup"
+    />
+  )
+}
+```
+
 ### Per-page overrides
 
 ```tsx
 <LoginPage
-  logo={<AppLogo width={180} />}  // Override global logo (optional)
-  onPasswordLogin={login}          // Required
+  logo={<AppLogo width={180} />}
+  onPasswordLogin={login}
   redirectTo="/dashboard"
   showGoogleOAuth={true}
   signupUrl="/signup"
-  poweredBy={{ enabled: true, logoUrl: '/custom.png', linkUrl: 'https://...' }}
 />
+
+<SignupPage onSignup={signup} loginUrl="/login" />
+<ForgotPasswordPage loginUrl="/login" />
+<VerifyOtpPage loginUrl="/login" />
+<SetPasswordPage redirectTo="/dashboard" />
 ```
 
 ---
@@ -289,17 +455,39 @@ await payload.sendEmail({
 
 ---
 
+## Exports
+
+| Import path | Contents |
+|-------------|----------|
+| `@main12/auth-login` | Plugin factory, types, server config |
+| `@main12/auth-login/client` | Page components, `AuthPages`, hooks, services, UI utilities |
+| `@main12/auth-login/rsc` | Email template generators, translations |
+| `@main12/auth-login/proxy` | Next.js 16 proxy for route redirects |
+
+---
+
 ## ShadCN Compatibility
 
 The `tailwind` style works in ShadCN projects out of the box. For ShadCN components, build a [custom page](#building-custom-pages) — import the plugin's hooks and use your `@/components/ui/button`, `@/components/ui/input`, etc.
 
 ---
 
+## Setup Comparison
+
+| Approach | Files needed | Best for |
+|----------|-------------|----------|
+| **Catch-all + proxy** (recommended) | 2 files | Most projects — fastest setup |
+| **Individual pages** | 5 files | Full control over each page |
+| **Custom pages with hooks** | Your own files | Completely custom UI |
+| **Backend only** (`routeRedirects: false`, no `AuthPages`) | 0 frontend files | Custom frontend using only the API endpoints + hooks |
+
+---
+
 ## 🤖 AI Agent Prompts
 
 Copy these prompts into Claude, Cursor, Copilot, or any AI agent.
 
-### Prompt: Set up the auth plugin in a new Payload project
+### Prompt: Set up the auth plugin (simplified catch-all)
 
 ```
 Add @main12/auth-login to this Payload project:
@@ -307,15 +495,38 @@ Add @main12/auth-login to this Payload project:
 1. Install: pnpm add @main12/auth-login
 2. In payload.config.ts, add:
    - Users collection with auth enabled + otpHash, otpAttempts, otpExpiresAt fields
-   - Plugin: authLoginPlugin({ projectName: "<PROJECT>", domain: "<URL>", logo: "/logo.png", style: "hero-ui" })
-3. Create route files under src/app/(frontend)/(auth)/:
-   - login/page.tsx      → export { LoginPage as default } from '@main12/auth-login/client'
-   - signup/page.tsx     → export { SignupPage as default } from '@main12/auth-login/client'
-   - forgot-password/page.tsx  → export { ForgotPasswordPage as default } from '@main12/auth-login/client'
-   - verify-otp/page.tsx → export { VerifyOtpPage as default } from '@main12/auth-login/client'
-   - set-password/page.tsx → export { SetPasswordPage as default } from '@main12/auth-login/client'
-4. In login/page.tsx, wrap LoginPage with useAuth() to pass onPasswordLogin={login}.
-5. Verify: visit /login
+   - Plugin: authLoginPlugin({ projectName: "<PROJECT>", domain: "<URL>", logo: "/logo.png", style: "tailwind", routeRedirects: true })
+3. Create catch-all route: src/app/(frontend)/(auth)/auth/[...slug]/page.tsx
+   - 'use client', import { use } from 'react', import { AuthPages } from '@main12/auth-login/client'
+   - export default function Page({ params }) { const { slug } = use(params); return <AuthPages slug={slug} /> }
+4. Create proxy: src/proxy.ts
+   - export { proxy, config } from '@main12/auth-login/proxy'
+5. Verify: visit /login → should redirect to /auth/login
+```
+
+### Prompt: Set up with Google OAuth
+
+```
+Add @main12/auth-login with Google OAuth to this Payload project:
+
+1. Install: pnpm add @main12/auth-login
+2. In payload.config.ts, add:
+   - Users collection with auth enabled + otpHash, otpAttempts, otpExpiresAt fields
+   - Plugin: authLoginPlugin({
+       projectName: "<PROJECT>",
+       domain: "<URL>",
+       style: "tailwind",
+       routeRedirects: true,
+       providers: {
+         google: {
+           clientId: process.env.GOOGLE_CLIENT_ID,
+           clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+         }
+       }
+     })
+3. Create catch-all route + proxy (same as simplified setup)
+4. Add GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET to .env
+5. Verify: visit /login → should show Google OAuth button
 ```
 
 ### Prompt: Build a custom login page with HeroUI components

package/dist/auth/application/hooks/useLoginFlow.js

@@ -2,6 +2,7 @@
 import { useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { checkEmail, sendOtp, initiateGoogleLogin } from '../services/authService.js';
+import { pluginConfig } from '../../../config.js';
 /**
  * State machine for the multi-step login flow: email → password | otp-prompt.
  * The page component owns the UI; this hook owns the logic.
@@ -25,14 +26,29 @@ import { checkEmail, sendOtp, initiateGoogleLogin } from '../services/authServic
                 setError('noAccountFound');
                 return;
             }
-            setStep(data.hasPassword ? 'password' : 'otp-prompt');
+            const { passwordLogin: passwordLoginEnabled, otpLogin: otpLoginEnabled } = pluginConfig;
+            if (data.hasPassword && passwordLoginEnabled) {
+                // Show password step if user has a password and password login is enabled
+                setStep('password');
+                return;
+            }
+            // OTP login — send OTP immediately and redirect to verify page
+            const otpData = await sendOtp(email, 'login');
+            if (otpData.success) {
+                const redirectParam = redirectTo !== '/' ? `&redirect=${encodeURIComponent(redirectTo)}` : '';
+                router.push(`/verify-otp?email=${encodeURIComponent(email.trim())}${redirectParam}`);
+            } else {
+                setError(otpData.message || 'otpSendFailed');
+            }
         } catch  {
             setError('genericError');
         } finally{
             setIsLoading(false);
         }
     }, [
-        email
+        email,
+        redirectTo,
+        router
     ]);
     const handlePasswordSubmit = useCallback(async (e)=>{
         e.preventDefault();

package/dist/auth/application/hooks/useVerifyOtpFlow.js

@@ -2,6 +2,7 @@
 import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { verifyOtp, sendOtp } from '../services/authService.js';
+import { pluginConfig } from '../../../config.js';
 /**
  * State machine for OTP verification: input → verify → redirect | resend.
  */ export function useVerifyOtpFlow({ email, purpose, redirectTo = '/' }) {
@@ -10,7 +11,8 @@ import { verifyOtp, sendOtp } from '../services/authService.js';
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [isResending, setIsResending] = useState(false);
-    const [resendCooldown, setResendCooldown] = useState(0);
+    // Start with 30s cooldown since a code was just sent before arriving here
+    const [resendCooldown, setResendCooldown] = useState(30);
     useEffect(()=>{
         if (resendCooldown > 0) {
             const timer = setTimeout(()=>setResendCooldown((c)=>c - 1), 1000);
@@ -26,11 +28,15 @@ import { verifyOtp, sendOtp } from '../services/authService.js';
         try {
             const data = await verifyOtp(email, otp);
             if (data.success) {
+                const { passwordLogin: passwordLoginEnabled, otpLogin: otpLoginEnabled } = pluginConfig;
                 if (purpose === 'password-reset') {
+                    // Always allow setting password from explicit password-reset flow
                     router.push(`/set-password?redirect=${encodeURIComponent(redirectTo)}`);
-                } else if (data.isNewUser) {
+                } else if (!otpLoginEnabled && passwordLoginEnabled && data.isNewUser) {
+                    // Only prompt for password if OTP login is disabled and password login is enabled
                     router.push(`/set-password?redirect=${encodeURIComponent(redirectTo)}`);
                 } else {
+                    // OTP login is enabled — go straight to the app
                     window.location.href = redirectTo;
                 }
             } else {
@@ -50,6 +56,15 @@ import { verifyOtp, sendOtp } from '../services/authService.js';
         redirectTo,
         router
     ]);
+    // Auto-verify when all 6 digits are entered
+    useEffect(()=>{
+        if (otp.length === 6 && !isLoading) {
+            handleSubmit();
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        otp
+    ]);
     const handleResendCode = useCallback(async ()=>{
         if (resendCooldown > 0) return;
         setIsResending(true);

package/dist/auth/application/services/authService.d.ts

@@ -22,5 +22,6 @@ export declare function setUserPassword(password: string, confirmPassword: strin
 export declare function signup(name: string, email: string): Promise<SignupResponse>;
 /**
  * Redirect the browser to the Google OAuth login endpoint.
+ * Uses payload-oauth2 plugin's route at /api/users/oauth/google.
  */
 export declare function initiateGoogleLogin(redirectTo?: string): void;

package/dist/auth/application/services/authService.js

@@ -80,10 +80,11 @@ const API_PREFIX = '/api/auth';
 }
 /**
  * Redirect the browser to the Google OAuth login endpoint.
+ * Uses payload-oauth2 plugin's route at /api/users/oauth/google.
  */ export function initiateGoogleLogin(redirectTo = '/') {
     const params = new URLSearchParams();
     if (redirectTo !== '/') {
-        params.set('redirect', redirectTo);
+        params.set('state', redirectTo);
     }
     const qs = params.toString();
     window.location.href = `/api/users/oauth/google${qs ? `?${qs}` : ''}`;

package/dist/components/AuthClientInit.d.ts

@@ -0,0 +1,27 @@
+import { type AuthStyle } from '../config';
+export interface AuthClientInitProps {
+    /** Override UI style. If omitted, reads from plugin config. */
+    style?: AuthStyle;
+    /** Override Google OAuth visibility. If omitted, reads from plugin config. */
+    googleOAuthEnabled?: boolean;
+}
+/**
+ * Drop this component into your root layout to sync the server-side
+ * plugin config to client components. No props needed — it reads
+ * everything from the plugin configuration automatically.
+ *
+ * ```tsx
+ * // app/(frontend)/layout.tsx
+ * import { AuthClientInit } from '@main12/auth-login/client'
+ *
+ * export default function Layout({ children }) {
+ *   return (
+ *     <html><body>
+ *       <AuthClientInit />
+ *       {children}
+ *     </body></html>
+ *   )
+ * }
+ * ```
+ */
+export declare function AuthClientInit({ style, googleOAuthEnabled }?: AuthClientInitProps): null;

package/dist/components/AuthClientInit.js

@@ -0,0 +1,29 @@
+'use client';
+import { pluginConfig, initClientConfig } from '../config.js';
+/**
+ * Drop this component into your root layout to sync the server-side
+ * plugin config to client components. No props needed — it reads
+ * everything from the plugin configuration automatically.
+ *
+ * ```tsx
+ * // app/(frontend)/layout.tsx
+ * import { AuthClientInit } from '@main12/auth-login/client'
+ *
+ * export default function Layout({ children }) {
+ *   return (
+ *     <html><body>
+ *       <AuthClientInit />
+ *       {children}
+ *     </body></html>
+ *   )
+ * }
+ * ```
+ */ export function AuthClientInit({ style, googleOAuthEnabled } = {}) {
+    initClientConfig({
+        style: style ?? pluginConfig.style,
+        googleOAuthEnabled: googleOAuthEnabled ?? pluginConfig.googleOAuthEnabled,
+        passwordLogin: pluginConfig.passwordLogin,
+        otpLogin: pluginConfig.otpLogin
+    });
+    return null;
+}

package/dist/components/AuthLayout.js

@@ -41,7 +41,10 @@ export const AuthLayout = ({ children, logo, title, subtitle, footer, poweredBy,
         className: `flex flex-col min-h-screen ${backgroundClass}`,
         children: [
             /*#__PURE__*/ _jsxs("div", {
-                className: "md:hidden flex flex-col",
+                className: "md:hidden flex flex-col w-full max-w-md mx-auto",
+                style: {
+                    maxWidth: '400px'
+                },
                 children: [
                     header,
                     /*#__PURE__*/ _jsx("div", {
@@ -60,7 +63,10 @@ export const AuthLayout = ({ children, logo, title, subtitle, footer, poweredBy,
             /*#__PURE__*/ _jsx("div", {
                 className: "hidden md:flex min-h-screen items-center justify-center px-4 py-12",
                 children: /*#__PURE__*/ _jsxs("div", {
-                    className: "w-full max-w-[400px] animate-[fadeIn_0.5s_ease-out]",
+                    className: "w-full max-w-md max-w-[400px] animate-[fadeIn_0.5s_ease-out]",
+                    style: {
+                        maxWidth: '400px'
+                    },
                     children: [
                         /*#__PURE__*/ _jsxs(Card, {
                             className: cardClassName,

package/dist/components/AuthPages.d.ts

@@ -20,5 +20,15 @@ export interface AuthPagesProps {
     basePath?: string;
     /** Show Google OAuth buttons. If omitted, reads from plugin config. */
     showGoogleOAuth?: boolean;
+    /** Override the page background. Defaults to 'bg-white md:bg-[#191919]'. */
+    backgroundClass?: string;
+    /** UI style override. If omitted, reads from plugin config. */
+    style?: 'tailwind' | 'hero-ui';
+    /** Allow new user signups. When false, hides signup page and signup links. Defaults to true. */
+    allowSignup?: boolean;
+    /** Allow password-based login. @default true */
+    passwordLogin?: boolean;
+    /** Allow OTP-based login. @default true */
+    otpLogin?: boolean;
 }
-export default function AuthPages({ slug, redirectTo, logo, onPasswordLogin, onSignup, basePath, showGoogleOAuth, }: AuthPagesProps): import("react/jsx-runtime").JSX.Element;
+export default function AuthPages({ slug, redirectTo, logo, onPasswordLogin, onSignup, basePath, showGoogleOAuth, backgroundClass, style, allowSignup, passwordLogin, otpLogin, }: AuthPagesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AuthPages.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { pluginConfig, initClientConfig } from '../config.js';
 import LoginPage from './pages/LoginPage.js';
 import SignupPage from './pages/SignupPage.js';
 import ForgotPasswordPage from './pages/ForgotPasswordPage.js';
@@ -37,13 +38,23 @@ const defaultSignup = async ({ name, email })=>{
         throw new Error(err.message || 'Signup failed');
     }
 };
-export default function AuthPages({ slug, redirectTo = '/admin', logo, onPasswordLogin = defaultPasswordLogin, onSignup = defaultSignup, basePath = '/auth', showGoogleOAuth }) {
+export default function AuthPages({ slug, redirectTo = '/admin', logo, onPasswordLogin = defaultPasswordLogin, onSignup = defaultSignup, basePath = '/auth', showGoogleOAuth, backgroundClass, style, allowSignup = true, passwordLogin = true, otpLogin = true }) {
+    // Sync server plugin config to client using props (which come from the server via AuthPagesServer)
+    initClientConfig({
+        style: style ?? pluginConfig.style,
+        googleOAuthEnabled: showGoogleOAuth ?? pluginConfig.googleOAuthEnabled,
+        passwordLogin,
+        otpLogin
+    });
     const page = slug?.[0] ?? 'login';
     const base = basePath.replace(/\/$/, '');
     const shared = {
         logo,
         ...showGoogleOAuth !== undefined ? {
             showGoogleOAuth
+        } : {},
+        ...backgroundClass !== undefined ? {
+            backgroundClass
         } : {}
     };
     switch(page){
@@ -51,10 +62,17 @@ export default function AuthPages({ slug, redirectTo = '/admin', logo, onPasswor
             return /*#__PURE__*/ _jsx(LoginPage, {
                 onPasswordLogin: onPasswordLogin,
                 redirectTo: redirectTo,
-                signupUrl: `${base}/signup`,
+                signupUrl: allowSignup ? `${base}/signup` : undefined,
                 ...shared
             });
         case 'signup':
+            if (!allowSignup) {
+                return /*#__PURE__*/ _jsx(LoginPage, {
+                    onPasswordLogin: onPasswordLogin,
+                    redirectTo: redirectTo,
+                    ...shared
+                });
+            }
             return /*#__PURE__*/ _jsx(SignupPage, {
                 onSignup: onSignup,
                 loginUrl: `${base}/login`,