@sanity/sdk-react 0.0.0-alpha.1

package/src/hooks/auth/useAuthState.test.tsx

@@ -0,0 +1,106 @@
+import {
+  type AuthState,
+  type AuthStore,
+  createSanityInstance,
+  getAuthStore,
+  type SanityInstance,
+} from '@sanity/sdk'
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {SanityProvider} from '../../components/context/SanityProvider'
+import * as context from '../context/useSanityInstance'
+import {useAuthState} from './useAuthState'
+
+// Mock dependencies
+vi.mock('@sanity/sdk')
+vi.mock('../context/useSanityInstance')
+
+const createMockAuthStore = (authState: AuthState): AuthStore => ({
+  authState: {
+    getState: () => authState,
+    getInitialState: () => authState,
+    subscribe: vi.fn(),
+  },
+  tokenState: {
+    getState: vi.fn(),
+    getInitialState: vi.fn(),
+    subscribe: vi.fn(),
+  },
+  currentUserState: {
+    getState: vi.fn(),
+    getInitialState: vi.fn(),
+    subscribe: vi.fn(),
+  },
+  handleCallback: vi.fn(),
+  logout: vi.fn(),
+  dispose: vi.fn(),
+  getLoginUrls: vi.fn(),
+})
+
+const mockUser = {
+  id: 'user-123',
+  name: 'Test User',
+  email: 'test@example.com',
+  role: 'developer',
+  roles: [{name: 'developer', title: 'Developer'}],
+}
+
+describe('useAuthState', () => {
+  const mockInstance: SanityInstance = {
+    identity: {
+      id: 'abc123store',
+      projectId: 'project-123',
+      dataset: 'dataset-123',
+    },
+    config: {},
+  }
+
+  // Setup mock for useSanityInstance
+  beforeEach(() => {
+    vi.spyOn(context, 'useSanityInstance').mockReturnValue(mockInstance)
+  })
+
+  it('should return the current auth state', () => {
+    const mockAuthStore = createMockAuthStore({
+      type: 'logged-in',
+      token: 'token-123',
+      currentUser: mockUser,
+    })
+    vi.mocked(getAuthStore).mockReturnValue(mockAuthStore)
+
+    const sanityInstance = createSanityInstance({projectId: 'test', dataset: 'test'})
+    const {result} = renderHook(() => useAuthState(), {
+      wrapper: ({children}) => (
+        <SanityProvider sanityInstance={sanityInstance}>{children}</SanityProvider>
+      ),
+    })
+    const current = result.current as Extract<AuthState, {type: 'logged-in'}>
+    expect(current.type).toBe('logged-in')
+    expect(current.token).toBe('token-123')
+    expect(current.currentUser).toBe(mockUser)
+  })
+
+  it('should handle signed out state', () => {
+    const mockAuthStore = createMockAuthStore({type: 'logged-out', isDestroyingSession: false})
+    vi.mocked(getAuthStore).mockReturnValue(mockAuthStore)
+
+    const {result} = renderHook(() => useAuthState())
+    expect(result.current.type).toBe('logged-out')
+  })
+
+  it('should subscribe to auth state changes', () => {
+    const subscribe = vi.fn()
+    const mockAuthStore = createMockAuthStore({
+      type: 'logged-in',
+      token: 'token-123',
+      currentUser: null,
+    })
+    mockAuthStore.authState.subscribe = subscribe
+
+    vi.mocked(getAuthStore).mockReturnValue(mockAuthStore)
+
+    renderHook(() => useAuthState())
+    expect(subscribe).toHaveBeenCalled()
+  })
+})

package/src/hooks/auth/useAuthState.tsx

@@ -0,0 +1,33 @@
+import {type AuthState, getAuthStore} from '@sanity/sdk'
+import {useStore} from 'zustand/react'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * A React hook that subscribes to authentication state changes.
+ *
+ * This hook provides access to the current authentication state type from the Sanity auth store.
+ * It automatically re-renders the component when the authentication state changes.
+ *
+ * @remarks
+ * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes
+ * and ensure consistency between server and client rendering.
+ *
+ * @returns The current authentication state type
+ *
+ * @example
+ * ```tsx
+ * function AuthStatus() {
+ *   const authState = useAuthState()
+ *   return <div>Current auth state: {authState}</div>
+ * }
+ * ```
+ *
+ * @public
+ */
+export function useAuthState(): AuthState {
+  const instance = useSanityInstance()
+  const {authState} = getAuthStore(instance)
+
+  return useStore(authState)
+}

package/src/hooks/auth/useAuthToken.test.tsx

@@ -0,0 +1,94 @@
+import {type AuthStore, getAuthStore, type SanityInstance} from '@sanity/sdk'
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+import {useAuthToken} from './useAuthToken'
+
+// Mock dependencies
+vi.mock('@sanity/sdk', () => ({
+  getAuthStore: vi.fn(),
+}))
+
+vi.mock('../context/useSanityInstance', () => ({
+  useSanityInstance: vi.fn(),
+}))
+
+describe('useAuthToken', () => {
+  // Helper function to create mock instance
+  const createMockInstance = (): SanityInstance => ({
+    identity: {
+      id: 'abc123',
+      projectId: 'test-project-id',
+      dataset: 'test-dataset',
+    },
+    config: {},
+  })
+
+  // Helper function to create mock auth store
+  const createMockAuthStore = (token: string | null) => {
+    const authType = token ? 'logged-in' : 'logged-out'
+    return {
+      tokenState: {
+        getInitialState: () => token,
+        getState: () => token,
+        subscribe: vi.fn(),
+      },
+      authState: {
+        getInitialState: () => ({
+          type: authType,
+          isDestroyingSession: false,
+          ...(token && {token, currentUser: null}),
+        }),
+        getState: () => ({
+          type: authType,
+          isDestroyingSession: false,
+          ...(token && {token, currentUser: null}),
+        }),
+        subscribe: vi.fn(),
+      },
+      currentUserState: {
+        getInitialState: () => null,
+        getState: () => null,
+        subscribe: vi.fn(),
+      },
+      handleCallback: vi.fn(),
+      logout: vi.fn(),
+      dispose: vi.fn(),
+      getLoginUrls: vi.fn(),
+    } as unknown as AuthStore
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should return null when no token is present', () => {
+    const mockInstance = createMockInstance()
+    const mockAuthStore = createMockAuthStore(null)
+
+    vi.mocked(useSanityInstance).mockReturnValue(mockInstance)
+    vi.mocked(getAuthStore).mockReturnValue(mockAuthStore)
+
+    const {result} = renderHook(() => useAuthToken())
+
+    expect(result.current).toBeNull()
+    expect(useSanityInstance).toHaveBeenCalled()
+    expect(getAuthStore).toHaveBeenCalledWith(mockInstance)
+  })
+
+  it('should return token when authenticated', () => {
+    const mockInstance = createMockInstance()
+    const mockToken = 'test-auth-token'
+    const mockAuthStore = createMockAuthStore(mockToken)
+
+    vi.mocked(useSanityInstance).mockReturnValue(mockInstance)
+    vi.mocked(getAuthStore).mockReturnValue(mockAuthStore)
+
+    const {result} = renderHook(() => useAuthToken())
+
+    expect(result.current).toBe(mockToken)
+    expect(useSanityInstance).toHaveBeenCalled()
+    expect(getAuthStore).toHaveBeenCalledWith(mockInstance)
+  })
+})

package/src/hooks/auth/useAuthToken.tsx

@@ -0,0 +1,16 @@
+import {getAuthStore} from '@sanity/sdk'
+import {useStore} from 'zustand'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * Hook to get the currently logged in user
+ * @public
+ * @returns The current user or null if not authenticated
+ */
+export const useAuthToken = (): string | null => {
+  const instance = useSanityInstance()
+  const {tokenState} = getAuthStore(instance)
+
+  return useStore(tokenState)
+}

package/src/hooks/auth/useCurrentUser.test.tsx

@@ -0,0 +1,50 @@
+import {type AuthStore, type CurrentUser, getAuthStore, type SanityInstance} from '@sanity/sdk'
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+import {useCurrentUser} from './useCurrentUser'
+
+// Mock dependencies
+vi.mock('../context/useSanityInstance')
+vi.mock('@sanity/sdk')
+
+const mockUser: CurrentUser = {
+  id: 'user-123',
+  name: 'Test User',
+  email: 'test@example.com',
+  role: 'admin',
+  roles: [],
+}
+
+describe('useCurrentUser', () => {
+  it('returns the current user when authenticated', () => {
+    vi.mocked(useSanityInstance).mockReturnValue({} as unknown as SanityInstance)
+
+    // Mock the auth store with an authenticated user
+    vi.mocked(getAuthStore).mockReturnValue({
+      currentUserState: {
+        getState: () => mockUser,
+        subscribe: vi.fn(),
+      },
+    } as unknown as AuthStore)
+
+    const {result} = renderHook(() => useCurrentUser())
+    expect(result.current).toEqual(mockUser)
+  })
+
+  it('returns null when not authenticated', () => {
+    vi.mocked(useSanityInstance).mockReturnValue({} as unknown as SanityInstance)
+
+    // Mock the auth store with no user
+    vi.mocked(getAuthStore).mockReturnValue({
+      currentUserState: {
+        getState: () => null,
+        subscribe: vi.fn(),
+      },
+    } as unknown as AuthStore)
+
+    const {result} = renderHook(() => useCurrentUser())
+    expect(result.current).toBeNull()
+  })
+})

package/src/hooks/auth/useCurrentUser.tsx

@@ -0,0 +1,27 @@
+import {type CurrentUser, type CurrentUserSlice, getAuthStore} from '@sanity/sdk'
+import {useStore} from 'zustand'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * Hook to get the currently logged in user
+ * @public
+ * @returns The current user or null if not authenticated
+ */
+export const useCurrentUser = (): CurrentUser | null => {
+  const instance = useSanityInstance()
+  const {currentUserState} = getAuthStore(instance)
+
+  // TODO: update this hook so it can never return null
+  if (!currentUserState.getState())
+    throw new Promise<void>((resolve) => {
+      const unsubscribe = currentUserState.subscribe((currentUser) => {
+        if (currentUser) {
+          unsubscribe()
+          resolve()
+        }
+      })
+    })
+
+  return useStore<CurrentUserSlice>(currentUserState)
+}

package/src/hooks/auth/useHandleCallback.test.tsx

@@ -0,0 +1,25 @@
+import {getAuthStore} from '@sanity/sdk'
+import {renderHook} from '@testing-library/react'
+import {type Mock, vi} from 'vitest'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+import {useHandleCallback} from './useHandleCallback'
+
+vi.mock('../context/useSanityInstance')
+vi.mock('@sanity/sdk', () => ({getAuthStore: vi.fn()}))
+
+describe('useHandleCallback', () => {
+  it('returns handleCallback from auth store', () => {
+    const mockInstance = {id: 'test'}
+    const mockHandleCallback = vi.fn()
+    const mockAuthStore = {handleCallback: mockHandleCallback}
+
+    ;(useSanityInstance as Mock).mockReturnValue(mockInstance)
+    ;(getAuthStore as Mock).mockReturnValue(mockAuthStore)
+
+    const {result} = renderHook(() => useHandleCallback())
+
+    expect(getAuthStore).toHaveBeenCalledWith(mockInstance)
+    expect(result.current).toBe(mockHandleCallback)
+  })
+})

package/src/hooks/auth/useHandleCallback.tsx

@@ -0,0 +1,50 @@
+import {type AuthStore, getAuthStore} from '@sanity/sdk'
+import {useMemo} from 'react'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * A React hook that returns a function for handling authentication callbacks.
+ *
+ * @remarks
+ * This hook provides access to the authentication store's callback handler,
+ * which processes auth redirects by extracting the session ID and fetching the
+ * authentication token. If fetching the long-lived token is successful,
+ * `handleCallback` will return a Promise that resolves a new location that
+ * removes the short-lived token from the URL. Use this in combination with
+ * `history.replaceState` or your own router's `replace` function to update the
+ * current location without triggering a reload.
+ *
+ * @example
+ * ```tsx
+ * function AuthCallback() {
+ *   const handleCallback = useHandleCallback()
+ *   const router = useRouter() // Example router
+ *
+ *   useEffect(() => {
+ *     async function processCallback() {
+ *       // Handle the callback and get the cleaned URL
+ *       const newUrl = await handleCallback(window.location.href)
+ *
+ *       if (newUrl) {
+ *         // Replace URL without triggering navigation
+ *         router.replace(newUrl, {shallow: true})
+ *       }
+ *     }
+ *
+ *     processCallback().catch(console.error)
+ *   }, [handleCallback, router])
+ *
+ *   return <div>Completing login...</div>
+ * }
+ * ```
+ *
+ * @returns A callback handler function that processes OAuth redirects
+ * @public
+ */
+export function useHandleCallback(): AuthStore['handleCallback'] {
+  const instance = useSanityInstance()
+  const authStore = useMemo(() => getAuthStore(instance), [instance])
+
+  return authStore.handleCallback
+}

package/src/hooks/auth/useLogOut.test.tsx

@@ -0,0 +1,67 @@
+import {type AuthStore, getAuthStore, type SanityInstance} from '@sanity/sdk'
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+import {useLogOut} from './useLogOut'
+
+// Mock dependencies
+vi.mock('@sanity/sdk', () => ({
+  getAuthStore: vi.fn(),
+}))
+
+vi.mock('../context/useSanityInstance', () => ({
+  useSanityInstance: vi.fn(),
+}))
+
+describe('useLogOut', () => {
+  it('should return logout function from auth store', () => {
+    // Setup mocks
+    const mockInstance: SanityInstance = {
+      identity: {
+        id: 'abc123',
+        projectId: 'test-project-id',
+        dataset: 'test-dataset',
+      },
+      config: {},
+    }
+
+    const mockLogout = vi.fn()
+    const mockAuthStore: AuthStore = {
+      authState: {
+        getInitialState: vi.fn(),
+        getState: vi.fn(),
+        subscribe: vi.fn(),
+      },
+      tokenState: {
+        getInitialState: vi.fn(),
+        getState: vi.fn(),
+        subscribe: vi.fn(),
+      },
+      currentUserState: {
+        getInitialState: vi.fn(),
+        getState: vi.fn(),
+        subscribe: vi.fn(),
+      },
+      handleCallback: vi.fn(),
+      logout: mockLogout,
+      dispose: vi.fn(),
+      getLoginUrls: vi.fn(),
+    }
+
+    vi.mocked(useSanityInstance).mockReturnValue(mockInstance)
+    vi.mocked(getAuthStore).mockReturnValue(mockAuthStore)
+
+    // Test the hook
+    const {result} = renderHook(() => useLogOut())
+
+    // Verify the returned function is the logout function
+    expect(result.current).toBe(mockLogout)
+    expect(useSanityInstance).toHaveBeenCalled()
+    expect(getAuthStore).toHaveBeenCalledWith(mockInstance)
+
+    // Verify the logout function can be called
+    result.current()
+    expect(mockLogout).toHaveBeenCalled()
+  })
+})

package/src/hooks/auth/useLogOut.tsx

@@ -0,0 +1,15 @@
+import {type AuthStore, getAuthStore} from '@sanity/sdk'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * Hook to log out of the current session
+ * @public
+ * @returns A function to log out of the current session
+ */
+export const useLogOut = (): AuthStore['logout'] => {
+  const instance = useSanityInstance()
+  const {logout} = getAuthStore(instance)
+
+  return logout
+}

package/src/hooks/auth/useLoginUrls.test.tsx

@@ -0,0 +1,61 @@
+import {type AuthStore, createSanityInstance, getAuthStore} from '@sanity/sdk'
+import {renderHook, waitFor} from '@testing-library/react'
+import {Suspense} from 'react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {SanityProvider} from '../../components/context/SanityProvider'
+import {useLoginUrls} from './useLoginUrls'
+
+vi.mock(import('@sanity/sdk'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    getAuthStore: vi.fn(),
+  }
+})
+
+describe('useLoginUrls', () => {
+  it('should handle synchronous provider URLs', () => {
+    const mockProviders = [{name: 'google', title: 'Google', url: 'http://test.com/auth/google'}]
+    const mockAuthStore = {
+      getLoginUrls: () => mockProviders,
+    }
+    vi.mocked(getAuthStore).mockReturnValue(mockAuthStore as AuthStore)
+
+    const sanityInstance = createSanityInstance({projectId: 'test', dataset: 'test'})
+    const wrapper = ({children}: {children: React.ReactNode}) => (
+      <SanityProvider sanityInstance={sanityInstance}>{children}</SanityProvider>
+    )
+
+    const {result} = renderHook(() => useLoginUrls(), {wrapper})
+    expect(result.current).toEqual(mockProviders)
+  })
+
+  it('should handle asynchronous provider URLs', async () => {
+    const mockProviders = [{name: 'google', title: 'Google', url: 'http://test.com/auth/google'}]
+
+    const getLoginUrls = vi
+      .fn<AuthStore['getLoginUrls']>()
+      .mockResolvedValueOnce(mockProviders)
+      .mockReturnValueOnce(mockProviders)
+
+    vi.mocked(getAuthStore).mockReturnValue({getLoginUrls} as unknown as AuthStore)
+
+    const sanityInstance = createSanityInstance({projectId: 'test', dataset: 'test'})
+    const wrapper = ({children}: {children: React.ReactNode}) => (
+      <Suspense fallback={<>Loading…</>}>
+        <SanityProvider sanityInstance={sanityInstance}>{children}</SanityProvider>
+      </Suspense>
+    )
+
+    const {result} = renderHook(() => useLoginUrls(), {wrapper})
+
+    // Initially empty
+    expect(result.current).toEqual(null)
+
+    // Wait for providers to load
+    await waitFor(() => {
+      expect(result.current).toEqual(mockProviders)
+    })
+  })
+})

package/src/hooks/auth/useLoginUrls.tsx

@@ -0,0 +1,51 @@
+import {type AuthProvider, getAuthStore} from '@sanity/sdk'
+import {useMemo} from 'react'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * A React hook that retrieves the available authentication provider URLs for login.
+ *
+ * @remarks
+ * This hook fetches the login URLs from the Sanity auth store when the component mounts.
+ * Each provider object contains information about an authentication method, including its URL.
+ * The hook will suspend if the login URLs have not yet loaded.
+ *
+ * @example
+ * ```tsx
+ * // LoginProviders component that uses the hook
+ * function LoginProviders() {
+ *   const providers = useLoginUrls()
+ *
+ *   return (
+ *     <div>
+ *       {providers.map((provider) => (
+ *         <a key={provider.name} href={provider.url}>
+ *           Login with {provider.title}
+ *         </a>
+ *       ))}
+ *     </div>
+ *   )
+ * }
+ *
+ * // Parent component with Suspense boundary
+ * function LoginPage() {
+ *   return (
+ *     <Suspense fallback={<div>Loading authentication providers...</div>}>
+ *       <LoginProviders />
+ *     </Suspense>
+ *   )
+ * }
+ * ```
+ *
+ * @returns An array of {@link AuthProvider} objects containing login URLs and provider information
+ * @public
+ */
+export function useLoginUrls(): AuthProvider[] {
+  const instance = useSanityInstance()
+  const authStore = useMemo(() => getAuthStore(instance), [instance])
+  const result = authStore.getLoginUrls()
+
+  if (Array.isArray(result)) return result
+  throw result
+}