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

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,4 @@
-import {
-  DEFAULT_RESOURCE_NAME,
-  type DocumentResource,
-  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'
@@ -16,41 +11,63 @@ 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[]
+  /** @deprecated use the `config` prop instead. */
+  sanityConfigs?: 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 +79,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 +140,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 +173,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()
+  })
+})

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

@@ -1,4 +1,4 @@
-import {AuthStateType} from '@sanity/sdk'
+import {AuthStateType, type SanityConfig} from '@sanity/sdk'
 import {render, screen, waitFor} from '@testing-library/react'
 import React from 'react'
 import {type FallbackProps} from 'react-error-boundary'
@@ -110,6 +110,24 @@ describe('AuthBoundary', () => {
   const mockUseVerifyOrgProjects = vi.mocked(useVerifyOrgProjects)
   const testProjectIds = ['proj-test'] // Example project ID for tests
 
+  // Mock Sanity instance
+  const mockSanityInstance = {
+    instanceId: 'test-instance-id',
+    config: {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    },
+    isDisposed: () => false,
+    dispose: () => {},
+    onDispose: () => () => {},
+    getParent: () => undefined,
+    createChild: (config: SanityConfig) => ({
+      ...mockSanityInstance,
+      config: {...mockSanityInstance.config, ...config},
+    }),
+    match: () => undefined,
+  }
+
   beforeEach(() => {
     vi.clearAllMocks()
     consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
@@ -148,7 +166,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 +183,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 +197,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 +214,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 +236,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 +268,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 +293,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,16 @@
 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'
 
 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 +111,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 +143,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 +186,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])