@open-mercato/ui 0.6.3-develop.3838.1.7f2657a47c → 0.6.3-develop.3857.1.da89d7530c

package/src/backend/upgrades/UpgradeActionBanner.tsx

@@ -5,10 +5,15 @@ import { Button } from '../../primitives/button'
 import { apiCall } from '../utils/apiCall'
 import { flash } from '../FlashMessages'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useBackendChrome } from '../BackendChromeProvider'
+import { hasFeature } from '@open-mercato/shared/security/features'
 
-const upgradeActionsEnabled =
-  process.env.NEXT_PUBLIC_UPGRADE_ACTIONS_ENABLED === 'true' ||
-  process.env.UPGRADE_ACTIONS_ENABLED === 'true'
+function upgradeActionsEnabled() {
+  return (
+    process.env.NEXT_PUBLIC_UPGRADE_ACTIONS_ENABLED === 'true' ||
+    process.env.UPGRADE_ACTIONS_ENABLED === 'true'
+  )
+}
 
 type UpgradeActionPayload = {
   id: string
@@ -31,23 +36,30 @@ type RunActionResponse = {
   error?: string
 }
 
+const forbiddenRedirectOptOutHeader = { 'x-om-forbidden-redirect': '0' } as const
+
 export function UpgradeActionBanner() {
   const t = useT()
+  const { payload, isReady } = useBackendChrome()
+  const canManageConfigs = isReady && hasFeature(payload?.grantedFeatures, 'configs.manage')
   const [action, setAction] = React.useState<UpgradeActionPayload | null>(null)
   const [loading, setLoading] = React.useState(false)
   const cancelledRef = React.useRef(false)
 
   const loadNextAction = React.useCallback(async () => {
-    if (!upgradeActionsEnabled) return
+    if (!canManageConfigs) return
+    if (!upgradeActionsEnabled()) return
     if (typeof window === 'undefined' || typeof fetch === 'undefined') return
-    const call = await apiCall<UpgradeActionResponse>('/api/configs/upgrade-actions')
+    const call = await apiCall<UpgradeActionResponse>('/api/configs/upgrade-actions', {
+      headers: forbiddenRedirectOptOutHeader,
+    })
     if (cancelledRef.current) return
     if (!call.ok || !call.result || !Array.isArray(call.result.actions) || !call.result.actions.length) {
       setAction(null)
       return
     }
     setAction(call.result.actions[0]!)
-  }, [])
+  }, [canManageConfigs])
 
   React.useEffect(() => {
     cancelledRef.current = false
@@ -57,15 +69,15 @@ export function UpgradeActionBanner() {
     }
   }, [loadNextAction])
 
-  if (!upgradeActionsEnabled || !action) return null
+  if (!upgradeActionsEnabled() || !canManageConfigs || !action) return null
 
   async function handleRun() {
-    if (!upgradeActionsEnabled || !action || loading) return
+    if (!upgradeActionsEnabled() || !action || loading) return
     setLoading(true)
     try {
       const response = await apiCall<RunActionResponse>('/api/configs/upgrade-actions', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: { ...forbiddenRedirectOptOutHeader, 'Content-Type': 'application/json' },
         body: JSON.stringify({ actionId: action.id }),
       })
       if (!response.ok) {

package/src/backend/utils/__tests__/api.test.ts

@@ -55,17 +55,42 @@ describe('apiFetch', () => {
     jest.restoreAllMocks()
   })
 
-  it('throws ForbiddenError when backend returns ACL hints', async () => {
+  it('throws ForbiddenError and flashes a non-redirecting banner when backend returns ACL hints', async () => {
     ;(window as unknown as Record<string, unknown>).__omOriginalFetch = jest.fn(async () =>
       createMockResponse(403, {
         error: 'Forbidden',
         requiredRoles: ['Admin'],
       }),
     )
+    const initialPath = window.location.pathname
 
     await expect(apiFetch('/api/private')).rejects.toBeInstanceOf(ForbiddenError)
     expect(flash).toHaveBeenCalledWith(
-      'Insufficient permissions. Redirecting to login…',
+      expect.stringContaining('Access denied'),
+      'warning',
+    )
+    expect(flash).toHaveBeenCalledWith(
+      expect.stringContaining('Admin'),
+      'warning',
+    )
+
+    // Regression for GH #2070: authenticated 403 must not redirect to /login.
+    jest.advanceTimersByTime(1000)
+    expect(window.location.pathname).toBe(initialPath)
+    expect(window.location.pathname).not.toContain('/login')
+  })
+
+  it('includes the missing feature name in the flash so the user sees the actual permission required', async () => {
+    ;(window as unknown as Record<string, unknown>).__omOriginalFetch = jest.fn(async () =>
+      createMockResponse(403, {
+        error: 'Forbidden',
+        requiredFeatures: ['sales.channels.manage'],
+      }),
+    )
+
+    await expect(apiFetch('/api/sales/channels')).rejects.toBeInstanceOf(ForbiddenError)
+    expect(flash).toHaveBeenCalledWith(
+      expect.stringContaining('sales.channels.manage'),
       'warning',
     )
   })

package/src/backend/utils/api.ts

@@ -85,32 +85,47 @@ export function setAuthRedirectConfig(cfg: { defaultForbiddenRoles?: readonly st
   }
 }
 
-export function redirectToForbiddenLogin(options?: { requiredRoles?: string[] | null; requiredFeatures?: string[] | null }) {
+function formatForbiddenAccessMessage(options?: { requiredRoles?: string[] | null; requiredFeatures?: string[] | null }): string {
+  const features = options?.requiredFeatures?.filter(Boolean) ?? []
+  const roles = options?.requiredRoles?.filter(Boolean) ?? []
+  const effectiveRoles = roles.length ? roles : DEFAULT_FORBIDDEN_ROLES.filter(Boolean)
+  if (features.length) {
+    return `Access denied: you are missing the required permission "${features.join(', ')}". Contact your administrator.`
+  }
+  if (effectiveRoles.length) {
+    return `Access denied: this area requires the role "${effectiveRoles.join(', ')}". Contact your administrator.`
+  }
+  return 'Access denied: you do not have permission to perform this action.'
+}
+
+/**
+ * Signal a forbidden access attempt for an authenticated user via a flash banner.
+ *
+ * Authenticated 403 responses must never redirect to `/login` — that creates an
+ * infinite loop because the login page detects the active session and bounces
+ * the user back to the failing destination (see GH #2070). Pages that need an
+ * inline banner should catch `ForbiddenError` and render `AccessDeniedMessage`
+ * from `@open-mercato/ui/backend/detail`.
+ */
+export function notifyForbiddenAccess(options?: { requiredRoles?: string[] | null; requiredFeatures?: string[] | null }) {
   if (typeof window === 'undefined') return
-  if (window.location.pathname.startsWith('/login')) return
-  // Portal routes have their own customer auth — never redirect to staff login
+  // Portal routes have their own customer auth — keep the existing no-op contract.
   if (/\/[^/]+\/portal(\/|$)/.test(window.location.pathname)) return
   try {
-    const current = window.location.pathname + window.location.search
-    const features = options?.requiredFeatures?.filter(Boolean) ?? []
-    const roles = options?.requiredRoles?.filter(Boolean) ?? []
-    const fallbackRoles = DEFAULT_FORBIDDEN_ROLES.filter(Boolean)
-    const effectiveRoles = roles.length ? roles : fallbackRoles
-    const query = features.length
-      ? `requireFeature=${encodeURIComponent(features.join(','))}`
-      : effectiveRoles.length
-        ? `requireRole=${encodeURIComponent(effectiveRoles.map(String).join(','))}`
-        : ''
-    const url = query
-      ? `/login?${query}&redirect=${encodeURIComponent(current)}`
-      : `/login?redirect=${encodeURIComponent(current)}`
-    flash('Insufficient permissions. Redirecting to login…', 'warning')
-    setTimeout(() => { window.location.href = url }, 60)
+    flash(formatForbiddenAccessMessage(options), 'warning')
   } catch {
     // no-op
   }
 }
 
+/**
+ * @deprecated Renamed to {@link notifyForbiddenAccess}. The previous name
+ * implied a `/login` redirect that no longer happens (see GH #2070). Kept as an
+ * exported alias for one minor version so third-party module imports keep
+ * building; update imports to `notifyForbiddenAccess`.
+ */
+export const redirectToForbiddenLogin = notifyForbiddenAccess
+
 export async function apiFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
   type FetchType = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>
   const originalFetch =
@@ -191,7 +206,7 @@ export async function apiFetch(input: RequestInfo | URL, init?: RequestInit): Pr
       } catch {}
       const hasAclHints = Boolean((roles && roles.length) || (features && features.length))
       if (hasAclHints) {
-        redirectToForbiddenLogin({ requiredRoles: roles, requiredFeatures: features })
+        notifyForbiddenAccess({ requiredRoles: roles, requiredFeatures: features })
       }
       let msg = 'Forbidden'
       if (aclData && typeof aclData === 'object') {

package/src/theme/QueryProvider.tsx

@@ -1,9 +1,10 @@
 "use client"
 import * as React from 'react'
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { redirectToSessionRefresh, redirectToForbiddenLogin, UnauthorizedError, ForbiddenError, apiFetch, setAuthRedirectConfig } from '../backend/utils/api'
+import { redirectToSessionRefresh, notifyForbiddenAccess, UnauthorizedError, ForbiddenError, apiFetch, setAuthRedirectConfig } from '../backend/utils/api'
 
-// Ensure global fetch calls also respect our redirect-on-401/403 policy.
+// Ensure global fetch calls also flow through apiFetch so 401 session-refresh
+// and 403 access-denied flash banners fire consistently.
 function ensureGlobalFetchInterception() {
   if (typeof window === 'undefined') return
   const w = window as any
@@ -17,18 +18,18 @@ const client = new QueryClient({
   queryCache: new QueryCache({
     onError: (error) => {
       if (error instanceof UnauthorizedError) redirectToSessionRefresh()
-      else if (error instanceof ForbiddenError) redirectToForbiddenLogin()
+      else if (error instanceof ForbiddenError) notifyForbiddenAccess()
       // As a fallback, try to detect common cases
       else if ((error as any)?.status === 401) redirectToSessionRefresh()
-      else if ((error as any)?.status === 403) redirectToForbiddenLogin()
+      else if ((error as any)?.status === 403) notifyForbiddenAccess()
     },
   }),
   mutationCache: new MutationCache({
     onError: (error) => {
       if (error instanceof UnauthorizedError) redirectToSessionRefresh()
-      else if (error instanceof ForbiddenError) redirectToForbiddenLogin()
+      else if (error instanceof ForbiddenError) notifyForbiddenAccess()
       else if ((error as any)?.status === 401) redirectToSessionRefresh()
-      else if ((error as any)?.status === 403) redirectToForbiddenLogin()
+      else if ((error as any)?.status === 403) notifyForbiddenAccess()
     },
   }),
 })