@sanity/sdk-react 2.9.0 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -43,16 +43,14 @@
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
-    "@sanity/client": "^7.14.1",
-    "@sanity/message-protocol": "^0.18.0",
+    "@sanity/client": "^7.22.0",
+    "@sanity/message-protocol": "^0.23.0",
     "@sanity/types": "^5.2.0",
-    "@types/lodash-es": "^4.17.12",
     "groq": "3.88.1-typegen-experimental.0",
-    "lodash-es": "^4.17.21",
     "react-compiler-runtime": "19.1.0-rc.2",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "2.9.0"
+    "@sanity/sdk": "2.10.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
@@ -69,7 +67,7 @@
     "babel-plugin-react-compiler": "19.1.0-rc.1",
     "eslint": "^9.22.0",
     "groq-js": "^1.22.0",
-    "jsdom": "^25.0.1",
+    "jsdom": "^29.0.2",
     "prettier": "^3.7.3",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
@@ -77,11 +75,11 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.4",
-    "@repo/tsconfig": "0.0.1",
-    "@repo/package.config": "0.0.1",
+    "@repo/config-eslint": "0.0.0",
     "@repo/config-test": "0.0.1",
-    "@repo/package.bundle": "3.82.0",
-    "@repo/config-eslint": "0.0.0"
+    "@repo/package.config": "0.0.1",
+    "@repo/tsconfig": "0.0.1",
+    "@repo/package.bundle": "3.82.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/_exports/sdk-react.ts

@@ -7,6 +7,10 @@ export {SDKProvider, type SDKProviderProps} from '../components/SDKProvider'
 export {ComlinkTokenRefreshProvider} from '../context/ComlinkTokenRefresh'
 export {renderSanityApp} from '../context/renderSanityApp'
 export {ResourceProvider, type ResourceProviderProps} from '../context/ResourceProvider'
+export {
+  SanityInstanceProvider,
+  type SanityInstanceProviderProps,
+} from '../context/SanityInstanceProvider'
 export {SDKStudioContext, type StudioWorkspaceHandle} from '../context/SDKStudioContext'
 export {
   useAgentGenerate,

package/src/components/SDKProvider.tsx

@@ -1,9 +1,12 @@
-import {type DocumentSource, type SanityConfig} from '@sanity/sdk'
-import {type ReactElement, type ReactNode, useMemo} from 'react'
+import {type DocumentResource, isImportError, type SanityConfig} from '@sanity/sdk'
+import {type ReactElement, type ReactNode, useEffect, useMemo} from 'react'
+import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
 import {ResourceProvider} from '../context/ResourceProvider'
-import {SourcesContext} from '../context/SourcesContext'
+import {ResourcesContext} from '../context/ResourcesContext'
 import {AuthBoundary, type AuthBoundaryProps} from './auth/AuthBoundary'
+import {ChunkLoadError} from './errors/ChunkLoadError'
+import {clearChunkReloadFlag} from './errors/chunkReloadStorage'
 
 /**
  * @internal
@@ -12,7 +15,19 @@ export interface SDKProviderProps extends AuthBoundaryProps {
   children: ReactNode
   config: SanityConfig | SanityConfig[]
   fallback: ReactNode
-  sources?: Record<string, DocumentSource>
+  resources?: Record<string, DocumentResource>
+}
+
+/**
+ * Clears the chunk-reload flag once children render successfully past the
+ * top-level boundary, so a future incident in the same session can trigger
+ * another automatic reload.
+ */
+function ResetChunkReloadFlagOnMount(): null {
+  useEffect(() => {
+    clearChunkReloadFlag()
+  }, [])
+  return null
 }
 
 /**
@@ -33,15 +48,15 @@ export function SDKProvider({
   const configs = (Array.isArray(config) ? config : [config]).slice().reverse()
   const projectIds = configs.map((c) => c.projectId).filter((id): id is string => !!id)
 
-  // Memoize sources to prevent creating a new empty object on every render
-  const sourcesValue = useMemo(() => props.sources ?? {}, [props.sources])
+  // Memoize resources to prevent creating a new empty object on every render
+  const resourcesValue = useMemo(() => props.resources ?? {}, [props.resources])
 
   // Create a nested structure of ResourceProviders for each config
   const createNestedProviders = (index: number): ReactElement => {
     if (index >= configs.length) {
       return (
         <AuthBoundary {...props} projectIds={projectIds}>
-          <SourcesContext.Provider value={sourcesValue}>{children}</SourcesContext.Provider>
+          <ResourcesContext.Provider value={resourcesValue}>{children}</ResourcesContext.Provider>
         </AuthBoundary>
       )
     }
@@ -53,5 +68,18 @@ export function SDKProvider({
     )
   }
 
-  return createNestedProviders(0)
+  return (
+    <ErrorBoundary FallbackComponent={ChunkAwareFallback}>
+      <ResetChunkReloadFlagOnMount />
+      {createNestedProviders(0)}
+    </ErrorBoundary>
+  )
+}
+
+function ChunkAwareFallback(fallbackProps: FallbackProps): ReactElement {
+  if (isImportError(fallbackProps.error)) {
+    return <ChunkLoadError {...fallbackProps} />
+  }
+  // Re-throw so downstream boundaries (e.g. AuthBoundary) handle other errors.
+  throw fallbackProps.error
 }

package/src/components/SanityApp.tsx

@@ -1,4 +1,4 @@
-import {type DocumentSource, isStudioConfig, type SanityConfig} from '@sanity/sdk'
+import {type DocumentResource, isStudioConfig, type SanityConfig} from '@sanity/sdk'
 import {type ReactElement, useContext, useEffect, useMemo} from 'react'
 
 import {SDKStudioContext, type StudioWorkspaceHandle} from '../context/SDKStudioContext'
@@ -19,7 +19,7 @@ export interface SanityAppProps {
   config?: SanityConfig | SanityConfig[]
   /** @deprecated use the `config` prop instead. */
   sanityConfigs?: SanityConfig[]
-  sources?: Record<string, DocumentSource>
+  resources?: Record<string, DocumentResource>
   children: React.ReactNode
   /* Fallback content to show when child components are suspending. Same as the `fallback` prop for React Suspense. */
   fallback: React.ReactNode

package/src/components/auth/AuthBoundary.tsx

@@ -1,5 +1,5 @@
 import {CorsOriginError} from '@sanity/client'
-import {AuthStateType, getCorsErrorProjectId, isStudioConfig} from '@sanity/sdk'
+import {AuthStateType, getCorsErrorProjectId, isImportError, isStudioConfig} from '@sanity/sdk'
 import {useEffect, useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
@@ -8,6 +8,7 @@ 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'
@@ -110,6 +111,12 @@ export function AuthBoundary({
 }: AuthBoundaryProps): React.ReactNode {
   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

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,21 +1,21 @@
 import {ClientError} from '@sanity/client'
-import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
 import {
   AuthStateType,
   getClientErrorApiBody,
   getClientErrorApiDescription,
+  getIsInDashboardState,
   isProjectUserNotFoundClientError,
 } from '@sanity/sdk'
-import {useCallback, useEffect, useState} from 'react'
+import {Suspense, useCallback, useEffect, useMemo, useRef} from 'react'
 import {type FallbackProps} from 'react-error-boundary'
 
 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
  */
@@ -39,75 +39,119 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
 
   const logout = useLogOut()
   const authState = useAuthState()
+  const instance = useSanityInstance()
   const {
     config: {projectId},
-  } = useSanityInstance()
+  } = 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
+        }
+      />
+    </>
   )
 }