@sanity/sdk-react 0.0.0-rc.6 → 0.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "0.0.0-rc.6",
+  "version": "0.0.1",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -42,42 +42,43 @@
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
-    "@sanity/client": "^6.29.1",
-    "@sanity/message-protocol": "^0.8.0",
+    "@sanity/client": "^7.0.0",
+    "@sanity/message-protocol": "^0.12.0",
     "@sanity/types": "^3.83.0",
     "@types/lodash-es": "^4.17.12",
+    "groq": "3.86.2-experimental.0",
     "lodash-es": "^4.17.21",
     "react-compiler-runtime": "19.0.0-beta-ebf51a3-20250411",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "0.0.0-rc.6"
+    "@sanity/sdk": "0.0.1"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/comlink": "^3.0.1",
+    "@sanity/comlink": "^3.0.2",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "3.1.1",
-    "babel-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/coverage-v8": "3.1.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.1",
     "eslint": "^9.22.0",
     "jsdom": "^25.0.1",
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rollup-plugin-visualizer": "^5.14.0",
-    "typescript": "^5.7.3",
-    "vite": "^6.3.2",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "@repo/config-eslint": "0.0.0",
-    "@repo/package.config": "0.0.1",
-    "@repo/tsconfig": "0.0.1",
     "@repo/package.bundle": "3.82.0",
-    "@repo/config-test": "0.0.1"
+    "@repo/package.config": "0.0.1",
+    "@repo/config-test": "0.0.1",
+    "@repo/tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -94,7 +95,7 @@
     "build:bundle": "vite build --configLoader runner --config package.bundle.ts",
     "clean": "rimraf dist",
     "dev": "pkg watch",
-    "docs": "typedoc --out docs --tsconfig ./tsconfig.dist.json",
+    "docs": "typedoc --json docs/typedoc.json --tsconfig ./tsconfig.dist.json",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
     "test": "vitest run",

package/src/_exports/sdk-react.ts

@@ -1,7 +1,7 @@
 /**
  * @module exports
  */
-export {AuthBoundary} from '../components/auth/AuthBoundary'
+export {AuthBoundary, type AuthBoundaryProps} from '../components/auth/AuthBoundary'
 export {SanityApp, type SanityAppProps} from '../components/SanityApp'
 export {SDKProvider, type SDKProviderProps} from '../components/SDKProvider'
 export {ResourceProvider, type ResourceProviderProps} from '../context/ResourceProvider'
@@ -12,6 +12,7 @@ export {useDashboardOrganizationId} from '../hooks/auth/useDashboardOrganization
 export {useHandleAuthCallback} from '../hooks/auth/useHandleAuthCallback'
 export {useLoginUrl} from '../hooks/auth/useLoginUrl'
 export {useLogOut} from '../hooks/auth/useLogOut'
+export {useVerifyOrgProjects} from '../hooks/auth/useVerifyOrgProjects'
 export {useClient} from '../hooks/client/useClient'
 export {
   type FrameConnection,
@@ -63,6 +64,8 @@ export {
 export {useProject} from '../hooks/projects/useProject'
 export {type ProjectWithoutMembers, useProjects} from '../hooks/projects/useProjects'
 export {useQuery} from '../hooks/query/useQuery'
+export {useActiveReleases} from '../hooks/releases/useActiveReleases'
+export {usePerspective} from '../hooks/releases/usePerspective'
 export {type UsersResult, useUsers} from '../hooks/users/useUsers'
 export {REACT_SDK_VERSION} from '../version'
 export {type DatasetsResponse, type SanityProjectMember} from '@sanity/client'

package/src/components/SDKProvider.tsx

@@ -29,11 +29,16 @@ export function SDKProvider({
   // reverse because we want the first config to be the default, but the
   // ResourceProvider nesting makes the last one the default
   const configs = (Array.isArray(config) ? config : [config]).slice().reverse()
+  const projectIds = configs.map((c) => c.projectId).filter((id): id is string => !!id)
 
   // Create a nested structure of ResourceProviders for each config
   const createNestedProviders = (index: number): ReactElement => {
     if (index >= configs.length) {
-      return <AuthBoundary {...props}>{children}</AuthBoundary>
+      return (
+        <AuthBoundary {...props} projectIds={projectIds}>
+          {children}
+        </AuthBoundary>
+      )
     }
 
     return (

package/src/components/SanityApp.test.tsx

@@ -3,11 +3,20 @@ import {render, screen} from '@testing-library/react'
 import {describe, expect, it, vi} from 'vitest'
 
 import {SanityApp} from './SanityApp'
-import {SDKProvider} from './SDKProvider'
-
-// Mock SDKProvider to verify it's being used correctly
+import {type SDKProviderProps} from './SDKProvider'
+
+// Hoist the mock function definition
+// Rely on vi.fn type inference
+const mockSDKProviderComponent = vi.hoisted(() =>
+  vi.fn((_props: SDKProviderProps) => (
+    // Simplified mock, doesn't access config directly to avoid type issues
+    <div data-testid="sdk-provider">SDKProvider Mock</div>
+  )),
+)
+
+// Use the hoisted mock in the factory
 vi.mock('./SDKProvider', () => ({
-  SDKProvider: vi.fn(() => <div data-testid="sdk-provider">SDKProvider</div>),
+  SDKProvider: mockSDKProviderComponent,
 }))
 
 // Mock useEffect to prevent redirect logic from running in tests
@@ -45,6 +54,8 @@ vi.mock('../hooks/auth/useAuthState', () => ({
 describe('SanityApp', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    // Access the mock instance correctly
+    mockSDKProviderComponent.mockClear()
   })
 
   it('renders SDKProvider with a single config', () => {
@@ -63,11 +74,13 @@ describe('SanityApp', () => {
     expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
 
     // Verify SDKProvider was called with the correct props
-    const sdkProviderCalls = vi.mocked(SDKProvider).mock.calls
-    expect(sdkProviderCalls.length).toBe(1)
-
-    const [props] = sdkProviderCalls[0]
-    const {config} = props
+    expect(mockSDKProviderComponent).toHaveBeenCalledTimes(1)
+    const sdkProviderCalls = mockSDKProviderComponent.mock.calls
+    const firstCallArgs1 = sdkProviderCalls[0]
+    expect(firstCallArgs1).toBeDefined()
+    expect(firstCallArgs1.length).toBeGreaterThan(0)
+    const props = firstCallArgs1[0] as unknown as SDKProviderProps
+    const config = props?.config
 
     // Config is now passed directly as an object for single configs
     expect(config).toEqual(singleConfig)
@@ -100,49 +113,18 @@ describe('SanityApp', () => {
     expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
 
     // Verify SDKProvider was called with the correct props
-    const sdkProviderCalls = vi.mocked(SDKProvider).mock.calls
-    expect(sdkProviderCalls.length).toBe(1)
-
-    const [props] = sdkProviderCalls[0]
-    const {config} = props
+    expect(mockSDKProviderComponent).toHaveBeenCalledTimes(1)
+    const sdkProviderCalls = mockSDKProviderComponent.mock.calls
+    const firstCallArgs2 = sdkProviderCalls[0]
+    expect(firstCallArgs2).toBeDefined()
+    expect(firstCallArgs2.length).toBeGreaterThan(0)
+    const props = firstCallArgs2[0] as unknown as SDKProviderProps
+    const config = props?.config
 
     // Config should be passed directly to SDKProvider
     expect(config).toEqual(multipleConfigs)
   })
 
-  it('supports legacy sanityConfigs prop', () => {
-    const legacyConfigs = [
-      {
-        projectId: 'legacy-project-1',
-        dataset: 'production',
-      },
-      {
-        projectId: 'legacy-project-2',
-        dataset: 'staging',
-      },
-    ]
-
-    render(
-      // @ts-expect-error purposefully using the deprecated prop
-      <SanityApp sanityConfigs={legacyConfigs} fallback={<div>Loading...</div>}>
-        <div>Child Content</div>
-      </SanityApp>,
-    )
-
-    // Check that the SDKProvider is rendered
-    expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
-
-    // Verify SDKProvider was called with the correct props
-    const sdkProviderCalls = vi.mocked(SDKProvider).mock.calls
-    expect(sdkProviderCalls.length).toBe(1)
-
-    const [props] = sdkProviderCalls[0]
-    const {config} = props
-
-    // Config should be passed to SDKProvider in the same order
-    expect(config).toEqual(legacyConfigs)
-  })
-
   it('handles iframe environment correctly', async () => {
     // Mock window.self and window.top to simulate iframe environment
     const originalTop = window.top

package/src/components/SanityApp.tsx

@@ -27,8 +27,12 @@ const REDIRECT_URL = 'https://sanity.io/welcome'
  * 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.
  *
- * SanityApp creates a hierarchy of ResourceProviders, each providing a SanityInstance that can be
- * accessed by hooks. The first configuration in the array becomes the default instance.
+ * 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
@@ -36,18 +40,18 @@ const REDIRECT_URL = 'https://sanity.io/welcome'
  *
  * @example
  * ```tsx
- * import { SanityApp } from '@sanity/sdk-react'
+ * import { SanityApp, type SanityConfig } from '@sanity/sdk-react'
  *
  * import MyAppRoot from './Root'
  *
  * // Single project configuration
- * const mySanityConfig = {
+ * const mySanityConfig: SanityConfig = {
  *   projectId: 'my-project-id',
  *   dataset: 'production',
  * }
  *
  * // Or multiple project configurations
- * const multipleConfigs = [
+ * const multipleConfigs: SanityConfig[] = [
  *   // Configuration for your main project. This will be used as the default project for hooks.
  *   {
  *     projectId: 'marketing-website-project',
@@ -67,7 +71,7 @@ const REDIRECT_URL = 'https://sanity.io/welcome'
  *
  * export default function MyApp() {
  *   return (
- *     <SanityApp config={mySanityConfig} fallback={<LoadingSpinner />}>
+ *     <SanityApp config={mySanityConfig} fallback={<div>Loading…</div>}>
  *       <MyAppRoot />
  *     </SanityApp>
  *   )
@@ -77,12 +81,9 @@ const REDIRECT_URL = 'https://sanity.io/welcome'
 export function SanityApp({
   children,
   fallback,
-  config,
-  sanityConfigs,
+  config = [],
   ...props
 }: SanityAppProps): ReactElement {
-  const configs = config ?? sanityConfigs ?? []
-
   useEffect(() => {
     let timeout: NodeJS.Timeout | undefined
 
@@ -98,7 +99,7 @@ export function SanityApp({
   }, [])
 
   return (
-    <SDKProvider {...props} fallback={fallback} config={configs}>
+    <SDKProvider {...props} fallback={fallback} config={config}>
       {children}
     </SDKProvider>
   )

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

@@ -1,18 +1,21 @@
 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 {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/useLoginUrl')
+vi.mock('../../hooks/auth/useVerifyOrgProjects')
 vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
   useHandleAuthCallback: vi.fn(() => async () => {}),
 }))
@@ -35,11 +38,84 @@ vi.mock('./AuthError', async (importOriginal) => {
   }
 })
 
+// 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(() => {
@@ -53,7 +129,7 @@ describe('AuthBoundary', () => {
     })
     render(
       <ResourceProvider fallback={null}>
-        <AuthBoundary>Protected Content</AuthBoundary>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
       </ResourceProvider>,
     )
 
@@ -70,7 +146,7 @@ describe('AuthBoundary', () => {
     })
     const {container} = render(
       <ResourceProvider fallback={null}>
-        <AuthBoundary>Protected Content</AuthBoundary>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
       </ResourceProvider>,
     )
 
@@ -87,7 +163,7 @@ describe('AuthBoundary', () => {
     })
     render(
       <ResourceProvider fallback={null}>
-        <AuthBoundary>Protected Content</AuthBoundary>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
       </ResourceProvider>,
     )
 
@@ -101,7 +177,7 @@ describe('AuthBoundary', () => {
     })
     render(
       <ResourceProvider fallback={null}>
-        <AuthBoundary>Protected Content</AuthBoundary>
+        <AuthBoundary projectIds={testProjectIds}>Protected Content</AuthBoundary>
       </ResourceProvider>,
     )
 
@@ -114,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

@@ -4,8 +4,10 @@ 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 {ConfigurationError} from './ConfigurationError'
 import {LoginCallback} from './LoginCallback'
 import {LoginError, type LoginErrorProps} from './LoginError'
 
@@ -25,7 +27,7 @@ if (isInIframe() && !document.querySelector('[data-sanity-core]')) {
 }
 
 /**
- * @public
+ * @internal
  */
 export interface AuthBoundaryProps {
   /**
@@ -56,11 +58,25 @@ export interface AuthBoundaryProps {
   /** 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
 }
 
 /**
@@ -113,10 +129,19 @@ interface AuthSwitchProps {
   header?: React.ReactNode
   footer?: React.ReactNode
   children?: React.ReactNode
+  verifyOrganization?: boolean
+  projectIds?: string[]
 }
 
-function AuthSwitch({CallbackComponent = LoginCallback, children, ...props}: AuthSwitchProps) {
+function AuthSwitch({
+  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()
@@ -128,6 +153,11 @@ function AuthSwitch({CallbackComponent = LoginCallback, children, ...props}: Aut
     }
   }, [isLoggedOut, loginUrl])
 
+  // Only check the error if verification is enabled
+  if (verifyOrganization && orgError) {
+    throw new ConfigurationError({message: orgError})
+  }
+
   switch (authState.type) {
     case AuthStateType.ERROR: {
       throw new AuthError(authState.error)

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/LoginError.tsx

@@ -6,6 +6,7 @@ import {type FallbackProps} from 'react-error-boundary'
 import {useAuthState} from '../../hooks/auth/useAuthState'
 import {useLogOut} from '../../hooks/auth/useLogOut'
 import {AuthError} from './AuthError'
+import {ConfigurationError} from './ConfigurationError'
 /**
  * @alpha
  */
@@ -18,7 +19,7 @@ export type LoginErrorProps = FallbackProps
  * @alpha
  */
 export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.ReactNode {
-  if (!(error instanceof AuthError)) throw error
+  if (!(error instanceof AuthError || error instanceof ConfigurationError)) throw error
   const logout = useLogOut()
   const authState = useAuthState()
 
@@ -44,12 +45,17 @@ export function LoginError({error, resetErrorBoundary}: LoginErrorProps): React.
         }
       }
     }
-  }, [authState, handleRetry])
+    if (authState.type !== AuthStateType.ERROR && error instanceof ConfigurationError) {
+      setAuthErrorMessage(error.message)
+    }
+  }, [authState, handleRetry, error])
 
   return (
     <div className="sc-login-error">
       <div className="sc-login-error__content">
-        <h2 className="sc-login-error__title">Authentication Error</h2>
+        <h2 className="sc-login-error__title">
+          {error instanceof AuthError ? 'Authentication Error' : 'Configuration Error'}
+        </h2>
         <p className="sc-login-error__description">{authErrorMessage}</p>
       </div>