@delmaredigital/payload-better-auth 0.3.7 → 0.3.8

package/src/components/management/TwoFactorManagementClient.tsx

@@ -0,0 +1,560 @@
+'use client'
+
+import { useState, useEffect, type FormEvent } from 'react'
+import {
+  createPayloadAuthClient,
+  type PayloadAuthClient,
+} from '../../exports/client.js'
+
+export type TwoFactorManagementClientProps = {
+  /** Optional pre-configured auth client */
+  authClient?: PayloadAuthClient
+  /** Page title. Default: 'Two-Factor Authentication' */
+  title?: string
+}
+
+/**
+ * Client component for two-factor authentication management.
+ * Shows 2FA status and allows enabling/disabling.
+ */
+export function TwoFactorManagementClient({
+  authClient: providedClient,
+  title = 'Two-Factor Authentication',
+}: TwoFactorManagementClientProps = {}) {
+  const [isEnabled, setIsEnabled] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [step, setStep] = useState<'status' | 'password' | 'setup' | 'verify' | 'backup'>('status')
+  const [totpUri, setTotpUri] = useState<string | null>(null)
+  const [secret, setSecret] = useState<string | null>(null)
+  const [backupCodes, setBackupCodes] = useState<string[]>([])
+  const [verificationCode, setVerificationCode] = useState('')
+  const [password, setPassword] = useState('')
+  const [actionLoading, setActionLoading] = useState(false)
+
+  const getClient = () => providedClient ?? createPayloadAuthClient()
+
+  useEffect(() => {
+    checkStatus()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  async function checkStatus() {
+    setLoading(true)
+    try {
+      const client = getClient()
+      const result = await client.getSession()
+
+      if (result.data?.user) {
+        setIsEnabled((result.data.user as { twoFactorEnabled?: boolean }).twoFactorEnabled ?? false)
+      } else {
+        setIsEnabled(false)
+      }
+    } catch {
+      setError('Failed to check 2FA status')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function handleEnableClick() {
+    // Show password prompt first
+    setStep('password')
+    setPassword('')
+    setError(null)
+  }
+
+  async function handleEnableWithPassword(e: FormEvent) {
+    e.preventDefault()
+    setActionLoading(true)
+    setError(null)
+
+    try {
+      const client = getClient()
+      const result = await client.twoFactor.enable({ password })
+
+      if (result.error) {
+        setError(result.error.message ?? 'Failed to enable 2FA')
+      } else if (result.data) {
+        setTotpUri(result.data.totpURI)
+        // Secret is embedded in the totpURI, extract it for manual entry option
+        const secretMatch = result.data.totpURI.match(/secret=([A-Z2-7]+)/i)
+        setSecret(secretMatch ? secretMatch[1] : null)
+        setBackupCodes(result.data.backupCodes ?? [])
+        setPassword('') // Clear password
+        setStep('setup')
+      }
+    } catch {
+      setError('Failed to enable 2FA')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  async function handleVerify(e: FormEvent) {
+    e.preventDefault()
+    setActionLoading(true)
+    setError(null)
+
+    try {
+      const client = getClient()
+      const result = await client.twoFactor.verifyTotp({ code: verificationCode })
+
+      if (result.error) {
+        setError(result.error.message ?? 'Invalid verification code')
+      } else {
+        if (backupCodes.length > 0) {
+          setStep('backup')
+        } else {
+          setIsEnabled(true)
+          setStep('status')
+        }
+      }
+    } catch {
+      setError('Verification failed')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  async function handleDisable() {
+    if (!confirm('Are you sure you want to disable two-factor authentication?')) {
+      return
+    }
+
+    setActionLoading(true)
+    setError(null)
+
+    try {
+      const client = getClient()
+      const result = await client.twoFactor.disable({ password: '' })
+
+      if (result.error) {
+        setError(result.error.message ?? 'Failed to disable 2FA')
+      } else {
+        setIsEnabled(false)
+      }
+    } catch {
+      setError('Failed to disable 2FA')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  function handleBackupContinue() {
+    setIsEnabled(true)
+    setStep('status')
+  }
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 'calc(var(--base) * 3)',
+        }}
+      >
+        <div style={{ color: 'var(--theme-text)', opacity: 0.7 }}>
+          Loading...
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      style={{
+        maxWidth: '600px',
+        margin: '0 auto',
+        padding: 'calc(var(--base) * 2)',
+      }}
+    >
+
+        <h1
+          style={{
+            color: 'var(--theme-text)',
+            fontSize: 'var(--font-size-h2)',
+            fontWeight: 600,
+            margin: '0 0 calc(var(--base) * 2) 0',
+          }}
+        >
+          {title}
+        </h1>
+
+        {error && (
+          <div
+            style={{
+              color: 'var(--theme-error-500)',
+              marginBottom: 'var(--base)',
+              fontSize: 'var(--font-size-small)',
+              padding: 'calc(var(--base) * 0.75)',
+              background: 'var(--theme-error-50)',
+              borderRadius: 'var(--style-radius-s)',
+              border: '1px solid var(--theme-error-200)',
+            }}
+          >
+            {error}
+          </div>
+        )}
+
+        {step === 'status' && (
+          <div
+            style={{
+              background: 'var(--theme-elevation-50)',
+              padding: 'calc(var(--base) * 1.5)',
+              borderRadius: 'var(--style-radius-m)',
+              border: '1px solid var(--theme-elevation-100)',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <div>
+                <div
+                  style={{
+                    color: 'var(--theme-text)',
+                    fontWeight: 500,
+                    marginBottom: 'calc(var(--base) * 0.25)',
+                  }}
+                >
+                  Status
+                </div>
+                <div
+                  style={{
+                    color: isEnabled
+                      ? 'var(--theme-success-500)'
+                      : 'var(--theme-elevation-600)',
+                    fontSize: 'var(--font-size-small)',
+                  }}
+                >
+                  {isEnabled ? '✓ Enabled' : 'Not enabled'}
+                </div>
+              </div>
+
+              <button
+                onClick={isEnabled ? handleDisable : handleEnableClick}
+                disabled={actionLoading}
+                style={{
+                  padding: 'calc(var(--base) * 0.5) calc(var(--base) * 1)',
+                  background: isEnabled
+                    ? 'var(--theme-error-500)'
+                    : 'var(--theme-elevation-800)',
+                  border: 'none',
+                  borderRadius: 'var(--style-radius-s)',
+                  color: 'var(--theme-elevation-50)',
+                  fontSize: 'var(--font-size-small)',
+                  cursor: actionLoading ? 'not-allowed' : 'pointer',
+                  opacity: actionLoading ? 0.7 : 1,
+                }}
+              >
+                {actionLoading
+                  ? 'Loading...'
+                  : isEnabled
+                    ? 'Disable'
+                    : 'Enable'}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {step === 'password' && (
+          <div
+            style={{
+              background: 'var(--theme-elevation-50)',
+              padding: 'calc(var(--base) * 2)',
+              borderRadius: 'var(--style-radius-m)',
+              border: '1px solid var(--theme-elevation-100)',
+            }}
+          >
+            <h2
+              style={{
+                color: 'var(--theme-text)',
+                fontSize: 'var(--font-size-h4)',
+                fontWeight: 500,
+                margin: '0 0 var(--base) 0',
+              }}
+            >
+              Confirm Your Password
+            </h2>
+            <p
+              style={{
+                color: 'var(--theme-text)',
+                opacity: 0.7,
+                fontSize: 'var(--font-size-small)',
+                marginBottom: 'calc(var(--base) * 1.5)',
+              }}
+            >
+              Enter your password to enable two-factor authentication.
+            </p>
+            <form onSubmit={handleEnableWithPassword}>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter your password"
+                required
+                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)',
+                  marginBottom: 'var(--base)',
+                  boxSizing: 'border-box',
+                }}
+              />
+              <div style={{ display: 'flex', gap: 'calc(var(--base) * 0.5)' }}>
+                <button
+                  type="submit"
+                  disabled={actionLoading || !password}
+                  style={{
+                    padding: 'calc(var(--base) * 0.75) calc(var(--base) * 1.5)',
+                    background: 'var(--theme-elevation-800)',
+                    border: 'none',
+                    borderRadius: 'var(--style-radius-s)',
+                    color: 'var(--theme-elevation-50)',
+                    fontSize: 'var(--font-size-base)',
+                    cursor: actionLoading || !password ? 'not-allowed' : 'pointer',
+                    opacity: actionLoading || !password ? 0.7 : 1,
+                  }}
+                >
+                  {actionLoading ? 'Enabling...' : 'Continue'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setStep('status')}
+                  style={{
+                    padding: 'calc(var(--base) * 0.75) calc(var(--base) * 1.5)',
+                    background: 'transparent',
+                    border: '1px solid var(--theme-elevation-200)',
+                    borderRadius: 'var(--style-radius-s)',
+                    color: 'var(--theme-text)',
+                    fontSize: 'var(--font-size-base)',
+                    cursor: 'pointer',
+                  }}
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {step === 'setup' && totpUri && (
+          <div
+            style={{
+              background: 'var(--theme-elevation-50)',
+              padding: 'calc(var(--base) * 2)',
+              borderRadius: 'var(--style-radius-m)',
+              textAlign: 'center',
+            }}
+          >
+            <p
+              style={{
+                color: 'var(--theme-text)',
+                opacity: 0.7,
+                marginBottom: 'calc(var(--base) * 1.5)',
+              }}
+            >
+              Scan this QR code with your authenticator app:
+            </p>
+
+            <img
+              src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(totpUri)}`}
+              alt="QR Code"
+              style={{
+                width: '200px',
+                height: '200px',
+                border: '1px solid var(--theme-elevation-150)',
+                borderRadius: 'var(--style-radius-s)',
+                marginBottom: 'var(--base)',
+              }}
+            />
+
+            {secret && (
+              <div style={{ marginBottom: 'calc(var(--base) * 1.5)' }}>
+                <p
+                  style={{
+                    color: 'var(--theme-text)',
+                    opacity: 0.7,
+                    fontSize: 'var(--font-size-small)',
+                    marginBottom: 'calc(var(--base) * 0.5)',
+                  }}
+                >
+                  Or enter manually:
+                </p>
+                <code
+                  style={{
+                    display: 'inline-block',
+                    padding: 'calc(var(--base) * 0.5)',
+                    background: 'var(--theme-elevation-100)',
+                    borderRadius: 'var(--style-radius-s)',
+                    fontFamily: 'monospace',
+                    fontSize: 'var(--font-size-small)',
+                    color: 'var(--theme-text)',
+                  }}
+                >
+                  {secret}
+                </code>
+              </div>
+            )}
+
+            <form onSubmit={handleVerify}>
+              <input
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                value={verificationCode}
+                onChange={(e) =>
+                  setVerificationCode(e.target.value.replace(/\D/g, '').slice(0, 6))
+                }
+                placeholder="Enter 6-digit code"
+                style={{
+                  width: '100%',
+                  maxWidth: '200px',
+                  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',
+                  marginBottom: 'var(--base)',
+                  boxSizing: 'border-box',
+                }}
+              />
+              <br />
+              <button
+                type="submit"
+                disabled={actionLoading || verificationCode.length !== 6}
+                style={{
+                  padding: 'calc(var(--base) * 0.75) calc(var(--base) * 2)',
+                  background: 'var(--theme-elevation-800)',
+                  border: 'none',
+                  borderRadius: 'var(--style-radius-s)',
+                  color: 'var(--theme-elevation-50)',
+                  fontSize: 'var(--font-size-base)',
+                  cursor:
+                    actionLoading || verificationCode.length !== 6
+                      ? 'not-allowed'
+                      : 'pointer',
+                  opacity:
+                    actionLoading || verificationCode.length !== 6 ? 0.7 : 1,
+                }}
+              >
+                {actionLoading ? 'Verifying...' : 'Verify'}
+              </button>
+            </form>
+          </div>
+        )}
+
+        {step === 'backup' && (
+          <div
+            style={{
+              background: 'var(--theme-elevation-50)',
+              padding: 'calc(var(--base) * 2)',
+              borderRadius: 'var(--style-radius-m)',
+            }}
+          >
+            <h2
+              style={{
+                color: 'var(--theme-text)',
+                fontSize: 'var(--font-size-h3)',
+                fontWeight: 600,
+                margin: '0 0 var(--base) 0',
+                textAlign: 'center',
+              }}
+            >
+              Save Your Backup Codes
+            </h2>
+            <p
+              style={{
+                color: 'var(--theme-text)',
+                opacity: 0.7,
+                fontSize: 'var(--font-size-small)',
+                textAlign: 'center',
+                marginBottom: 'calc(var(--base) * 1.5)',
+              }}
+            >
+              Store these codes safely. Use them if you lose your authenticator.
+            </p>
+
+            <div
+              style={{
+                background: 'var(--theme-elevation-100)',
+                padding: 'var(--base)',
+                borderRadius: 'var(--style-radius-s)',
+                marginBottom: 'var(--base)',
+                fontFamily: 'monospace',
+              }}
+            >
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(2, 1fr)',
+                  gap: 'calc(var(--base) * 0.5)',
+                }}
+              >
+                {backupCodes.map((code, index) => (
+                  <div
+                    key={index}
+                    style={{
+                      color: 'var(--theme-text)',
+                      padding: 'calc(var(--base) * 0.25)',
+                    }}
+                  >
+                    {code}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <button
+              onClick={() => navigator.clipboard.writeText(backupCodes.join('\n'))}
+              style={{
+                width: '100%',
+                padding: 'calc(var(--base) * 0.5)',
+                background: 'var(--theme-elevation-150)',
+                border: 'none',
+                borderRadius: 'var(--style-radius-s)',
+                color: 'var(--theme-text)',
+                fontSize: 'var(--font-size-small)',
+                cursor: 'pointer',
+                marginBottom: 'var(--base)',
+              }}
+            >
+              Copy to Clipboard
+            </button>
+
+            <button
+              onClick={handleBackupContinue}
+              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)',
+                cursor: 'pointer',
+              }}
+            >
+              I've Saved My Codes
+            </button>
+          </div>
+        )}
+    </div>
+  )
+}
+
+export default TwoFactorManagementClient

package/src/components/management/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Management UI Components for Better Auth
+ *
+ * Client components for security feature management.
+ * These are used within the server component views.
+ */
+
+// Client components
+export { TwoFactorManagementClient } from './TwoFactorManagementClient.js'
+export type { TwoFactorManagementClientProps } from './TwoFactorManagementClient.js'
+
+export { ApiKeysManagementClient } from './ApiKeysManagementClient.js'
+export type { ApiKeysManagementClientProps } from './ApiKeysManagementClient.js'
+
+export { PasskeysManagementClient } from './PasskeysManagementClient.js'
+export type { PasskeysManagementClientProps } from './PasskeysManagementClient.js'
+
+// Nav links (client component)
+export { SecurityNavLinks } from './SecurityNavLinks.js'
+export type { SecurityNavLinksProps } from './SecurityNavLinks.js'

package/src/components/management/views/ApiKeysView.tsx

@@ -0,0 +1,57 @@
+import type { AdminViewProps, Locale } from 'payload'
+import { DefaultTemplate } from '@payloadcms/next/templates'
+import { getVisibleEntities } from '@payloadcms/ui/shared'
+import { ApiKeysManagementClient } from '../ApiKeysManagementClient.js'
+import { getApiKeyScopesConfig } from '../../../plugin/index.js'
+import { buildAvailableScopes } from '../../../utils/generateScopes.js'
+
+type ApiKeysViewProps = AdminViewProps
+
+/**
+ * API Keys management view for Payload admin panel.
+ * Server component that provides the admin layout.
+ */
+export async function ApiKeysView({
+  initPageResult,
+  params,
+  searchParams,
+}: ApiKeysViewProps) {
+  const { req } = initPageResult
+  const { payload } = req
+
+  // Await params/searchParams for Next.js 15+ compatibility
+  const resolvedParams = params ? await params : undefined
+  const resolvedSearchParams = searchParams ? await searchParams : undefined
+
+  const visibleEntities = getVisibleEntities({ req })
+
+  // Build available scopes from plugin config and collections
+  const scopesConfig = getApiKeyScopesConfig()
+  const availableScopes = buildAvailableScopes(
+    payload.config.collections,
+    scopesConfig
+  )
+
+  // Get default scopes from config
+  const defaultScopes = scopesConfig?.defaultScopes ?? []
+
+  return (
+    <DefaultTemplate
+      i18n={req.i18n}
+      locale={req.locale as Locale | undefined}
+      params={resolvedParams}
+      payload={payload}
+      permissions={initPageResult.permissions}
+      searchParams={resolvedSearchParams}
+      user={req.user ?? undefined}
+      visibleEntities={visibleEntities}
+    >
+      <ApiKeysManagementClient
+        availableScopes={availableScopes}
+        defaultScopes={defaultScopes}
+      />
+    </DefaultTemplate>
+  )
+}
+
+export default ApiKeysView

package/src/components/management/views/PasskeysView.tsx

@@ -0,0 +1,42 @@
+import type { AdminViewProps, Locale } from 'payload'
+import { DefaultTemplate } from '@payloadcms/next/templates'
+import { getVisibleEntities } from '@payloadcms/ui/shared'
+import { PasskeysManagementClient } from '../PasskeysManagementClient.js'
+
+type PasskeysViewProps = AdminViewProps
+
+/**
+ * Passkeys management view for Payload admin panel.
+ * Server component that provides the admin layout.
+ */
+export async function PasskeysView({
+  initPageResult,
+  params,
+  searchParams,
+}: PasskeysViewProps) {
+  const { req } = initPageResult
+  const { payload } = req
+
+  // Await params/searchParams for Next.js 15+ compatibility
+  const resolvedParams = params ? await params : undefined
+  const resolvedSearchParams = searchParams ? await searchParams : undefined
+
+  const visibleEntities = getVisibleEntities({ req })
+
+  return (
+    <DefaultTemplate
+      i18n={req.i18n}
+      locale={req.locale as Locale | undefined}
+      params={resolvedParams}
+      payload={payload}
+      permissions={initPageResult.permissions}
+      searchParams={resolvedSearchParams}
+      user={req.user ?? undefined}
+      visibleEntities={visibleEntities}
+    >
+      <PasskeysManagementClient />
+    </DefaultTemplate>
+  )
+}
+
+export default PasskeysView