@main12/auth-login 0.2.1 → 0.2.3

package/dist/components/pages/VerifyOtpPageHero.js

@@ -1,8 +1,8 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { Button, InputOtp, Spinner as HSpinner } from '@heroui/react';
+import { Button, InputOTP, Spinner } from '@heroui/react';
 import { Icon } from '@iconify/react';
 import { motion } from 'framer-motion';
 import { useVerifyOtpFlow } from '../../auth/application/hooks/useVerifyOtpFlow.js';
@@ -43,12 +43,41 @@ function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassN
                     className: "text-gray-700 text-sm font-medium",
                     children: email
                 }),
-                /*#__PURE__*/ _jsx(InputOtp, {
-                    length: 6,
+                /*#__PURE__*/ _jsxs(InputOTP, {
+                    maxLength: 6,
                     value: otp,
-                    onValueChange: setOtp,
+                    onChange: setOtp,
                     isDisabled: isLoading,
-                    autoFocus: true
+                    autoFocus: true,
+                    children: [
+                        /*#__PURE__*/ _jsxs(InputOTP.Group, {
+                            children: [
+                                /*#__PURE__*/ _jsx(InputOTP.Slot, {
+                                    index: 0
+                                }),
+                                /*#__PURE__*/ _jsx(InputOTP.Slot, {
+                                    index: 1
+                                }),
+                                /*#__PURE__*/ _jsx(InputOTP.Slot, {
+                                    index: 2
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(InputOTP.Separator, {}),
+                        /*#__PURE__*/ _jsxs(InputOTP.Group, {
+                            children: [
+                                /*#__PURE__*/ _jsx(InputOTP.Slot, {
+                                    index: 3
+                                }),
+                                /*#__PURE__*/ _jsx(InputOTP.Slot, {
+                                    index: 4
+                                }),
+                                /*#__PURE__*/ _jsx(InputOTP.Slot, {
+                                    index: 5
+                                })
+                            ]
+                        })
+                    ]
                 }),
                 error && /*#__PURE__*/ _jsx(motion.div, {
                     className: "w-full bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
@@ -63,12 +92,19 @@ function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassN
                 /*#__PURE__*/ _jsx(Button, {
                     fullWidth: true,
                     size: "lg",
-                    color: "primary",
-                    isLoading: isLoading,
+                    isPending: isLoading,
                     isDisabled: otp.length !== 6,
                     onPress: handleSubmit,
                     className: "h-12 font-semibold",
-                    children: "Verify"
+                    children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                isPending && /*#__PURE__*/ _jsx(Spinner, {
+                                    color: "current",
+                                    size: "sm"
+                                }),
+                                "Verify"
+                            ]
+                        })
                 }),
                 /*#__PURE__*/ _jsxs("div", {
                     className: "text-center",
@@ -93,7 +129,7 @@ export default function VerifyOtpPageHero(props) {
     return /*#__PURE__*/ _jsx(Suspense, {
         fallback: /*#__PURE__*/ _jsx("div", {
             className: "min-h-screen flex items-center justify-center",
-            children: /*#__PURE__*/ _jsx(HSpinner, {
+            children: /*#__PURE__*/ _jsx(Spinner, {
                 size: "lg"
             })
         }),

package/dist/components/pages/VerifyOtpPageTailwind.d.ts

@@ -1,4 +1,4 @@
-import type { AuthLayoutConfig } from '../AuthLayout.js';
+import type { AuthLayoutConfig } from '../AuthLayout';
 export interface VerifyOtpPageProps extends AuthLayoutConfig {
     loginUrl?: string;
 }

package/dist/components/ui/index.d.ts

@@ -8,7 +8,7 @@ interface ButtonProps {
     isDisabled?: boolean;
     onPress?: () => void;
     onClick?: () => void;
-    variant?: 'primary' | 'bordered' | 'ghost' | 'tertiary';
+    variant?: 'primary' | 'secondary' | 'bordered' | 'ghost' | 'tertiary';
     className?: string;
 }
 export declare const Button: React.FC<ButtonProps>;
@@ -25,6 +25,7 @@ interface InputProps {
     placeholder?: string;
     className?: string;
     name?: string;
+    variant?: 'default' | 'secondary';
 }
 export declare const Input: React.FC<InputProps>;
 interface CardProps {

package/dist/components/ui/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 const variantClasses = {
     primary: 'bg-[#D5E855] text-gray-900 hover:bg-[#C9DC4A] font-semibold',
+    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 font-medium',
     bordered: 'border border-gray-300 text-gray-700 hover:bg-gray-50 bg-white',
     ghost: 'text-gray-600 hover:text-gray-900 bg-transparent',
     tertiary: 'text-gray-600 hover:text-gray-900 bg-transparent underline'
@@ -25,7 +26,7 @@ export const Button = ({ children, type = 'button', fullWidth = true, size = 'lg
             children
         ]
     });
-export const Input = ({ type = 'text', label, value, onChange, onValueChange, isRequired, isDisabled, autoFocus, autoComplete, placeholder, className = '', name })=>/*#__PURE__*/ _jsxs("div", {
+export const Input = ({ type = 'text', label, value, onChange, onValueChange, isRequired, isDisabled, autoFocus, autoComplete, placeholder, className = '', name, variant = 'default' })=>/*#__PURE__*/ _jsxs("div", {
         className: "w-full",
         children: [
             label && /*#__PURE__*/ _jsxs("label", {
@@ -45,7 +46,7 @@ export const Input = ({ type = 'text', label, value, onChange, onValueChange, is
                 autoComplete: autoComplete,
                 placeholder: placeholder,
                 name: name,
-                className: `w-full h-12 px-4 bg-white border border-gray-300 hover:border-gray-400 rounded-xl text-gray-900 text-base transition-colors outline-none focus:border-[#D5E855] focus:ring-2 focus:ring-[#D5E855]/30 ${className}`
+                className: `w-full h-12 px-4 ${variant === 'secondary' ? 'bg-gray-100' : 'bg-white'} border border-gray-300 hover:border-gray-400 rounded-xl text-gray-900 text-base transition-colors outline-none focus:border-[#D5E855] focus:ring-2 focus:ring-[#D5E855]/30 ${className}`
             })
         ]
     });

package/dist/config.d.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 /**
  * Shared plugin configuration — set by the plugin factory at init time,
  * read by all client components at render time.
@@ -6,5 +7,13 @@ export type AuthStyle = 'tailwind' | 'hero-ui';
 export declare const pluginConfig: {
     style: AuthStyle;
     logoUrl?: string;
+    Logo?: React.ComponentType;
     googleOAuthEnabled: boolean;
+    routeRedirects: boolean;
+    authBasePath: string;
 };
+/** Call this client-side to mirror the server plugin config. */
+export declare function initClientConfig(opts: {
+    style?: AuthStyle;
+    googleOAuthEnabled?: boolean;
+}): void;

package/dist/config.js

@@ -1,7 +1,10 @@
-/**
- * Shared plugin configuration — set by the plugin factory at init time,
- * read by all client components at render time.
- */ export const pluginConfig = {
+export const pluginConfig = {
     style: 'tailwind',
-    googleOAuthEnabled: true
+    googleOAuthEnabled: true,
+    routeRedirects: false,
+    authBasePath: '/auth'
 };
+/** Call this client-side to mirror the server plugin config. */ export function initClientConfig(opts) {
+    if (opts.style) pluginConfig.style = opts.style;
+    if (opts.googleOAuthEnabled !== undefined) pluginConfig.googleOAuthEnabled = opts.googleOAuthEnabled;
+}

package/dist/exports/client.d.ts

@@ -1,24 +1,27 @@
-export { useLoginFlow } from '../auth/application/hooks/useLoginFlow.js';
-export { useVerifyOtpFlow } from '../auth/application/hooks/useVerifyOtpFlow.js';
-export { useForgotPasswordFlow } from '../auth/application/hooks/useForgotPasswordFlow.js';
-export { useSetPasswordFlow } from '../auth/application/hooks/useSetPasswordFlow.js';
-export { checkEmail, sendOtp, verifyOtp, setUserPassword, signup, initiateGoogleLogin, } from '../auth/application/services/authService.js';
-export { evaluatePasswordStrength, isPasswordValid, MIN_PASSWORD_LENGTH } from '../auth/domain/passwordRules.js';
-export { default as LoginPage } from '../components/pages/LoginPage.js';
-export { default as SignupPage } from '../components/pages/SignupPage.js';
-export { default as ForgotPasswordPage } from '../components/pages/ForgotPasswordPage.js';
-export { default as VerifyOtpPage } from '../components/pages/VerifyOtpPage.js';
-export { default as SetPasswordPage } from '../components/pages/SetPasswordPage.js';
-export { AuthLayout } from '../components/AuthLayout.js';
-export { PoweredBy } from '../components/PoweredBy.js';
-export type { LoginStep, OTPPurpose, CheckEmailResponse, SendOtpResponse, VerifyOtpResponse, SetPasswordResponse, SignupResponse, PasswordStrengthResult, } from '../auth/domain/types.js';
-export type { UseLoginFlowOptions } from '../auth/application/hooks/useLoginFlow.js';
-export type { UseVerifyOtpFlowOptions } from '../auth/application/hooks/useVerifyOtpFlow.js';
-export type { UseSetPasswordFlowOptions } from '../auth/application/hooks/useSetPasswordFlow.js';
-export type { LoginPageProps } from '../components/pages/LoginPage.js';
-export type { SignupPageProps } from '../components/pages/SignupPage.js';
-export type { ForgotPasswordPageProps } from '../components/pages/ForgotPasswordPage.js';
-export type { VerifyOtpPageProps } from '../components/pages/VerifyOtpPage.js';
-export type { SetPasswordPageProps } from '../components/pages/SetPasswordPage.js';
-export type { AuthLayoutConfig, AuthLayoutProps } from '../components/AuthLayout.js';
-export type { PoweredByProps } from '../components/PoweredBy.js';
+export { initClientConfig } from '../config';
+export { useLoginFlow } from '../auth/application/hooks/useLoginFlow';
+export { useVerifyOtpFlow } from '../auth/application/hooks/useVerifyOtpFlow';
+export { useForgotPasswordFlow } from '../auth/application/hooks/useForgotPasswordFlow';
+export { useSetPasswordFlow } from '../auth/application/hooks/useSetPasswordFlow';
+export { checkEmail, sendOtp, verifyOtp, setUserPassword, signup, initiateGoogleLogin, } from '../auth/application/services/authService';
+export { evaluatePasswordStrength, isPasswordValid, MIN_PASSWORD_LENGTH } from '../auth/domain/passwordRules';
+export { default as LoginPage } from '../components/pages/LoginPage';
+export { default as SignupPage } from '../components/pages/SignupPage';
+export { default as ForgotPasswordPage } from '../components/pages/ForgotPasswordPage';
+export { default as VerifyOtpPage } from '../components/pages/VerifyOtpPage';
+export { default as SetPasswordPage } from '../components/pages/SetPasswordPage';
+export { default as AuthPages } from '../components/AuthPages';
+export type { AuthPagesProps } from '../components/AuthPages';
+export { AuthLayout } from '../components/AuthLayout';
+export { PoweredBy } from '../components/PoweredBy';
+export type { LoginStep, OTPPurpose, CheckEmailResponse, SendOtpResponse, VerifyOtpResponse, SetPasswordResponse, SignupResponse, PasswordStrengthResult, } from '../auth/domain/types';
+export type { UseLoginFlowOptions } from '../auth/application/hooks/useLoginFlow';
+export type { UseVerifyOtpFlowOptions } from '../auth/application/hooks/useVerifyOtpFlow';
+export type { UseSetPasswordFlowOptions } from '../auth/application/hooks/useSetPasswordFlow';
+export type { LoginPageProps } from '../components/pages/LoginPage';
+export type { SignupPageProps } from '../components/pages/SignupPage';
+export type { ForgotPasswordPageProps } from '../components/pages/ForgotPasswordPage';
+export type { VerifyOtpPageProps } from '../components/pages/VerifyOtpPage';
+export type { SetPasswordPageProps } from '../components/pages/SetPasswordPage';
+export type { AuthLayoutConfig, AuthLayoutProps } from '../components/AuthLayout';
+export type { PoweredByProps } from '../components/PoweredBy';

package/dist/exports/client.js

@@ -2,6 +2,8 @@
 // ============================================================
 // Client-side exports for @main12/auth-login/client
 // ============================================================
+// Plugin client config initializer
+export { initClientConfig } from '../config.js';
 // Auth hooks
 export { useLoginFlow } from '../auth/application/hooks/useLoginFlow.js';
 export { useVerifyOtpFlow } from '../auth/application/hooks/useVerifyOtpFlow.js';
@@ -17,6 +19,8 @@ export { default as SignupPage } from '../components/pages/SignupPage.js';
 export { default as ForgotPasswordPage } from '../components/pages/ForgotPasswordPage.js';
 export { default as VerifyOtpPage } from '../components/pages/VerifyOtpPage.js';
 export { default as SetPasswordPage } from '../components/pages/SetPasswordPage.js';
+// Catch-all auth pages (single-file setup)
+export { default as AuthPages } from '../components/AuthPages.js';
 // Layout & shared components
 export { AuthLayout } from '../components/AuthLayout.js';
 export { PoweredBy } from '../components/PoweredBy.js';

package/dist/exports/rsc.d.ts

@@ -1,6 +1,6 @@
-export { wrapInBaseTemplate, DEFAULT_COLORS, SOCIAL_ICONS, getBaseUrl, getSenderEmail, getEmailTranslations, generateOtpEmail, generateWelcomeEmail, generatePasswordResetEmail, generatePasswordChangedEmail, } from '../components/email/index.js';
-export type { BaseTemplateOptions, } from '../components/email/baseTemplate.js';
-export type { EmailColors, SocialLink, SocialPlatform, } from '../components/email/constants.js';
-export type { SupportedLanguage, EmailTranslations, } from '../components/email/translations.js';
-export type { OtpEmailParams, OtpEmailResult, WelcomeEmailParams, WelcomeEmailResult, PasswordResetEmailParams, PasswordResetEmailResult, PasswordChangedEmailParams, PasswordChangedEmailResult, } from '../components/email/index.js';
-export type { AuthLoginPluginOptions } from '../index.js';
+export { wrapInBaseTemplate, DEFAULT_COLORS, SOCIAL_ICONS, getBaseUrl, getSenderEmail, getEmailTranslations, generateOtpEmail, generateWelcomeEmail, generatePasswordResetEmail, generatePasswordChangedEmail, } from '../components/email/index';
+export type { BaseTemplateOptions, } from '../components/email/baseTemplate';
+export type { EmailColors, SocialLink, SocialPlatform, } from '../components/email/constants';
+export type { SupportedLanguage, EmailTranslations, } from '../components/email/translations';
+export type { OtpEmailParams, OtpEmailResult, WelcomeEmailParams, WelcomeEmailResult, PasswordResetEmailParams, PasswordResetEmailResult, PasswordChangedEmailParams, PasswordChangedEmailResult, } from '../components/email/index';
+export type { AuthLoginPluginOptions } from '../index';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { Config } from 'payload';
-import { pluginConfig, type AuthStyle } from './config.js';
+import { pluginConfig, type AuthStyle } from './config';
 export interface GoogleOAuthConfig {
     /** Client ID from Google Cloud Console */
     clientId?: string;
@@ -17,7 +17,7 @@ export interface AuthLoginPluginOptions {
     contactEmail?: string;
     domain?: string;
     style?: AuthStyle;
-    logo?: string;
+    logo?: string | React.ComponentType;
     /**
      * OAuth providers configuration.
      * - Omit entirely → auto-detect from env vars (GOOGLE_CLIENT_ID, etc.)
@@ -27,6 +27,19 @@ export interface AuthLoginPluginOptions {
      * - `{ google: { enabled: false } }` → temporarily disable without losing config
      */
     providers?: AuthProvidersConfig;
+    /**
+     * Enable automatic route redirects from bare paths (e.g. /login)
+     * to the catch-all auth path (e.g. /auth/login).
+     *
+     * - `true` → enable redirects (consumer must re-export proxy from their proxy.ts)
+     * - `false` → disable redirects (consumer manages their own routes)
+     * - `{ basePath: '/auth' }` → enable with custom base path
+     *
+     * @default false
+     */
+    routeRedirects?: boolean | {
+        basePath?: string;
+    };
 }
 export declare const authLoginPlugin: (options?: AuthLoginPluginOptions) => (config: Config) => Config;
 export { pluginConfig };

package/dist/index.js

@@ -45,8 +45,19 @@ export const authLoginPlugin = (options = {})=>(config)=>{
         setOAuthEnv(googleConfig);
         // Set global config — all components read this at render time
         pluginConfig.style = options.style || 'tailwind';
-        pluginConfig.logoUrl = options.logo;
+        if (typeof options.logo === 'string') {
+            pluginConfig.logoUrl = options.logo;
+        } else {
+            pluginConfig.Logo = options.logo;
+        }
         pluginConfig.googleOAuthEnabled = googleConfig.enabled;
+        // Route redirects config
+        if (options.routeRedirects) {
+            pluginConfig.routeRedirects = true;
+            if (typeof options.routeRedirects === 'object' && options.routeRedirects.basePath) {
+                pluginConfig.authBasePath = options.routeRedirects.basePath;
+            }
+        }
         // Register auth API endpoints
         config.endpoints = [
             ...config.endpoints || [],

package/dist/proxy.d.ts

@@ -0,0 +1,31 @@
+import { NextResponse, type NextRequest } from 'next/server';
+export interface AuthProxyOptions {
+    /** Base path where AuthPages catch-all is mounted. Defaults to '/auth' */
+    basePath?: string;
+    /** Routes to redirect. Defaults to all auth routes. */
+    routes?: string[];
+}
+/**
+ * Creates a proxy that redirects bare auth routes (e.g. /login)
+ * to the catch-all path (e.g. /auth/login).
+ *
+ * Usage in your app's proxy.ts (Next.js 16+):
+ * ```ts
+ * // One-liner — just re-export:
+ * export { proxy, config } from '@main12/auth-login/proxy'
+ * ```
+ * Or compose with your own logic:
+ * ```ts
+ * import { createAuthProxy } from '@main12/auth-login/proxy'
+ * const authProxy = createAuthProxy({ basePath: '/auth' })
+ * export function proxy(req) { return authProxy(req) }
+ * ```
+ *
+ * The basePath defaults to the value set in the plugin options
+ * (`routeRedirects: { basePath: '/auth' }`), or '/auth' if not configured.
+ */
+export declare function createAuthProxy({ basePath, routes }?: AuthProxyOptions): (request: NextRequest) => NextResponse<unknown>;
+export declare const proxy: (request: NextRequest) => NextResponse<unknown>;
+export declare const config: {
+    matcher: string[];
+};

package/dist/proxy.js

@@ -0,0 +1,55 @@
+import { NextResponse } from 'next/server';
+import { pluginConfig } from './config.js';
+const AUTH_ROUTES = [
+    'login',
+    'signup',
+    'forgot-password',
+    'verify-otp',
+    'set-password'
+];
+/**
+ * Creates a proxy that redirects bare auth routes (e.g. /login)
+ * to the catch-all path (e.g. /auth/login).
+ *
+ * Usage in your app's proxy.ts (Next.js 16+):
+ * ```ts
+ * // One-liner — just re-export:
+ * export { proxy, config } from '@main12/auth-login/proxy'
+ * ```
+ * Or compose with your own logic:
+ * ```ts
+ * import { createAuthProxy } from '@main12/auth-login/proxy'
+ * const authProxy = createAuthProxy({ basePath: '/auth' })
+ * export function proxy(req) { return authProxy(req) }
+ * ```
+ *
+ * The basePath defaults to the value set in the plugin options
+ * (`routeRedirects: { basePath: '/auth' }`), or '/auth' if not configured.
+ */ export function createAuthProxy({ basePath, routes = AUTH_ROUTES } = {}) {
+    const base = (basePath ?? pluginConfig.authBasePath).replace(/\/$/, '');
+    const routeSet = new Set(routes);
+    return function proxy(request) {
+        // If routeRedirects is disabled in plugin config, pass through
+        if (!pluginConfig.routeRedirects && !basePath) {
+            return NextResponse.next();
+        }
+        const { pathname } = request.nextUrl;
+        const segment = pathname.replace(/^\//, '').replace(/\/$/, '');
+        if (routeSet.has(segment) && !pathname.startsWith(`${base}/`)) {
+            const url = request.nextUrl.clone();
+            url.pathname = `${base}/${segment}`;
+            return NextResponse.redirect(url);
+        }
+        return NextResponse.next();
+    };
+}
+export const proxy = createAuthProxy();
+export const config = {
+    matcher: [
+        '/login',
+        '/signup',
+        '/forgot-password',
+        '/verify-otp',
+        '/set-password'
+    ]
+};

package/package.json

@@ -1,33 +1,39 @@
 {
   "name": "@main12/auth-login",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Reusable Payload CMS auth plugin — login, signup, OTP, forgot password, branded emails, Powered by Main12",
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./src/index.ts",
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./client": {
-      "import": "./src/exports/client.ts",
-      "types": "./src/exports/client.ts",
-      "default": "./src/exports/client.ts"
+      "import": "./dist/exports/client.js",
+      "types": "./dist/exports/client.d.ts",
+      "default": "./dist/exports/client.js"
     },
     "./rsc": {
-      "import": "./src/exports/rsc.ts",
-      "types": "./src/exports/rsc.ts",
-      "default": "./src/exports/rsc.ts"
+      "import": "./dist/exports/rsc.js",
+      "types": "./dist/exports/rsc.d.ts",
+      "default": "./dist/exports/rsc.js"
+    },
+    "./proxy": {
+      "import": "./dist/proxy.js",
+      "types": "./dist/proxy.d.ts",
+      "default": "./dist/proxy.js"
     }
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "pnpm copyfiles && pnpm build:types && pnpm build:swc",
+    "build": "pnpm copyfiles && pnpm build:types && pnpm build:swc && pnpm build:fix-esm-imports",
+    "build:fix-esm-imports": "node ./scripts/fix-esm-imports.mjs",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
     "build:types": "tsc --outDir dist",
     "clean": "rimraf {dist,*.tsbuildinfo}",
@@ -42,8 +48,10 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
-    "@heroui/react": "^2.8.10",
+    "@heroui/react": "^3.2.2",
+    "@heroui/styles": "^3.2.2",
     "@iconify/react": "^6.0.2",
+    "@main12/auth-login": "link:.",
     "@payloadcms/db-sqlite": "3.82.1",
     "@payloadcms/next": "3.82.1",
     "@payloadcms/richtext-lexical": "3.82.1",
@@ -64,6 +72,7 @@
     "rimraf": "3.0.2",
     "sharp": "0.34.2",
     "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
     "typescript": "6.0.3",
     "vitest": "4.1.6"
   },