@sanity/sdk-react 0.0.0-alpha.3 → 0.0.0-alpha.31

package/src/components/SanityApp.tsx

@@ -0,0 +1,106 @@
+import {type SanityConfig} from '@sanity/sdk'
+import {type ReactElement, useEffect} from 'react'
+
+import {SDKProvider} from './SDKProvider'
+import {isInIframe, isLocalUrl} from './utils'
+
+/**
+ * @public
+ * @category Types
+ */
+export interface SanityAppProps {
+  /* One or more SanityConfig objects providing a project ID and dataset name */
+  config: SanityConfig | SanityConfig[]
+  /** @deprecated use the `config` prop instead. */
+  sanityConfigs?: SanityConfig[]
+  children: React.ReactNode
+  /* Fallback content to show when child components are suspending. Same as the `fallback` prop for React Suspense. */
+  fallback: React.ReactNode
+}
+
+const REDIRECT_URL = 'https://sanity.io/welcome'
+
+/**
+ * @public
+ *
+ * The SanityApp component provides your Sanity application with access to your Sanity configuration,
+ * 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 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.
+ *
+ * @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.
+ *
+ * @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
+ * ```tsx
+ * import { SanityApp, type SanityConfig } from '@sanity/sdk-react'
+ *
+ * import MyAppRoot from './Root'
+ *
+ * // Single project configuration
+ * const mySanityConfig: SanityConfig = {
+ *   projectId: 'my-project-id',
+ *   dataset: 'production',
+ * }
+ *
+ * // 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 config={mySanityConfig} fallback={<div>Loading…</div>}>
+ *       <MyAppRoot />
+ *     </SanityApp>
+ *   )
+ * }
+ * ```
+ */
+export function SanityApp({
+  children,
+  fallback,
+  config = [],
+  ...props
+}: SanityAppProps): ReactElement {
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | undefined
+
+    if (!isInIframe() && !isLocalUrl(window)) {
+      // 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)
+        window.location.replace(REDIRECT_URL)
+      }, 1000)
+    }
+    return () => clearTimeout(timeout)
+  }, [])
+
+  return (
+    <SDKProvider {...props} fallback={fallback} config={config}>
+      {children}
+    </SDKProvider>
+  )
+}

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

@@ -1,23 +1,23 @@
-import {AuthStateType, createSanityInstance} from '@sanity/sdk'
-import {ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
+import {AuthStateType} from '@sanity/sdk'
 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 {ResourceProvider} from '../../context/ResourceProvider'
 import {useAuthState} from '../../hooks/auth/useAuthState'
-import {SanityProvider} from '../context/SanityProvider'
+import {useLoginUrl} from '../../hooks/auth/useLoginUrl'
+import {useVerifyOrgProjects} from '../../hooks/auth/useVerifyOrgProjects'
 import {AuthBoundary} from './AuthBoundary'
 
 // Mock hooks
 vi.mock('../../hooks/auth/useAuthState', () => ({
   useAuthState: vi.fn(() => 'logged-out'),
 }))
-vi.mock('../../hooks/auth/useLoginUrls', () => ({
-  useLoginUrls: vi.fn(() => [{title: 'Provider A', url: 'https://provider-a.com/auth'}]),
-}))
-vi.mock('../../hooks/auth/useHandleCallback', () => ({
-  useHandleCallback: vi.fn(() => async () => {}),
+vi.mock('../../hooks/auth/useLoginUrl')
+vi.mock('../../hooks/auth/useVerifyOrgProjects')
+vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
+  useHandleAuthCallback: vi.fn(() => async () => {}),
 }))
 vi.mock('../../hooks/auth/useLogOut', () => ({
   useLogOut: vi.fn(() => async () => {}),
@@ -38,48 +38,121 @@ vi.mock('./AuthError', async (importOriginal) => {
   }
 })
 
-const theme = buildTheme({})
-const sanityInstance = createSanityInstance({projectId: 'test-project-id', dataset: 'production'})
-const renderWithWrappers = (ui: React.ReactElement) => {
-  return render(
-    <ThemeProvider theme={theme}>
-      <SanityProvider sanityInstance={sanityInstance}>{ui}</SanityProvider>
-    </ThemeProvider>,
-  )
-}
+// Mock ErrorBoundary with a functional component and state simulation
+vi.mock('react-error-boundary', async (importOriginal) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const original = await importOriginal<any>()
+
+  // Functional mock that catches render errors
+  class MockErrorBoundaryComponent extends React.Component<
+    {
+      children: React.ReactNode
+      FallbackComponent?: React.ComponentType<FallbackProps>
+      onError?: (error: Error, errorInfo: React.ErrorInfo) => void
+      // Add any other props your actual ErrorBoundary might use
+    },
+    {error: Error | null}
+  > {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(props: any) {
+      super(props)
+      this.state = {error: null}
+    }
+
+    // Static methods don't use override
+    static getDerivedStateFromError(error: Error) {
+      // Update state so the next render will show the fallback UI.
+      return {error}
+    }
+
+    override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+      // You can also log the error to an error reporting service
+      this.props.onError?.(error, errorInfo)
+    }
+
+    override render() {
+      if (this.state.error && this.props.FallbackComponent) {
+        // You can render any custom fallback UI
+        return (
+          <this.props.FallbackComponent
+            error={this.state.error}
+            resetErrorBoundary={() => this.setState({error: null})}
+          />
+        )
+      }
+      if (this.state.error && !this.props.FallbackComponent) {
+        return <div>Caught Error (No Fallback Provided)</div>
+      }
+
+      return this.props.children
+    }
+  }
+
+  return {
+    ...original,
+    ErrorBoundary: MockErrorBoundaryComponent, // Use the class component mock
+    useErrorHandler: vi.fn(),
+  }
+})
+
+// Mock isInIframe
+vi.mock('../utils', () => ({
+  isInIframe: vi.fn(() => false),
+}))
 
 describe('AuthBoundary', () => {
   let consoleErrorSpy: MockInstance
+  const mockUseAuthState = vi.mocked(useAuthState)
+  const mockUseLoginUrl = vi.mocked(useLoginUrl)
+  const mockUseVerifyOrgProjects = vi.mocked(useVerifyOrgProjects)
+  const testProjectIds = ['proj-test'] // Example project ID for tests
+
   beforeEach(() => {
     vi.clearAllMocks()
     consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    // Default mocks
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN} as any)
+    mockUseLoginUrl.mockReturnValue('http://example.com/login')
+    // Default mock for useVerifyOrgProjects - returns null (no error)
+    mockUseVerifyOrgProjects.mockImplementation(() => null)
   })
 
   afterEach(() => {
     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 projectIds={testProjectIds}>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 projectIds={testProjectIds}>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"', () => {
@@ -88,7 +161,11 @@ describe('AuthBoundary', () => {
       currentUser: null,
       token: 'exampleToken',
     })
-    renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
+    render(
+      <ResourceProvider fallback={null}>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
 
     expect(screen.getByText('Protected Content')).toBeInTheDocument()
   })
@@ -98,7 +175,11 @@ describe('AuthBoundary', () => {
       type: AuthStateType.ERROR,
       error: new Error('test error'),
     })
-    renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
+    render(
+      <ResourceProvider fallback={null}>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
 
     // The AuthBoundary should throw an AuthError internally
     // and then display the LoginError component as the fallback.
@@ -109,4 +190,98 @@ describe('AuthBoundary', () => {
       ).toBeInTheDocument()
     })
   })
+
+  it('renders children when logged in and org verification passes', () => {
+    render(
+      <ResourceProvider fallback={null}>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
+      </ResourceProvider>,
+    )
+    expect(screen.getByText('Protected Content')).toBeInTheDocument()
+  })
+
+  it('throws AuthError via AuthSwitch when org verification fails (verifyOrganization=true)', async () => {
+    const orgErrorMessage = 'Organization mismatch!'
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN} as any)
+    // Mock specific return value for this test
+    mockUseVerifyOrgProjects.mockImplementation((disabled, pIds) => {
+      // Expect verification to be enabled (disabled=false) and projectIds to match
+      if (!disabled && pIds === testProjectIds) {
+        return orgErrorMessage
+      }
+      return null // Default case
+    })
+
+    // Need to catch the error thrown during render. ErrorBoundary mock handles this.
+    render(
+      <AuthBoundary verifyOrganization={true} projectIds={testProjectIds}>
+        <div>Protected Content</div>
+      </AuthBoundary>,
+    )
+
+    // The ErrorBoundary's FallbackComponent should be rendered
+    // Check if the text rendered by the mocked LoginError component is present
+    await waitFor(() => {
+      // AuthSwitch throws ConfigurationError, ErrorBoundary catches and renders LoginErrorComponent mock
+      // Check for title and description separately as rendered by LoginError
+      expect(screen.getByText('Configuration Error')).toBeInTheDocument() // Check title
+      expect(screen.getByText(orgErrorMessage)).toBeInTheDocument() // Check description (the error message)
+    })
+  })
+
+  it('does NOT throw AuthError when org verification fails but verifyOrganization=false', () => {
+    const orgErrorMessage = 'Organization mismatch!'
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mockUseAuthState.mockReturnValue({type: AuthStateType.LOGGED_IN} as any)
+    // Mock specific return value for this test
+    mockUseVerifyOrgProjects.mockImplementation((disabled, pIds) => {
+      // Expect verification to be disabled (disabled=true) and projectIds to match
+      if (disabled && pIds === testProjectIds) {
+        // Hook should return null when disabled, but we mock based on call
+        return orgErrorMessage
+      }
+      return null // Default case
+    })
+
+    render(
+      <AuthBoundary verifyOrganization={false} projectIds={testProjectIds}>
+        <div>Protected Content</div>
+      </AuthBoundary>,
+    )
+
+    // Should render children because verification is disabled
+    expect(screen.getByText('Protected Content')).toBeInTheDocument()
+    // Error fallback should not be rendered
+    expect(screen.queryByText(/Login Error/)).not.toBeInTheDocument()
+  })
+
+  it('throws AuthError via AuthSwitch when auth state is ERROR', async () => {
+    const authErrorMessage = 'Some authentication error'
+
+    mockUseAuthState.mockReturnValue({
+      type: AuthStateType.ERROR,
+      error: new Error(authErrorMessage),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any)
+    mockUseVerifyOrgProjects.mockReturnValue(null) // Org verification passes or is irrelevant
+    mockUseVerifyOrgProjects.mockImplementation(() => null)
+
+    render(
+      <AuthBoundary projectIds={testProjectIds}>
+        <div>Protected Content</div>
+      </AuthBoundary>,
+    )
+
+    await waitFor(() => {
+      // AuthSwitch throws AuthError, ErrorBoundary catches and renders LoginErrorComponent mock
+      // Check for the generic title and description rendered by LoginError for AuthError
+      expect(screen.getByText('Authentication Error')).toBeInTheDocument()
+      expect(
+        screen.getByText('Please try again or contact support if the problem persists.'),
+      ).toBeInTheDocument()
+    })
+  })
+
+  // Add more tests for logged out state, redirects, etc.
 })

package/src/components/auth/AuthBoundary.tsx

@@ -1,36 +1,82 @@
 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 {useVerifyOrgProjects} from '../../hooks/auth/useVerifyOrgProjects'
+import {isInIframe} from '../utils'
 import {AuthError} from './AuthError'
-import {Login} from './Login'
+import {ConfigurationError} from './ConfigurationError'
 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 and that the bridge hasn't already been loaded
+if (isInIframe() && !document.querySelector('[data-sanity-core]')) {
+  const parsedUrl = new URL(window.location.href)
+  const mode = new URLSearchParams(parsedUrl.hash.slice(1)).get('mode')
+  const script = document.createElement('script')
+  script.src =
+    mode === 'core-ui--staging'
+      ? 'https://core.sanity-cdn.work/bridge.js'
+      : 'https://core.sanity-cdn.com/bridge.js'
+  script.type = 'module'
+  script.async = true
+  document.head.appendChild(script)
+}
 
 /**
- * @alpha
+ * @public
  */
-export 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
+
+  /**
+   * The project IDs to use for organization verification.
+   */
+  projectIds?: string[]
+
+  /** Footer content to display */
+  footer?: React.ReactNode
+
+  /** Protected content to render when authenticated */
+  children?: React.ReactNode
+
+  /**
+   * Whether to verify that the project belongs to the organization specified in the dashboard context.
+   * By default, organization verification is enabled when running in a dashboard context.
+   *
+   * WARNING: Disabling organization verification is NOT RECOMMENDED and may cause your application
+   * to break in the future. This should never be disabled in production environments.
+   */
+  verifyOrganization?: boolean
 }
 
 /**
@@ -52,18 +98,17 @@ export interface AuthBoundaryProps extends LoginLayoutProps {
  * }
  * ```
  *
- * @alpha
+ * @internal
  */
 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}>
@@ -72,18 +117,46 @@ 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
+  verifyOrganization?: boolean
+  projectIds?: string[]
 }
 
 function AuthSwitch({
-  LoginComponent = Login,
   CallbackComponent = LoginCallback,
   children,
+  verifyOrganization = true,
+  projectIds,
   ...props
 }: AuthSwitchProps) {
   const authState = useAuthState()
+  const orgError = useVerifyOrgProjects(!verifyOrganization, projectIds)
+
+  const isLoggedOut = authState.type === AuthStateType.LOGGED_OUT && !authState.isDestroyingSession
+  const loginUrl = useLoginUrl()
+
+  useEffect(() => {
+    if (isLoggedOut && !isInIframe()) {
+      // We don't want to redirect to login if we're in the Dashboard
+      window.location.href = loginUrl
+    }
+  }, [isLoggedOut, loginUrl])
+
+  // Only check the error if verification is enabled
+  if (verifyOrganization && orgError) {
+    throw new ConfigurationError({message: orgError})
+  }
 
   switch (authState.type) {
     case AuthStateType.ERROR: {
@@ -95,8 +168,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/ConfigurationError.ts

@@ -0,0 +1,22 @@
+/**
+ * Error class for configuration-related errors. Wraps errors thrown during the
+ * configuration flow.
+ *
+ * @alpha
+ */
+export class ConfigurationError extends Error {
+  constructor(error: unknown) {
+    if (
+      typeof error === 'object' &&
+      !!error &&
+      'message' in error &&
+      typeof error.message === 'string'
+    ) {
+      super(error.message)
+    } else {
+      super()
+    }
+
+    this.cause = error
+  }
+}

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

@@ -1,26 +1,11 @@
-import {createSanityInstance} from '@sanity/sdk'
-import {ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
-import {render, screen, waitFor} from '@testing-library/react'
-import React from 'react'
+import {render, waitFor} from '@testing-library/react'
 import {afterAll, beforeAll, beforeEach, describe, expect, it, vi} from 'vitest'
 
-import {SanityProvider} from '../context/SanityProvider'
+import {ResourceProvider} from '../../context/ResourceProvider'
 
-const theme = buildTheme({})
-const sanityInstance = createSanityInstance({projectId: 'test-project-id', dataset: 'production'})
-
-const renderWithWrappers = (ui: React.ReactElement) => {
-  return render(
-    <ThemeProvider theme={theme}>
-      <SanityProvider sanityInstance={sanityInstance}>{ui}</SanityProvider>
-    </ThemeProvider>,
-  )
-}
-
-// Mock `useHandleCallback`
-vi.mock('../../hooks/auth/useHandleCallback', () => ({
-  useHandleCallback: vi.fn(() => async (url: string) => {
+// Mock `useHandleAuthCallback`
+vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
+  useHandleAuthCallback: vi.fn(() => async (url: string) => {
     const parsedUrl = new URL(url)
     const sid = new URLSearchParams(parsedUrl.hash.slice(1)).get('sid')
     if (sid === 'valid') {
@@ -52,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 () => {
@@ -61,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(
@@ -77,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()