@sanity/sdk-react 3.0.0 → 3.2.0

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

@@ -1,9 +1,11 @@
 import {AuthStateType} from '@sanity/sdk'
+import {installMessageBus} from '@sanity/sdk/_internal'
 import {render, screen, waitFor} from '@testing-library/react'
 import React from 'react'
 import {type FallbackProps} from 'react-error-boundary'
 import {beforeEach, describe, expect, it, type MockInstance, vi} from 'vitest'
 
+import {DashboardTokenRefreshProvider} from '../../context/DashboardTokenRefresh'
 import {ResourceProvider} from '../../context/ResourceProvider'
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLoginUrl} from '../../hooks/auth/useLoginUrl'
@@ -142,6 +144,38 @@ describe('AuthBoundary', () => {
     })
   })
 
+  it('does not redirect when a host bus is installed but the provider has not connected yet', () => {
+    // Workbench remotes start LOGGED_OUT (the host mints the token over the bus) and are not
+    // in an iframe, so the only thing standing between them and a login redirect is the
+    // dashboard check. AuthSwitch's effect runs before its parent provider's, so the check
+    // must not depend on the provider having connected first.
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.LOGGED_OUT,
+      isDestroyingSession: false,
+    })
+    const originalLocation = window.location
+    const location = {href: 'http://remote.test/'}
+    Object.defineProperty(window, 'location', {value: location, writable: true})
+    vi.stubGlobal('__SANITY_APP_ID__', 'remote')
+    const globals = globalThis as {[key: symbol]: unknown}
+    const busKey = Symbol.for('sanity.os.bus')
+    installMessageBus({appId: 'dashboard'})
+    try {
+      render(
+        <ResourceProvider projectId="p" dataset="d" fallback={null}>
+          <DashboardTokenRefreshProvider>
+            <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
+          </DashboardTokenRefreshProvider>
+        </ResourceProvider>,
+      )
+      expect(location.href).toBe('http://remote.test/')
+    } finally {
+      delete globals[busKey]
+      vi.unstubAllGlobals()
+      Object.defineProperty(window, 'location', {value: originalLocation, writable: true})
+    }
+  })
+
   it('renders the empty LoginCallback component when authState="logging-in"', () => {
     vi.mocked(useAuthState).mockReturnValue({
       type: AuthStateType.LOGGING_IN,

package/src/components/auth/AuthBoundary.tsx

@@ -1,11 +1,10 @@
 import {CorsOriginError} from '@sanity/client'
 import {AuthStateType, getCorsErrorProjectId, isImportError} from '@sanity/sdk'
-import {isStudioConfig} from '@sanity/sdk/_internal'
+import {isDashboardEnvironment, isStudioConfig} from '@sanity/sdk/_internal'
 import {useEffect, useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
 import {ComlinkTokenRefreshProvider} from '../../context/ComlinkTokenRefresh'
-import {isDashboardEnvironment} from '../../context/dashboardToken'
 import {DashboardTokenRefreshProvider} from '../../context/DashboardTokenRefresh'
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLoginUrl} from '../../hooks/auth/useLoginUrl'

package/src/context/DashboardTokenRefresh.test.tsx

@@ -1,17 +1,25 @@
 import {AuthStateType, setAuthToken} from '@sanity/sdk'
+import {getDashboardMessageBus} from '@sanity/sdk/_internal'
 import {act, render} from '@testing-library/react'
 import {of} from 'rxjs'
 import {afterEach, beforeEach, describe, expect, it, type Mock, vi} from 'vitest'
 
+import {getDashboardModuleContext} from '../dashboard/module'
 import {useAuthState} from '../hooks/auth/useAuthState'
-import {
-  isDashboardEnvironment,
-  observeDashboardToken,
-  refreshDashboardToken,
-} from './dashboardToken'
+import {useSanityInstance} from '../hooks/context/useSanityInstance'
 import {DashboardTokenRefreshProvider} from './DashboardTokenRefresh'
 import {ResourceProvider} from './ResourceProvider'
 
+const messageBus = vi.hoisted(() => ({
+  client: undefined as
+    | undefined
+    | {emit: ReturnType<typeof vi.fn>; subscribe: ReturnType<typeof vi.fn>},
+  emit: vi.fn(),
+  subscribe: vi.fn(),
+  // A spy so tests can observe the forwarded arguments.
+  getDashboardMessageBus: vi.fn(),
+}))
+
 vi.mock('@sanity/sdk', async () => {
   const actual = await vi.importActual('@sanity/sdk')
   return {
@@ -24,17 +32,13 @@ vi.mock('../hooks/auth/useAuthState', () => ({
   useAuthState: vi.fn(),
 }))
 
-vi.mock('./dashboardToken', () => ({
-  isDashboardEnvironment: vi.fn(() => false),
-  observeDashboardToken: vi.fn(() => undefined),
-  refreshDashboardToken: vi.fn(),
+vi.mock('@sanity/sdk/_internal', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@sanity/sdk/_internal')>()),
+  getDashboardMessageBus: messageBus.getDashboardMessageBus,
 }))
 
 const mockSetAuthToken = setAuthToken as Mock
 const mockUseAuthState = useAuthState as Mock
-const mockIsDashboardEnvironment = isDashboardEnvironment as Mock
-const mockObserveDashboardToken = observeDashboardToken as Mock
-const mockRefreshDashboardToken = refreshDashboardToken as Mock
 
 const renderProvider = () =>
   render(
@@ -47,6 +51,9 @@ const renderProvider = () =>
 
 describe('DashboardTokenRefreshProvider', () => {
   beforeEach(() => {
+    messageBus.client = undefined
+    messageBus.getDashboardMessageBus.mockReset()
+    messageBus.getDashboardMessageBus.mockImplementation(() => messageBus.client)
     mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN})
   })
 
@@ -55,9 +62,7 @@ describe('DashboardTokenRefreshProvider', () => {
   })
 
   describe('when not in the dashboard', () => {
-    it('does not subscribe to the OS token', () => {
-      mockIsDashboardEnvironment.mockReturnValue(false)
-
+    it('does not subscribe to a dashboard token', () => {
       act(() => {
         renderProvider()
       })
@@ -68,12 +73,13 @@ describe('DashboardTokenRefreshProvider', () => {
 
   describe('when in the dashboard', () => {
     beforeEach(() => {
-      mockIsDashboardEnvironment.mockReturnValue(true)
+      messageBus.client = messageBus
+      messageBus.subscribe.mockReturnValue(of('dashboard-token'))
+      // `emit` returns a lazily-awaited reply the provider attaches a `.catch` to.
+      messageBus.emit.mockReturnValue(Promise.resolve(undefined))
     })
 
-    it('mirrors the OS token into the auth store', () => {
-      mockObserveDashboardToken.mockReturnValue(of('dashboard-token'))
-
+    it('mirrors the dashboard token into the auth store', () => {
       act(() => {
         renderProvider()
       })
@@ -81,9 +87,80 @@ describe('DashboardTokenRefreshProvider', () => {
       expect(mockSetAuthToken).toHaveBeenCalledWith(expect.anything(), 'dashboard-token')
     })
 
-    it('asks the OS to reissue the token on a 401', () => {
-      mockObserveDashboardToken.mockReturnValue(of('dashboard-token'))
+    it('renders children bare when no host bus is installed', () => {
+      messageBus.client = undefined
+
+      act(() => {
+        renderProvider()
+      })
+
+      expect(messageBus.getDashboardMessageBus).toHaveBeenCalledTimes(1)
+      expect(mockSetAuthToken).not.toHaveBeenCalled()
+    })
+
+    it('connects with the module id before any child reads the bus during render', () => {
+      // getDashboardMessageBus is first-caller-wins per instance. A hook reading the bus in
+      // its render runs before any parent effect, so the provider must connect during render
+      // or the connection is pinned to the app id.
+      const ModuleContext = getDashboardModuleContext()
+      function ReadsBus() {
+        getDashboardMessageBus(useSanityInstance())
+        return null
+      }
+
+      act(() => {
+        render(
+          <ModuleContext.Provider value="favorites/views/list/panel">
+            <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+              <DashboardTokenRefreshProvider>
+                <ReadsBus />
+              </DashboardTokenRefreshProvider>
+            </ResourceProvider>
+          </ModuleContext.Provider>,
+        )
+      })
+
+      expect(messageBus.getDashboardMessageBus.mock.calls[0]).toEqual([
+        expect.anything(),
+        'favorites/views/list/panel',
+      ])
+    })
+
+    it('forwards the module id from the dashboard module context', () => {
+      const ModuleContext = getDashboardModuleContext()
+
+      act(() => {
+        render(
+          <ModuleContext.Provider value="favorites/views/list/panel">
+            <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+              <DashboardTokenRefreshProvider>
+                <div>Test</div>
+              </DashboardTokenRefreshProvider>
+            </ResourceProvider>
+          </ModuleContext.Provider>,
+        )
+      })
+
+      expect(messageBus.getDashboardMessageBus).toHaveBeenCalledWith(
+        expect.anything(),
+        'favorites/views/list/panel',
+      )
+    })
+
+    it('treats subscription failures as a missing token', () => {
+      messageBus.subscribe.mockImplementationOnce(() => {
+        throw new Error('Incompatible message bus')
+      })
+
+      expect(() => {
+        act(() => {
+          renderProvider()
+        })
+      }).not.toThrow()
+      expect(mockSetAuthToken).toHaveBeenCalledWith(expect.anything(), null)
+    })
 
+    it('asks the message bus to reissue the token on a 401', () => {
       const {rerender} = renderProvider()
 
       mockUseAuthState.mockReturnValue({
@@ -100,7 +177,32 @@ describe('DashboardTokenRefreshProvider', () => {
         )
       })
 
-      expect(mockRefreshDashboardToken).toHaveBeenCalledTimes(1)
+      expect(messageBus.emit).toHaveBeenCalledWith('auth.token.refresh', undefined)
+    })
+
+    it('logs a failed token reissue instead of dropping it silently', async () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      messageBus.emit.mockReturnValueOnce(Promise.reject(new Error('NO_RESPONDER')))
+      const {rerender} = renderProvider()
+
+      mockUseAuthState.mockReturnValue({
+        type: AuthStateType.ERROR,
+        error: {statusCode: 401, message: 'Unauthorized'},
+      })
+      await act(async () => {
+        rerender(
+          <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+            <DashboardTokenRefreshProvider>
+              <div>Test</div>
+            </DashboardTokenRefreshProvider>
+          </ResourceProvider>,
+        )
+      })
+
+      expect(warn).toHaveBeenCalledWith(
+        '[sanity/sdk] Dashboard token refresh failed:',
+        expect.any(Error),
+      )
     })
   })
 })

package/src/context/DashboardTokenRefresh.tsx

@@ -1,36 +1,39 @@
 import {type ClientError} from '@sanity/client'
 import {AuthStateType, setAuthToken} from '@sanity/sdk'
-import React, {type PropsWithChildren, useEffect, useRef} from 'react'
+import {getDashboardMessageBus} from '@sanity/sdk/_internal'
+import {type MessageBus} from '@sanity/sdk/dashboard'
+import React, {type PropsWithChildren, useContext, useEffect, useRef, useState} from 'react'
+import {defer, of} from 'rxjs'
+import {catchError} from 'rxjs/operators'
 
+import {getDashboardModuleContext} from '../dashboard/module'
 import {useAuthState} from '../hooks/auth/useAuthState'
 import {useSanityInstance} from '../hooks/context/useSanityInstance'
-import {
-  isDashboardEnvironment,
-  observeDashboardToken,
-  refreshDashboardToken,
-} from './dashboardToken'
 
 /**
  * Keeps the SDK auth token in sync with the dashboard "OS".
  *
- * When running as a federated remote inside the dashboard the OS owns the
- * session, so we subscribe to its `auth.token` stream and mirror each value into
+ * When running inside the dashboard the OS owns the session, so we subscribe
+ * to its `auth.token` stream and mirror each value into
  * the auth store — a token logs us in, `null` logs us out, and later OS
  * sign-in/out propagates automatically. When a request is rejected with a 401
  * (the token expired), we ask the OS to reissue rather than tearing the session
  * down; the new token arrives back through the same subscription.
  */
-function DashboardTokenRefresh({children}: PropsWithChildren) {
+function DashboardTokenRefresh({
+  children,
+  messageBus,
+}: PropsWithChildren<{messageBus: MessageBus}>) {
   const instance = useSanityInstance()
   const authState = useAuthState()
   const processed401ErrorRef = useRef<unknown | null>(null)
 
   useEffect(() => {
-    const token$ = observeDashboardToken()
-    if (!token$) return undefined
-    const subscription = token$.subscribe((token) => setAuthToken(instance, token))
+    const subscription = defer(() => messageBus.subscribe('auth.token'))
+      .pipe(catchError(() => of(null)))
+      .subscribe((token) => setAuthToken(instance, token))
     return () => subscription.unsubscribe()
-  }, [instance])
+  }, [instance, messageBus])
 
   useEffect(() => {
     const has401Error =
@@ -38,23 +41,70 @@ function DashboardTokenRefresh({children}: PropsWithChildren) {
 
     if (has401Error && processed401ErrorRef.current !== authState.error) {
       processed401ErrorRef.current = authState.error
-      refreshDashboardToken()
+      // Event topics have no replay, so a missing responder or timeout is otherwise dropped silently.
+      messageBus.emit('auth.token.refresh', undefined).catch((error) => {
+        // eslint-disable-next-line no-console
+        console.warn('[sanity/sdk] Dashboard token refresh failed:', error)
+      })
     } else if (!has401Error) {
       processed401ErrorRef.current = null
     }
-  }, [authState])
+  }, [authState, messageBus])
 
   return children
 }
 
 /**
- * Provides dashboard OS token refresh. No-op outside the dashboard, where the
- * app uses its normal auth flow.
- * @internal
+ * Authenticates the SDK with the Sanity Dashboard's session when the app runs
+ * inside the dashboard.
+ *
+ * The dashboard owns the session there: this provider subscribes to the token
+ * the dashboard issues, writes each new value into the SDK's auth store (where
+ * SDK hooks read it from), and asks the dashboard for a fresh token when a
+ * request fails with a 401. Outside the dashboard it renders children
+ * unchanged and the app's normal auth flow applies.
+ *
+ * @remarks
+ * `AuthBoundary` mounts this automatically, so most apps never need it
+ * directly. Mount it yourself only when your app runs inside the dashboard
+ * without `AuthBoundary` — that is, the app renders its own loading and error
+ * UI instead of the SDK's login flow — but still uses SDK hooks such as
+ * `useQuery`, which need the dashboard's token in the auth store to
+ * authenticate their requests.
+ *
+ * Mount it once, inside the provider that creates the Sanity instance whose
+ * store should receive the token.
+ *
+ * @example
+ * ```tsx
+ * import {ResourceProvider} from '@sanity/sdk-react'
+ * import {TokenRefreshProvider} from '@sanity/sdk-react/dashboard'
+ *
+ * function EmbeddedApp() {
+ *   return (
+ *     <ResourceProvider fallback={<Loading />}>
+ *       <TokenRefreshProvider>
+ *         <App />
+ *       </TokenRefreshProvider>
+ *     </ResourceProvider>
+ *   )
+ * }
+ * ```
+ *
+ * @public
  */
 export const DashboardTokenRefreshProvider: React.FC<PropsWithChildren> = ({children}) => {
-  if (isDashboardEnvironment()) {
-    return <DashboardTokenRefresh>{children}</DashboardTokenRefresh>
+  const instance = useSanityInstance()
+  const moduleId = useContext(getDashboardModuleContext())
+  // The connection is first-caller-wins per instance, and hooks below read it during their
+  // render, before any effect here could run. Connecting in the first render pins the module
+  // identity before they do; nothing has subscribed to the store yet, so the write is safe.
+  // The module id is read once: the CLI wrapper provides it statically above this tree.
+  // No retry: the host installs the bus at module evaluation, before any remote renders, and
+  // a standalone app has no host to wait for.
+  const [messageBus] = useState(() => getDashboardMessageBus(instance, moduleId))
+  if (messageBus) {
+    return <DashboardTokenRefresh messageBus={messageBus}>{children}</DashboardTokenRefresh>
   }
 
   return children

package/src/dashboard/createRemoteInstance.test.ts

@@ -0,0 +1,168 @@
+import {
+  type ModuleFederationRuntimePlugin,
+  type UserOptions,
+} from '@module-federation/runtime/types'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {createRemoteInstance} from './createRemoteInstance'
+
+const {
+  onDebug,
+  mockCreateLogger,
+  mockRegisterRemotes,
+  mockLoadRemote,
+  mockPreloadRemote,
+  mockCreateMFInstance,
+} = vi.hoisted(() => {
+  const registerRemotes = vi.fn()
+  const loadRemote = vi.fn()
+  const preloadRemote = vi.fn()
+  const debug = vi.fn()
+  return {
+    onDebug: debug,
+    mockCreateLogger: vi.fn(() => ({debug})),
+    mockRegisterRemotes: registerRemotes,
+    mockLoadRemote: loadRemote,
+    mockPreloadRemote: preloadRemote,
+    mockCreateMFInstance: vi.fn((_options: UserOptions) => ({
+      registerRemotes,
+      loadRemote,
+      preloadRemote,
+    })),
+  }
+})
+
+vi.mock('@module-federation/runtime', () => ({
+  createInstance: mockCreateMFInstance,
+}))
+
+vi.mock('@sanity/sdk/_internal', () => ({createLogger: mockCreateLogger}))
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('createRemoteInstance', () => {
+  it('seeds empty remotes and preserves custom plugins', () => {
+    const customPlugin = {name: 'custom-plugin'}
+
+    createRemoteInstance({name: 'sanity-workbench', plugins: [customPlugin]})
+
+    expect(mockCreateLogger).toHaveBeenCalledWith('sanity-workbench')
+    expect(mockCreateMFInstance).toHaveBeenCalledWith({
+      name: 'sanity-workbench',
+      remotes: [],
+      plugins: [expect.objectContaining({name: 'sanity-logger'}), customPlugin],
+    })
+  })
+
+  it('seeds the underlying instance with the manifest of each remote entry', () => {
+    createRemoteInstance({
+      name: 'sanity-workbench',
+      remotes: [{name: 'studio-1', entry: 'https://example.com/apps/studio-1/'}],
+    })
+
+    expect(mockCreateMFInstance).toHaveBeenCalledWith({
+      name: 'sanity-workbench',
+      plugins: [expect.objectContaining({name: 'sanity-logger'})],
+      remotes: [{name: 'studio-1', entry: 'https://example.com/apps/studio-1/mf-manifest.json'}],
+    })
+  })
+
+  it('leaves a version-based remote untouched', () => {
+    const remote = {name: 'studio-1', version: '1.0.0'}
+
+    createRemoteInstance({name: 'sanity-workbench', remotes: [remote]})
+
+    expect(mockCreateMFInstance).toHaveBeenCalledWith({
+      name: 'sanity-workbench',
+      plugins: [expect.objectContaining({name: 'sanity-logger'})],
+      remotes: [remote],
+    })
+  })
+
+  it('registers a remote origin as its manifest, without forcing re-registration', () => {
+    const instance = createRemoteInstance({name: 'sanity-workbench'})
+
+    instance.registerRemotes([{name: 'studio-1', entry: 'https://example.com'}])
+
+    expect(mockRegisterRemotes).toHaveBeenCalledWith(
+      [{name: 'studio-1', entry: 'https://example.com/mf-manifest.json'}],
+      {force: false},
+    )
+  })
+
+  it('leaves an entry that already names the manifest untouched', () => {
+    const instance = createRemoteInstance({name: 'sanity-workbench'})
+    const remotes = [{name: 'studio-1', entry: 'https://example.com/mf-manifest.json'}]
+
+    instance.registerRemotes(remotes)
+
+    expect(mockRegisterRemotes).toHaveBeenCalledWith(remotes, {force: false})
+  })
+
+  it('resolves with the loaded module on success', async () => {
+    const module = {render: () => () => {}}
+    mockLoadRemote.mockResolvedValue(module)
+    const instance = createRemoteInstance({name: 'sanity-workbench'})
+
+    await expect(instance.loadRemote('studio-1/App')).resolves.toBe(module)
+  })
+
+  it('wraps a load failure with the module id and original cause', async () => {
+    const cause = new Error('network down')
+    mockLoadRemote.mockRejectedValue(cause)
+    const instance = createRemoteInstance({name: 'sanity-workbench'})
+
+    await expect(instance.loadRemote('studio-1/App')).rejects.toMatchObject({
+      message: 'Failed to load remote module "studio-1/App"',
+      cause,
+    })
+  })
+
+  it('preloads specific exposes, warming sync and async assets', () => {
+    const instance = createRemoteInstance({name: 'sanity-workbench'})
+
+    instance.preloadRemote('studio-1', ['views/feed/panel'])
+
+    expect(mockPreloadRemote).toHaveBeenCalledWith([
+      {
+        nameOrAlias: 'studio-1',
+        exposes: ['views/feed/panel'],
+        resourceCategory: 'all',
+      },
+    ])
+  })
+
+  it('preloads the whole remote when no exposes are given', () => {
+    const instance = createRemoteInstance({name: 'sanity-workbench'})
+
+    instance.preloadRemote('studio-1')
+
+    expect(mockPreloadRemote).toHaveBeenCalledWith([
+      {nameOrAlias: 'studio-1', exposes: undefined, resourceCategory: 'all'},
+    ])
+  })
+})
+
+describe('lifecycle logging', () => {
+  const hooks = [
+    'beforeInit',
+    'beforeRegisterRemote',
+    'beforePreloadRemote',
+    'beforeRequest',
+    'afterResolve',
+    'onLoad',
+    'loadShare',
+    'beforeLoadShare',
+  ] as const
+
+  it.each(hooks)('logs %s without the runtime instance', (hook) => {
+    createRemoteInstance({name: 'sanity-workbench'})
+    const plugin = mockCreateMFInstance.mock.calls[0][0]
+      .plugins![0] as ModuleFederationRuntimePlugin
+    // Deliberately partial args: only the logger's origin filtering is under test.
+    plugin[hook]?.({origin: 'noisy', id: hook} as never)
+    expect(onDebug).toHaveBeenCalledWith(`[Lifecycle] ${hook}`, {id: hook, internal: true})
+  })
+})