@mdxui/payload 6.0.1

package/src/auth/AuthProvider.tsx

@@ -0,0 +1,241 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState, useCallback, useRef, ReactNode } from 'react'
+
+interface AuthState {
+  isAuthenticated: boolean
+  isLoading: boolean
+  isRefreshing: boolean
+  user: { email: string; id: string } | null
+  error: string | null
+}
+
+interface AuthContextValue extends AuthState {
+  refreshAuth: () => Promise<void>
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null)
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider')
+  }
+  return context
+}
+
+interface AuthProviderProps {
+  children: ReactNode
+  /** How often to check auth status (ms). Default: 60000 (1 minute) */
+  checkInterval?: number
+}
+
+/**
+ * AuthProvider that monitors authentication status and handles token refresh.
+ *
+ * When the token expires, it silently refreshes using a hidden iframe
+ * so the user isn't interrupted.
+ */
+export function AuthProvider({ children, checkInterval = 60000 }: AuthProviderProps) {
+  const [state, setState] = useState<AuthState>({
+    isAuthenticated: false,
+    isLoading: true,
+    isRefreshing: false,
+    user: null,
+    error: null,
+  })
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
+  const refreshAttempts = useRef(0)
+
+  // Silent token refresh using hidden iframe
+  const silentRefresh = useCallback(() => {
+    return new Promise<boolean>((resolve) => {
+      console.log('[AuthProvider] Starting silent token refresh...')
+      setState(prev => ({ ...prev, isRefreshing: true }))
+
+      // Create hidden iframe if it doesn't exist
+      if (!iframeRef.current) {
+        const iframe = document.createElement('iframe')
+        iframe.style.display = 'none'
+        iframe.id = 'auth-refresh-iframe'
+        document.body.appendChild(iframe)
+        iframeRef.current = iframe
+      }
+
+      const iframe = iframeRef.current
+      let resolved = false
+
+      const cleanup = () => {
+        iframe.removeEventListener('load', onLoad)
+        window.removeEventListener('message', onMessage)
+        clearTimeout(timeout)
+      }
+
+      // Listen for postMessage from the refresh-complete page
+      const onMessage = (event: MessageEvent) => {
+        if (event.data?.type === 'auth-refresh-complete') {
+          if (resolved) return
+          resolved = true
+          console.log('[AuthProvider] Silent refresh complete (via postMessage)')
+          setState(prev => ({ ...prev, isRefreshing: false }))
+          cleanup()
+          resolve(true)
+        }
+      }
+
+      // Fallback: detect via iframe load event
+      const onLoad = () => {
+        // Wait a bit for postMessage, but resolve anyway after delay
+        setTimeout(() => {
+          if (resolved) return
+          resolved = true
+          console.log('[AuthProvider] Silent refresh complete (via load event)')
+          setState(prev => ({ ...prev, isRefreshing: false }))
+          cleanup()
+          resolve(true)
+        }, 200)
+      }
+
+      // Set up timeout
+      const timeout = setTimeout(() => {
+        if (resolved) return
+        resolved = true
+        console.log('[AuthProvider] Silent refresh timed out')
+        setState(prev => ({ ...prev, isRefreshing: false }))
+        cleanup()
+        resolve(false)
+      }, 10000) // 10 second timeout
+
+      window.addEventListener('message', onMessage)
+      iframe.addEventListener('load', onLoad)
+
+      // Navigate iframe to auto-login (which will set the cookie and redirect)
+      iframe.src = '/api/auth/auto-login?redirect=/api/auth/refresh-complete&silent=1'
+    })
+  }, [])
+
+  const checkAuth = useCallback(async () => {
+    // IMPORTANT: Never try to redirect or refresh when on login page
+    // Let AutoLogin component handle authentication there
+    const isLoginPage = window.location.pathname === '/login'
+
+    try {
+      const response = await fetch('/api/admins/me', {
+        credentials: 'include',
+      })
+
+      if (!response.ok) {
+        throw new Error('Auth check failed')
+      }
+
+      const data = await response.json()
+
+      if (data.user) {
+        refreshAttempts.current = 0 // Reset on success
+        setState(prev => ({
+          ...prev,
+          isAuthenticated: true,
+          isLoading: false,
+          user: { email: data.user.email, id: data.user.id },
+          error: null,
+        }))
+      } else {
+        // Token expired or invalid
+        if (isLoginPage) {
+          // On login page - just update state, let AutoLogin handle redirect
+          setState(prev => ({
+            ...prev,
+            isAuthenticated: false,
+            isLoading: false,
+            user: null,
+            error: 'Not authenticated',
+          }))
+          return
+        }
+
+        // Not on login page - try silent refresh (up to 3 times)
+        if (refreshAttempts.current < 3) {
+          refreshAttempts.current++
+          console.log(`[AuthProvider] Token expired, attempting silent refresh (${refreshAttempts.current}/3)...`)
+          const success = await silentRefresh()
+          if (success) {
+            // Re-check auth after refresh
+            setTimeout(() => checkAuth(), 500)
+            return
+          }
+        }
+
+        // Silent refresh failed - redirect to login
+        // Capture current path BEFORE any redirect
+        const currentPath = window.location.pathname + window.location.search
+        // Don't include /login in redirect to avoid loops
+        const redirectPath = currentPath.startsWith('/login') ? '/' : currentPath
+        console.log('[AuthProvider] Silent refresh failed, redirecting to login...')
+        window.location.href = `/api/auth/auto-login?redirect=${encodeURIComponent(redirectPath)}`
+      }
+    } catch (error) {
+      console.error('[AuthProvider] Auth check error:', error)
+      if (isLoginPage) {
+        setState(prev => ({
+          ...prev,
+          isAuthenticated: false,
+          isLoading: false,
+          user: null,
+          error: String(error),
+        }))
+        return
+      }
+      // Try silent refresh on error too
+      if (refreshAttempts.current < 3) {
+        refreshAttempts.current++
+        const success = await silentRefresh()
+        if (success) {
+          setTimeout(() => checkAuth(), 500)
+          return
+        }
+      }
+      const currentPath = window.location.pathname + window.location.search
+      const redirectPath = currentPath.startsWith('/login') ? '/' : currentPath
+      window.location.href = `/api/auth/auto-login?redirect=${encodeURIComponent(redirectPath)}`
+    }
+  }, [silentRefresh])
+
+  const refreshAuth = useCallback(async () => {
+    setState(prev => ({ ...prev, isLoading: true }))
+    await checkAuth()
+  }, [checkAuth])
+
+  // Initial auth check
+  useEffect(() => {
+    checkAuth()
+  }, [checkAuth])
+
+  // Periodic auth check to detect token expiration
+  useEffect(() => {
+    if (!state.isAuthenticated) return
+
+    const interval = setInterval(() => {
+      checkAuth()
+    }, checkInterval)
+
+    return () => clearInterval(interval)
+  }, [state.isAuthenticated, checkInterval, checkAuth])
+
+  // Also check on window focus (user might have been away)
+  useEffect(() => {
+    const handleFocus = () => {
+      if (state.isAuthenticated) {
+        checkAuth()
+      }
+    }
+
+    window.addEventListener('focus', handleFocus)
+    return () => window.removeEventListener('focus', handleFocus)
+  }, [state.isAuthenticated, checkAuth])
+
+  return (
+    <AuthContext.Provider value={{ ...state, refreshAuth }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}

package/src/auth/AutoLogin.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+
+/**
+ * Custom login component that auto-redirects to oauth.do login
+ * Replaces Payload's default login form
+ */
+export default function AutoLogin() {
+  const [status, setStatus] = useState('Checking authentication...')
+  const redirectedRef = useRef(false)
+
+  useEffect(() => {
+    // Prevent double-redirect from React strict mode or multiple renders
+    if (redirectedRef.current) return
+
+    // Check if we already have an oauth token cookie
+    const hasCookie = document.cookie.includes('oauth-token=')
+
+    // Check URL for loop detection
+    const url = new URL(window.location.href)
+    const loopCount = parseInt(url.searchParams.get('_loop') || '0')
+
+    if (loopCount > 5) {
+      setStatus('Authentication failed. Please run "oauth.do login" in terminal and refresh.')
+      return
+    }
+
+    if (hasCookie) {
+      // Already have cookie - verify it's valid before redirecting
+      setStatus('Verifying authentication...')
+      redirectedRef.current = true
+
+      fetch('/api/admins/me', { credentials: 'include' })
+        .then(res => res.json())
+        .then(data => {
+          if (data.user) {
+            setStatus('Authenticated. Loading dashboard...')
+            window.location.href = '/'
+          } else {
+            // Cookie exists but token is invalid - get a fresh one
+            setStatus('Refreshing token...')
+            window.location.href = `/api/auth/auto-login?redirect=/&_loop=${loopCount + 1}`
+          }
+        })
+        .catch(() => {
+          // Error checking auth - try to refresh token
+          window.location.href = `/api/auth/auto-login?redirect=/&_loop=${loopCount + 1}`
+        })
+      return
+    }
+
+    // No cookie, redirect to auto-login with loop counter
+    redirectedRef.current = true
+    setStatus('Redirecting to login...')
+    window.location.href = `/api/auth/auto-login?redirect=/&_loop=${loopCount + 1}`
+  }, [])
+
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      fontFamily: 'system-ui, sans-serif'
+    }}>
+      <p>{status}</p>
+    </div>
+  )
+}

package/src/auth/index.ts

@@ -0,0 +1,4 @@
+// Auth components for Payload CMS admin
+export { AdminAuthWrapper } from './AdminAuthWrapper'
+export { AuthProvider, useAuth } from './AuthProvider'
+export { default as AutoLogin } from './AutoLogin'

package/src/authkit/ApiKeys.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { ApiKeys as WorkOSApiKeys } from '@mdxui/auth/widgets'
+import { WorkOSProvider } from './WorkOSProvider'
+import { useWidgetToken } from './useWidgetToken'
+
+interface ApiKeysProps {
+  /**
+   * Organization ID for the API keys (required)
+   */
+  organizationId: string
+}
+
+/**
+ * API Keys Widget
+ *
+ * Displays and manages API keys for an organization:
+ * - Create new API keys with specific permissions
+ * - View existing API keys
+ * - Revoke API keys
+ *
+ * Requires the `widgets:api-keys:manage` permission.
+ * Themed to match Payload CMS admin styling.
+ *
+ * @example
+ * ```tsx
+ * <ApiKeys organizationId="org_123" />
+ * ```
+ */
+export function ApiKeys({ organizationId }: ApiKeysProps) {
+  const { token, loading, error } = useWidgetToken('api-keys', organizationId)
+
+  if (loading) {
+    return (
+      <div className="workos-widget-container">
+        <div className="workos-widget-loading">
+          <p>Loading API keys...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="workos-widget-container">
+        <div className="workos-widget-error">
+          <h3>Unable to load API keys</h3>
+          <p>{error}</p>
+          <p className="workos-widget-hint">
+            Make sure you have the required permissions and WorkOS is configured correctly.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!token) {
+    return (
+      <div className="workos-widget-container">
+        <div className="workos-widget-error">
+          <h3>Authentication required</h3>
+          <p>Please log in to manage API keys.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <WorkOSProvider>
+      <div className="workos-widget-container">
+        <WorkOSApiKeys authToken={token} />
+      </div>
+    </WorkOSProvider>
+  )
+}
+
+export default ApiKeys

package/src/authkit/UserProfile.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { UserProfile as WorkOSUserProfile } from '@mdxui/auth/widgets'
+import { WorkOSProvider } from './WorkOSProvider'
+import { useWidgetToken } from './useWidgetToken'
+
+interface UserProfileProps {
+  /**
+   * Optional organization ID context
+   */
+  organizationId?: string
+}
+
+/**
+ * User Profile Widget
+ *
+ * Displays user profile information including:
+ * - Profile picture
+ * - Name and email
+ * - Connected accounts (OAuth providers)
+ * - Profile editing capabilities
+ *
+ * Themed to match Payload CMS admin styling.
+ *
+ * @example
+ * ```tsx
+ * <UserProfile />
+ * ```
+ */
+export function UserProfile({ organizationId }: UserProfileProps) {
+  const { token, loading, error } = useWidgetToken('user-profile', organizationId)
+
+  if (loading) {
+    return (
+      <div className="workos-widget-container">
+        <div className="workos-widget-loading">
+          <p>Loading profile...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="workos-widget-container">
+        <div className="workos-widget-error">
+          <h3>Unable to load profile</h3>
+          <p>{error}</p>
+          <p className="workos-widget-hint">
+            Make sure you are authenticated and WorkOS is configured correctly.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!token) {
+    return (
+      <div className="workos-widget-container">
+        <div className="workos-widget-error">
+          <h3>Authentication required</h3>
+          <p>Please log in to view your profile.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <WorkOSProvider>
+      <div className="workos-widget-container">
+        <WorkOSUserProfile authToken={token} />
+      </div>
+    </WorkOSProvider>
+  )
+}
+
+export default UserProfile

package/src/authkit/UserSecurity.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { UserSecurity as WorkOSUserSecurity } from '@mdxui/auth/widgets'
+import { WorkOSProvider } from './WorkOSProvider'
+import { useWidgetToken } from './useWidgetToken'
+
+interface UserSecurityProps {
+  /**
+   * Optional organization ID context
+   */
+  organizationId?: string
+}
+
+/**
+ * User Security Widget
+ *
+ * Allows users to manage their security settings:
+ * - Password management
+ * - Multi-factor authentication (MFA)
+ * - Connected authentication methods
+ * - Security keys
+ *
+ * Themed to match Payload CMS admin styling.
+ *
+ * @example
+ * ```tsx
+ * <UserSecurity />
+ * ```
+ */
+export function UserSecurity({ organizationId }: UserSecurityProps) {
+  const { token, loading, error } = useWidgetToken('user-security', organizationId)
+
+  if (loading) {
+    return (
+      <div className="workos-widget-container">
+        <div className="workos-widget-loading">
+          <p>Loading security settings...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="workos-widget-container">
+        <div className="workos-widget-error">
+          <h3>Unable to load security settings</h3>
+          <p>{error}</p>
+          <p className="workos-widget-hint">
+            Make sure you are authenticated and WorkOS is configured correctly.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!token) {
+    return (
+      <div className="workos-widget-container">
+        <div className="workos-widget-error">
+          <h3>Authentication required</h3>
+          <p>Please log in to manage your security settings.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <WorkOSProvider>
+      <div className="workos-widget-container">
+        <WorkOSUserSecurity authToken={token} />
+      </div>
+    </WorkOSProvider>
+  )
+}
+
+export default UserSecurity

package/src/authkit/WorkOSProvider.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { WidgetsProvider } from '@mdxui/auth/providers'
+import { Theme } from '@radix-ui/themes'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { type ReactNode, useEffect } from 'react'
+import { injectThemeStyles, payloadAuthKitTheme } from './theme'
+
+// Import required CSS
+import '@radix-ui/themes/styles.css'
+
+/**
+ * QueryClient instance for TanStack Query
+ * Used by WorkOS widgets for data fetching and caching
+ */
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      retry: 1,
+    },
+  },
+})
+
+interface WorkOSProviderProps {
+  children: ReactNode
+}
+
+/**
+ * WorkOS Provider Component
+ *
+ * Wraps children with all necessary providers for AuthKit widgets:
+ * - TanStack Query for data fetching
+ * - Radix Themes for UI styling
+ * - WorkOsWidgets context
+ *
+ * Also injects custom theme styles to match Payload CMS.
+ *
+ * @example
+ * ```tsx
+ * <WorkOSProvider>
+ *   <UserProfile />
+ * </WorkOSProvider>
+ * ```
+ */
+export function WorkOSProvider({ children }: WorkOSProviderProps) {
+  // Inject custom theme styles on mount
+  useEffect(() => {
+    injectThemeStyles()
+  }, [])
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Theme
+        appearance={payloadAuthKitTheme.appearance}
+        accentColor={payloadAuthKitTheme.accentColor}
+        radius={payloadAuthKitTheme.radius}
+        grayColor={payloadAuthKitTheme.grayColor}
+        scaling={payloadAuthKitTheme.scaling}
+        className="workos-widgets"
+      >
+        <WidgetsProvider>
+          {children}
+        </WidgetsProvider>
+      </Theme>
+    </QueryClientProvider>
+  )
+}
+
+export default WorkOSProvider

package/src/authkit/index.ts

@@ -0,0 +1,34 @@
+/**
+ * AuthKit Widget Components
+ *
+ * WorkOS AuthKit widgets themed and configured for Payload CMS admin.
+ * These components provide user management functionality directly in the admin UI.
+ *
+ * @example
+ * ```tsx
+ * import { UserProfile, UserSecurity, WorkOSProvider } from '@mdxui/payload/authkit'
+ *
+ * // Standalone widget
+ * <UserProfile />
+ *
+ * // With provider for multiple widgets
+ * <WorkOSProvider>
+ *   <UserProfile />
+ *   <UserSecurity />
+ * </WorkOSProvider>
+ * ```
+ */
+
+// Provider
+export { WorkOSProvider } from './WorkOSProvider'
+
+// Widgets
+export { ApiKeys } from './ApiKeys'
+export { UserProfile } from './UserProfile'
+export { UserSecurity } from './UserSecurity'
+
+// Hooks
+export { useWidgetToken } from './useWidgetToken'
+
+// Theme
+export { payloadAuthKitTheme, injectThemeStyles, customThemeStyles } from './theme'