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

package/src/components/SDKProvider.tsx

@@ -1,65 +1,124 @@
 import {
-  DEFAULT_RESOURCE_NAME,
   type DocumentResource,
   isDatasetResource,
+  isImportError,
   type SanityConfig,
 } from '@sanity/sdk'
-import {type ReactElement, type ReactNode, useMemo} from 'react'
+import {type ReactElement, type ReactNode, useEffect, useMemo} from 'react'
+import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
+import {DEFAULT_RESOURCE_NAME} from '../constants'
+import {OrganizationResourcesProvider} from '../context/OrganizationResourcesProvider'
 import {ResourceProvider} from '../context/ResourceProvider'
-import {ResourcesContext} from '../context/ResourcesContext'
 import {AuthBoundary, type AuthBoundaryProps} from './auth/AuthBoundary'
+import {ChunkLoadError} from './errors/ChunkLoadError'
+import {clearChunkReloadFlag} from './errors/chunkReloadStorage'
 
 /**
  * @internal
  */
 export interface SDKProviderProps extends AuthBoundaryProps {
   children: ReactNode
-  config: SanityConfig
-  /**
-   * Named document resources map. Provided to `ResourcesContext` for
-   * name-based resource resolution in hooks.
-   */
-  resources?: Record<string, DocumentResource>
+  config: SanityConfig | SanityConfig[]
   fallback: ReactNode
+  resources?: Record<string, DocumentResource>
+  /** When set, automatically fetches and registers the organization's media library and canvas as named resources. */
+  inferMediaLibraryAndCanvas?: boolean
 }
 
 /**
- * Collects unique project IDs from a resources map.
+ * 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 collectProjectIds(resources: Record<string, DocumentResource>): string[] {
-  const ids = new Set<string>()
-  for (const res of Object.values(resources)) {
-    if (isDatasetResource(res)) ids.add(res.projectId)
-  }
-  return [...ids]
+function ResetChunkReloadFlagOnMount(): null {
+  useEffect(() => {
+    clearChunkReloadFlag()
+  }, [])
+  return null
 }
 
 /**
  * @internal
  *
  * Top-level context provider that provides access to the Sanity SDK.
- *
- * Creates a single `ResourceProvider` (and therefore a single `SanityInstance`)
- * for the given config. Resource resolution is handled by `ResourcesContext`
- * and the `"default"` named resource.
  */
 export function SDKProvider({
   children,
   config,
-  resources = {},
   fallback,
+  inferMediaLibraryAndCanvas,
   ...props
 }: SDKProviderProps): ReactElement {
-  const projectIds = useMemo(() => collectProjectIds(resources), [resources])
+  // For legacy config support, extract the first config object as a default resource,
+  // matching the legacy behavior nesting ResourceProviders with the first config closest to users' application code.
+  // This should be removed when we remove legacy config support.
+  const defaultConfig = Array.isArray(config) ? config[0] : config
+  const defaultProjectId = defaultConfig?.projectId
+  const defaultDataset = defaultConfig?.dataset
 
-  const rootResource = useMemo(() => resources[DEFAULT_RESOURCE_NAME], [resources])
+  const resourcesValue = useMemo(() => {
+    const explicit = props.resources ?? {}
+    if (defaultProjectId && defaultDataset && !Object.hasOwn(explicit, DEFAULT_RESOURCE_NAME)) {
+      return {
+        [DEFAULT_RESOURCE_NAME]: {
+          projectId: defaultProjectId,
+          dataset: defaultDataset,
+        },
+        ...explicit,
+      }
+    }
+    return explicit
+  }, [defaultProjectId, defaultDataset, props.resources])
+
+  // Collect all projectIds from both resources and config, deduped so
+  // AuthBoundary doesn't verify the same project more than once.
+  const projectIds = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          [
+            ...Object.values(resourcesValue)
+              .filter(isDatasetResource)
+              .map((resource) => resource.projectId),
+            ...(Array.isArray(config) ? config : [config]).map((configObj) => configObj.projectId),
+          ].filter((id): id is string => !!id),
+        ),
+      ),
+    [resourcesValue, config],
+  )
 
   return (
-    <ResourceProvider {...config} resource={rootResource} fallback={fallback}>
-      <AuthBoundary {...props} projectIds={projectIds}>
-        <ResourcesContext.Provider value={resources}>{children}</ResourcesContext.Provider>
-      </AuthBoundary>
-    </ResourceProvider>
+    <ErrorBoundary FallbackComponent={ChunkAwareFallback}>
+      <ResetChunkReloadFlagOnMount />
+      {/* Spread the first config so SanityInstance can use the auth,
+        perspective, and other config fields; `resource` lets an explicitly
+        provided `default` resource override the config-derived resource. */}
+      <ResourceProvider
+        {...defaultConfig}
+        resource={resourcesValue[DEFAULT_RESOURCE_NAME]}
+        fallback={fallback}
+      >
+        <AuthBoundary {...props} projectIds={projectIds}>
+          {/* OrganizationResourcesProvider wraps ResourcesContext.
+            It merges explicit resources with lazily inferred org resources (media
+            library, canvas) and provides the combined map to the subtree. */}
+          <OrganizationResourcesProvider
+            resources={resourcesValue}
+            inferMediaLibraryAndCanvas={inferMediaLibraryAndCanvas}
+          >
+            {children}
+          </OrganizationResourcesProvider>
+        </AuthBoundary>
+      </ResourceProvider>
+    </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.test.tsx

@@ -58,11 +58,14 @@ describe('SanityApp', () => {
     mockSDKProviderComponent.mockClear()
   })
 
-  it('renders SDKProvider with a single resource', () => {
-    const singleResource = {projectId: 'test-project', dataset: 'production'}
+  it('renders SDKProvider with a single config', () => {
+    const singleConfig = {
+      projectId: 'test-project',
+      dataset: 'production',
+    }
 
     render(
-      <SanityApp resources={{default: singleResource}} fallback={<div>Loading...</div>}>
+      <SanityApp config={singleConfig} fallback={<div>Loading...</div>}>
         <div>Child Content</div>
       </SanityApp>,
     )
@@ -77,17 +80,60 @@ describe('SanityApp', () => {
     expect(firstCallArgs1).toBeDefined()
     expect(firstCallArgs1.length).toBeGreaterThan(0)
     const props = firstCallArgs1[0] as unknown as SDKProviderProps
+    const config = props?.config
 
-    expect(props.resources).toEqual({default: singleResource})
+    // Config is now passed directly as an object for single configs
+    expect(config).toEqual(singleConfig)
     expect(props.fallback).toBeTruthy()
   })
 
+  it('renders SDKProvider with multiple configs in original order', () => {
+    const multipleConfigs = [
+      {
+        projectId: 'project-1',
+        dataset: 'production',
+      },
+      {
+        projectId: 'project-2',
+        dataset: 'staging',
+      },
+      {
+        projectId: 'project-3',
+        dataset: 'development',
+      },
+    ]
+
+    render(
+      <SanityApp config={multipleConfigs} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SanityApp>,
+    )
+
+    // Check that the SDKProvider is rendered
+    expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
+
+    // Verify SDKProvider was called with the correct props
+    expect(mockSDKProviderComponent).toHaveBeenCalledTimes(1)
+    const sdkProviderCalls = mockSDKProviderComponent.mock.calls
+    const firstCallArgs2 = sdkProviderCalls[0]
+    expect(firstCallArgs2).toBeDefined()
+    expect(firstCallArgs2.length).toBeGreaterThan(0)
+    const props = firstCallArgs2[0] as unknown as SDKProviderProps
+    const config = props?.config
+
+    // Config should be passed directly to SDKProvider
+    expect(config).toEqual(multipleConfigs)
+  })
+
   it('handles iframe environment correctly', async () => {
     // Mock window.self and window.top to simulate iframe environment
     const originalTop = window.top
     const originalSelf = window.self
 
-    const mockSanityConfig: SanityConfig = {}
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    }
 
     const mockTop = {}
     Object.defineProperty(window, 'top', {
@@ -100,7 +146,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -131,7 +177,10 @@ describe('SanityApp', () => {
       href: 'http://sanity-test.app',
     }
 
-    const mockSanityConfig: SanityConfig = {}
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    }
 
     Object.defineProperty(window, 'location', {
       value: mockLocation,
@@ -139,7 +188,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -192,7 +241,10 @@ describe('SanityApp', () => {
   it('does not redirect to core if not inside iframe and local url', async () => {
     const originalLocation = window.location
 
-    const mockSanityConfig: SanityConfig = {}
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    }
 
     const mockLocation = {
       replace: vi.fn(),
@@ -205,7 +257,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -233,6 +285,8 @@ describe('SanityApp', () => {
     }
 
     const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
       studio: {},
     }
 
@@ -242,7 +296,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -271,6 +325,8 @@ describe('SanityApp', () => {
     }
 
     const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
       studio: {},
     }
 
@@ -280,7 +336,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )

package/src/components/SanityApp.tsx

@@ -1,9 +1,5 @@
-import {
-  DEFAULT_RESOURCE_NAME,
-  type DocumentResource,
-  isStudioConfig,
-  type SanityConfig,
-} from '@sanity/sdk'
+import {type DocumentResource, type SanityConfig} from '@sanity/sdk'
+import {isStudioConfig} from '@sanity/sdk/_internal'
 import {type ReactElement, useContext, useEffect, useMemo} from 'react'
 
 import {SDKStudioContext, type StudioWorkspaceHandle} from '../context/SDKStudioContext'
@@ -16,41 +12,61 @@ import {isInIframe, isLocalUrl} from './utils'
  */
 export interface SanityAppProps {
   /**
-   * Core configuration for the SDK instance (auth, studio, perspective).
-   * Optional when `SanityApp` is rendered inside an `SDKStudioContext`
-   * provider (e.g. inside Sanity Studio) — the config is derived from
-   * the workspace automatically.
-   */
-  config?: SanityConfig
-  /**
-   * Named document resources for the application. The resource keyed `"default"`
-   * is used automatically when no explicit resource is specified in hooks.
+   * One or more SanityConfig objects providing a project ID and dataset name.
+   * Optional when `SanityApp` is rendered inside an `SDKStudioContext` provider
+   * (e.g. inside Sanity Studio) — the config is derived from the workspace
+   * automatically.
    */
+  config?: SanityConfig | SanityConfig[]
   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
+  /**
+   * Set this to automatically fetch and register the organization's media library and canvas as named resources.
+   * These resources will be available to hooks as `media-library` and `canvas`.
+   *
+   * The SDK App must be running in the organization's Dashboard to use this feature.
+   *
+   * @example
+   * ```tsx
+   *
+   * const MyApp = () => {
+   *   // should "just work" because of inferMediaLibraryAndCanvas.
+   *   const {data: assets} = useDocuments({
+   *     documentType: 'sanity.asset',
+   *     resourceName: 'media-library',
+   *   })
+   *   return (
+   *     <div>
+   *       {assets.map((asset) => (
+   *         <div key={asset._id}>{asset.originalFilename}</div>
+   *       ))}
+   *     </div>
+   *   )
+   * }
+   * <SanityApp inferMediaLibraryAndCanvas>
+   *   <MyApp />
+   * </SanityApp>
+   * ```
+   */
+  inferMediaLibraryAndCanvas?: boolean
 }
 
 const REDIRECT_URL = 'https://sanity.io/welcome'
 
 /**
- * Derive a SanityConfig and resources map from a Studio workspace handle.
+ * Derive a SanityConfig from a Studio workspace handle.
+ * Maps the workspace's projectId, dataset, and reactive auth token into
+ * the SDK's config shape.
  */
-function deriveFromWorkspace(workspace: StudioWorkspaceHandle): {
-  config: SanityConfig
-  resources: Record<string, DocumentResource>
-} {
+function deriveConfigFromWorkspace(workspace: StudioWorkspaceHandle): SanityConfig {
   return {
-    config: {
-      studio: {
-        authenticated: workspace.authenticated,
-        auth: workspace.auth.token ? {token: workspace.auth.token} : undefined,
-        projectId: workspace.projectId,
-      },
-    },
-    resources: {
-      [DEFAULT_RESOURCE_NAME]: {projectId: workspace.projectId, dataset: workspace.dataset},
+    projectId: workspace.projectId,
+    dataset: workspace.dataset,
+    studio: {
+      authenticated: workspace.authenticated,
+      auth: workspace.auth.token ? {token: workspace.auth.token} : undefined,
     },
   }
 }
@@ -62,49 +78,57 @@ function deriveFromWorkspace(workspace: StudioWorkspaceHandle): {
  * as well as application context and state which is used by the Sanity React hooks. Your application
  * must be wrapped with the SanityApp component to function properly.
  *
- * The `config` prop accepts a {@link SanityConfig} object. Use the `resources` prop to declare
- * one or more named data resources for your app.
+ * The `config` prop on the SanityApp component accepts either a single {@link SanityConfig} object, or an array of them.
+ * This allows your app to work with one or more of your organization's datasets.
  *
- * When rendered inside a Sanity Studio that provides `SDKStudioContext`, the `config` and `resources`
- * props are optional — `SanityApp` will automatically derive them from the Studio workspace.
+ * When rendered inside a Sanity Studio that provides `SDKStudioContext`, the `config` prop is
+ * optional — `SanityApp` will automatically derive `projectId`, `dataset`, and auth from the
+ * Studio workspace.
  *
- * When both `config` and `SDKStudioContext` are available, the explicit props take precedence.
+ * @remarks
+ * When passing multiple SanityConfig objects to the `config` prop, the first configuration in the array becomes the default
+ * configuration used by the App SDK Hooks.
+ *
+ * When both `config` and `SDKStudioContext` are available, the explicit `config` takes precedence.
  *
  * @category Components
  * @param props - Your Sanity configuration and the React children to render
  * @returns Your Sanity application, integrated with your Sanity configuration and application context
  *
- * @example Single project
+ * @example
  * ```tsx
- * import { SanityApp } from '@sanity/sdk-react'
+ * import { SanityApp, type SanityConfig } from '@sanity/sdk-react'
  *
- * export default function MyApp() {
- *   return (
- *     <SanityApp
- *       resources={{
- *         default: { projectId: 'my-project-id', dataset: 'production' },
- *       }}
- *       fallback={<div>Loading…</div>}
- *     >
- *       <MyAppRoot />
- *     </SanityApp>
- *   )
+ * import MyAppRoot from './Root'
+ *
+ * // Single project configuration
+ * const mySanityConfig: SanityConfig = {
+ *   projectId: 'my-project-id',
+ *   dataset: 'production',
  * }
- * ```
  *
- * @example Multiple resources
- * ```tsx
- * import { SanityApp } from '@sanity/sdk-react'
+ * // Or multiple project configurations
+ * const multipleConfigs: SanityConfig[] = [
+ *   // Configuration for your main project. This will be used as the default project for hooks.
+ *   {
+ *     projectId: 'marketing-website-project',
+ *     dataset: 'production',
+ *   },
+ *   // Configuration for a separate blog project
+ *   {
+ *     projectId: 'blog-project',
+ *     dataset: 'production',
+ *   },
+ *   // Configuration for a separate ecommerce project
+ *   {
+ *     projectId: 'ecommerce-project',
+ *     dataset: 'production',
+ *   }
+ * ]
  *
  * export default function MyApp() {
  *   return (
- *     <SanityApp
- *       resources={{
- *         default: { projectId: 'abc123', dataset: 'production' },
- *         'blog-project': { projectId: 'def456', dataset: 'production' },
- *       }}
- *       fallback={<div>Loading…</div>}
- *     >
+ *     <SanityApp config={mySanityConfig} fallback={<div>Loading…</div>}>
  *       <MyAppRoot />
  *     </SanityApp>
  *   )
@@ -115,42 +139,29 @@ export function SanityApp({
   children,
   fallback,
   config: configProp,
-  resources: resourcesProp,
   ...props
 }: SanityAppProps): ReactElement {
   const studioWorkspace = useContext(SDKStudioContext)
 
-  const derived = useMemo(() => {
-    if (studioWorkspace && !configProp && !resourcesProp) {
-      return deriveFromWorkspace(studioWorkspace)
-    }
-    return null
-  }, [configProp, resourcesProp, studioWorkspace])
-
-  const resolvedConfig = useMemo<SanityConfig>(() => {
-    if (configProp) {
-      return configProp
-    }
-    if (derived) return derived.config
-    return {}
-  }, [configProp, derived])
-
-  const resolvedResources = useMemo<Record<string, DocumentResource>>(() => {
-    if (resourcesProp) return resourcesProp
-    if (derived) return derived.resources
-    return {}
-  }, [resourcesProp, derived])
+  // Derive config: explicit config takes precedence, then Studio context
+  const resolvedConfig = useMemo(() => {
+    if (configProp) return configProp
+    if (studioWorkspace) return deriveConfigFromWorkspace(studioWorkspace)
+    return []
+  }, [configProp, studioWorkspace])
 
   useEffect(() => {
     let timeout: NodeJS.Timeout | undefined
+    const primaryConfig = Array.isArray(resolvedConfig) ? resolvedConfig[0] : resolvedConfig
     const shouldRedirectWithoutConfig =
-      configProp === undefined && !studioWorkspace && !resolvedConfig
+      configProp === undefined && !studioWorkspace && !primaryConfig
 
     if (
       !isInIframe() &&
       !isLocalUrl(window) &&
-      (shouldRedirectWithoutConfig || (!!resolvedConfig && !isStudioConfig(resolvedConfig)))
+      (shouldRedirectWithoutConfig || (!!primaryConfig && !isStudioConfig(primaryConfig)))
     ) {
+      // If the app is not running in an iframe and is not a local url, redirect to core.
       timeout = setTimeout(() => {
         // eslint-disable-next-line no-console
         console.warn('Redirecting to core', REDIRECT_URL)
@@ -161,12 +172,7 @@ export function SanityApp({
   }, [configProp, resolvedConfig, studioWorkspace])
 
   return (
-    <SDKProvider
-      {...props}
-      fallback={fallback}
-      config={resolvedConfig}
-      resources={resolvedResources}
-    >
+    <SDKProvider {...props} fallback={fallback} config={resolvedConfig}>
       {children}
     </SDKProvider>
   )

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

@@ -0,0 +1,86 @@
+import {AuthStateType, getIsInDashboardState} from '@sanity/sdk'
+import {render, screen, waitFor} from '@testing-library/react'
+import {beforeEach, describe, expect, it, type Mock, vi} from 'vitest'
+
+import {ResourceProvider} from '../../context/ResourceProvider'
+import {useAuthState} from '../../hooks/auth/useAuthState'
+import {AuthBoundary} from './AuthBoundary'
+
+// NOTE: unlike AuthBoundary.test.tsx this file does NOT mock react-error-boundary
+// — we want the REAL ErrorBoundary so we can observe whether it recovers when the
+// auth store transitions back to LOGGED_IN (e.g. after a successful silent token
+// refresh via ComlinkTokenRefresh -> setAuthToken).
+
+vi.mock('@sanity/sdk', async () => {
+  const actual = await vi.importActual('@sanity/sdk')
+  return {
+    ...actual,
+    getIsInDashboardState: vi.fn(() => ({getCurrent: () => true})),
+  }
+})
+
+vi.mock('../../hooks/auth/useAuthState', () => ({useAuthState: vi.fn()}))
+vi.mock('../../hooks/auth/useLoginUrl', () => ({
+  useLoginUrl: vi.fn(() => 'https://example.com/login'),
+}))
+vi.mock('../../hooks/auth/useVerifyOrgProjects', () => ({useVerifyOrgProjects: vi.fn(() => null)}))
+vi.mock('../../hooks/auth/useLogOut', () => ({useLogOut: vi.fn(() => async () => {})}))
+vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
+  useHandleAuthCallback: vi.fn(() => async () => {}),
+}))
+vi.mock('../../hooks/comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(() => ({fetch: vi.fn().mockResolvedValue({token: 'fresh-token'})})),
+}))
+// Avoid injecting the SanityOS bridge.js <script> during import.
+vi.mock('../utils', () => ({isInIframe: vi.fn(() => false)}))
+
+const mockUseAuthState = useAuthState as Mock
+
+describe('AuthBoundary — recovery after silent token refresh (dashboard)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(getIsInDashboardState as Mock).mockReturnValue({getCurrent: () => true})
+  })
+
+  it('renders the app again once the session is re-established (LOGGED_IN)', async () => {
+    // 1. Session expires: a request 401s and the auth store goes to ERROR.
+    mockUseAuthState.mockReturnValue({
+      type: AuthStateType.ERROR,
+      error: Object.assign(new Error('Unauthorized'), {statusCode: 401}),
+    })
+
+    const {rerender} = render(
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary projectIds={['p']}>
+          <div>Protected Content</div>
+        </AuthBoundary>
+      </ResourceProvider>,
+    )
+
+    // The error boundary catches the AuthError and shows the auth-error screen.
+    await waitFor(() => {
+      expect(screen.getByText('Authentication Error')).toBeInTheDocument()
+    })
+
+    // 2. ComlinkTokenRefresh fetches a fresh token from the Dashboard, setAuthToken
+    //    lands it, /users/me re-fetches and the store returns to LOGGED_IN.
+    mockUseAuthState.mockReturnValue({
+      type: AuthStateType.LOGGED_IN,
+      currentUser: null,
+      token: 'fresh-token',
+    })
+    rerender(
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary projectIds={['p']}>
+          <div>Protected Content</div>
+        </AuthBoundary>
+      </ResourceProvider>,
+    )
+
+    // EXPECTED (desired) behaviour: the app recovers automatically, no Retry click.
+    await waitFor(() => {
+      expect(screen.getByText('Protected Content')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Authentication Error')).not.toBeInTheDocument()
+  })
+})