@sanity/sdk-react 3.0.0-rc.0 → 3.0.0-rc.2

package/src/components/auth/AuthBoundary.test.tsx

@@ -148,7 +148,7 @@ describe('AuthBoundary', () => {
       isExchangingToken: false,
     })
     const {container} = render(
-      <ResourceProvider resource={{projectId: 'p', dataset: 'd'}} fallback={null}>
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
         <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
       </ResourceProvider>,
     )
@@ -165,7 +165,7 @@ describe('AuthBoundary', () => {
       token: 'exampleToken',
     })
     render(
-      <ResourceProvider resource={{projectId: 'p', dataset: 'd'}} fallback={null}>
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
         <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
       </ResourceProvider>,
     )
@@ -179,7 +179,7 @@ describe('AuthBoundary', () => {
       error: new Error('test error'),
     })
     render(
-      <ResourceProvider resource={{projectId: 'p', dataset: 'd'}} fallback={null}>
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
         <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
       </ResourceProvider>,
     )
@@ -196,7 +196,7 @@ describe('AuthBoundary', () => {
 
   it('renders children when logged in and org verification passes', () => {
     render(
-      <ResourceProvider resource={{projectId: 'p', dataset: 'd'}} fallback={null}>
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
         <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
       </ResourceProvider>,
     )
@@ -218,7 +218,7 @@ describe('AuthBoundary', () => {
 
     // Need to catch the error thrown during render. ErrorBoundary mock handles this.
     render(
-      <ResourceProvider resource={{projectId: 'p', dataset: 'd'}} fallback={null}>
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
         <AuthBoundary verifyOrganization={true} projectIds={testProjectIds}>
           <div>Protected Content</div>
         </AuthBoundary>
@@ -250,7 +250,7 @@ describe('AuthBoundary', () => {
     })
 
     render(
-      <ResourceProvider resource={{projectId: 'p', dataset: 'd'}} fallback={null}>
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
         <AuthBoundary verifyOrganization={false} projectIds={testProjectIds}>
           <div>Protected Content</div>
         </AuthBoundary>
@@ -275,7 +275,7 @@ describe('AuthBoundary', () => {
     mockUseVerifyOrgProjects.mockImplementation(() => null)
 
     render(
-      <ResourceProvider resource={{projectId: 'p', dataset: 'd'}} fallback={null}>
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
         <AuthBoundary projectIds={testProjectIds}>
           <div>Protected Content</div>
         </AuthBoundary>

package/src/components/auth/AuthBoundary.tsx

@@ -1,13 +1,17 @@
 import {CorsOriginError} from '@sanity/client'
-import {AuthStateType, getCorsErrorProjectId, isStudioConfig} from '@sanity/sdk'
+import {AuthStateType, getCorsErrorProjectId, isImportError} from '@sanity/sdk'
+import {isStudioConfig} from '@sanity/sdk/_internal'
 import {useEffect, useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
 import {ComlinkTokenRefreshProvider} from '../../context/ComlinkTokenRefresh'
+import {isWorkbenchEnvironment} from '../../context/workbenchToken'
+import {WorkbenchTokenRefreshProvider} from '../../context/WorkbenchTokenRefresh'
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLoginUrl} from '../../hooks/auth/useLoginUrl'
 import {useVerifyOrgProjects} from '../../hooks/auth/useVerifyOrgProjects'
 import {useSanityInstance} from '../../hooks/context/useSanityInstance'
+import {ChunkLoadError} from '../errors/ChunkLoadError'
 import {CorsErrorComponent} from '../errors/CorsErrorComponent'
 import {isInIframe} from '../utils'
 import {AuthError} from './AuthError'
@@ -108,8 +112,24 @@ export function AuthBoundary({
   LoginErrorComponent = LoginError,
   ...props
 }: AuthBoundaryProps): React.ReactNode {
+  /**
+   * When the session is re-established (e.g. ComlinkTokenRefresh silently mints a
+   * fresh token via setAuthToken), the auth store returns to LOGGED_IN but the
+   * ErrorBoundary stays latched on its fallback until reset. Keying it on the
+   * recovered session lets it clear automatically
+   */
+  const authState = useAuthState()
+  const sessionResetKey =
+    authState.type === AuthStateType.LOGGED_IN ? authState.token : authState.type
+
   const FallbackComponent = useMemo(() => {
     return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {
+      // Chunk-load errors from any lazy-loaded code beneath this boundary
+      // (typically the consumer's app) get the chunk-aware fallback instead
+      // of being misreported as auth errors.
+      if (isImportError(fallbackProps.error)) {
+        return <ChunkLoadError {...fallbackProps} />
+      }
       if (fallbackProps.error instanceof CorsOriginError) {
         return (
           <CorsErrorComponent
@@ -124,9 +144,11 @@ export function AuthBoundary({
 
   return (
     <ComlinkTokenRefreshProvider>
-      <ErrorBoundary FallbackComponent={FallbackComponent}>
-        <AuthSwitch {...props} />
-      </ErrorBoundary>
+      <WorkbenchTokenRefreshProvider>
+        <ErrorBoundary FallbackComponent={FallbackComponent} resetKeys={[sessionResetKey]}>
+          <AuthSwitch {...props} />
+        </ErrorBoundary>
+      </WorkbenchTokenRefreshProvider>
     </ComlinkTokenRefreshProvider>
   )
 }
@@ -165,8 +187,9 @@ function AuthSwitch({
   const loginUrl = useLoginUrl()
 
   useEffect(() => {
-    if (isLoggedOut && !isInIframe() && !isStudio) {
-      // We don't want to redirect to login if we're in the Dashboard nor in studio mode
+    if (isLoggedOut && !isInIframe() && !isStudio && !isWorkbenchEnvironment()) {
+      // We don't want to redirect to login if we're in the Dashboard, in studio
+      // mode, or in the workbench (the OS owns the session and mints the token)
       window.location.href = loginUrl
     }
   }, [isLoggedOut, loginUrl, isStudio])

package/src/components/auth/DashboardAccessRequest.tsx

@@ -0,0 +1,37 @@
+import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
+import {useEffect} from 'react'
+
+import {useWindowConnection} from '../../hooks/comlink/useWindowConnection'
+
+interface DashboardAccessRequestProps {
+  projectId: string
+}
+
+/**
+ * Sends a `dashboard/v1/auth/access/request` message to the dashboard via
+ * comlink so the user can request access to a project they don't belong to.
+ *
+ * This is intentionally isolated in its own component because
+ * `useWindowConnection` suspends until a comlink node is available, which
+ * never happens outside the dashboard. Callers must gate rendering on
+ * `getIsInDashboardState(...).getCurrent()` and wrap this in a
+ * {@link https://react.dev/reference/react/Suspense | Suspense} boundary
+ * so the suspension stays local instead of bubbling up to the app shell.
+ *
+ * @internal
+ */
+export function DashboardAccessRequest({projectId}: DashboardAccessRequestProps): null {
+  const {fetch} = useWindowConnection({
+    name: SDK_NODE_NAME,
+    connectTo: SDK_CHANNEL_NAME,
+  })
+
+  useEffect(() => {
+    fetch('dashboard/v1/auth/access/request', {
+      resourceType: 'project',
+      resourceId: projectId,
+    })
+  }, [fetch, projectId])
+
+  return null
+}

package/src/components/auth/LoginError.test.tsx

@@ -1,19 +1,51 @@
+import {ClientError} from '@sanity/client'
+import {getIsInDashboardState} from '@sanity/sdk'
 import {fireEvent, render, screen, waitFor} from '@testing-library/react'
-import {describe, expect, it, vi} from 'vitest'
+import {afterEach, beforeEach, describe, expect, it, type Mock, vi} from 'vitest'
 
 import {ResourceProvider} from '../../context/ResourceProvider'
 import {AuthError} from './AuthError'
 import {LoginError} from './LoginError'
 
+vi.mock('@sanity/sdk', async () => {
+  const actual = await vi.importActual('@sanity/sdk')
+  return {
+    ...actual,
+    getIsInDashboardState: vi.fn(() => ({getCurrent: vi.fn(() => false)})),
+  }
+})
+
+const mockLogout = vi.fn(async () => {})
 vi.mock('../../hooks/auth/useLogOut', () => ({
-  useLogOut: vi.fn(() => async () => {}),
+  useLogOut: vi.fn(() => mockLogout),
 }))
 
+const mockWindowConnectionFetch = vi.fn()
 vi.mock('../../hooks/comlink/useWindowConnection', () => ({
-  useWindowConnection: vi.fn(() => ({fetch: vi.fn()})),
+  useWindowConnection: vi.fn(() => ({fetch: mockWindowConnectionFetch})),
 }))
 
+const mockGetIsInDashboardState = getIsInDashboardState as Mock
+
+function makeClientError(statusCode: number, body: unknown): ClientError {
+  return new ClientError({
+    statusCode,
+    headers: {},
+    body,
+    url: 'https://example.test',
+    method: 'GET',
+  } as ConstructorParameters<typeof ClientError>[0])
+}
+
 describe('LoginError', () => {
+  beforeEach(() => {
+    mockGetIsInDashboardState.mockReturnValue({getCurrent: vi.fn(() => false)})
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
   it('shows authentication error and retry button', async () => {
     const mockReset = vi.fn()
     const error = new AuthError(new Error('Test error'))
@@ -38,7 +70,6 @@ describe('LoginError', () => {
     const mockReset = vi.fn()
     const nonAuthError = new Error('Non-auth error')
 
-    // Suppress console.error during this test
     const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
     expect(() => {
@@ -49,6 +80,161 @@ describe('LoginError', () => {
       )
     }).toThrow('Non-auth error')
 
-    consoleErrorSpy.mockRestore() // Restore original console.error behavior
+    consoleErrorSpy.mockRestore()
+  })
+
+  // In a standalone app (not embedded in the dashboard) the dashboard access
+  // request path must not render, because useWindowConnection would suspend
+  // waiting for a comlink node that never arrives.
+  it('renders synchronously on a 401 projectUserNotFound error outside the dashboard', async () => {
+    mockGetIsInDashboardState.mockReturnValue({getCurrent: vi.fn(() => false)})
+
+    const error = makeClientError(401, {
+      error: {
+        type: 'projectUserNotFoundError',
+        description: 'User is not a member of this project.',
+      },
+    })
+
+    render(
+      <ResourceProvider fallback={<div>SUSPENDED</div>}>
+        <LoginError error={error} resetErrorBoundary={vi.fn()} />
+      </ResourceProvider>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText('User is not a member of this project.')).toBeInTheDocument()
+    })
+    // ClientError must render under the "Authentication Error" heading; it is
+    // not a ConfigurationError.
+    expect(screen.getByText('Authentication Error')).toBeInTheDocument()
+    expect(screen.queryByText('Configuration Error')).not.toBeInTheDocument()
+    expect(screen.queryByText('SUSPENDED')).not.toBeInTheDocument()
+    expect(mockWindowConnectionFetch).not.toHaveBeenCalled()
+  })
+
+  it('fires the dashboard access request on a 401 projectUserNotFound error inside the dashboard', async () => {
+    mockGetIsInDashboardState.mockReturnValue({getCurrent: vi.fn(() => true)})
+
+    const error = makeClientError(401, {
+      error: {
+        type: 'projectUserNotFoundError',
+        description: 'User is not a member of this project.',
+      },
+    })
+
+    render(
+      <ResourceProvider projectId="abc123" dataset="production" fallback={<div>SUSPENDED</div>}>
+        <LoginError error={error} resetErrorBoundary={vi.fn()} />
+      </ResourceProvider>,
+    )
+
+    await waitFor(() => {
+      expect(mockWindowConnectionFetch).toHaveBeenCalledWith('dashboard/v1/auth/access/request', {
+        resourceType: 'project',
+        resourceId: 'abc123',
+      })
+    })
+  })
+
+  // Mirrors the real production chain: AuthBoundary wraps the ClientError in
+  // an AuthError before the error boundary hands it to LoginError. The
+  // `.cause` unwrap is what makes the dashboard access request path reachable
+  // at runtime (without it, the previous `error instanceof ClientError` check
+  // was dead code in the dashboard).
+  it('fires the dashboard access request when the projectUserNotFound ClientError is wrapped in an AuthError', async () => {
+    mockGetIsInDashboardState.mockReturnValue({getCurrent: vi.fn(() => true)})
+
+    const clientError = makeClientError(401, {
+      error: {
+        type: 'projectUserNotFoundError',
+        description: 'User is not a member of this project.',
+      },
+    })
+    const error = new AuthError(clientError)
+    const mockReset = vi.fn()
+
+    render(
+      <ResourceProvider projectId="abc123" dataset="production" fallback={<div>SUSPENDED</div>}>
+        <LoginError error={error} resetErrorBoundary={mockReset} />
+      </ResourceProvider>,
+    )
+
+    await waitFor(() => {
+      expect(mockWindowConnectionFetch).toHaveBeenCalledWith('dashboard/v1/auth/access/request', {
+        resourceType: 'project',
+        resourceId: 'abc123',
+      })
+    })
+
+    expect(screen.getByText('Authentication Error')).toBeInTheDocument()
+    expect(screen.getByText('User is not a member of this project.')).toBeInTheDocument()
+    // projectUserNotFound intentionally hides the Retry CTA: the user can't
+    // fix it by retrying, only by getting access granted through the
+    // dashboard access request flow above.
+    expect(screen.queryByRole('button', {name: 'Retry'})).not.toBeInTheDocument()
+    // Dashboard flow must never auto-log-out; ComlinkTokenRefreshProvider is
+    // responsible for any token mutation, not LoginError.
+    expect(mockLogout).not.toHaveBeenCalled()
+    expect(mockReset).not.toHaveBeenCalled()
+  })
+
+  // In a standalone app, an invalid-token 401 (anything other than
+  // `projectUserNotFoundError`) should silently log the user out so that
+  // AuthBoundary's LOGGED_OUT effect redirects to the Sanity login URL.
+  // AuthBoundary wraps the real ClientError in an AuthError before it reaches
+  // the error boundary, so the component must unwrap `.cause` to see it.
+  it('auto-logs-out on a non-projectUserNotFound 401 outside the dashboard', async () => {
+    mockGetIsInDashboardState.mockReturnValue({getCurrent: vi.fn(() => false)})
+
+    const mockReset = vi.fn()
+    const clientError = makeClientError(401, {
+      error: {type: 'someOther401Type', description: 'Token is invalid'},
+    })
+    const error = new AuthError(clientError)
+
+    render(
+      <ResourceProvider fallback={null}>
+        <LoginError error={error} resetErrorBoundary={mockReset} />
+      </ResourceProvider>,
+    )
+
+    expect(screen.getByText('Authentication Error')).toBeInTheDocument()
+    expect(await screen.findByText('Signing you out and returning to login...')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(mockLogout).toHaveBeenCalled()
+    })
+    await waitFor(() => {
+      expect(mockReset).toHaveBeenCalled()
+    })
+  })
+
+  // In the dashboard we must not auto-log-out on a generic 401.
+  // ComlinkTokenRefreshProvider is responsible for asking the parent window
+  // for a fresh token; the Retry button stays as a manual fallback.
+  it('does not auto-log-out on a non-projectUserNotFound 401 inside the dashboard', async () => {
+    mockGetIsInDashboardState.mockReturnValue({getCurrent: vi.fn(() => true)})
+
+    const mockReset = vi.fn()
+    const clientError = makeClientError(401, {
+      error: {type: 'someOther401Type', description: 'Token is invalid'},
+    })
+    const error = new AuthError(clientError)
+
+    render(
+      <ResourceProvider projectId="abc123" dataset="production" fallback={null}>
+        <LoginError error={error} resetErrorBoundary={mockReset} />
+      </ResourceProvider>,
+    )
+
+    expect(screen.getByText('Authentication Error')).toBeInTheDocument()
+    expect(
+      screen.getByText('Please try again or contact support if the problem persists.'),
+    ).toBeInTheDocument()
+    expect(screen.getByRole('button', {name: 'Retry'})).toBeInTheDocument()
+    expect(mockLogout).not.toHaveBeenCalled()
+    expect(mockReset).not.toHaveBeenCalled()
+    // Generic 401s should not trigger the dashboard access request flow.
+    expect(mockWindowConnectionFetch).not.toHaveBeenCalled()
   })
 })

package/src/components/auth/LoginError.tsx

@@ -1,22 +1,20 @@
 import {ClientError} from '@sanity/client'
-import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
+import {AuthStateType, getIsInDashboardState} from '@sanity/sdk'
 import {
-  AuthStateType,
   getClientErrorApiBody,
   getClientErrorApiDescription,
-  isDatasetResource,
   isProjectUserNotFoundClientError,
-} from '@sanity/sdk'
-import {useCallback, useContext, useEffect, useState} from 'react'
+} from '@sanity/sdk/_internal'
+import {Suspense, useCallback, useEffect, useMemo, useRef} from 'react'
 import {type FallbackProps} from 'react-error-boundary'
 
-import {ResourceContext} from '../../context/DefaultResourceContext'
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLogOut} from '../../hooks/auth/useLogOut'
-import {useWindowConnection} from '../../hooks/comlink/useWindowConnection'
+import {useSanityInstance} from '../../hooks/context/useSanityInstance'
 import {Error} from '../errors/Error'
 import {AuthError} from './AuthError'
 import {ConfigurationError} from './ConfigurationError'
+import {DashboardAccessRequest} from './DashboardAccessRequest'
 /**
  * @alpha
  */
@@ -40,74 +38,119 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
 
   const logout = useLogOut()
   const authState = useAuthState()
-  const resource = useContext(ResourceContext)
-  const projectId = resource && isDatasetResource(resource) ? resource.projectId : undefined
+  const instance = useSanityInstance()
+  const {
+    config: {projectId},
+  } = instance
 
-  const [authErrorMessage, setAuthErrorMessage] = useState(
-    'Please try again or contact support if the problem persists.',
-  )
-  const [showRetryCta, setShowRetryCta] = useState(true)
+  // Errors surfaced through `AuthBoundary` arrive wrapped in `AuthError`, with
+  // the original `ClientError` tucked under `.cause`. Unwrapping it here lets
+  // the 401/404 branches below respond to the real status code instead of
+  // silently skipping because `error instanceof ClientError` is false.
+  const clientError: ClientError | null =
+    error instanceof ClientError
+      ? error
+      : error instanceof AuthError && error.cause instanceof ClientError
+        ? error.cause
+        : null
+
+  const isInDashboard = getIsInDashboardState(instance).getCurrent()
 
-  /**
-   * TODO: before merge update message-protocol package to include the new message type
-   */
-  const {fetch} = useWindowConnection({
-    name: SDK_NODE_NAME,
-    connectTo: SDK_CHANNEL_NAME,
-  })
+  const isProjectUserNotFound =
+    !!clientError && clientError.statusCode === 401 && isProjectUserNotFoundClientError(clientError)
+
+  // The dashboard access request flow relies on a comlink connection to the
+  // parent window. In standalone apps that connection never materializes, so
+  // we must skip it entirely to avoid suspending forever on the parent's
+  // Suspense boundary. Resolving to the projectId (or null) here lets the JSX
+  // render the child with a single non-null guard.
+  const dashboardAccessProjectId =
+    isProjectUserNotFound && projectId && isInDashboard ? projectId : null
 
   const handleRetry = useCallback(async () => {
     await logout()
     resetErrorBoundary()
   }, [logout, resetErrorBoundary])
 
-  useEffect(() => {
-    if (error instanceof ClientError) {
-      if (error.statusCode === 401) {
-        // Surface a friendly message for projectUserNotFoundError (do not logout/refresh)
-        if (isProjectUserNotFoundClientError(error)) {
-          const description = getClientErrorApiDescription(error)
-          if (description) setAuthErrorMessage(description)
-          setShowRetryCta(false)
-          /**
-           * Handoff to dashboard to enable the request access flow for the project.
-           */
-          fetch('dashboard/v1/auth/access/request', {
-            resourceType: 'project',
-            resourceId: projectId,
-          })
-        } else {
-          setShowRetryCta(true)
-          handleRetry()
-        }
-      } else if (error.statusCode === 404) {
-        const errorMessage = getClientErrorApiBody(error)?.message || ''
-        if (errorMessage.startsWith('Session with sid') && errorMessage.endsWith('not found')) {
-          setAuthErrorMessage('The session ID is invalid or expired.')
-        } else {
-          setAuthErrorMessage('The login link is invalid or expired. Please try again.')
+  // Display state is fully derived from the inputs above, so we don't need
+  // to mirror it through useState/useEffect.
+  const {authErrorMessage, showRetryCta} = useMemo(() => {
+    let message = 'Please try again or contact support if the problem persists.'
+    let retry = true
+
+    if (clientError) {
+      if (clientError.statusCode === 401) {
+        if (isProjectUserNotFound) {
+          const description = getClientErrorApiDescription(clientError)
+          if (description) message = description
+          retry = false
+        } else if (!isInDashboard) {
+          message = 'Signing you out and returning to login...'
+          retry = true
         }
-        setShowRetryCta(true)
+        // Dashboard non-projectUserNotFound 401: leave the current UI in place
+        // and let ComlinkTokenRefreshProvider request a fresh token from the
+        // parent window. The Retry button remains as a manual fallback.
+      } else if (clientError.statusCode === 404) {
+        const errorMessage = getClientErrorApiBody(clientError)?.message || ''
+        message =
+          errorMessage.startsWith('Session with sid') && errorMessage.endsWith('not found')
+            ? 'The session ID is invalid or expired.'
+            : 'The login link is invalid or expired. Please try again.'
+        retry = true
       }
     }
     if (authState.type !== AuthStateType.ERROR && error instanceof ConfigurationError) {
-      setAuthErrorMessage(error.message)
-      setShowRetryCta(true)
+      message = error.message
+      retry = true
     }
-  }, [authState, handleRetry, error, fetch, projectId])
+    return {authErrorMessage: message, showRetryCta: retry}
+  }, [authState, clientError, error, isInDashboard, isProjectUserNotFound])
+
+  // Guards against re-entering the standalone auto-logout branch below. Once
+  // `logout()` flips the auth store to LOGGED_OUT, `useAuthState` emits a new
+  // `authState` reference and re-runs this effect; without the ref we'd call
+  // `handleRetry` again on every emission and React eventually aborts with
+  // "Maximum update depth exceeded", leaving a blank page.
+  const hasAutoLoggedOutRef = useRef(false)
+
+  // Standalone apps: the token is bad and there's no parent window to mint a
+  // new one, so log the user out and let `AuthBoundary`'s LOGGED_OUT effect
+  // redirect to the Sanity login URL.
+  useEffect(() => {
+    if (
+      clientError &&
+      clientError.statusCode === 401 &&
+      !isProjectUserNotFound &&
+      !isInDashboard &&
+      !hasAutoLoggedOutRef.current
+    ) {
+      hasAutoLoggedOutRef.current = true
+      handleRetry()
+    }
+  }, [clientError, handleRetry, isInDashboard, isProjectUserNotFound])
 
   return (
-    <Error
-      heading={error instanceof AuthError ? 'Authentication Error' : 'Configuration Error'}
-      description={authErrorMessage}
-      cta={
-        showRetryCta
-          ? {
-              text: 'Retry',
-              onClick: handleRetry,
-            }
-          : undefined
-      }
-    />
+    <>
+      {dashboardAccessProjectId && (
+        <Suspense fallback={null}>
+          <DashboardAccessRequest projectId={dashboardAccessProjectId} />
+        </Suspense>
+      )}
+      <Error
+        heading={
+          error instanceof ConfigurationError ? 'Configuration Error' : 'Authentication Error'
+        }
+        description={authErrorMessage}
+        cta={
+          showRetryCta
+            ? {
+                text: 'Retry',
+                onClick: handleRetry,
+              }
+            : undefined
+        }
+      />
+    </>
   )
 }

package/src/components/errors/ChunkLoadError.test.tsx

@@ -0,0 +1,59 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {render, screen} from '../../../test/test-utils'
+import {ChunkLoadError} from './ChunkLoadError'
+import {CHUNK_RELOAD_STORAGE_KEY} from './chunkReloadStorage'
+
+const noop = (): void => {}
+
+describe('ChunkLoadError', () => {
+  const reloadSpy = vi.fn()
+  const originalLocation = window.location
+
+  beforeEach(() => {
+    reloadSpy.mockReset()
+    window.sessionStorage.clear()
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {...originalLocation, reload: reloadSpy},
+    })
+  })
+
+  afterEach(() => {
+    Object.defineProperty(window, 'location', {configurable: true, value: originalLocation})
+    window.sessionStorage.clear()
+  })
+
+  it('triggers an automatic reload and renders nothing on the first occurrence', () => {
+    render(
+      <ChunkLoadError
+        error={new Error('Failed to fetch dynamically imported module')}
+        resetErrorBoundary={noop}
+      />,
+    )
+
+    expect(reloadSpy).toHaveBeenCalledTimes(1)
+    expect(window.sessionStorage.getItem(CHUNK_RELOAD_STORAGE_KEY)).toBe('1')
+    expect(screen.queryByText(/new version/i)).toBeNull()
+  })
+
+  it('renders the manual reload UI when the flag is already set', () => {
+    window.sessionStorage.setItem(CHUNK_RELOAD_STORAGE_KEY, '1')
+
+    render(
+      <ChunkLoadError
+        error={new Error('Failed to fetch dynamically imported module')}
+        resetErrorBoundary={noop}
+      />,
+    )
+
+    expect(reloadSpy).not.toHaveBeenCalled()
+    expect(screen.getByText('A new version is available')).toBeInTheDocument()
+
+    const button = screen.getByRole('button', {name: 'Reload page'})
+    button.click()
+
+    expect(reloadSpy).toHaveBeenCalledTimes(1)
+    expect(window.sessionStorage.getItem(CHUNK_RELOAD_STORAGE_KEY)).toBeNull()
+  })
+})