@main12/auth-login 0.4.2 → 1.0.1

package/README.md

@@ -35,7 +35,7 @@ plugins: [
 - **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
+- **No UI library required** (Tailwind mode) — only Next.js/React/Payload peers; `style: 'hero-ui'` additionally requires HeroUI + Framer Motion
 - **Multi-language** — built-in English/Spanish, auto-detected per-request, fully overridable via `messages` prop, works with or without next-intl/next-i18next
 
 ---
@@ -194,6 +194,9 @@ authLoginPlugin({
   style: 'tailwind',              // 'tailwind' | 'hero-ui'
   enabled: true,
 
+  // Signup
+  allowSignup: true,               // Allow new users to sign up (default: true)
+
   // Login methods
   passwordLogin: true,            // Allow password-based login (default: true)
   otpLogin: true,                 // Allow OTP-based login (default: true)
@@ -294,10 +297,20 @@ The `AuthPages` component accepts these props for customization:
   logo={<MyLogo />}             // Custom logo component
   basePath="/auth"               // Base path for sibling links (default: '/auth')
   showGoogleOAuth={true}         // Override Google OAuth visibility
+  allowSignup={true}             // Override plugin's allowSignup setting for this render
+  passwordLogin={true}           // Override plugin's passwordLogin setting for this render
+  otpLogin={true}                // Override plugin's otpLogin setting for this render
   onPasswordLogin={customLogin}  // Custom login handler
   onSignup={customSignup}        // Custom signup handler
   locale="es"                    // Override auto-detected locale (see Multi-Language Support)
   messages={{ es: { login: { title: 'Bienvenido' } } }} // Partial translation overrides
+
+  // Card chrome — same options accepted by <AuthCard> (see Components Reference)
+  poweredBy={{ enabled: true }}  // Configure/hide the "Powered by Main 12" badge
+  cardClassName=""               // Extra classes on the card wrapper
+  removeBorder={false}           // Remove the card border (useful for split/custom layouts)
+  removeShadow={false}           // Remove the card shadow
+  mobileVariant="plain"          // 'plain' | 'card' — how the card renders on mobile widths
 />
 ```
 
@@ -429,6 +442,39 @@ export default function Page() {
 
 ---
 
+## Custom Layouts (Split-Screen, etc.)
+
+For layouts `AuthPages` can't express (e.g. a split-screen with an image pane), compose `AuthLayout` + `AuthCard` directly — the same primitives every built-in page is built from. Pass `slug` to auto-render the matching form (with full translation/config support), and use `removeBorder`/`removeShadow`/`cardClassName` to fit the card into your own layout:
+
+```tsx
+// app/(auth)/auth/[...slug]/page.tsx  (server component, no 'use client' needed)
+import { AuthLayout, AuthCard } from '@main12/auth-login/rsc'
+
+export default async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
+  const { slug } = await params
+  return (
+    <AuthLayout backgroundClass="bg-white">
+      <div className="min-h-screen grid md:grid-cols-2">
+        <div className="hidden md:block bg-cover bg-center" style={{ backgroundImage: 'url(/hero.jpg)' }} />
+        <div className="flex items-center justify-center">
+          <AuthCard
+            slug={slug?.[0] ?? 'login'}
+            removeShadow
+            removeBorder
+            basePath="/auth"
+            redirectTo="/admin"
+          />
+        </div>
+      </div>
+    </AuthLayout>
+  )
+}
+```
+
+`AuthCard` also accepts `children` instead of `slug` for fully custom form content — see [Building Custom Pages](#building-custom-pages) below.
+
+---
+
 ## Building Custom Pages
 
 Use the plugin's hooks to build your own UI with any component library (HeroUI, shadcn, plain Tailwind).
@@ -437,10 +483,10 @@ Use the plugin's hooks to build your own UI with any component library (HeroUI,
 
 | Hook | Returns | Key inputs |
 |------|---------|------------|
-| `useLoginFlow({ redirectTo, onPasswordLogin })` | `step, email, password, error, isLoading, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail` | `redirectTo: string`, `onPasswordLogin: (creds) => Promise<void>` |
+| `useLoginFlow({ redirectTo, onPasswordLogin })` | `step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin` | `redirectTo: string`, `onPasswordLogin: (creds) => Promise<void>` |
 | `useForgotPasswordFlow()` | `email, error, isLoading, setEmail, handleSubmit` | none |
 | `useVerifyOtpFlow({ email, purpose, redirectTo })` | `otp, error, isLoading, isResending, resendCooldown, setOtp, handleSubmit, handleResendCode` | `email: string`, `purpose: 'login'\|'signup'\|'password-reset'` |
-| `useSetPasswordFlow({ redirectTo })` | `password, confirmPassword, error, isLoading, strength, setPassword, setConfirmPassword, handleSubmit` | `redirectTo: string` |
+| `useSetPasswordFlow({ redirectTo })` | `password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit` | `redirectTo?: string` |
 
 > **Signup note:** No hook needed — call `signup(name, email)` from `@main12/auth-login/client`, then redirect to `/verify-otp?email=...&purpose=signup`.
 
@@ -592,7 +638,8 @@ await payload.sendEmail({
 | `ForgotPasswordPage` | Standalone forgot-password page | Individual route setup |
 | `VerifyOtpPage` | Standalone OTP verification page — **requires `?email=...` in the URL** | Reached via redirect from signup/login/forgot-password |
 | `SetPasswordPage` | Standalone set/reset password page | Individual route setup, or post-OTP password creation |
-| `AuthLayout` | Shared card/background/logo/footer chrome used by every page — use it directly when building fully custom pages | `<AuthLayout title="..." subtitle="...">{children}</AuthLayout>` |
+| `AuthCard` | The card chrome (logo, title/subtitle, footer, "Powered by" badge) — pass `slug` to auto-render the matching form, or `children` for fully custom content. `removeBorder`/`removeShadow`/`cardClassName`/`mobileVariant` support custom layouts like split-screen | `<AuthCard slug="login" removeShadow basePath="/auth" />` or `<AuthCard title="..." subtitle="...">{children}</AuthCard>` |
+| `AuthLayout` | Outermost full-height background wrapper used by every page — compose it with `AuthCard` (and e.g. a split-screen image) when building fully custom layouts | `<AuthLayout backgroundClass="bg-white"><AuthCard slug="login" /></AuthLayout>` |
 | `AuthClientInit` | Drop into your root layout to sync server plugin config (`style`, Google OAuth flag) to client bundles. Optional — only needed if you hit issues with plugin config not reaching client components in certain bundler setups | `<AuthClientInit />` inside `<body>` |
 | `PoweredBy` | The "Powered by Main 12" footer badge, rendered automatically on every page (configurable via `poweredBy` prop) | Rarely used standalone — mostly internal |
 
@@ -600,10 +647,10 @@ await payload.sendEmail({
 
 | Hook | Returns | Key inputs |
 |------|---------|------------|
-| `useLoginFlow({ redirectTo, onPasswordLogin })` | `step, email, password, error, isLoading, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail` | `redirectTo: string`, `onPasswordLogin: (creds) => Promise<void>` |
+| `useLoginFlow({ redirectTo, onPasswordLogin })` | `step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin` | `redirectTo: string`, `onPasswordLogin: (creds) => Promise<void>` |
 | `useForgotPasswordFlow()` | `email, error, isLoading, setEmail, handleSubmit` | none |
 | `useVerifyOtpFlow({ email, purpose, redirectTo })` | `otp, error, isLoading, isResending, resendCooldown, setOtp, handleSubmit, handleResendCode` | `email: string`, `purpose: 'login'\|'signup'\|'password-reset'` |
-| `useSetPasswordFlow({ redirectTo })` | `password, confirmPassword, error, isLoading, strength, setPassword, setConfirmPassword, handleSubmit` | `redirectTo: string` |
+| `useSetPasswordFlow({ redirectTo })` | `password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit` | `redirectTo?: string` |
 
 ### Service functions (`@main12/auth-login/client`)
 
@@ -766,7 +813,7 @@ The auth-login plugin uses `payload.sendEmail()` internally — which routes thr
 | Payload CMS | `^3.82.0` | ✅ |
 | Next.js | `^16.0.0` | ✅ |
 | React | `^19.0.0` | ✅ |
-| HeroUI | `^2.x` | Only for `style: 'hero-ui'` |
+| HeroUI | `>=3.2.0` | Only for `style: 'hero-ui'` |
 | Framer Motion | `^12.x` | Only for `style: 'hero-ui'` |
 
 ---

package/dist/components/AuthCard.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { DeepPartial, UiTranslations } from './ui/translations';
+import { type PoweredByConfig } from './auth-card/index';
+export interface AuthCardConfig {
+    logo?: React.ReactNode;
+    poweredBy?: PoweredByConfig;
+    cardClassName?: string;
+    removeBorder?: boolean;
+    removeShadow?: boolean;
+    mobileVariant?: 'plain' | 'card';
+}
+export interface AuthCardWithSlugProps extends AuthCardConfig {
+    slug: string | string[];
+    redirectTo?: string;
+    onPasswordLogin?: (credentials: {
+        email: string;
+        password: string;
+    }) => Promise<void>;
+    onSignup?: (data: {
+        name: string;
+        email: string;
+    }) => Promise<void>;
+    basePath?: string;
+    showGoogleOAuth?: boolean;
+    allowSignup?: boolean;
+    passwordLogin?: boolean;
+    otpLogin?: boolean;
+    locale?: string;
+    messages?: Record<string, DeepPartial<UiTranslations>>;
+    footer?: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+}
+export interface AuthCardWithChildrenProps extends AuthCardConfig {
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+}
+export type AuthCardProps = AuthCardWithSlugProps | AuthCardWithChildrenProps;
+export declare const AuthCard: React.FC<AuthCardProps>;

package/dist/components/AuthCard.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Suspense } from 'react';
+import { Spinner } from './ui/index.js';
+import { AuthCardShell, FormRenderer } from './auth-card/index.js';
+function hasSlug(props) {
+    return 'slug' in props && props.slug !== undefined;
+}
+export const AuthCard = (props)=>{
+    if (hasSlug(props)) {
+        return /*#__PURE__*/ _jsx(Suspense, {
+            fallback: /*#__PURE__*/ _jsx("div", {
+                className: "flex items-center justify-center py-12",
+                children: /*#__PURE__*/ _jsx(Spinner, {
+                    size: "lg"
+                })
+            }),
+            children: /*#__PURE__*/ _jsx(FormRenderer, {
+                ...props
+            })
+        });
+    }
+    const { children, ...shellProps } = props;
+    return /*#__PURE__*/ _jsx(AuthCardShell, {
+        ...shellProps,
+        children: children
+    });
+};

package/dist/components/AuthCardServer.d.ts

@@ -0,0 +1,29 @@
+import { type AuthCardWithSlugProps, type AuthCardWithChildrenProps } from './AuthCard';
+export type { AuthCardWithSlugProps, AuthCardWithChildrenProps };
+export type AuthCardProps = AuthCardWithSlugProps | AuthCardWithChildrenProps;
+/**
+ * Server component wrapper for AuthCard.
+ * Reads plugin config directly from the shared `pluginConfig` singleton
+ * (set by the plugin factory at Payload config build time) and passes it
+ * down to the client component. This ensures settings like `googleOAuthEnabled`,
+ * `allowSignup`, `passwordLogin`, and `otpLogin` work automatically without
+ * requiring explicit props.
+ *
+ * Locale is resolved per-request: an explicit `locale` prop always wins,
+ * otherwise it's auto-detected from the `NEXT_LOCALE` cookie or
+ * `Accept-Language` header.
+ *
+ * ```tsx
+ * // app/auth/login/page.tsx  (NO 'use client' needed!)
+ * import { AuthCard } from '@main12/auth-login/rsc'
+ * export default async function Page() {
+ *   return (
+ *     <AuthCard
+ *       slug="login"
+ *       logo={<Logo />}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare function AuthCard(props: AuthCardProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/AuthCardServer.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { AuthCard as AuthCardClient } from './AuthCard.js';
+import { getServerAllowSignup, getServerGoogleOAuthEnabled, pluginConfig } from '../config.js';
+import { detectServerLocale } from './ui/locale.js';
+// Use pluginConfig singleton directly - standard Payload plugin pattern
+/**
+ * Server component wrapper for AuthCard.
+ * Reads plugin config directly from the shared `pluginConfig` singleton
+ * (set by the plugin factory at Payload config build time) and passes it
+ * down to the client component. This ensures settings like `googleOAuthEnabled`,
+ * `allowSignup`, `passwordLogin`, and `otpLogin` work automatically without
+ * requiring explicit props.
+ *
+ * Locale is resolved per-request: an explicit `locale` prop always wins,
+ * otherwise it's auto-detected from the `NEXT_LOCALE` cookie or
+ * `Accept-Language` header.
+ *
+ * ```tsx
+ * // app/auth/login/page.tsx  (NO 'use client' needed!)
+ * import { AuthCard } from '@main12/auth-login/rsc'
+ * export default async function Page() {
+ *   return (
+ *     <AuthCard
+ *       slug="login"
+ *       logo={<Logo />}
+ *     />
+ *   )
+ * }
+ * ```
+ */ export async function AuthCard(props) {
+    // Check if it's a slug-based AuthCard
+    if ('slug' in props && props.slug !== undefined) {
+        const slugProps = props;
+        const resolvedLocale = slugProps.locale ?? detectServerLocale(await headers());
+        const resolvedAllowSignup = slugProps.allowSignup ?? getServerAllowSignup();
+        const basePath = slugProps.basePath?.replace(/\/$/, '') ?? '/auth';
+        // Redirect /signup to /login when signup is disabled
+        const currentSlug = Array.isArray(slugProps.slug) ? slugProps.slug[0] : slugProps.slug;
+        if (!resolvedAllowSignup && currentSlug === 'signup') {
+            redirect(`${basePath}/login`);
+        }
+        return /*#__PURE__*/ _jsx(AuthCardClient, {
+            ...slugProps,
+            showGoogleOAuth: slugProps.showGoogleOAuth ?? getServerGoogleOAuthEnabled(),
+            allowSignup: resolvedAllowSignup,
+            passwordLogin: slugProps.passwordLogin ?? pluginConfig.passwordLogin,
+            otpLogin: slugProps.otpLogin ?? pluginConfig.otpLogin,
+            locale: resolvedLocale
+        });
+    }
+    // Children-based AuthCard - just pass through
+    return /*#__PURE__*/ _jsx(AuthCardClient, {
+        ...props
+    });
+}

package/dist/components/AuthLayout.d.ts

@@ -1,18 +1,6 @@
 import React from 'react';
 import type { DeepPartial, UiTranslations } from './ui/translations';
 export interface AuthLayoutConfig {
-    /** Component or URL. Falls back to pluginConfig when omitted. */
-    logo?: React.ReactNode;
-    title?: string;
-    subtitle?: string;
-    poweredBy?: {
-        enabled?: boolean;
-        logoUrl?: string;
-        linkUrl?: string;
-        width?: number;
-        height?: number;
-    };
-    cardClassName?: string;
     backgroundClass?: string;
     /**
      * Locale for this page's copy. Built-in support for 'en' and 'es'.
@@ -25,6 +13,28 @@ export interface AuthLayoutConfig {
 }
 export interface AuthLayoutProps extends AuthLayoutConfig {
     children: React.ReactNode;
-    footer?: React.ReactNode;
 }
+/**
+ * The outermost auth page wrapper — background + full-height container only.
+ * Compose it with `<AuthCard>` (and any other elements, e.g. a split-screen
+ * image) for the actual content:
+ *
+ * ```tsx
+ * <AuthLayout backgroundClass="bg-accent">
+ *   <AuthCard title="Welcome Back">{children}</AuthCard>
+ * </AuthLayout>
+ * ```
+ *
+ * For split/left/right layouts, just wrap `<AuthCard>` in your own grid or
+ * flex container — `AuthCard` centers itself within whatever space it's given:
+ *
+ * ```tsx
+ * <AuthLayout backgroundClass="bg-white">
+ *   <div className="min-h-screen grid md:grid-cols-2">
+ *     <div className="hidden md:block bg-cover" style={{ backgroundImage: 'url(/hero.jpg)' }} />
+ *     <AuthCard removeShadow title="Create Account">{children}</AuthCard>
+ *   </div>
+ * </AuthLayout>
+ * ```
+ */
 export declare const AuthLayout: React.FC<AuthLayoutProps>;

package/dist/components/AuthLayout.js

@@ -1,92 +1,31 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Card, CardContent, CardFooter } from './ui/index.js';
-import { PoweredBy } from './PoweredBy.js';
-import { pluginConfig } from '../config.js';
-function DefaultLogo() {
-    if (pluginConfig.Logo) {
-        const L = pluginConfig.Logo;
-        return /*#__PURE__*/ _jsx(L, {});
-    }
-    if (pluginConfig.logoUrl) return /*#__PURE__*/ _jsx("img", {
-        src: pluginConfig.logoUrl,
-        alt: "",
-        width: 180,
-        height: 42,
-        className: "object-contain"
-    });
-    return null;
-}
-export const AuthLayout = ({ children, logo, title, subtitle, footer, poweredBy, cardClassName = '', backgroundClass = 'bg-accent' })=>{
-    const displayLogo = logo || /*#__PURE__*/ _jsx(DefaultLogo, {});
-    const header = (displayLogo || title) && /*#__PURE__*/ _jsxs("div", {
-        className: "flex flex-col items-center gap-2 pt-8 pb-4 px-8",
-        children: [
-            displayLogo && /*#__PURE__*/ _jsx("div", {
-                className: "flex justify-center mb-3",
-                children: displayLogo
-            }),
-            title && /*#__PURE__*/ _jsx("h1", {
-                className: "text-2xl font-bold text-gray-900 text-center tracking-tight",
-                children: title
-            }),
-            subtitle && /*#__PURE__*/ _jsx("p", {
-                className: "text-gray-600 text-sm text-center",
-                children: subtitle
-            })
-        ]
-    });
-    return /*#__PURE__*/ _jsxs("main", {
+/**
+ * The outermost auth page wrapper — background + full-height container only.
+ * Compose it with `<AuthCard>` (and any other elements, e.g. a split-screen
+ * image) for the actual content:
+ *
+ * ```tsx
+ * <AuthLayout backgroundClass="bg-accent">
+ *   <AuthCard title="Welcome Back">{children}</AuthCard>
+ * </AuthLayout>
+ * ```
+ *
+ * For split/left/right layouts, just wrap `<AuthCard>` in your own grid or
+ * flex container — `AuthCard` centers itself within whatever space it's given:
+ *
+ * ```tsx
+ * <AuthLayout backgroundClass="bg-white">
+ *   <div className="min-h-screen grid md:grid-cols-2">
+ *     <div className="hidden md:block bg-cover" style={{ backgroundImage: 'url(/hero.jpg)' }} />
+ *     <AuthCard removeShadow title="Create Account">{children}</AuthCard>
+ *   </div>
+ * </AuthLayout>
+ * ```
+ */ export const AuthLayout = ({ children, backgroundClass = 'bg-accent' })=>{
+    return /*#__PURE__*/ _jsx("main", {
         className: `flex flex-col min-h-screen ${backgroundClass}`,
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "md:hidden flex flex-col w-full max-w-md mx-auto light [color-scheme:light] px-4 py-8",
-                "data-theme": "light",
-                style: {
-                    maxWidth: '448px'
-                },
-                children: [
-                    header,
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "px-8 pb-6",
-                        children: children
-                    }),
-                    footer && /*#__PURE__*/ _jsx("div", {
-                        className: "px-8 pb-8 flex justify-center",
-                        children: footer
-                    }),
-                    /*#__PURE__*/ _jsx(PoweredBy, {
-                        ...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-md animate-[fadeIn_0.5s_ease-out]",
-                    style: {
-                        maxWidth: '448px'
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsxs(Card, {
-                            className: cardClassName,
-                            children: [
-                                header,
-                                /*#__PURE__*/ _jsx(CardContent, {
-                                    children: children
-                                }),
-                                footer && /*#__PURE__*/ _jsx(CardFooter, {
-                                    children: footer
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsx(PoweredBy, {
-                            ...poweredBy
-                        })
-                    ]
-                })
-            })
-        ]
+        children: children
     });
 };

package/dist/components/AuthPages.d.ts

@@ -1,48 +1,23 @@
-import type React from 'react';
 import type { DeepPartial, UiTranslations } from './ui/translations';
-export interface AuthPagesProps {
-    /** The slug segments from the catch-all route, e.g. ['login'] or ['forgot-password'] */
+import { type AuthLayoutConfig } from './AuthLayout';
+import { type AuthCardConfig } from './AuthCard';
+export interface AuthPagesProps extends AuthCardConfig, AuthLayoutConfig {
     slug?: string[];
-    /** Where to redirect after successful login / set-password */
     redirectTo?: string;
-    /** Optional logo component */
-    logo?: React.ReactNode;
-    /** Custom handler for password login (email+password). If omitted, uses default fetch to /api/users/login */
     onPasswordLogin?: (credentials: {
         email: string;
         password: string;
     }) => Promise<void>;
-    /** Custom handler for signup. If omitted, uses default fetch to /api/auth/signup */
     onSignup?: (data: {
         name: string;
         email: string;
     }) => Promise<void>;
-    /** Base path prefix, defaults to '/auth'. Used to compute sibling URLs. */
     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;
-    /**
-     * Locale for the auth pages' copy. Built-in support for 'en' and 'es'.
-     * If omitted, auto-detected from the `NEXT_LOCALE` cookie, `Accept-Language`
-     * header, or `<html lang>` — works automatically with next-intl,
-     * next-i18next, or no i18n library at all. Falls back to 'en'.
-     */
     locale?: string;
-    /**
-     * Partial translation overrides, keyed by locale. Any key you omit falls
-     * back to the built-in English/Spanish copy. You can also add entirely new
-     * locales this way (e.g. `messages={{ fr: { login: { title: 'Bienvenue' } } }}`).
-     */
     messages?: Record<string, DeepPartial<UiTranslations>>;
 }
-export default function AuthPages({ slug, redirectTo, logo, onPasswordLogin, onSignup, basePath, showGoogleOAuth, backgroundClass, style, allowSignup, passwordLogin, otpLogin, locale, messages, }: AuthPagesProps): import("react/jsx-runtime").JSX.Element;
+export default function AuthPages({ backgroundClass, slug, redirectTo, logo, onPasswordLogin, onSignup, basePath, showGoogleOAuth, allowSignup, passwordLogin, otpLogin, locale, messages, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant, }: AuthPagesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AuthPages.js

@@ -1,110 +1,28 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { pluginConfig, initClientConfig } from '../config.js';
-import { detectClientLocale } from './ui/locale.js';
-import LoginPage from './pages/LoginPage.js';
-import SignupPage from './pages/SignupPage.js';
-import ForgotPasswordPage from './pages/ForgotPasswordPage.js';
-import VerifyOtpPage from './pages/VerifyOtpPage.js';
-import SetPasswordPage from './pages/SetPasswordPage.js';
-const defaultPasswordLogin = async ({ email, password })=>{
-    const res = await fetch('/api/users/login', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            email,
-            password
+import { AuthLayout } from './AuthLayout.js';
+import { AuthCard } from './AuthCard.js';
+export default function AuthPages({ backgroundClass, slug, redirectTo = '/admin', logo, onPasswordLogin, onSignup, basePath = '/auth', showGoogleOAuth, allowSignup = true, passwordLogin = true, otpLogin = true, locale, messages, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant }) {
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        backgroundClass: backgroundClass,
+        children: /*#__PURE__*/ _jsx(AuthCard, {
+            slug: slug?.[0] ?? 'login',
+            redirectTo: redirectTo,
+            logo: logo,
+            onPasswordLogin: onPasswordLogin,
+            onSignup: onSignup,
+            basePath: basePath,
+            showGoogleOAuth: showGoogleOAuth,
+            allowSignup: allowSignup,
+            passwordLogin: passwordLogin,
+            otpLogin: otpLogin,
+            locale: locale,
+            messages: messages,
+            poweredBy: poweredBy,
+            cardClassName: cardClassName,
+            removeBorder: removeBorder,
+            removeShadow: removeShadow,
+            mobileVariant: mobileVariant
         })
     });
-    if (!res.ok) {
-        const err = await res.json();
-        throw new Error(err.errors?.[0]?.message || 'Login failed');
-    }
-};
-const defaultSignup = async ({ name, email })=>{
-    const res = await fetch('/api/auth/signup', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            name,
-            email
-        })
-    });
-    if (!res.ok) {
-        const err = await res.json();
-        throw new Error(err.message || 'Signup failed');
-    }
-};
-export default function AuthPages({ slug, redirectTo = '/admin', logo, onPasswordLogin = defaultPasswordLogin, onSignup = defaultSignup, basePath = '/auth', showGoogleOAuth, backgroundClass, style, allowSignup = true, passwordLogin = true, otpLogin = true, locale, messages }) {
-    // 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
-    });
-    // Resolve locale client-side only if the server didn't already resolve one
-    // (AuthPagesServer always resolves and passes an explicit locale down).
-    const resolvedLocale = locale ?? detectClientLocale();
-    const page = slug?.[0] ?? 'login';
-    const base = basePath.replace(/\/$/, '');
-    const shared = {
-        logo,
-        locale: resolvedLocale,
-        messages,
-        ...showGoogleOAuth !== undefined ? {
-            showGoogleOAuth
-        } : {},
-        ...backgroundClass !== undefined ? {
-            backgroundClass
-        } : {}
-    };
-    switch(page){
-        case 'login':
-            return /*#__PURE__*/ _jsx(LoginPage, {
-                onPasswordLogin: onPasswordLogin,
-                redirectTo: redirectTo,
-                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`,
-                ...shared
-            });
-        case 'forgot-password':
-            return /*#__PURE__*/ _jsx(ForgotPasswordPage, {
-                loginUrl: `${base}/login`,
-                ...shared
-            });
-        case 'verify-otp':
-            return /*#__PURE__*/ _jsx(VerifyOtpPage, {
-                loginUrl: `${base}/login`,
-                ...shared
-            });
-        case 'set-password':
-            return /*#__PURE__*/ _jsx(SetPasswordPage, {
-                redirectTo: redirectTo,
-                ...shared
-            });
-        default:
-            return /*#__PURE__*/ _jsx(LoginPage, {
-                onPasswordLogin: onPasswordLogin,
-                redirectTo: redirectTo,
-                signupUrl: `${base}/signup`,
-                ...shared
-            });
-    }
 }

package/dist/components/AuthPagesServer.d.ts

@@ -2,10 +2,9 @@ import type { AuthPagesProps } from './AuthPages';
 export type { AuthPagesProps };
 /**
  * Server component wrapper for AuthPages.
- * Reads plugin config directly from the shared `pluginConfig` singleton
- * (set by the plugin factory at Payload config build time) and passes it
- * down to the client component. No env vars involved — the plugin's
- * `style`, `googleOAuthEnabled`, etc. options are the single source of truth.
+ * Reads plugin config from environment variables set during plugin initialization,
+ * ensuring the correct settings are used even in linked monorepo setups where
+ * module singletons may not be shared across entry points.
  *
  * Locale is resolved per-request: an explicit `locale` prop always wins,
  * otherwise it's auto-detected from the `NEXT_LOCALE` cookie or