@sanity/sdk-react 2.6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -43,7 +43,7 @@
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
-    "@sanity/client": "^7.12.0",
+    "@sanity/client": "^7.14.1",
     "@sanity/message-protocol": "^0.18.0",
     "@sanity/types": "^5.2.0",
     "@types/lodash-es": "^4.17.12",
@@ -52,7 +52,7 @@
     "react-compiler-runtime": "19.1.0-rc.2",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "2.6.0"
+    "@sanity/sdk": "2.8.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
@@ -77,9 +77,9 @@
     "typescript": "^5.8.3",
     "vite": "^6.3.4",
     "vitest": "^3.2.4",
+    "@repo/package.bundle": "3.82.0",
     "@repo/config-eslint": "0.0.0",
     "@repo/config-test": "0.0.1",
-    "@repo/package.bundle": "3.82.0",
     "@repo/package.config": "0.0.1",
     "@repo/tsconfig": "0.0.1"
   },

package/src/_exports/sdk-react.ts

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

package/src/components/SanityApp.test.tsx

@@ -207,6 +207,37 @@ describe('SanityApp', () => {
     consoleWarnSpy.mockRestore()
   })
 
+  it('redirects to core if config is omitted and no studio context is available', async () => {
+    const originalLocation = window.location
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const mockLocation = {
+      replace: vi.fn(),
+      href: 'http://sanity-test.app',
+    }
+
+    Object.defineProperty(window, 'location', {
+      value: mockLocation,
+      writable: true,
+    })
+
+    render(
+      <SanityApp fallback={<div>Fallback</div>}>
+        <div>Test Child</div>
+      </SanityApp>,
+    )
+
+    await new Promise((resolve) => setTimeout(resolve, 1010))
+
+    expect(mockLocation.replace).toHaveBeenCalledWith('https://sanity.io/welcome')
+
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+    })
+    consoleWarnSpy.mockRestore()
+  })
+
   it('does not redirect to core if not inside iframe and local url', async () => {
     const originalLocation = window.location
 
@@ -244,7 +275,7 @@ describe('SanityApp', () => {
     })
   })
 
-  it('does not redirect to core if studioMode is enabled', async () => {
+  it('does not redirect to core if studio config is provided', async () => {
     const originalLocation = window.location
     const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
@@ -256,7 +287,7 @@ describe('SanityApp', () => {
     const mockSanityConfig: SanityConfig = {
       projectId: 'test-project',
       dataset: 'test-dataset',
-      studioMode: {enabled: true},
+      studio: {},
     }
 
     Object.defineProperty(window, 'location', {
@@ -283,4 +314,43 @@ describe('SanityApp', () => {
     })
     consoleWarnSpy.mockRestore()
   })
+
+  it('does not redirect to core when studio config is provided', async () => {
+    const originalLocation = window.location
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const mockLocation = {
+      replace: vi.fn(),
+      href: 'http://sanity-test.app',
+    }
+
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+      studio: {},
+    }
+
+    Object.defineProperty(window, 'location', {
+      value: mockLocation,
+      writable: true,
+    })
+
+    render(
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+        <div>Test Child</div>
+      </SanityApp>,
+    )
+
+    // Wait for 1 second
+    await new Promise((resolve) => setTimeout(resolve, 1010))
+
+    expect(mockLocation.replace).not.toHaveBeenCalled()
+
+    // Clean up the mock
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+    })
+    consoleWarnSpy.mockRestore()
+  })
 })

package/src/components/SanityApp.tsx

@@ -1,6 +1,7 @@
-import {type DocumentSource, type SanityConfig} from '@sanity/sdk'
-import {type ReactElement, useEffect} from 'react'
+import {type DocumentSource, isStudioConfig, type SanityConfig} from '@sanity/sdk'
+import {type ReactElement, useContext, useEffect, useMemo} from 'react'
 
+import {SDKStudioContext, type StudioWorkspaceHandle} from '../context/SDKStudioContext'
 import {SDKProvider} from './SDKProvider'
 import {isInIframe, isLocalUrl} from './utils'
 
@@ -9,8 +10,13 @@ import {isInIframe, isLocalUrl} from './utils'
  * @category Types
  */
 export interface SanityAppProps {
-  /* One or more SanityConfig objects providing a project ID and dataset name */
-  config: SanityConfig | SanityConfig[]
+  /**
+   * 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[]
   sources?: Record<string, DocumentSource>
@@ -21,6 +27,21 @@ export interface SanityAppProps {
 
 const REDIRECT_URL = 'https://sanity.io/welcome'
 
+/**
+ * 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 deriveConfigFromWorkspace(workspace: StudioWorkspaceHandle): SanityConfig {
+  return {
+    projectId: workspace.projectId,
+    dataset: workspace.dataset,
+    studio: {
+      auth: workspace.auth.token ? {token: workspace.auth.token} : undefined,
+    },
+  }
+}
+
 /**
  * @public
  *
@@ -29,12 +50,18 @@ const REDIRECT_URL = 'https://sanity.io/welcome'
  * must be wrapped with the SanityApp component to function properly.
  *
  * 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.
+ * 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` prop is
+ * optional — `SanityApp` will automatically derive `projectId`, `dataset`, and auth from the
+ * Studio workspace.
  *
  * @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
@@ -82,14 +109,29 @@ const REDIRECT_URL = 'https://sanity.io/welcome'
 export function SanityApp({
   children,
   fallback,
-  config = [],
+  config: configProp,
   ...props
 }: SanityAppProps): ReactElement {
+  const studioWorkspace = useContext(SDKStudioContext)
+
+  // 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(config) ? config[0] : config
+    const primaryConfig = Array.isArray(resolvedConfig) ? resolvedConfig[0] : resolvedConfig
+    const shouldRedirectWithoutConfig =
+      configProp === undefined && !studioWorkspace && !primaryConfig
 
-    if (!isInIframe() && !isLocalUrl(window) && !primaryConfig?.studioMode?.enabled) {
+    if (
+      !isInIframe() &&
+      !isLocalUrl(window) &&
+      (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
@@ -98,10 +140,10 @@ export function SanityApp({
       }, 1000)
     }
     return () => clearTimeout(timeout)
-  }, [config])
+  }, [configProp, resolvedConfig, studioWorkspace])
 
   return (
-    <SDKProvider {...props} fallback={fallback} config={config}>
+    <SDKProvider {...props} fallback={fallback} config={resolvedConfig}>
       {children}
     </SDKProvider>
   )

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

@@ -22,6 +22,9 @@ vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
 vi.mock('../../hooks/auth/useLogOut', () => ({
   useLogOut: vi.fn(() => async () => {}),
 }))
+vi.mock('../../hooks/comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(() => ({fetch: vi.fn()})),
+}))
 
 // Mock AuthError throwing scenario
 vi.mock('./AuthError', async (importOriginal) => {

package/src/components/auth/AuthBoundary.tsx

@@ -1,5 +1,5 @@
 import {CorsOriginError} from '@sanity/client'
-import {AuthStateType, getCorsErrorProjectId} from '@sanity/sdk'
+import {AuthStateType, getCorsErrorProjectId, isStudioConfig} from '@sanity/sdk'
 import {useEffect, useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
@@ -156,20 +156,20 @@ function AuthSwitch({
 }: AuthSwitchProps) {
   const authState = useAuthState()
   const instance = useSanityInstance()
-  const studioModeEnabled = instance.config.studioMode?.enabled
+  const isStudio = isStudioConfig(instance.config)
   const disableVerifyOrg =
-    !verifyOrganization || studioModeEnabled || authState.type !== AuthStateType.LOGGED_IN
+    !verifyOrganization || isStudio || authState.type !== AuthStateType.LOGGED_IN
   const orgError = useVerifyOrgProjects(disableVerifyOrg, projectIds)
 
   const isLoggedOut = authState.type === AuthStateType.LOGGED_OUT && !authState.isDestroyingSession
   const loginUrl = useLoginUrl()
 
   useEffect(() => {
-    if (isLoggedOut && !isInIframe() && !studioModeEnabled) {
+    if (isLoggedOut && !isInIframe() && !isStudio) {
       // We don't want to redirect to login if we're in the Dashboard nor in studio mode
       window.location.href = loginUrl
     }
-  }, [isLoggedOut, loginUrl, studioModeEnabled])
+  }, [isLoggedOut, loginUrl, isStudio])
 
   // Only check the error if verification is enabled
   if (verifyOrganization && orgError) {

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

@@ -9,6 +9,10 @@ vi.mock('../../hooks/auth/useLogOut', () => ({
   useLogOut: vi.fn(() => async () => {}),
 }))
 
+vi.mock('../../hooks/comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(() => ({fetch: vi.fn()})),
+}))
+
 describe('LoginError', () => {
   it('shows authentication error and retry button', async () => {
     const mockReset = vi.fn()
@@ -21,6 +25,7 @@ describe('LoginError', () => {
     )
 
     expect(screen.getByText('Authentication Error')).toBeInTheDocument()
+
     const retryButton = screen.getByRole('button', {name: 'Retry'})
     fireEvent.click(retryButton)
 

package/src/components/auth/LoginError.tsx

@@ -1,4 +1,5 @@
 import {ClientError} from '@sanity/client'
+import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
 import {
   AuthStateType,
   getClientErrorApiBody,
@@ -10,6 +11,8 @@ import {type FallbackProps} from 'react-error-boundary'
 
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLogOut} from '../../hooks/auth/useLogOut'
+import {useWindowConnection} from '../../hooks/comlink/useWindowConnection'
+import {useSanityInstance} from '../../hooks/context/useSanityInstance'
 import {Error} from '../errors/Error'
 import {AuthError} from './AuthError'
 import {ConfigurationError} from './ConfigurationError'
@@ -36,12 +39,23 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
 
   const logout = useLogOut()
   const authState = useAuthState()
+  const {
+    config: {projectId},
+  } = useSanityInstance()
 
   const [authErrorMessage, setAuthErrorMessage] = useState(
     'Please try again or contact support if the problem persists.',
   )
   const [showRetryCta, setShowRetryCta] = useState(true)
 
+  /**
+   * TODO: before merge update message-protocol package to include the new message type
+   */
+  const {fetch} = useWindowConnection({
+    name: SDK_NODE_NAME,
+    connectTo: SDK_CHANNEL_NAME,
+  })
+
   const handleRetry = useCallback(async () => {
     await logout()
     resetErrorBoundary()
@@ -55,6 +69,13 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
           const description = getClientErrorApiDescription(error)
           if (description) setAuthErrorMessage(description)
           setShowRetryCta(false)
+          /**
+           * Handoff to dashboard to enable the request access flow for the project.
+           */
+          fetch('dashboard/v1/auth/access/request', {
+            resourceType: 'project',
+            resourceId: projectId,
+          })
         } else {
           setShowRetryCta(true)
           handleRetry()
@@ -73,7 +94,7 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
       setAuthErrorMessage(error.message)
       setShowRetryCta(true)
     }
-  }, [authState, handleRetry, error])
+  }, [authState, handleRetry, error, fetch, projectId])
 
   return (
     <Error

package/src/context/ComlinkTokenRefresh.test.tsx

@@ -334,9 +334,9 @@ describe('ComlinkTokenRefresh', () => {
         })
 
         describe('when in studio mode', () => {
-          it('should not render DashboardTokenRefresh when studio mode enabled', () => {
+          it('should not render DashboardTokenRefresh when studio config is provided', () => {
             render(
-              <ResourceProvider fallback={null} studioMode={{enabled: true}}>
+              <ResourceProvider fallback={null} studio={{}}>
                 <ComlinkTokenRefreshProvider>
                   <div>Test</div>
                 </ComlinkTokenRefreshProvider>

package/src/context/ComlinkTokenRefresh.tsx

@@ -4,6 +4,7 @@ import {
   AuthStateType,
   type FrameMessage,
   getIsInDashboardState,
+  isStudioConfig,
   type NewTokenResponseMessage,
   type RequestNewTokenMessage,
   setAuthToken,
@@ -130,9 +131,9 @@ function DashboardTokenRefresh({children}: PropsWithChildren) {
 export const ComlinkTokenRefreshProvider: React.FC<PropsWithChildren> = ({children}) => {
   const instance = useSanityInstance()
   const isInDashboard = useMemo(() => getIsInDashboardState(instance).getCurrent(), [instance])
-  const studioModeEnabled = !!instance.config.studioMode?.enabled
+  const isStudio = isStudioConfig(instance.config)
 
-  if (isInDashboard && !studioModeEnabled) {
+  if (isInDashboard && !isStudio) {
     return <DashboardTokenRefresh>{children}</DashboardTokenRefresh>
   }
 

package/src/context/SDKStudioContext.test.tsx

@@ -0,0 +1,126 @@
+import {type SanityConfig} from '@sanity/sdk'
+import {render} from '@testing-library/react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {SanityApp} from '../components/SanityApp'
+import {SDKStudioContext, type StudioWorkspaceHandle} from './SDKStudioContext'
+
+// Mock SDKProvider to capture the config it receives
+const mockSDKProvider = vi.hoisted(() => vi.fn())
+vi.mock('../components/SDKProvider', () => ({
+  SDKProvider: mockSDKProvider.mockImplementation(({children}) => (
+    <div data-testid="sdk-provider">{children}</div>
+  )),
+}))
+
+// Mock utils to prevent redirect logic
+vi.mock('../components/utils', () => ({
+  isInIframe: () => true,
+  isLocalUrl: () => true,
+}))
+
+describe('SDKStudioContext', () => {
+  beforeEach(() => {
+    mockSDKProvider.mockClear()
+  })
+
+  const mockWorkspace: StudioWorkspaceHandle = {
+    projectId: 'studio-project-id',
+    dataset: 'production',
+    auth: {
+      token: {
+        subscribe: vi.fn(() => ({unsubscribe: vi.fn()})),
+      },
+    },
+  }
+
+  it('SanityApp derives config from SDKStudioContext when no config prop is given', () => {
+    render(
+      <SDKStudioContext.Provider value={mockWorkspace}>
+        <SanityApp fallback={<div>Loading</div>}>
+          <div>Child</div>
+        </SanityApp>
+      </SDKStudioContext.Provider>,
+    )
+
+    expect(mockSDKProvider).toHaveBeenCalled()
+    const receivedConfig = mockSDKProvider.mock.calls[0][0].config as SanityConfig
+    expect(receivedConfig).toMatchObject({
+      projectId: 'studio-project-id',
+      dataset: 'production',
+      studio: {
+        auth: {token: mockWorkspace.auth.token},
+      },
+    })
+  })
+
+  it('explicit config takes precedence over SDKStudioContext', () => {
+    const explicitConfig: SanityConfig = {
+      projectId: 'explicit-project',
+      dataset: 'staging',
+    }
+
+    render(
+      <SDKStudioContext.Provider value={mockWorkspace}>
+        <SanityApp config={explicitConfig} fallback={<div>Loading</div>}>
+          <div>Child</div>
+        </SanityApp>
+      </SDKStudioContext.Provider>,
+    )
+
+    expect(mockSDKProvider).toHaveBeenCalled()
+    const receivedConfig = mockSDKProvider.mock.calls[0][0].config as SanityConfig
+    expect(receivedConfig).toMatchObject({
+      projectId: 'explicit-project',
+      dataset: 'staging',
+    })
+    // Should NOT have studio config from the context
+    expect(receivedConfig.studio).toBeUndefined()
+  })
+
+  it('SanityApp works without SDKStudioContext (standalone mode)', () => {
+    const standaloneConfig: SanityConfig = {
+      projectId: 'standalone-project',
+      dataset: 'production',
+    }
+
+    render(
+      <SanityApp config={standaloneConfig} fallback={<div>Loading</div>}>
+        <div>Child</div>
+      </SanityApp>,
+    )
+
+    expect(mockSDKProvider).toHaveBeenCalled()
+    const receivedConfig = mockSDKProvider.mock.calls[0][0].config as SanityConfig
+    expect(receivedConfig).toMatchObject({
+      projectId: 'standalone-project',
+      dataset: 'production',
+    })
+  })
+
+  it('handles workspace without auth.token (older Studio)', () => {
+    const olderWorkspace: StudioWorkspaceHandle = {
+      projectId: 'older-studio',
+      dataset: 'production',
+      auth: {},
+    }
+
+    render(
+      <SDKStudioContext.Provider value={olderWorkspace}>
+        <SanityApp fallback={<div>Loading</div>}>
+          <div>Child</div>
+        </SanityApp>
+      </SDKStudioContext.Provider>,
+    )
+
+    expect(mockSDKProvider).toHaveBeenCalled()
+    const receivedConfig = mockSDKProvider.mock.calls[0][0].config as SanityConfig
+    expect(receivedConfig).toMatchObject({
+      projectId: 'older-studio',
+      dataset: 'production',
+    })
+    // studio config should be present but auth.token should be undefined
+    expect(receivedConfig.studio).toBeDefined()
+    expect(receivedConfig.studio?.auth).toBeUndefined()
+  })
+})

package/src/context/SDKStudioContext.ts

@@ -0,0 +1,65 @@
+import {type TokenSource} from '@sanity/sdk'
+import {createContext} from 'react'
+
+/**
+ * Minimal duck-typed interface representing a Sanity Studio workspace.
+ * The Studio's `Workspace` type satisfies this naturally — no import
+ * dependency on the `sanity` package is required.
+ *
+ * @public
+ */
+export interface StudioWorkspaceHandle {
+  /** The Sanity project ID for this workspace. */
+  projectId: string
+  /** The dataset name for this workspace. */
+  dataset: string
+  /** Authentication state for this workspace. */
+  auth: {
+    /**
+     * Reactive token source from the Studio's auth store.
+     * When present, the SDK subscribes for ongoing token sync — the Studio
+     * is the single authority for auth and handles token refresh.
+     *
+     * Optional because Studios before Aug 2022 may not expose it. When
+     * absent, the SDK falls back to localStorage/cookie discovery.
+     */
+    token?: TokenSource
+  }
+}
+
+/**
+ * React context that allows the SDK to auto-detect when it is running
+ * inside a Sanity Studio. The Studio provides a workspace handle via this
+ * context, and `SanityApp` reads it to derive `projectId`, `dataset`, and
+ * a reactive auth token — eliminating the need for manual configuration.
+ *
+ * @remarks
+ * This context is defined in `@sanity/sdk-react` and provided by the Studio.
+ * The Studio imports it from this package and wraps its component tree:
+ *
+ * ```tsx
+ * import {SDKStudioContext} from '@sanity/sdk-react'
+ *
+ * function StudioRoot({children}) {
+ *   const workspace = useWorkspace()
+ *   return (
+ *     <SDKStudioContext.Provider value={workspace}>
+ *       {children}
+ *     </SDKStudioContext.Provider>
+ *   )
+ * }
+ * ```
+ *
+ * When `SanityApp` is rendered inside this provider, it auto-configures
+ * without any `config` prop:
+ *
+ * ```tsx
+ * <SanityApp fallback={<Loading />}>
+ *   <MyComponent />
+ * </SanityApp>
+ * ```
+ *
+ * @public
+ */
+export const SDKStudioContext = createContext<StudioWorkspaceHandle | null>(null)
+SDKStudioContext.displayName = 'SDKStudioContext'