@delmaredigital/payload-better-auth 0.3.8 → 0.3.10

package/src/components/LoginViewWrapper.tsx

@@ -1,35 +0,0 @@
-import type { AdminViewProps } from 'payload'
-import { LoginView, type LoginViewProps } from './LoginView.js'
-
-type LoginConfig = Omit<LoginViewProps, 'authClient' | 'logo'>
-
-type LoginViewWrapperProps = AdminViewProps
-
-/**
- * Server component wrapper for LoginView.
- * Reads login configuration from payload.config.custom.betterAuth.login
- * and passes it as props to the client LoginView component.
- */
-export async function LoginViewWrapper({ initPageResult }: LoginViewWrapperProps) {
-  const { req } = initPageResult
-  const { payload } = req
-
-  // Read login config from payload.config.custom.betterAuth.login
-  const loginConfig = (payload.config.custom?.betterAuth?.login ?? {}) as LoginConfig
-
-  return (
-    <LoginView
-      afterLoginPath={loginConfig.afterLoginPath}
-      requiredRole={loginConfig.requiredRole}
-      requireAllRoles={loginConfig.requireAllRoles}
-      enablePasskey={loginConfig.enablePasskey}
-      enableSignUp={loginConfig.enableSignUp}
-      defaultSignUpRole={loginConfig.defaultSignUpRole}
-      enableForgotPassword={loginConfig.enableForgotPassword}
-      resetPasswordUrl={loginConfig.resetPasswordUrl}
-      title={loginConfig.title}
-    />
-  )
-}
-
-export default LoginViewWrapper

package/src/components/LogoutButton.tsx

@@ -1,58 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { useRouter } from 'next/navigation.js'
-
-/**
- * Logout button component styled to match Payload's admin nav.
- * Uses Payload's CSS classes and variables for native theme integration.
- */
-export function LogoutButton() {
-  const router = useRouter()
-  const [isLoading, setIsLoading] = useState(false)
-
-  async function handleLogout() {
-    if (isLoading) return
-    setIsLoading(true)
-
-    try {
-      await fetch('/api/auth/sign-out', {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({}),
-      })
-
-      router.push('/admin/login')
-    } catch (error) {
-      console.error('[better-auth] Logout error:', error)
-      setIsLoading(false)
-    }
-  }
-
-  return (
-    <button
-      onClick={handleLogout}
-      disabled={isLoading}
-      type="button"
-      className="nav__link"
-      style={{
-        background: 'none',
-        border: 'none',
-        cursor: isLoading ? 'not-allowed' : 'pointer',
-        opacity: isLoading ? 0.7 : 1,
-        width: '100%',
-        textAlign: 'left',
-        padding: 0,
-      }}
-    >
-      <span className="nav__link-label">
-        {isLoading ? 'Logging out...' : 'Log out'}
-      </span>
-    </button>
-  )
-}
-
-export default LogoutButton

package/src/components/PasskeyRegisterButton.tsx

@@ -1,105 +0,0 @@
-'use client'
-
-import { useState, type ButtonHTMLAttributes } from 'react'
-import {
-  createPayloadAuthClient,
-  type PayloadAuthClient,
-} from '../exports/client.js'
-
-export type PasskeyRegisterButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'onClick'
-> & {
-  /** Optional pre-configured auth client */
-  authClient?: PayloadAuthClient
-  /** Optional name for the passkey */
-  passkeyName?: string
-  /** Callback when registration succeeds */
-  onSuccess?: (passkey: { id: string; name?: string }) => void
-  /** Callback when registration fails */
-  onError?: (error: string) => void
-  /** Button text when idle. Default: 'Add Passkey' */
-  label?: string
-  /** Button text when loading. Default: 'Registering...' */
-  loadingLabel?: string
-}
-
-/**
- * Standalone passkey registration button component.
- * Handles the WebAuthn registration flow with Better Auth.
- *
- * @example
- * ```tsx
- * import { PasskeyRegisterButton } from '@delmaredigital/payload-better-auth/components'
- *
- * function SecuritySettings() {
- *   return (
- *     <PasskeyRegisterButton
- *       passkeyName="My MacBook"
- *       onSuccess={(passkey) => {
- *         console.log('Passkey registered:', passkey.id)
- *         refetchPasskeys()
- *       }}
- *       onError={(error) => {
- *         setError(error)
- *       }}
- *     />
- *   )
- * }
- * ```
- */
-export function PasskeyRegisterButton({
-  authClient: providedClient,
-  passkeyName,
-  onSuccess,
-  onError,
-  label = 'Add Passkey',
-  loadingLabel = 'Registering...',
-  disabled,
-  children,
-  ...buttonProps
-}: PasskeyRegisterButtonProps) {
-  const [loading, setLoading] = useState(false)
-
-  async function handleClick() {
-    setLoading(true)
-
-    try {
-      const client = providedClient ?? createPayloadAuthClient()
-      const result = await client.passkey.addPasskey({
-        name: passkeyName,
-      })
-
-      if (result.error) {
-        onError?.(result.error.message ?? 'Passkey registration failed')
-      } else if (result.data) {
-        onSuccess?.({ id: result.data.id, name: passkeyName })
-      }
-    } catch (err) {
-      if (err instanceof Error && err.name === 'NotAllowedError') {
-        onError?.('Passkey registration was cancelled or not allowed')
-      } else if (err instanceof Error && err.name === 'InvalidStateError') {
-        onError?.('This passkey is already registered')
-      } else {
-        onError?.(
-          err instanceof Error ? err.message : 'Passkey registration failed'
-        )
-      }
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      disabled={disabled || loading}
-      {...buttonProps}
-    >
-      {children ?? (loading ? loadingLabel : label)}
-    </button>
-  )
-}
-
-export default PasskeyRegisterButton

package/src/components/PasskeySignInButton.tsx

@@ -1,96 +0,0 @@
-'use client'
-
-import { useState, type ButtonHTMLAttributes } from 'react'
-import {
-  createPayloadAuthClient,
-  type PayloadAuthClient,
-} from '../exports/client.js'
-
-export type PasskeySignInButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'onClick'
-> & {
-  /** Optional pre-configured auth client */
-  authClient?: PayloadAuthClient
-  /** Callback when sign-in succeeds */
-  onSuccess?: (user: { id: string; email: string; role?: string }) => void
-  /** Callback when sign-in fails */
-  onError?: (error: string) => void
-  /** Button text when idle. Default: 'Sign in with Passkey' */
-  label?: string
-  /** Button text when loading. Default: 'Authenticating...' */
-  loadingLabel?: string
-}
-
-/**
- * Standalone passkey sign-in button component.
- * Handles the WebAuthn authentication flow with Better Auth.
- *
- * @example
- * ```tsx
- * import { PasskeySignInButton } from '@delmaredigital/payload-better-auth/components'
- *
- * function LoginForm() {
- *   return (
- *     <PasskeySignInButton
- *       onSuccess={(user) => {
- *         router.push('/dashboard')
- *       }}
- *       onError={(error) => {
- *         setError(error)
- *       }}
- *     />
- *   )
- * }
- * ```
- */
-export function PasskeySignInButton({
-  authClient: providedClient,
-  onSuccess,
-  onError,
-  label = 'Sign in with Passkey',
-  loadingLabel = 'Authenticating...',
-  disabled,
-  children,
-  ...buttonProps
-}: PasskeySignInButtonProps) {
-  const [loading, setLoading] = useState(false)
-
-  async function handleClick() {
-    setLoading(true)
-
-    try {
-      const client = providedClient ?? createPayloadAuthClient()
-      const result = await client.signIn.passkey()
-
-      if (result.error) {
-        onError?.(result.error.message ?? 'Passkey authentication failed')
-      } else if (result.data?.user) {
-        onSuccess?.(result.data.user as { id: string; email: string; role?: string })
-      }
-    } catch (err) {
-      if (err instanceof Error && err.name === 'NotAllowedError') {
-        onError?.('Passkey authentication was cancelled or not allowed')
-      } else {
-        onError?.(
-          err instanceof Error ? err.message : 'Passkey authentication failed'
-        )
-      }
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      disabled={disabled || loading}
-      {...buttonProps}
-    >
-      {children ?? (loading ? loadingLabel : label)}
-    </button>
-  )
-}
-
-export default PasskeySignInButton

package/src/components/auth/ForgotPasswordView.tsx

@@ -1,274 +0,0 @@
-'use client'
-
-import { useState, type FormEvent } from 'react'
-
-export type ForgotPasswordViewProps = {
-  /** Custom logo element */
-  logo?: React.ReactNode
-  /** Page title. Default: 'Forgot Password' */
-  title?: string
-  /** Path to login page. Default: '/admin/login' */
-  loginPath?: string
-  /** Success message to show after email is sent */
-  successMessage?: string
-}
-
-/**
- * Forgot password page component for requesting a password reset email.
- * Uses Better Auth's forgetPassword endpoint.
- */
-export function ForgotPasswordView({
-  logo,
-  title = 'Forgot Password',
-  loginPath = '/admin/login',
-  successMessage = 'If an account exists with this email, you will receive a password reset link.',
-}: ForgotPasswordViewProps) {
-  const [email, setEmail] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [success, setSuccess] = useState(false)
-  const [loading, setLoading] = useState(false)
-
-  async function handleSubmit(e: FormEvent) {
-    e.preventDefault()
-    setLoading(true)
-    setError(null)
-
-    try {
-      const response = await fetch('/api/auth/forget-password', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
-        body: JSON.stringify({
-          email,
-          redirectTo: `${window.location.origin}/admin/reset-password`,
-        }),
-      })
-
-      if (response.ok) {
-        setSuccess(true)
-      } else {
-        // Always show success message to prevent email enumeration
-        setSuccess(true)
-      }
-    } catch {
-      setError('An error occurred. Please try again.')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  if (success) {
-    return (
-      <div
-        style={{
-          minHeight: '100vh',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: 'var(--theme-bg)',
-          padding: 'var(--base)',
-        }}
-      >
-        <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',
-          }}
-        >
-          {logo && (
-            <div style={{ marginBottom: 'calc(var(--base) * 1.5)' }}>
-              {logo}
-            </div>
-          )}
-
-          <h1
-            style={{
-              color: 'var(--theme-text)',
-              fontSize: 'var(--font-size-h3)',
-              fontWeight: 600,
-              margin: '0 0 var(--base) 0',
-            }}
-          >
-            Check Your Email
-          </h1>
-
-          <p
-            style={{
-              color: 'var(--theme-text)',
-              opacity: 0.8,
-              marginBottom: 'calc(var(--base) * 1.5)',
-              fontSize: 'var(--font-size-small)',
-            }}
-          >
-            {successMessage}
-          </p>
-
-          <a
-            href={loginPath}
-            style={{
-              color: 'var(--theme-elevation-800)',
-              fontSize: 'var(--font-size-small)',
-              textDecoration: 'underline',
-            }}
-          >
-            Back to login
-          </a>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div
-      style={{
-        minHeight: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: 'var(--theme-bg)',
-        padding: 'var(--base)',
-      }}
-    >
-      <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',
-        }}
-      >
-        {logo && (
-          <div
-            style={{
-              textAlign: 'center',
-              marginBottom: 'calc(var(--base) * 1.5)',
-            }}
-          >
-            {logo}
-          </div>
-        )}
-
-        <h1
-          style={{
-            color: 'var(--theme-text)',
-            fontSize: 'var(--font-size-h3)',
-            fontWeight: 600,
-            marginBottom: 'calc(var(--base) * 0.5)',
-            textAlign: 'center',
-            margin: '0 0 calc(var(--base) * 0.5) 0',
-          }}
-        >
-          {title}
-        </h1>
-
-        <p
-          style={{
-            color: 'var(--theme-text)',
-            opacity: 0.7,
-            fontSize: 'var(--font-size-small)',
-            textAlign: 'center',
-            marginBottom: 'calc(var(--base) * 1.5)',
-          }}
-        >
-          Enter your email and we'll send you a reset link.
-        </p>
-
-        <form onSubmit={handleSubmit}>
-          <div style={{ marginBottom: 'calc(var(--base) * 1.5)' }}>
-            <label
-              htmlFor="email"
-              style={{
-                display: 'block',
-                color: 'var(--theme-text)',
-                marginBottom: 'calc(var(--base) * 0.5)',
-                fontSize: 'var(--font-size-small)',
-                fontWeight: 500,
-              }}
-            >
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              autoComplete="email"
-              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',
-              }}
-            />
-          </div>
-
-          {error && (
-            <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)',
-              }}
-            >
-              {error}
-            </div>
-          )}
-
-          <button
-            type="submit"
-            disabled={loading}
-            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: loading ? 'not-allowed' : 'pointer',
-              opacity: loading ? 0.7 : 1,
-              transition: 'opacity 150ms ease',
-              marginBottom: 'var(--base)',
-            }}
-          >
-            {loading ? 'Sending...' : 'Send Reset Link'}
-          </button>
-
-          <div style={{ textAlign: 'center' }}>
-            <a
-              href={loginPath}
-              style={{
-                color: 'var(--theme-text)',
-                opacity: 0.7,
-                fontSize: 'var(--font-size-small)',
-                textDecoration: 'underline',
-              }}
-            >
-              Back to login
-            </a>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}
-
-export default ForgotPasswordView