@delmaredigital/payload-better-auth 0.7.3 → 0.7.5

package/dist/components/LoginView.d.ts

@@ -52,6 +52,28 @@ export type LoginViewProps = {
      * The reset token will be appended as ?token=xxx
      */
     resetPasswordUrl?: string;
+    /**
+     * Enable email + password sign-in.
+     * - true: Always show the password field
+     * - false: Hide the password field (passwordless-only)
+     * - 'auto' (default): Auto-detect via the /sign-in/email endpoint
+     */
+    enablePassword?: boolean | 'auto';
+    /**
+     * Enable magic-link sign-in ("email me a link").
+     * - true / false / 'auto' (default: auto-detect via /sign-in/magic-link)
+     */
+    enableMagicLink?: boolean | 'auto';
+    /**
+     * Enable email-OTP sign-in ("email me a code").
+     * - true / false / 'auto' (default: auto-detect via /email-otp/send-verification-otp)
+     */
+    enableEmailOtp?: boolean | 'auto';
+    /**
+     * Where the emailed magic link returns after verification.
+     * Default: afterLoginPath
+     */
+    magicLinkCallbackURL?: string;
 };
-export declare function LoginView({ authClient: providedClient, logo, title, afterLoginPath, requiredRole, requireAllRoles, enablePasskey, enableSignUp, defaultSignUpRole, enableForgotPassword, resetPasswordUrl, }: LoginViewProps): import("react").JSX.Element;
+export declare function LoginView({ authClient: providedClient, logo, title, afterLoginPath, requiredRole, requireAllRoles, enablePasskey, enableSignUp, defaultSignUpRole, enableForgotPassword, resetPasswordUrl, enablePassword, enableMagicLink, enableEmailOtp, magicLinkCallbackURL, }: LoginViewProps): import("react").JSX.Element;
 export default LoginView;

package/dist/components/LoginView.js

@@ -3,8 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation.js';
 import { createAuthClient } from 'better-auth/react';
-import { twoFactorClient } from 'better-auth/client/plugins';
+import { twoFactorClient, magicLinkClient, emailOTPClient } from 'better-auth/client/plugins';
 import { hasAnyRole, hasAllRoles } from '../utils/access.js';
+import { resolveAvailability, pickPrimaryMethod } from '../utils/loginMethods.js';
 import { useConfig } from '@payloadcms/ui';
 /**
  * Check if user has the required role(s)
@@ -21,7 +22,7 @@ import { useConfig } from '@payloadcms/ui';
     }
     return hasAnyRole(user, roles);
 }
-export function LoginView({ authClient: providedClient, logo, title = 'Login', afterLoginPath = '/admin', requiredRole = 'admin', requireAllRoles = false, enablePasskey = 'auto', enableSignUp = 'auto', defaultSignUpRole = 'user', enableForgotPassword = 'auto', resetPasswordUrl }) {
+export function LoginView({ authClient: providedClient, logo, title = 'Login', afterLoginPath = '/admin', requiredRole = 'admin', requireAllRoles = false, enablePasskey = 'auto', enableSignUp = 'auto', defaultSignUpRole = 'user', enableForgotPassword = 'auto', resetPasswordUrl, enablePassword = 'auto', enableMagicLink = 'auto', enableEmailOtp = 'auto', magicLinkCallbackURL }) {
     const router = useRouter();
     // Payload Config
     const { config: { routes: { admin: adminRoute, api: apiRoute } } } = useConfig();
@@ -43,6 +44,15 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
     const [passkeyAvailable, setPasskeyAvailable] = useState(enablePasskey === true);
     const [signUpAvailable, setSignUpAvailable] = useState(enableSignUp === true);
     const [forgotPasswordAvailable, setForgotPasswordAvailable] = useState(enableForgotPassword === true);
+    // Probe results for the new methods (null = not yet probed).
+    // Password is optimistic (shown until a 404 proves the strategy is disabled);
+    // magic-link and email-OTP stay hidden until a probe confirms availability.
+    const [passwordProbe, setPasswordProbe] = useState(true);
+    const [magicLinkProbe, setMagicLinkProbe] = useState(null);
+    const [emailOtpProbe, setEmailOtpProbe] = useState(null);
+    // Email-OTP code entry state
+    const [otp, setOtp] = useState('');
+    const [otpLoading, setOtpLoading] = useState(false);
     // Two-factor authentication state
     const [totpCode, setTotpCode] = useState('');
     const [totpLoading, setTotpLoading] = useState(false);
@@ -55,6 +65,8 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
         clientRef.current = createAuthClient({
             plugins: [
                 twoFactorClient(),
+                magicLinkClient(),
+                emailOTPClient(),
                 passkeyClient()
             ]
         });
@@ -150,6 +162,54 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
     }, [
         enableForgotPassword
     ]);
+    // Auto-detect password (email) sign-in availability if set to 'auto'
+    useEffect(()=>{
+        if (enablePassword !== 'auto') return;
+        fetch(`${apiRoute}/auth/sign-in/email`, {
+            method: 'OPTIONS',
+            credentials: 'include'
+        }).then((res)=>setPasswordProbe(res.status !== 404)).catch(()=>setPasswordProbe(true)); // core method: assume available on probe error
+    }, [
+        enablePassword
+    ]);
+    // Auto-detect magic-link availability if set to 'auto'
+    useEffect(()=>{
+        if (enableMagicLink !== 'auto') return;
+        fetch(`${apiRoute}/auth/sign-in/magic-link`, {
+            method: 'OPTIONS',
+            credentials: 'include'
+        }).then((res)=>setMagicLinkProbe(res.status !== 404)).catch(()=>setMagicLinkProbe(false)); // optional method: assume unavailable on error
+    }, [
+        enableMagicLink
+    ]);
+    // Auto-detect email-OTP availability if set to 'auto'
+    useEffect(()=>{
+        if (enableEmailOtp !== 'auto') return;
+        fetch(`${apiRoute}/auth/email-otp/send-verification-otp`, {
+            method: 'OPTIONS',
+            credentials: 'include'
+        }).then((res)=>setEmailOtpProbe(res.status !== 404)).catch(()=>setEmailOtpProbe(false));
+    }, [
+        enableEmailOtp
+    ]);
+    /**
+   * Shared post-authentication tail: re-fetch the session for complete user data
+   * (e.g. roles applied by hooks), enforce the role gate, and redirect on success.
+   * Returns the outcome so each caller can reset its own loading flag / show its own
+   * "no session" message.
+   */ async function completeSignIn(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    client) {
+        const sessionResult = await client.getSession();
+        if (!sessionResult.data?.user) return 'noSession';
+        const user = sessionResult.data.user;
+        if (!checkUserRoles(user, requiredRole, requireAllRoles)) {
+            setAccessDenied(true);
+            return 'accessDenied';
+        }
+        router.push(afterLoginPath);
+        router.refresh();
+        return 'redirected';
+    }
     async function handleSubmit(e) {
         e.preventDefault();
         setLoading(true);
@@ -174,15 +234,13 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
                 return;
             }
             if (result.data?.user) {
-                const user = result.data.user;
-                // Check role if required
-                if (!checkUserRoles(user, requiredRole, requireAllRoles)) {
-                    setAccessDenied(true);
+                const outcome = await completeSignIn(client);
+                if (outcome === 'noSession') {
+                    setError('Sign-in succeeded but session could not be verified');
+                    setLoading(false);
+                } else if (outcome === 'accessDenied') {
                     setLoading(false);
-                    return;
                 }
-                router.push(afterLoginPath);
-                router.refresh();
             }
         } catch  {
             setError('An error occurred. Please try again.');
@@ -221,20 +279,15 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
             }
             // Registration successful - either auto-signed in or need to verify email
             if (result.data?.user) {
-                // Re-fetch session to get updated user data (role may have been changed by hooks)
-                // This handles cases like firstUserAdmin where the role is set after creation
-                const sessionResult = await client.getSession();
-                if (sessionResult.data?.user) {
-                    const user = sessionResult.data.user;
-                    // Check role if required
-                    if (!checkUserRoles(user, requiredRole, requireAllRoles)) {
-                        setAccessDenied(true);
-                        setLoading(false);
-                        return;
-                    }
+                // Re-fetch session via completeSignIn to pick up hook-applied roles
+                // (e.g. firstUserAdmin sets the role after creation).
+                const outcome = await completeSignIn(client);
+                if (outcome === 'noSession') {
+                    setError('Account created but session could not be verified. Please sign in.');
+                    setLoading(false);
+                } else if (outcome === 'accessDenied') {
+                    setLoading(false);
                 }
-                router.push(afterLoginPath);
-                router.refresh();
             } else {
                 // Likely requires email verification - show success and switch to login
                 setSuccessMessage('Account created! Please check your email to verify your account.');
@@ -286,21 +339,15 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
                 setTotpLoading(false);
                 return;
             }
-            // Verify-totp may not return all user fields (like custom 'role')
-            // Fetch the session to get complete user data for role check
-            if (requiredRole) {
-                const sessionResult = await client.getSession();
-                if (sessionResult.data?.user) {
-                    const user = sessionResult.data.user;
-                    if (!checkUserRoles(user, requiredRole, requireAllRoles)) {
-                        setAccessDenied(true);
-                        setTotpLoading(false);
-                        return;
-                    }
-                }
+            // verify-totp may not return all user fields (e.g. custom 'role');
+            // completeSignIn re-fetches the session for the role gate.
+            const outcome = await completeSignIn(client);
+            if (outcome === 'noSession') {
+                setError('Sign-in succeeded but session could not be verified');
+                setTotpLoading(false);
+            } else if (outcome === 'accessDenied') {
+                setTotpLoading(false);
             }
-            router.push(afterLoginPath);
-            router.refresh();
         } catch  {
             setError('An error occurred. Please try again.');
             setTotpLoading(false);
@@ -314,6 +361,7 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
         if (newView === 'login') {
             setTotpCode('');
             setConfirmPassword('');
+            setOtp('');
         } else if (newView === 'register') {
             setPassword('');
             setConfirmPassword('');
@@ -337,23 +385,14 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
                 setPasskeyLoading(false);
                 return;
             }
-            // Passkey sign-in succeeded - fetch session to get full user data (including role)
-            // This is more reliable than checking result.data.user which may vary by SDK version
-            const sessionResult = await client.getSession();
-            if (sessionResult.data?.user) {
-                const user = sessionResult.data.user;
-                // Check role if required
-                if (!checkUserRoles(user, requiredRole, requireAllRoles)) {
-                    setAccessDenied(true);
-                    setPasskeyLoading(false);
-                    return;
-                }
-                router.push(afterLoginPath);
-                router.refresh();
-            } else {
-                // Session fetch failed - shouldn't happen after successful passkey auth
+            // Passkey sign-in succeeded - completeSignIn re-fetches the session for full
+            // user data (including role), more reliable than result.data.user across SDK versions.
+            const outcome = await completeSignIn(client);
+            if (outcome === 'noSession') {
                 setError('Authentication succeeded but session could not be verified');
                 setPasskeyLoading(false);
+            } else if (outcome === 'accessDenied') {
+                setPasskeyLoading(false);
             }
         } catch (err) {
             if (err instanceof Error && err.name === 'NotAllowedError') {
@@ -364,6 +403,88 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
             setPasskeyLoading(false);
         }
     }
+    async function handleSendMagicLink(e) {
+        e?.preventDefault();
+        if (!email) {
+            setError('Please enter your email address first');
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        setSuccessMessage(null);
+        try {
+            const client = await getClient();
+            const result = await client.signIn.magicLink({
+                email,
+                callbackURL: magicLinkCallbackURL ?? afterLoginPath
+            });
+            if (result.error) {
+                setError(result.error.message ?? 'Failed to send sign-in link');
+                setLoading(false);
+                return;
+            }
+            setViewMode('magicLinkSent');
+            setLoading(false);
+        } catch  {
+            setError('An error occurred. Please try again.');
+            setLoading(false);
+        }
+    }
+    async function handleSendEmailOtp(e) {
+        e?.preventDefault();
+        if (!email) {
+            setError('Please enter your email address first');
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        setSuccessMessage(null);
+        try {
+            const client = await getClient();
+            const result = await client.emailOtp.sendVerificationOtp({
+                email,
+                type: 'sign-in'
+            });
+            if (result.error) {
+                setError(result.error.message ?? 'Failed to send verification code');
+                setLoading(false);
+                return;
+            }
+            setOtp('');
+            setViewMode('emailOtp');
+            setLoading(false);
+        } catch  {
+            setError('An error occurred. Please try again.');
+            setLoading(false);
+        }
+    }
+    async function handleVerifyEmailOtp(e) {
+        e.preventDefault();
+        setOtpLoading(true);
+        setError(null);
+        try {
+            const client = await getClient();
+            const result = await client.signIn.emailOtp({
+                email,
+                otp
+            });
+            if (result.error) {
+                setError(result.error.message ?? 'Invalid verification code');
+                setOtpLoading(false);
+                return;
+            }
+            const outcome = await completeSignIn(client);
+            if (outcome === 'noSession') {
+                setError('Sign-in succeeded but session could not be verified');
+                setOtpLoading(false);
+            } else if (outcome === 'accessDenied') {
+                setOtpLoading(false);
+            }
+        } catch  {
+            setError('An error occurred. Please try again.');
+            setOtpLoading(false);
+        }
+    }
     async function handleSignOut() {
         const client = await getClient();
         await client.signOut();
@@ -592,6 +713,156 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
             })
         });
     }
+    // Email-OTP code entry view
+    if (viewMode === 'emailOtp') {
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
+                minHeight: '100vh',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'var(--theme-bg)',
+                padding: 'var(--base)'
+            },
+            children: /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    background: 'var(--theme-elevation-50)',
+                    padding: 'calc(var(--base) * 2)',
+                    borderRadius: 'var(--style-radius-m)',
+                    boxShadow: '0 2px 20px rgba(0, 0, 0, 0.1)',
+                    width: '100%',
+                    maxWidth: '400px'
+                },
+                children: [
+                    logo && /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            textAlign: 'center',
+                            marginBottom: 'calc(var(--base) * 1.5)'
+                        },
+                        children: logo
+                    }),
+                    /*#__PURE__*/ _jsx("h1", {
+                        style: {
+                            color: 'var(--theme-text)',
+                            fontSize: 'var(--font-size-h3)',
+                            fontWeight: 600,
+                            margin: '0 0 calc(var(--base) * 0.5) 0',
+                            textAlign: 'center'
+                        },
+                        children: "Enter Your Code"
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        style: {
+                            color: 'var(--theme-text)',
+                            opacity: 0.7,
+                            fontSize: 'var(--font-size-small)',
+                            textAlign: 'center',
+                            marginBottom: 'calc(var(--base) * 1.5)'
+                        },
+                        children: [
+                            "We've sent a verification code to ",
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: email
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("form", {
+                        onSubmit: handleVerifyEmailOtp,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    marginBottom: 'calc(var(--base) * 1.5)'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        htmlFor: "email-otp-code",
+                                        style: {
+                                            display: 'block',
+                                            color: 'var(--theme-text)',
+                                            marginBottom: 'calc(var(--base) * 0.5)',
+                                            fontSize: 'var(--font-size-small)',
+                                            fontWeight: 500
+                                        },
+                                        children: "Verification Code"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        id: "email-otp-code",
+                                        type: "text",
+                                        inputMode: "numeric",
+                                        autoComplete: "one-time-code",
+                                        value: otp,
+                                        onChange: (e)=>setOtp(e.target.value.replace(/\D/g, '').slice(0, 6)),
+                                        required: true,
+                                        placeholder: "000000",
+                                        style: {
+                                            width: '100%',
+                                            padding: 'calc(var(--base) * 0.75)',
+                                            background: 'var(--theme-input-bg)',
+                                            border: '1px solid var(--theme-elevation-150)',
+                                            borderRadius: 'var(--style-radius-s)',
+                                            color: 'var(--theme-text)',
+                                            fontSize: 'var(--font-size-h4)',
+                                            fontFamily: 'monospace',
+                                            textAlign: 'center',
+                                            letterSpacing: '0.5em',
+                                            outline: 'none',
+                                            boxSizing: 'border-box'
+                                        }
+                                    })
+                                ]
+                            }),
+                            error && /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    color: 'var(--theme-error-500)',
+                                    marginBottom: 'var(--base)',
+                                    fontSize: 'var(--font-size-small)',
+                                    padding: 'calc(var(--base) * 0.5)',
+                                    background: 'var(--theme-error-50)',
+                                    borderRadius: 'var(--style-radius-s)',
+                                    border: '1px solid var(--theme-error-200)'
+                                },
+                                children: error
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "submit",
+                                disabled: otpLoading || otp.length !== 6,
+                                style: {
+                                    width: '100%',
+                                    padding: 'calc(var(--base) * 0.75)',
+                                    background: 'var(--theme-elevation-800)',
+                                    border: 'none',
+                                    borderRadius: 'var(--style-radius-s)',
+                                    color: 'var(--theme-elevation-50)',
+                                    fontSize: 'var(--font-size-base)',
+                                    fontWeight: 500,
+                                    cursor: otpLoading || otp.length !== 6 ? 'not-allowed' : 'pointer',
+                                    opacity: otpLoading || otp.length !== 6 ? 0.7 : 1,
+                                    transition: 'opacity 150ms ease'
+                                },
+                                children: otpLoading ? 'Verifying...' : 'Verify'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleBackToLogin,
+                        style: {
+                            width: '100%',
+                            marginTop: 'var(--base)',
+                            padding: 'calc(var(--base) * 0.5)',
+                            background: 'transparent',
+                            border: 'none',
+                            color: 'var(--theme-text)',
+                            opacity: 0.7,
+                            fontSize: 'var(--font-size-small)',
+                            cursor: 'pointer'
+                        },
+                        children: "← Back to login"
+                    })
+                ]
+            })
+        });
+    }
     // Registration view
     if (viewMode === 'register') {
         return /*#__PURE__*/ _jsx("div", {
@@ -1076,6 +1347,129 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
             })
         });
     }
+    // Magic-link sent confirmation view
+    if (viewMode === 'magicLinkSent') {
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
+                minHeight: '100vh',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'var(--theme-bg)',
+                padding: 'var(--base)'
+            },
+            children: /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    background: 'var(--theme-elevation-50)',
+                    padding: 'calc(var(--base) * 2)',
+                    borderRadius: 'var(--style-radius-m)',
+                    boxShadow: '0 2px 20px rgba(0, 0, 0, 0.1)',
+                    width: '100%',
+                    maxWidth: '400px',
+                    textAlign: 'center'
+                },
+                children: [
+                    logo && /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            marginBottom: 'calc(var(--base) * 1.5)'
+                        },
+                        children: logo
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            width: '64px',
+                            height: '64px',
+                            background: 'var(--theme-success-100)',
+                            borderRadius: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            margin: '0 auto calc(var(--base) * 1.5)',
+                            fontSize: '28px'
+                        },
+                        children: "✉"
+                    }),
+                    /*#__PURE__*/ _jsx("h1", {
+                        style: {
+                            color: 'var(--theme-text)',
+                            fontSize: 'var(--font-size-h3)',
+                            fontWeight: 600,
+                            margin: '0 0 calc(var(--base) * 0.5) 0'
+                        },
+                        children: "Check Your Email"
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        style: {
+                            color: 'var(--theme-text)',
+                            opacity: 0.7,
+                            fontSize: 'var(--font-size-small)',
+                            marginBottom: 'calc(var(--base) * 1.5)'
+                        },
+                        children: [
+                            "We've sent a sign-in link to ",
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: email
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleBackToLogin,
+                        style: {
+                            padding: 'calc(var(--base) * 0.75) calc(var(--base) * 1.5)',
+                            background: 'var(--theme-elevation-150)',
+                            border: 'none',
+                            borderRadius: 'var(--style-radius-s)',
+                            color: 'var(--theme-text)',
+                            fontSize: 'var(--font-size-base)',
+                            cursor: 'pointer'
+                        },
+                        children: "Back to login"
+                    })
+                ]
+            })
+        });
+    }
+    // Resolve which methods are available and which owns the primary action
+    const passwordAvailable = resolveAvailability(enablePassword, passwordProbe);
+    const magicLinkAvailable = resolveAvailability(enableMagicLink, magicLinkProbe);
+    const emailOtpAvailable = resolveAvailability(enableEmailOtp, emailOtpProbe);
+    const primaryMethod = pickPrimaryMethod({
+        password: passwordAvailable,
+        magicLink: magicLinkAvailable,
+        emailOtp: emailOtpAvailable
+    });
+    const primarySubmit = primaryMethod === 'magicLink' ? handleSendMagicLink : primaryMethod === 'emailOtp' ? handleSendEmailOtp : handleSubmit;
+    const primaryLabel = loading ? primaryMethod === 'password' ? 'Signing in...' : 'Sending...' : primaryMethod === 'magicLink' ? 'Email me a link' : primaryMethod === 'emailOtp' ? 'Email me a code' : 'Sign In';
+    // Secondary methods shown under the "or" divider (available but not the primary)
+    const secondaryMethods = [];
+    if (passkeyAvailable) {
+        secondaryMethods.push({
+            key: 'passkey',
+            icon: '🔐',
+            label: passkeyLoading ? 'Authenticating...' : 'Sign in with Passkey',
+            onClick: handlePasskeySignIn,
+            busy: passkeyLoading
+        });
+    }
+    if (magicLinkAvailable && primaryMethod !== 'magicLink') {
+        secondaryMethods.push({
+            key: 'magicLink',
+            icon: '✉',
+            label: 'Email me a link',
+            onClick: ()=>handleSendMagicLink(),
+            busy: false
+        });
+    }
+    if (emailOtpAvailable && primaryMethod !== 'emailOtp') {
+        secondaryMethods.push({
+            key: 'emailOtp',
+            icon: '#️⃣',
+            label: 'Email me a code',
+            onClick: ()=>handleSendEmailOtp(),
+            busy: false
+        });
+    }
     // Main login view
     return /*#__PURE__*/ _jsx("div", {
         style: {
@@ -1126,7 +1520,7 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
                     children: successMessage
                 }),
                 /*#__PURE__*/ _jsxs("form", {
-                    onSubmit: handleSubmit,
+                    onSubmit: primarySubmit,
                     children: [
                         /*#__PURE__*/ _jsxs("div", {
                             style: {
@@ -1165,64 +1559,68 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            style: {
-                                marginBottom: 'var(--base)'
-                            },
+                        passwordAvailable && /*#__PURE__*/ _jsxs(_Fragment, {
                             children: [
-                                /*#__PURE__*/ _jsx("label", {
-                                    htmlFor: "password",
+                                /*#__PURE__*/ _jsxs("div", {
                                     style: {
-                                        display: 'block',
-                                        color: 'var(--theme-text)',
-                                        marginBottom: 'calc(var(--base) * 0.5)',
-                                        fontSize: 'var(--font-size-small)',
-                                        fontWeight: 500
+                                        marginBottom: 'var(--base)'
                                     },
-                                    children: "Password"
+                                    children: [
+                                        /*#__PURE__*/ _jsx("label", {
+                                            htmlFor: "password",
+                                            style: {
+                                                display: 'block',
+                                                color: 'var(--theme-text)',
+                                                marginBottom: 'calc(var(--base) * 0.5)',
+                                                fontSize: 'var(--font-size-small)',
+                                                fontWeight: 500
+                                            },
+                                            children: "Password"
+                                        }),
+                                        /*#__PURE__*/ _jsx("input", {
+                                            id: "password",
+                                            type: "password",
+                                            value: password,
+                                            onChange: (e)=>setPassword(e.target.value),
+                                            required: true,
+                                            autoComplete: "current-password",
+                                            style: {
+                                                width: '100%',
+                                                padding: 'calc(var(--base) * 0.75)',
+                                                background: 'var(--theme-input-bg)',
+                                                border: '1px solid var(--theme-elevation-150)',
+                                                borderRadius: 'var(--style-radius-s)',
+                                                color: 'var(--theme-text)',
+                                                fontSize: 'var(--font-size-base)',
+                                                outline: 'none',
+                                                boxSizing: 'border-box'
+                                            }
+                                        })
+                                    ]
                                 }),
-                                /*#__PURE__*/ _jsx("input", {
-                                    id: "password",
-                                    type: "password",
-                                    value: password,
-                                    onChange: (e)=>setPassword(e.target.value),
-                                    required: true,
-                                    autoComplete: "current-password",
+                                forgotPasswordAvailable && /*#__PURE__*/ _jsx("div", {
                                     style: {
-                                        width: '100%',
-                                        padding: 'calc(var(--base) * 0.75)',
-                                        background: 'var(--theme-input-bg)',
-                                        border: '1px solid var(--theme-elevation-150)',
-                                        borderRadius: 'var(--style-radius-s)',
-                                        color: 'var(--theme-text)',
-                                        fontSize: 'var(--font-size-base)',
-                                        outline: 'none',
-                                        boxSizing: 'border-box'
-                                    }
+                                        marginBottom: 'calc(var(--base) * 1.5)',
+                                        textAlign: 'right'
+                                    },
+                                    children: /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>switchView('forgotPassword'),
+                                        style: {
+                                            background: 'none',
+                                            border: 'none',
+                                            color: 'var(--theme-text)',
+                                            opacity: 0.7,
+                                            cursor: 'pointer',
+                                            fontSize: 'var(--font-size-small)',
+                                            padding: 0,
+                                            textDecoration: 'underline'
+                                        },
+                                        children: "Forgot password?"
+                                    })
                                 })
                             ]
                         }),
-                        forgotPasswordAvailable && /*#__PURE__*/ _jsx("div", {
-                            style: {
-                                marginBottom: 'calc(var(--base) * 1.5)',
-                                textAlign: 'right'
-                            },
-                            children: /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>switchView('forgotPassword'),
-                                style: {
-                                    background: 'none',
-                                    border: 'none',
-                                    color: 'var(--theme-text)',
-                                    opacity: 0.7,
-                                    cursor: 'pointer',
-                                    fontSize: 'var(--font-size-small)',
-                                    padding: 0,
-                                    textDecoration: 'underline'
-                                },
-                                children: "Forgot password?"
-                            })
-                        }),
                         error && /*#__PURE__*/ _jsx("div", {
                             style: {
                                 color: 'var(--theme-error-500)',
@@ -1251,11 +1649,11 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
                                 opacity: loading || passkeyLoading ? 0.7 : 1,
                                 transition: 'opacity 150ms ease'
                             },
-                            children: loading ? 'Signing in...' : 'Sign In'
+                            children: primaryLabel
                         })
                     ]
                 }),
-                passkeyAvailable && /*#__PURE__*/ _jsxs(_Fragment, {
+                secondaryMethods.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
                         /*#__PURE__*/ _jsxs("div", {
                             style: {
@@ -1289,39 +1687,50 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ _jsxs("button", {
-                            type: "button",
-                            onClick: handlePasskeySignIn,
-                            disabled: loading || passkeyLoading,
-                            style: {
-                                width: '100%',
-                                padding: 'calc(var(--base) * 0.75)',
-                                background: 'transparent',
-                                border: '1px solid var(--theme-elevation-300)',
-                                borderRadius: 'var(--style-radius-s)',
-                                color: 'var(--theme-text)',
-                                fontSize: 'var(--font-size-base)',
-                                fontWeight: 500,
-                                cursor: loading || passkeyLoading ? 'not-allowed' : 'pointer',
-                                opacity: loading || passkeyLoading ? 0.7 : 1,
-                                transition: 'opacity 150ms ease',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                gap: 'calc(var(--base) * 0.5)'
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx("span", {
-                                    style: {
-                                        fontSize: '18px'
-                                    },
-                                    children: "🔐"
-                                }),
-                                passkeyLoading ? 'Authenticating...' : 'Sign in with Passkey'
-                            ]
-                        })
+                        secondaryMethods.map((method)=>/*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                onClick: method.onClick,
+                                disabled: loading || passkeyLoading || method.busy,
+                                style: {
+                                    width: '100%',
+                                    marginBottom: 'calc(var(--base) * 0.5)',
+                                    padding: 'calc(var(--base) * 0.75)',
+                                    background: 'transparent',
+                                    border: '1px solid var(--theme-elevation-300)',
+                                    borderRadius: 'var(--style-radius-s)',
+                                    color: 'var(--theme-text)',
+                                    fontSize: 'var(--font-size-base)',
+                                    fontWeight: 500,
+                                    cursor: loading || passkeyLoading || method.busy ? 'not-allowed' : 'pointer',
+                                    opacity: loading || passkeyLoading || method.busy ? 0.7 : 1,
+                                    transition: 'opacity 150ms ease',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    gap: 'calc(var(--base) * 0.5)'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            fontSize: '18px'
+                                        },
+                                        children: method.icon
+                                    }),
+                                    method.label
+                                ]
+                            }, method.key))
                     ]
                 }),
+                primaryMethod === null && secondaryMethods.length === 0 && /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        marginTop: 'var(--base)',
+                        textAlign: 'center',
+                        fontSize: 'var(--font-size-small)',
+                        color: 'var(--theme-text)',
+                        opacity: 0.7
+                    },
+                    children: "No sign-in methods are currently enabled."
+                }),
                 signUpAvailable && /*#__PURE__*/ _jsxs("div", {
                     style: {
                         marginTop: 'calc(var(--base) * 1.5)',

package/dist/components/LoginViewWrapper.js

@@ -18,6 +18,10 @@ import { LoginView } from './LoginView.js';
         defaultSignUpRole: loginConfig.defaultSignUpRole,
         enableForgotPassword: loginConfig.enableForgotPassword,
         resetPasswordUrl: loginConfig.resetPasswordUrl,
+        enablePassword: loginConfig.enablePassword,
+        enableMagicLink: loginConfig.enableMagicLink,
+        enableEmailOtp: loginConfig.enableEmailOtp,
+        magicLinkCallbackURL: loginConfig.magicLinkCallbackURL,
         title: loginConfig.title
     });
 }

package/dist/components/management/TwoFactorManagementClient.js

@@ -17,6 +17,7 @@ import { createPayloadAuthClient } from '../../exports/client.js';
     const [backupCodes, setBackupCodes] = useState([]);
     const [verificationCode, setVerificationCode] = useState('');
     const [password, setPassword] = useState('');
+    const [passwordAction, setPasswordAction] = useState('enable');
     const [actionLoading, setActionLoading] = useState(false);
     const getClient = ()=>providedClient ?? createPayloadAuthClient();
     useEffect(()=>{
@@ -41,10 +42,18 @@ import { createPayloadAuthClient } from '../../exports/client.js';
     }
     function handleEnableClick() {
         // Show password prompt first
+        setPasswordAction('enable');
         setStep('password');
         setPassword('');
         setError(null);
     }
+    function handlePasswordContinue() {
+        if (passwordAction === 'disable') {
+            void handleDisableWithPassword();
+        } else {
+            void handleEnableWithPassword();
+        }
+    }
     async function handleEnableWithPassword() {
         setActionLoading(true);
         setError(null);
@@ -95,21 +104,32 @@ import { createPayloadAuthClient } from '../../exports/client.js';
             setActionLoading(false);
         }
     }
-    async function handleDisable() {
+    function handleDisableClick() {
         if (!confirm('Are you sure you want to disable two-factor authentication?')) {
             return;
         }
+        // Better Auth's /two-factor/disable requires the account password.
+        // Prompt for it instead of sending an empty string (which fails with
+        // "Invalid password" before the real password is ever checked).
+        setPasswordAction('disable');
+        setStep('password');
+        setPassword('');
+        setError(null);
+    }
+    async function handleDisableWithPassword() {
         setActionLoading(true);
         setError(null);
         try {
             const client = getClient();
             const result = await client.twoFactor.disable({
-                password: ''
+                password
             });
             if (result.error) {
                 setError(result.error.message ?? 'Failed to disable 2FA');
             } else {
                 setIsEnabled(false);
+                setPassword('');
+                setStep('status');
                 onComplete?.();
             }
         } catch  {
@@ -153,7 +173,7 @@ import { createPayloadAuthClient } from '../../exports/client.js';
                     /*#__PURE__*/ _jsx(Button, {
                         buttonStyle: isEnabled ? 'error' : 'secondary',
                         size: "small",
-                        onClick: isEnabled ? handleDisable : handleEnableClick,
+                        onClick: isEnabled ? handleDisableClick : handleEnableClick,
                         disabled: actionLoading,
                         children: actionLoading ? 'Loading...' : isEnabled ? 'Disable' : 'Enable'
                     })
@@ -161,9 +181,13 @@ import { createPayloadAuthClient } from '../../exports/client.js';
             }),
             step === 'password' && /*#__PURE__*/ _jsxs("div", {
                 children: [
-                    /*#__PURE__*/ _jsx("p", {
+                    /*#__PURE__*/ _jsxs("p", {
                         className: "field-description",
-                        children: "Enter your password to enable two-factor authentication."
+                        children: [
+                            "Enter your password to ",
+                            passwordAction === 'disable' ? 'disable' : 'enable',
+                            " two-factor authentication."
+                        ]
                     }),
                     /*#__PURE__*/ _jsx("input", {
                         type: "password",
@@ -172,7 +196,7 @@ import { createPayloadAuthClient } from '../../exports/client.js';
                         onKeyDown: (e)=>{
                             if (e.key === 'Enter' && password) {
                                 e.preventDefault();
-                                handleEnableWithPassword();
+                                handlePasswordContinue();
                             }
                         },
                         placeholder: "Enter your password",
@@ -198,9 +222,9 @@ import { createPayloadAuthClient } from '../../exports/client.js';
                             /*#__PURE__*/ _jsx(Button, {
                                 buttonStyle: "primary",
                                 size: "small",
-                                onClick: handleEnableWithPassword,
+                                onClick: handlePasswordContinue,
                                 disabled: actionLoading || !password,
-                                children: actionLoading ? 'Enabling...' : 'Continue'
+                                children: actionLoading ? passwordAction === 'disable' ? 'Disabling...' : 'Enabling...' : 'Continue'
                             }),
                             /*#__PURE__*/ _jsx(Button, {
                                 buttonStyle: "secondary",

package/dist/plugin/index.d.ts

@@ -69,6 +69,36 @@ export type BetterAuthPluginAdminOptions = {
          * instead of showing the inline password reset form.
          */
         resetPasswordUrl?: string;
+        /**
+         * Enable email + password sign-in.
+         * - true: Always show the password field
+         * - false: Hide the password field (passwordless-only)
+         * - 'auto': Auto-detect via the /sign-in/email endpoint
+         * Default: 'auto' - LoginView hides the password field when the email/password
+         * strategy is disabled in Better Auth.
+         */
+        enablePassword?: boolean | 'auto';
+        /**
+         * Enable magic-link sign-in ("email me a link").
+         * - true: Always show the magic-link option
+         * - false: Never show it
+         * - 'auto': Auto-detect via the /sign-in/magic-link endpoint
+         * Default: 'auto' - requires the Better Auth magicLink() plugin.
+         */
+        enableMagicLink?: boolean | 'auto';
+        /**
+         * Enable email-OTP sign-in ("email me a code").
+         * - true: Always show the email-OTP option
+         * - false: Never show it
+         * - 'auto': Auto-detect via the /email-otp/send-verification-otp endpoint
+         * Default: 'auto' - requires the Better Auth emailOTP() plugin.
+         */
+        enableEmailOtp?: boolean | 'auto';
+        /**
+         * Where the emailed magic link returns after verification.
+         * Default: afterLoginPath
+         */
+        magicLinkCallbackURL?: string;
     };
     /** Path to custom logout button component (import map format) */
     logoutButtonComponent?: string;

package/dist/utils/loginMethods.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Pure helpers for deciding which sign-in methods the LoginView should display.
+ * Kept DOM-free so they can be unit-tested under the project's node-env vitest setup.
+ */
+/** A method-enable setting: explicit boolean, or 'auto' to defer to an endpoint probe. */
+export type MethodSetting = boolean | 'auto';
+/**
+ * Resolve a `boolean | 'auto'` setting against the result of an endpoint probe.
+ *
+ * - `true`   -> always available
+ * - `false`  -> never available
+ * - `'auto'` -> available iff the probe succeeded (`probeOk === true`); a `null`
+ *               probe (not yet completed) resolves to `false`.
+ */
+export declare function resolveAvailability(setting: MethodSetting, probeOk: boolean | null): boolean;
+/** The sign-in methods that can own the primary submit button. */
+export type PrimaryMethod = 'password' | 'magicLink' | 'emailOtp';
+/**
+ * Choose which available method owns the primary submit button.
+ * Precedence: password -> magicLink -> emailOtp. Returns null if none are available.
+ */
+export declare function pickPrimaryMethod(available: {
+    password: boolean;
+    magicLink: boolean;
+    emailOtp: boolean;
+}): PrimaryMethod | null;

package/dist/utils/loginMethods.js

@@ -0,0 +1,24 @@
+/**
+ * Pure helpers for deciding which sign-in methods the LoginView should display.
+ * Kept DOM-free so they can be unit-tested under the project's node-env vitest setup.
+ */ /** A method-enable setting: explicit boolean, or 'auto' to defer to an endpoint probe. */ /**
+ * Resolve a `boolean | 'auto'` setting against the result of an endpoint probe.
+ *
+ * - `true`   -> always available
+ * - `false`  -> never available
+ * - `'auto'` -> available iff the probe succeeded (`probeOk === true`); a `null`
+ *               probe (not yet completed) resolves to `false`.
+ */ export function resolveAvailability(setting, probeOk) {
+    if (setting === true) return true;
+    if (setting === false) return false;
+    return probeOk === true;
+}
+/**
+ * Choose which available method owns the primary submit button.
+ * Precedence: password -> magicLink -> emailOtp. Returns null if none are available.
+ */ export function pickPrimaryMethod(available) {
+    if (available.password) return 'password';
+    if (available.magicLink) return 'magicLink';
+    if (available.emailOtp) return 'emailOtp';
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-better-auth",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "description": "Better Auth adapter and plugins for Payload CMS",
   "type": "module",
   "license": "MIT",
@@ -113,23 +113,24 @@
     }
   },
   "devDependencies": {
-    "@better-auth/api-key": "^1.6.10",
-    "@better-auth/oauth-provider": "^1.6.10",
-    "@better-auth/passkey": "^1.6.10",
-    "@payloadcms/next": "^3.84.1",
-    "@payloadcms/ui": "^3.84.1",
+    "@better-auth/api-key": "^1.6.17",
+    "@better-auth/oauth-provider": "^1.6.17",
+    "@better-auth/passkey": "^1.6.17",
+    "@payloadcms/next": "^3.85.0",
+    "@payloadcms/ui": "^3.85.0",
     "@swc/cli": "^0.6.0",
     "@swc/core": "^1.15.30",
     "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",
-    "@vitest/coverage-v8": "^2.1.9",
-    "better-auth": "^1.6.10",
+    "@vitest/coverage-v8": "^4.1.8",
+    "better-auth": "^1.6.17",
     "next": "^16.2.5",
-    "payload": "^3.84.1",
+    "payload": "^3.85.0",
     "react": "^19.2.5",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vitest": "^2.1.9"
+    "vite": "^7.3.5",
+    "vitest": "^4.1.8"
   },
   "keywords": [
     "payload",