@sanity/sdk-react 0.0.0-alpha.21 → 0.0.0-alpha.23

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

@@ -1,10 +1,10 @@
 import {AuthStateType} from '@sanity/sdk'
-import {useAuthState} from '@sanity/sdk-react'
-import {screen, waitFor} from '@testing-library/react'
+import {render, screen, waitFor} from '@testing-library/react'
 import {beforeEach, describe, expect, it, type MockInstance, vi} from 'vitest'
 
+import {ResourceProvider} from '../../context/ResourceProvider'
+import {useAuthState} from '../../hooks/auth/useAuthState'
 import {AuthBoundary} from './AuthBoundary'
-import {renderWithWrappers} from './authTestHelpers'
 
 // Mock hooks
 vi.mock('../../hooks/auth/useAuthState', () => ({
@@ -46,27 +46,37 @@ describe('AuthBoundary', () => {
     consoleErrorSpy?.mockRestore()
   })
 
-  it('renders the Login component when authState="logged-out"', () => {
+  it.skip('redirects to the sanity.io/login url when authState="logged-out"', async () => {
     vi.mocked(useAuthState).mockReturnValue({
       type: AuthStateType.LOGGED_OUT,
       isDestroyingSession: false,
     })
-    renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
+    render(
+      <ResourceProvider fallback={null}>
+        <AuthBoundary>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
 
-    // The login screen should show "Choose login provider" by default
-    expect(screen.getByText('Choose login provider')).toBeInTheDocument()
-    expect(screen.queryByText('Protected Content')).not.toBeInTheDocument()
+    // Wait for the redirect to happen
+    await waitFor(() => {
+      expect(window.location.href).toBe('https://sanity.io/login')
+    })
   })
 
-  it('renders the LoginCallback component when authState="logging-in"', () => {
+  it('renders the empty LoginCallback component when authState="logging-in"', () => {
     vi.mocked(useAuthState).mockReturnValue({
       type: AuthStateType.LOGGING_IN,
       isExchangingToken: false,
     })
-    renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
+    const {container} = render(
+      <ResourceProvider fallback={null}>
+        <AuthBoundary>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
 
-    // The callback screen shows "Logging you in…"
-    expect(screen.getByText('Logging you in…')).toBeInTheDocument()
+    // The callback screen renders null check that it renders nothing
+    expect(container.innerHTML).toBe('')
+    expect(screen.queryByText('Protected Content')).not.toBeInTheDocument()
   })
 
   it('renders children when authState="logged-in"', () => {
@@ -75,7 +85,11 @@ describe('AuthBoundary', () => {
       currentUser: null,
       token: 'exampleToken',
     })
-    renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
+    render(
+      <ResourceProvider fallback={null}>
+        <AuthBoundary>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
 
     expect(screen.getByText('Protected Content')).toBeInTheDocument()
   })
@@ -85,7 +99,11 @@ describe('AuthBoundary', () => {
       type: AuthStateType.ERROR,
       error: new Error('test error'),
     })
-    renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
+    render(
+      <ResourceProvider fallback={null}>
+        <AuthBoundary>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
 
     // The AuthBoundary should throw an AuthError internally
     // and then display the LoginError component as the fallback.

package/src/components/auth/AuthBoundary.tsx

@@ -1,14 +1,13 @@
 import {AuthStateType} from '@sanity/sdk'
-import {useMemo} from 'react'
+import {useEffect, useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
 import {useAuthState} from '../../hooks/auth/useAuthState'
+import {useLoginUrl} from '../../hooks/auth/useLoginUrl'
 import {isInIframe} from '../utils'
 import {AuthError} from './AuthError'
-import {Login} from './Login'
 import {LoginCallback} from './LoginCallback'
 import {LoginError, type LoginErrorProps} from './LoginError'
-import {type LoginLayoutProps} from './LoginLayout'
 
 // Only import bridge if we're in an iframe. This assumes that the app is
 // running within SanityOS if it is in an iframe.
@@ -26,27 +25,42 @@ if (isInIframe()) {
 }
 
 /**
- * @internal
+ * @public
  */
-interface AuthBoundaryProps extends LoginLayoutProps {
+export interface AuthBoundaryProps {
   /**
    * Custom component to render the login screen.
-   * Receives all login layout props. Defaults to {@link Login}.
+   * Receives all props. Defaults to {@link Login}.
    */
-  LoginComponent?: React.ComponentType<LoginLayoutProps>
+  LoginComponent?: React.ComponentType<{
+    header?: React.ReactNode
+    footer?: React.ReactNode
+  }>
 
   /**
    * Custom component to render during OAuth callback processing.
-   * Receives all login layout props. Defaults to {@link LoginCallback}.
+   * Receives all props. Defaults to {@link LoginCallback}.
    */
-  CallbackComponent?: React.ComponentType<LoginLayoutProps>
+  CallbackComponent?: React.ComponentType<{
+    header?: React.ReactNode
+    footer?: React.ReactNode
+  }>
 
   /**
    * Custom component to render when authentication errors occur.
-   * Receives login layout props and error boundary props. Defaults to
+   * Receives error boundary props and layout props. Defaults to
    * {@link LoginError}
    */
   LoginErrorComponent?: React.ComponentType<LoginErrorProps>
+
+  /** Header content to display */
+  header?: React.ReactNode
+
+  /** Footer content to display */
+  footer?: React.ReactNode
+
+  /** Protected content to render when authenticated */
+  children?: React.ReactNode
 }
 
 /**
@@ -74,12 +88,11 @@ export function AuthBoundary({
   LoginErrorComponent = LoginError,
   ...props
 }: AuthBoundaryProps): React.ReactNode {
-  const {header, footer} = props
   const FallbackComponent = useMemo(() => {
     return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {
-      return <LoginErrorComponent {...fallbackProps} header={header} footer={footer} />
+      return <LoginErrorComponent {...fallbackProps} />
     }
-  }, [header, footer, LoginErrorComponent])
+  }, [LoginErrorComponent])
 
   return (
     <ErrorBoundary FallbackComponent={FallbackComponent}>
@@ -88,19 +101,32 @@ export function AuthBoundary({
   )
 }
 
-interface AuthSwitchProps extends LoginLayoutProps {
-  LoginComponent?: React.ComponentType<LoginLayoutProps>
-  CallbackComponent?: React.ComponentType<LoginLayoutProps>
+interface AuthSwitchProps {
+  LoginComponent?: React.ComponentType<{
+    header?: React.ReactNode
+    footer?: React.ReactNode
+  }>
+  CallbackComponent?: React.ComponentType<{
+    header?: React.ReactNode
+    footer?: React.ReactNode
+  }>
+  header?: React.ReactNode
+  footer?: React.ReactNode
+  children?: React.ReactNode
 }
 
-function AuthSwitch({
-  LoginComponent = Login,
-  CallbackComponent = LoginCallback,
-  children,
-  ...props
-}: AuthSwitchProps) {
+function AuthSwitch({CallbackComponent = LoginCallback, children, ...props}: AuthSwitchProps) {
   const authState = useAuthState()
 
+  const isLoggedOut = authState.type === AuthStateType.LOGGED_OUT && !authState.isDestroyingSession
+  const loginUrl = useLoginUrl()
+
+  useEffect(() => {
+    if (isLoggedOut) {
+      window.location.href = loginUrl
+    }
+  }, [isLoggedOut, loginUrl])
+
   switch (authState.type) {
     case AuthStateType.ERROR: {
       throw new AuthError(authState.error)
@@ -111,8 +137,12 @@ function AuthSwitch({
     case AuthStateType.LOGGED_IN: {
       return children
     }
+    case AuthStateType.LOGGED_OUT: {
+      return null
+    }
     default: {
-      return <LoginComponent {...props} />
+      // @ts-expect-error - This state should never happen
+      throw new Error(`Invalid auth state: ${authState.type}`)
     }
   }
 }

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

@@ -1,7 +1,7 @@
-import {screen, waitFor} from '@testing-library/react'
+import {render, waitFor} from '@testing-library/react'
 import {afterAll, beforeAll, beforeEach, describe, expect, it, vi} from 'vitest'
 
-import {renderWithWrappers} from './authTestHelpers'
+import {ResourceProvider} from '../../context/ResourceProvider'
 
 // Mock `useHandleAuthCallback`
 vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
@@ -37,8 +37,13 @@ describe('LoginCallback', () => {
 
   it('renders a loading message', async () => {
     const {LoginCallback} = await import('./LoginCallback') // Reload after resetModules
-    renderWithWrappers(<LoginCallback />)
-    expect(screen.getByText('Logging you in…')).toBeInTheDocument()
+    const {container} = render(
+      <ResourceProvider fallback={null}>
+        <LoginCallback />
+      </ResourceProvider>,
+    )
+    // The callback screen renders null check that it renders nothing
+    expect(container.innerHTML).toBe('')
   })
 
   it('handles a successful callback and calls history.replaceState', async () => {
@@ -46,7 +51,11 @@ describe('LoginCallback', () => {
     vi.stubGlobal('location', {href: 'http://localhost#sid=valid'})
     const {LoginCallback} = await import('./LoginCallback') // Reload after resetModules
 
-    renderWithWrappers(<LoginCallback />)
+    render(
+      <ResourceProvider fallback={null}>
+        <LoginCallback />
+      </ResourceProvider>,
+    )
 
     await waitFor(() => {
       expect(history.replaceState).toHaveBeenCalledWith(
@@ -62,7 +71,11 @@ describe('LoginCallback', () => {
     vi.stubGlobal('location', {href: 'http://localhost#sid=invalid'})
     const {LoginCallback} = await import('./LoginCallback') // Reload after resetModules
 
-    renderWithWrappers(<LoginCallback />)
+    render(
+      <ResourceProvider fallback={null}>
+        <LoginCallback />
+      </ResourceProvider>,
+    )
 
     await waitFor(() => {
       expect(history.replaceState).not.toHaveBeenCalled()

package/src/components/auth/LoginCallback.tsx

@@ -1,9 +1,7 @@
 import {useEffect} from 'react'
 
 import {useHandleAuthCallback} from '../../hooks/auth/useHandleAuthCallback'
-import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
 
-/**
 /**
  * Component shown during auth callback processing that handles login completion.
  * Automatically processes the auth callback when mounted and updates the URL
@@ -11,7 +9,7 @@ import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
  *
  * @alpha
  */
-export function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {
+export function LoginCallback(): React.ReactNode {
   const handleAuthCallback = useHandleAuthCallback()
 
   useEffect(() => {
@@ -25,12 +23,5 @@ export function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNo
     })
   }, [handleAuthCallback])
 
-  return (
-    <LoginLayout header={header} footer={footer}>
-      <div className="sc-login-callback">
-        <h1 className="sc-login-callback__title">Logging you in…</h1>
-        <div className="sc-login-callback__loading">Loading…</div>
-      </div>
-    </LoginLayout>
-  )
+  return null
 }

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

@@ -1,8 +1,8 @@
-import {fireEvent, screen, waitFor} from '@testing-library/react'
+import {fireEvent, render, screen, waitFor} from '@testing-library/react'
 import {describe, expect, it, vi} from 'vitest'
 
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {AuthError} from './AuthError'
-import {renderWithWrappers} from './authTestHelpers'
 import {LoginError} from './LoginError'
 
 vi.mock('../../hooks/auth/useLogOut', () => ({
@@ -14,7 +14,11 @@ describe('LoginError', () => {
     const mockReset = vi.fn()
     const error = new AuthError(new Error('Test error'))
 
-    renderWithWrappers(<LoginError error={error} resetErrorBoundary={mockReset} />)
+    render(
+      <ResourceProvider fallback={null}>
+        <LoginError error={error} resetErrorBoundary={mockReset} />
+      </ResourceProvider>,
+    )
 
     expect(screen.getByText('Authentication Error')).toBeInTheDocument()
     const retryButton = screen.getByRole('button', {name: 'Retry'})
@@ -33,7 +37,11 @@ describe('LoginError', () => {
     const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
     expect(() => {
-      renderWithWrappers(<LoginError error={nonAuthError} resetErrorBoundary={mockReset} />)
+      render(
+        <ResourceProvider fallback={null}>
+          <LoginError error={nonAuthError} resetErrorBoundary={mockReset} />
+        </ResourceProvider>,
+      )
     }).toThrow('Non-auth error')
 
     consoleErrorSpy.mockRestore() // Restore original console.error behavior

package/src/components/auth/LoginError.tsx

@@ -3,12 +3,11 @@ import {type FallbackProps} from 'react-error-boundary'
 
 import {useLogOut} from '../../hooks/auth/useLogOut'
 import {AuthError} from './AuthError'
-import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
 
 /**
  * @alpha
  */
-export type LoginErrorProps = FallbackProps & LoginLayoutProps
+export type LoginErrorProps = FallbackProps
 
 /**
  * Displays authentication error details and provides retry functionality.
@@ -16,12 +15,7 @@ export type LoginErrorProps = FallbackProps & LoginLayoutProps
  *
  * @alpha
  */
-export function LoginError({
-  error,
-  resetErrorBoundary,
-  header,
-  footer,
-}: LoginErrorProps): React.ReactNode {
+export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.ReactNode {
   if (!(error instanceof AuthError)) throw error
   const logout = useLogOut()
 
@@ -31,19 +25,17 @@ export function LoginError({
   }, [logout, resetErrorBoundary])
 
   return (
-    <LoginLayout header={header} footer={footer}>
-      <div className="sc-login-error">
-        <div className="sc-login-error__content">
-          <h2 className="sc-login-error__title">Authentication Error</h2>
-          <p className="sc-login-error__description">
-            Please try again or contact support if the problem persists.
-          </p>
-        </div>
-
-        <button className="sc-login-error__button" onClick={handleRetry}>
-          Retry
-        </button>
+    <div className="sc-login-error">
+      <div className="sc-login-error__content">
+        <h2 className="sc-login-error__title">Authentication Error</h2>
+        <p className="sc-login-error__description">
+          Please try again or contact support if the problem persists.
+        </p>
       </div>
-    </LoginLayout>
+
+      <button className="sc-login-error__button" onClick={handleRetry}>
+        Retry
+      </button>
+    </div>
   )
 }

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

@@ -1,12 +1,16 @@
-import {screen} from '@testing-library/react'
+import {render, screen} from '@testing-library/react'
 import {describe, expect, it} from 'vitest'
 
-import {renderWithWrappers} from './authTestHelpers'
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {LoginFooter} from './LoginFooter'
 
 describe('LoginFooter', () => {
   it('renders footer links', () => {
-    renderWithWrappers(<LoginFooter />)
+    render(
+      <ResourceProvider fallback={null}>
+        <LoginFooter />
+      </ResourceProvider>,
+    )
     expect(screen.getByText('Community')).toBeInTheDocument()
     expect(screen.getByText('Docs')).toBeInTheDocument()
     expect(screen.getByText('Privacy')).toBeInTheDocument()

package/src/context/ResourceProvider.test.tsx

@@ -0,0 +1,157 @@
+import {type SanityConfig, type SanityInstance} from '@sanity/sdk'
+import {render, screen} from '@testing-library/react'
+import {StrictMode, use, useEffect} from 'react'
+import {describe, expect, it} from 'vitest'
+
+import {ResourceProvider} from './ResourceProvider'
+import {SanityInstanceContext} from './SanityInstanceContext'
+
+const testConfig: SanityConfig = {
+  projectId: 'test-project',
+  dataset: 'test-dataset',
+}
+
+function promiseWithResolvers<T = void>(): {
+  promise: Promise<T>
+  resolve: (t: T) => void
+  reject: (error: unknown) => void
+} {
+  let resolve!: (t: T) => void
+  let reject!: (error: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return {resolve, reject, promise}
+}
+
+describe('ResourceProvider', () => {
+  it('renders children when loaded', () => {
+    render(
+      <ResourceProvider {...testConfig} fallback={<div>Loading...</div>}>
+        <div data-testid="test-child">Child Component</div>
+      </ResourceProvider>,
+    )
+
+    expect(screen.getByTestId('test-child')).toBeInTheDocument()
+  })
+
+  it('shows fallback during loading', () => {
+    const {promise, resolve} = promiseWithResolvers()
+    function SuspendingChild(): React.ReactNode {
+      throw promise
+    }
+
+    render(
+      <ResourceProvider {...testConfig} fallback={<div data-testid="fallback">Loading...</div>}>
+        <SuspendingChild />
+      </ResourceProvider>,
+    )
+
+    expect(screen.getByTestId('fallback')).toBeInTheDocument()
+    resolve()
+  })
+
+  it('creates root instance when no parent context exists', async () => {
+    const {promise, resolve} = promiseWithResolvers<SanityInstance | null>()
+
+    const CaptureInstance = () => {
+      const instance = use(SanityInstanceContext)
+      useEffect(() => resolve(instance), [instance])
+      return null
+    }
+
+    render(
+      <ResourceProvider {...testConfig} fallback={null}>
+        <CaptureInstance />
+      </ResourceProvider>,
+    )
+
+    await expect(promise).resolves.toMatchObject({
+      config: testConfig,
+      isDisposed: expect.any(Function),
+    })
+  })
+
+  it('creates child instance when parent context exists', async () => {
+    const parentConfig: SanityConfig = {...testConfig, dataset: 'parent-dataset'}
+    const child = promiseWithResolvers<SanityInstance | null>()
+
+    const CaptureInstance = () => {
+      const childInstance = use(SanityInstanceContext)
+      useEffect(() => child.resolve(childInstance), [childInstance])
+      return null
+    }
+
+    render(
+      <ResourceProvider {...parentConfig} fallback={null}>
+        <ResourceProvider {...testConfig} fallback={null}>
+          <CaptureInstance />
+        </ResourceProvider>
+      </ResourceProvider>,
+    )
+
+    const childInstance = await child.promise
+    expect(childInstance?.config).toEqual(testConfig)
+    expect(childInstance?.isDisposed()).toBe(false)
+  })
+
+  it('disposes instance when unmounted', async () => {
+    const {promise, resolve} = promiseWithResolvers<SanityInstance | null>()
+    const CaptureInstance = () => {
+      const instance = use(SanityInstanceContext)
+      useEffect(() => resolve(instance), [instance])
+      return null
+    }
+
+    const {unmount} = render(
+      <ResourceProvider {...testConfig} fallback={null}>
+        <CaptureInstance />
+      </ResourceProvider>,
+    )
+
+    unmount()
+    await new Promise((r) => setTimeout(r, 0))
+    const instance = await promise
+
+    expect(instance?.isDisposed()).toBe(true)
+  })
+
+  it('does not dispose on quick remount (Strict Mode)', async () => {
+    const {promise, resolve} = promiseWithResolvers<SanityInstance | null>()
+    const CaptureInstance = () => {
+      const instance = use(SanityInstanceContext)
+      useEffect(() => resolve(instance), [instance])
+      return null
+    }
+
+    render(
+      <StrictMode>
+        <ResourceProvider {...testConfig} fallback={null}>
+          <CaptureInstance />
+        </ResourceProvider>
+      </StrictMode>,
+    )
+
+    const instance = await promise
+
+    expect(instance?.isDisposed()).toBe(false)
+  })
+
+  it('uses default fallback when none provided', () => {
+    const {promise, resolve} = promiseWithResolvers()
+    function SuspendingChild(): React.ReactNode {
+      throw promise
+    }
+
+    render(
+      // @ts-expect-error Testing fallback behavior
+      <ResourceProvider {...testConfig}>
+        <SuspendingChild />
+      </ResourceProvider>,
+    )
+
+    expect(screen.getByText(/Warning: No fallback provided/)).toBeInTheDocument()
+    resolve()
+  })
+})