@sanity/sdk-react 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -51,7 +51,7 @@
     "react-compiler-runtime": "19.1.0-rc.1",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "2.0.0"
+    "@sanity/sdk": "2.0.2"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
@@ -75,10 +75,10 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "@repo/config-eslint": "0.0.0",
-    "@repo/package.bundle": "3.82.0",
     "@repo/config-test": "0.0.1",
-    "@repo/package.config": "0.0.1",
-    "@repo/tsconfig": "0.0.1"
+    "@repo/tsconfig": "0.0.1",
+    "@repo/package.bundle": "3.82.0",
+    "@repo/package.config": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/_exports/sdk-react.ts

@@ -4,6 +4,7 @@
 export {AuthBoundary, type AuthBoundaryProps} from '../components/auth/AuthBoundary'
 export {SanityApp, type SanityAppProps} from '../components/SanityApp'
 export {SDKProvider, type SDKProviderProps} from '../components/SDKProvider'
+export {ComlinkTokenRefreshProvider} from '../context/ComlinkTokenRefresh'
 export {ResourceProvider, type ResourceProviderProps} from '../context/ResourceProvider'
 export {useAuthState} from '../hooks/auth/useAuthState'
 export {useAuthToken} from '../hooks/auth/useAuthToken'

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'
@@ -8,6 +8,7 @@ import {ResourceProvider} from '../../context/ResourceProvider'
 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 {AuthBoundary} from './AuthBoundary'
 
 // Mock hooks
@@ -22,6 +23,9 @@ vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
 vi.mock('../../hooks/auth/useLogOut', () => ({
   useLogOut: vi.fn(() => async () => {}),
 }))
+vi.mock('../../hooks/context/useSanityInstance', () => ({
+  useSanityInstance: vi.fn(),
+}))
 
 // Mock AuthError throwing scenario
 vi.mock('./AuthError', async (importOriginal) => {
@@ -105,8 +109,27 @@ describe('AuthBoundary', () => {
   const mockUseAuthState = vi.mocked(useAuthState)
   const mockUseLoginUrl = vi.mocked(useLoginUrl)
   const mockUseVerifyOrgProjects = vi.mocked(useVerifyOrgProjects)
+  const mockUseSanityInstance = vi.mocked(useSanityInstance)
   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(() => {})
@@ -116,6 +139,8 @@ describe('AuthBoundary', () => {
     mockUseLoginUrl.mockReturnValue('http://example.com/login')
     // Default mock for useVerifyOrgProjects - returns null (no error)
     mockUseVerifyOrgProjects.mockImplementation(() => null)
+    // Mock useSanityInstance to return our mock instance
+    mockUseSanityInstance.mockReturnValue(mockSanityInstance)
   })
 
   afterEach(() => {
@@ -145,9 +170,7 @@ describe('AuthBoundary', () => {
       isExchangingToken: false,
     })
     const {container} = render(
-      <ResourceProvider fallback={null}>
-        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
-      </ResourceProvider>,
+      <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>,
     )
 
     // The callback screen renders null check that it renders nothing
@@ -161,11 +184,7 @@ describe('AuthBoundary', () => {
       currentUser: null,
       token: 'exampleToken',
     })
-    render(
-      <ResourceProvider fallback={null}>
-        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
-      </ResourceProvider>,
-    )
+    render(<AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>)
 
     expect(screen.getByText('Protected Content')).toBeInTheDocument()
   })
@@ -175,11 +194,7 @@ describe('AuthBoundary', () => {
       type: AuthStateType.ERROR,
       error: new Error('test error'),
     })
-    render(
-      <ResourceProvider fallback={null}>
-        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
-      </ResourceProvider>,
-    )
+    render(<AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>)
 
     // The AuthBoundary should throw an AuthError internally
     // and then display the LoginError component as the fallback.
@@ -192,11 +207,7 @@ describe('AuthBoundary', () => {
   })
 
   it('renders children when logged in and org verification passes', () => {
-    render(
-      <ResourceProvider fallback={null}>
-        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
-      </ResourceProvider>,
-    )
+    render(<AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>)
     expect(screen.getByText('Protected Content')).toBeInTheDocument()
   })
 

package/src/components/auth/AuthBoundary.tsx

@@ -2,6 +2,7 @@ import {AuthStateType} from '@sanity/sdk'
 import {useEffect, useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
+import {ComlinkTokenRefreshProvider} from '../../context/ComlinkTokenRefresh'
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLoginUrl} from '../../hooks/auth/useLoginUrl'
 import {useVerifyOrgProjects} from '../../hooks/auth/useVerifyOrgProjects'
@@ -111,9 +112,11 @@ export function AuthBoundary({
   }, [LoginErrorComponent])
 
   return (
-    <ErrorBoundary FallbackComponent={FallbackComponent}>
-      <AuthSwitch {...props} />
-    </ErrorBoundary>
+    <ComlinkTokenRefreshProvider>
+      <ErrorBoundary FallbackComponent={FallbackComponent}>
+        <AuthSwitch {...props} />
+      </ErrorBoundary>
+    </ComlinkTokenRefreshProvider>
   )
 }
 

package/src/components/auth/LoginError.tsx

@@ -19,7 +19,15 @@ export type LoginErrorProps = FallbackProps
  * @alpha
  */
 export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.ReactNode {
-  if (!(error instanceof AuthError || error instanceof ConfigurationError)) throw error
+  if (
+    !(
+      error instanceof AuthError ||
+      error instanceof ConfigurationError ||
+      error instanceof ClientError
+    )
+  )
+    throw error
+
   const logout = useLogOut()
   const authState = useAuthState()
 
@@ -33,11 +41,11 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
   }, [logout, resetErrorBoundary])
 
   useEffect(() => {
-    if (authState.type === AuthStateType.ERROR && authState.error instanceof ClientError) {
-      if (authState.error.statusCode === 401) {
+    if (error instanceof ClientError) {
+      if (error.statusCode === 401) {
         handleRetry()
-      } else if (authState.error.statusCode === 404) {
-        const errorMessage = authState.error.response.body.message || ''
+      } else if (error.statusCode === 404) {
+        const errorMessage = error.response.body.message || ''
         if (errorMessage.startsWith('Session with sid') && errorMessage.endsWith('not found')) {
           setAuthErrorMessage('The session ID is invalid or expired.')
         } else {

package/src/context/ComlinkTokenRefresh.test.tsx

@@ -0,0 +1,221 @@
+import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
+import {AuthStateType, getIsInDashboardState, setAuthToken} from '@sanity/sdk'
+import {act, render} from '@testing-library/react'
+import {afterEach, beforeEach, describe, expect, it, type Mock, vi} from 'vitest'
+
+import {useAuthState} from '../hooks/auth/useAuthState'
+import {useWindowConnection} from '../hooks/comlink/useWindowConnection'
+import {useSanityInstance} from '../hooks/context/useSanityInstance'
+import {ComlinkTokenRefreshProvider} from './ComlinkTokenRefresh'
+
+// Mocks
+vi.mock('@sanity/sdk', async () => {
+  const actual = await vi.importActual('@sanity/sdk')
+  return {
+    ...actual,
+    getIsInDashboardState: vi.fn(() => ({getCurrent: vi.fn()})),
+    setAuthToken: vi.fn(),
+  }
+})
+
+vi.mock('../hooks/auth/useAuthState', () => ({
+  useAuthState: vi.fn(),
+}))
+
+vi.mock('../hooks/comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(),
+}))
+
+vi.mock('../hooks/context/useSanityInstance', () => ({
+  useSanityInstance: vi.fn(),
+}))
+
+// Use simpler mock typings
+const mockGetIsInDashboardState = getIsInDashboardState as Mock
+const mockSetAuthToken = setAuthToken as Mock
+const mockUseAuthState = useAuthState as Mock
+const mockUseWindowConnection = useWindowConnection as Mock
+const mockUseSanityInstance = useSanityInstance as Mock
+
+const mockFetch = vi.fn()
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const mockSanityInstance: any = {projectId: 'test', dataset: 'test'}
+
+describe('ComlinkTokenRefresh', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    mockGetIsInDashboardState.mockReturnValue({getCurrent: vi.fn(() => false)})
+    mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN})
+    mockUseWindowConnection.mockReturnValue({fetch: mockFetch})
+    mockUseSanityInstance.mockReturnValue(mockSanityInstance)
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+  })
+
+  describe('ComlinkTokenRefreshProvider', () => {
+    describe('when not in dashboard', () => {
+      beforeEach(() => {
+        mockGetIsInDashboardState.mockReturnValue({getCurrent: () => false})
+      })
+
+      it('should not request new token on 401 if not in dashboard', async () => {
+        mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN})
+        const {rerender} = render(
+          <ComlinkTokenRefreshProvider>
+            <div>Test</div>
+          </ComlinkTokenRefreshProvider>,
+        )
+
+        mockUseAuthState.mockReturnValue({
+          type: AuthStateType.ERROR,
+          error: {statusCode: 401, message: 'Unauthorized'},
+        })
+        act(() => {
+          rerender(
+            <ComlinkTokenRefreshProvider>
+              <div>Test</div>
+            </ComlinkTokenRefreshProvider>,
+          )
+        })
+
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(100)
+        })
+        expect(mockFetch).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('when in dashboard', () => {
+      beforeEach(() => {
+        mockGetIsInDashboardState.mockReturnValue({getCurrent: () => true})
+      })
+
+      it('should initialize useWindowConnection with correct parameters', () => {
+        render(
+          <ComlinkTokenRefreshProvider>
+            <div>Test</div>
+          </ComlinkTokenRefreshProvider>,
+        )
+
+        expect(mockUseWindowConnection).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: SDK_NODE_NAME,
+            connectTo: SDK_CHANNEL_NAME,
+          }),
+        )
+      })
+
+      it('should handle received token', async () => {
+        mockUseAuthState.mockReturnValue({
+          type: AuthStateType.ERROR,
+          error: {statusCode: 401, message: 'Unauthorized'},
+        })
+        mockFetch.mockResolvedValueOnce({token: 'new-token'})
+
+        render(
+          <ComlinkTokenRefreshProvider>
+            <div>Test</div>
+          </ComlinkTokenRefreshProvider>,
+        )
+
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(100)
+        })
+
+        expect(mockSetAuthToken).toHaveBeenCalledWith(mockSanityInstance, 'new-token')
+        expect(mockFetch).toHaveBeenCalledTimes(1)
+      })
+
+      it('should not set auth token if received token is null', async () => {
+        mockUseAuthState.mockReturnValue({
+          type: AuthStateType.ERROR,
+          error: {statusCode: 401, message: 'Unauthorized'},
+        })
+        mockFetch.mockResolvedValueOnce({token: null})
+
+        render(
+          <ComlinkTokenRefreshProvider>
+            <div>Test</div>
+          </ComlinkTokenRefreshProvider>,
+        )
+
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(100)
+        })
+
+        expect(mockSetAuthToken).not.toHaveBeenCalled()
+      })
+
+      it('should handle fetch errors gracefully', async () => {
+        mockUseAuthState.mockReturnValue({
+          type: AuthStateType.ERROR,
+          error: {statusCode: 401, message: 'Unauthorized'},
+        })
+        mockFetch.mockRejectedValueOnce(new Error('Fetch failed'))
+
+        render(
+          <ComlinkTokenRefreshProvider>
+            <div>Test</div>
+          </ComlinkTokenRefreshProvider>,
+        )
+
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(100)
+        })
+
+        expect(mockFetch).toHaveBeenCalledTimes(1)
+      })
+
+      describe('Automatic token refresh', () => {
+        it('should not request new token for non-401 errors', async () => {
+          mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN})
+          const {rerender} = render(
+            <ComlinkTokenRefreshProvider>
+              <div>Test</div>
+            </ComlinkTokenRefreshProvider>,
+          )
+
+          mockUseAuthState.mockReturnValue({
+            type: AuthStateType.ERROR,
+            error: {statusCode: 500, message: 'Server Error'},
+          })
+          act(() => {
+            rerender(
+              <ComlinkTokenRefreshProvider>
+                <div>Test</div>
+              </ComlinkTokenRefreshProvider>,
+            )
+          })
+
+          await act(async () => {
+            await vi.advanceTimersByTimeAsync(100)
+          })
+          expect(mockFetch).not.toHaveBeenCalled()
+        })
+
+        it('should request new token on LOGGED_OUT state', async () => {
+          mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN})
+          const {rerender} = render(
+            <ComlinkTokenRefreshProvider>
+              <div>Test</div>
+            </ComlinkTokenRefreshProvider>,
+          )
+
+          mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_OUT})
+          act(() => {
+            rerender(
+              <ComlinkTokenRefreshProvider>
+                <div>Test</div>
+              </ComlinkTokenRefreshProvider>,
+            )
+          })
+
+          expect(mockFetch).toHaveBeenCalledWith('dashboard/v1/auth/tokens/create')
+        })
+      })
+    })
+  })
+})

package/src/context/ComlinkTokenRefresh.tsx

@@ -0,0 +1,140 @@
+import {type ClientError} from '@sanity/client'
+import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
+import {
+  AuthStateType,
+  type FrameMessage,
+  getIsInDashboardState,
+  type NewTokenResponseMessage,
+  type RequestNewTokenMessage,
+  setAuthToken,
+  type WindowMessage,
+} from '@sanity/sdk'
+import React, {type PropsWithChildren, useCallback, useEffect, useMemo, useRef} from 'react'
+
+import {useAuthState} from '../hooks/auth/useAuthState'
+import {useWindowConnection} from '../hooks/comlink/useWindowConnection'
+import {useSanityInstance} from '../hooks/context/useSanityInstance'
+
+// Define specific message types extending the base types for clarity
+type SdkParentComlinkMessage = NewTokenResponseMessage | WindowMessage // Messages received by SDK
+type SdkChildComlinkMessage = RequestNewTokenMessage | FrameMessage // Messages sent by SDK
+
+const DEFAULT_RESPONSE_TIMEOUT = 10000 // 10 seconds
+
+/**
+ * Component that handles token refresh in dashboard mode
+ */
+function DashboardTokenRefresh({children}: PropsWithChildren) {
+  const instance = useSanityInstance()
+  const isTokenRefreshInProgress = useRef(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const processed401ErrorRef = useRef<unknown | null>(null)
+  const authState = useAuthState()
+
+  const clearRefreshTimeout = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+  }, [])
+
+  const windowConnection = useWindowConnection<SdkParentComlinkMessage, SdkChildComlinkMessage>({
+    name: SDK_NODE_NAME,
+    connectTo: SDK_CHANNEL_NAME,
+  })
+
+  const requestNewToken = useCallback(async () => {
+    if (isTokenRefreshInProgress.current) {
+      return
+    }
+
+    isTokenRefreshInProgress.current = true
+    clearRefreshTimeout()
+
+    timeoutRef.current = setTimeout(() => {
+      if (isTokenRefreshInProgress.current) {
+        isTokenRefreshInProgress.current = false
+      }
+      timeoutRef.current = null
+    }, DEFAULT_RESPONSE_TIMEOUT)
+
+    try {
+      const res = await windowConnection.fetch<{token: string | null; error?: string}>(
+        'dashboard/v1/auth/tokens/create',
+      )
+      clearRefreshTimeout()
+
+      if (res.token) {
+        setAuthToken(instance, res.token)
+
+        // Remove the unauthorized error from the error container
+        const errorContainer = document.getElementById('__sanityError')
+        if (errorContainer) {
+          const hasUnauthorizedError = Array.from(errorContainer.getElementsByTagName('div')).some(
+            (div) =>
+              div.textContent?.includes(
+                'Uncaught error: Unauthorized - A valid session is required for this endpoint',
+              ),
+          )
+
+          if (hasUnauthorizedError) {
+            errorContainer.remove()
+          }
+        }
+      }
+      isTokenRefreshInProgress.current = false
+    } catch {
+      isTokenRefreshInProgress.current = false
+      clearRefreshTimeout()
+    }
+  }, [windowConnection, clearRefreshTimeout, instance])
+
+  useEffect(() => {
+    return () => {
+      clearRefreshTimeout()
+    }
+  }, [clearRefreshTimeout])
+
+  useEffect(() => {
+    const has401Error =
+      authState.type === AuthStateType.ERROR &&
+      authState.error &&
+      (authState.error as ClientError)?.statusCode === 401 &&
+      !isTokenRefreshInProgress.current &&
+      processed401ErrorRef.current !== authState.error
+
+    const isLoggedOut =
+      authState.type === AuthStateType.LOGGED_OUT && !isTokenRefreshInProgress.current
+
+    if (has401Error || isLoggedOut) {
+      processed401ErrorRef.current =
+        authState.type === AuthStateType.ERROR ? authState.error : undefined
+      requestNewToken()
+    } else if (
+      authState.type !== AuthStateType.ERROR ||
+      processed401ErrorRef.current !==
+        (authState.type === AuthStateType.ERROR ? authState.error : undefined)
+    ) {
+      processed401ErrorRef.current = null
+    }
+  }, [authState, requestNewToken])
+
+  return children
+}
+
+/**
+ * This provider is used to provide the Comlink token refresh feature.
+ * It is used to automatically request a new token on 401 error if enabled.
+ * @public
+ */
+export const ComlinkTokenRefreshProvider: React.FC<PropsWithChildren> = ({children}) => {
+  const instance = useSanityInstance()
+  const isInDashboard = useMemo(() => getIsInDashboardState(instance).getCurrent(), [instance])
+
+  if (isInDashboard) {
+    return <DashboardTokenRefresh>{children}</DashboardTokenRefresh>
+  }
+
+  // If we're not in the dashboard, we don't need to do anything
+  return children
+}

package/src/hooks/preview/useDocumentPreview.tsx

@@ -21,23 +21,31 @@ export interface useDocumentPreviewOptions extends DocumentHandle {
  * @category Types
  */
 export interface useDocumentPreviewResults {
-  /** The results of resolving the document’s preview values */
+  /** The results of inferring the document’s preview values */
   data: PreviewValue
-  /** True when preview values are being refreshed */
+  /** True when inferred preview values are being refreshed */
   isPending: boolean
 }
 
 /**
  * @public
  *
- * Returns the preview values of a document (specified via a `DocumentHandle`),
+ * Attempts to infer preview values of a document (specified via a `DocumentHandle`),
  * including the document’s `title`, `subtitle`, `media`, and `status`. These values are live and will update in realtime.
  * To reduce unnecessary network requests for resolving the preview values, an optional `ref` can be passed to the hook so that preview
  * resolution will only occur if the `ref` is intersecting the current viewport.
  *
+ * See remarks below for futher information.
+ *
+ * @remarks
+ * Values returned by this hook may not be as expected. It is currently unable to read preview values as defined in your schema;
+ * instead, it attempts to infer these preview values by checking against a basic set of potential fields on your document.
+ * We are anticipating being able to significantly improve this hook’s functionality and output in a future release.
+ * For now, we recommend using {@link useDocumentProjection} for rendering individual document fields (or projections of those fields).
+ *
  * @category Documents
- * @param options - The document handle for the document you want to resolve preview values for, and an optional ref
- * @returns The preview values for the given document and a boolean to indicate whether the resolution is pending
+ * @param options - The document handle for the document you want to infer preview values for, and an optional ref
+ * @returns The inferred values for the given document and a boolean to indicate whether the resolution is pending
  *
  * @example Combining with useDocuments to render a collection of document previews
  * ```