@main12/auth-login 0.3.1 → 0.3.3

package/README.md

@@ -31,6 +31,10 @@ plugins: [
 - **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
 
 ---
@@ -45,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
@@ -70,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 } },
       ],
     },
   ],
@@ -88,6 +103,8 @@ export default buildConfig({
 })
 ```
 
+> **Note:** OTP data is stored in a hidden `auth-otps` collection that the plugin registers automatically. No OTP fields needed on your `users` collection.
+
 ### 2. Create the catch-all auth route (1 file)
 
 ```tsx
@@ -141,6 +158,10 @@ authLoginPlugin({
   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:
@@ -151,6 +172,7 @@ authLoginPlugin({
     google: {
       clientId: process.env.GOOGLE_CLIENT_ID,
       clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+      prompt: 'select_account',   // Always show account picker (default)
     },
   },
 })
@@ -192,6 +214,37 @@ That's it. No extra packages to install, no extra plugins to configure.
 | `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

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

@@ -56,6 +56,15 @@ import { pluginConfig } from '../../../config.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/components/AuthLayout.js

@@ -41,7 +41,11 @@ 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 light [color-scheme:light]",
+                "data-theme": "light",
+                style: {
+                    maxWidth: '400px'
+                },
                 children: [
                     header,
                     /*#__PURE__*/ _jsx("div", {
@@ -60,7 +64,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

@@ -26,5 +26,9 @@ export interface AuthPagesProps {
     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, backgroundClass, style, allowSignup, }: 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

@@ -38,11 +38,13 @@ 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, backgroundClass, style, allowSignup = true }) {
+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
+        googleOAuthEnabled: showGoogleOAuth ?? pluginConfig.googleOAuthEnabled,
+        passwordLogin,
+        otpLogin
     });
     const page = slug?.[0] ?? 'login';
     const base = basePath.replace(/\/$/, '');

package/dist/components/AuthPagesServer.js

@@ -17,10 +17,14 @@ import AuthPagesClient from './AuthPages.js';
     const googleOAuthEnabled = process.env.AUTH_PLUGIN_GOOGLE_OAUTH === 'true';
     const style = process.env.AUTH_PLUGIN_STYLE || 'tailwind';
     const allowSignup = process.env.AUTH_PLUGIN_ALLOW_SIGNUP !== 'false';
+    const passwordLogin = process.env.AUTH_PLUGIN_PASSWORD_LOGIN !== 'false';
+    const otpLogin = process.env.AUTH_PLUGIN_OTP_LOGIN !== 'false';
     return /*#__PURE__*/ _jsx(AuthPagesClient, {
         ...props,
         showGoogleOAuth: props.showGoogleOAuth ?? googleOAuthEnabled,
         style: props.style ?? style,
-        allowSignup: props.allowSignup ?? allowSignup
+        allowSignup: props.allowSignup ?? allowSignup,
+        passwordLogin: passwordLogin,
+        otpLogin: otpLogin
     });
 }

package/dist/components/ui/index.js

@@ -51,7 +51,11 @@ export const Input = ({ type = 'text', label, value, onChange, onValueChange, is
         ]
     });
 export const Card = ({ children, className = '' })=>/*#__PURE__*/ _jsx("div", {
-        className: `bg-white rounded-2xl shadow-2xl ${className}`,
+        className: `bg-white text-gray-900 rounded-2xl shadow-2xl w-full light [color-scheme:light] ${className}`,
+        "data-theme": "light",
+        style: {
+            maxWidth: '400px'
+        },
         children: children
     });
 export const CardHeader = ({ children, className = '' })=>/*#__PURE__*/ _jsx("div", {

package/dist/index.d.ts

@@ -11,6 +11,14 @@ export interface GoogleOAuthConfig {
     successRedirect?: string;
     /** Where to redirect after failed Google login. Defaults to '/login?error=Google login failed' */
     failureRedirect?: string;
+    /**
+     * Google OAuth prompt behavior.
+     * - 'select_account' — always show account picker (recommended)
+     * - 'consent' — prompt for consent every time
+     * - 'none' — no prompt, use existing session
+     * @default 'select_account'
+     */
+    prompt?: 'select_account' | 'consent' | 'none';
 }
 export interface AuthProvidersConfig {
     google?: GoogleOAuthConfig | boolean;

package/dist/index.js

@@ -138,6 +138,7 @@ export const authLoginPlugin = (options = {})=>async (config)=>{
                 ],
                 authorizePath: '/oauth/google',
                 callbackPath: '/oauth/google/callback',
+                prompt: googleOpts.prompt || 'select_account',
                 getUserInfo: async (accessToken)=>{
                     const response = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
                         headers: {

package/dist/proxy.js

@@ -35,6 +35,19 @@ const AUTH_ROUTES = [
             return NextResponse.next();
         }
         const { pathname } = request.nextUrl;
+        // If user is already logged in, redirect away from auth pages (login, signup, etc.)
+        const token = request.cookies.get('payload-token')?.value;
+        if (token) {
+            const segment = pathname.replace(/^\//, '').replace(/\/$/, '');
+            const isAuthPage = routeSet.has(segment) || routeSet.has(pathname.replace(`${base}/`, ''));
+            if (isAuthPage || pathname.startsWith(`${base}/login`) || pathname.startsWith(`${base}/signup`)) {
+                const redirect = request.nextUrl.searchParams.get('redirect') || '/';
+                const url = request.nextUrl.clone();
+                url.pathname = redirect;
+                url.search = '';
+                return NextResponse.redirect(url);
+            }
+        }
         // Always redirect /admin/login to the plugin login page
         if (pathname === '/admin/login' || pathname === '/admin/login/') {
             const url = request.nextUrl.clone();
@@ -58,6 +71,7 @@ export const config = {
         '/signup',
         '/forgot-password',
         '/verify-otp',
-        '/set-password'
+        '/set-password',
+        '/auth/:path*'
     ]
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@main12/auth-login",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Reusable Payload CMS auth plugin — login, signup, OTP, forgot password, branded emails, Powered by Main12",
   "license": "MIT",
   "type": "module",
@@ -19,11 +19,6 @@
       "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": "./dist/index.js",
@@ -31,21 +26,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "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}",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
-    "dev": "next dev dev --turbo",
-    "dev:generate-importmap": "pnpm dev:payload generate:importmap",
-    "dev:generate-types": "pnpm dev:payload generate:types",
-    "dev:payload": "cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload",
-    "lint": "eslint",
-    "lint:fix": "eslint ./src --fix",
-    "test": "vitest"
-  },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
     "@heroui/react": "^3.2.2",
@@ -95,39 +75,26 @@
   "engines": {
     "node": ">=18.20.2"
   },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "import": "./dist/index.js",
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "./client": {
-        "import": "./dist/exports/client.js",
-        "types": "./dist/exports/client.d.ts",
-        "default": "./dist/exports/client.js"
-      },
-      "./rsc": {
-        "import": "./dist/exports/rsc.js",
-        "types": "./dist/exports/rsc.d.ts",
-        "default": "./dist/exports/rsc.js"
-      }
-    },
-    "main": "./dist/index.js",
-    "types": "./dist/index.d.ts"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@swc/core",
-      "sharp",
-      "esbuild"
-    ]
-  },
   "registry": "https://registry.npmjs.org/",
   "dependencies": {
     "@main12/brevo-adapter": "^0.1.1",
     "axios": "^1.20.0",
     "jose": "^6.2.12",
     "payload-oauth2": "^1.0.21"
+  },
+  "scripts": {
+    "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}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "dev": "next dev dev --turbo",
+    "dev:generate-importmap": "pnpm dev:payload generate:importmap",
+    "dev:generate-types": "pnpm dev:payload generate:types",
+    "dev:payload": "cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload",
+    "lint": "eslint",
+    "lint:fix": "eslint ./src --fix",
+    "test": "vitest"
   }
-}
+}