@sanity/sdk-react 3.4.0-rc.0 → 3.4.0

package/src/hooks/auth/useHandleOAuthCallback.tsx

@@ -1,49 +0,0 @@
-import {handleOAuthCallback} from '@sanity/sdk'
-
-import {createCallbackHook} from '../helpers/createCallbackHook'
-
-/**
- * A React hook that returns a function for handling the OAuth redirect callback.
- *
- * @remarks
- * This is the OAuth counterpart to `useHandleAuthCallback`. The returned
- * function invokes core's `handleOAuthCallback`, which validates the `state`
- * parameter, surfaces `?error=` redirects, exchanges the authorization `code`
- * for tokens, persists them, and transitions the auth state to `LOGGED_IN` —
- * all in core. On success it resolves the same-origin location the user was on
- * when the flow started (so deep links survive login), otherwise the callback
- * URL cleaned of the OAuth params (`code`, `state`, `error`,
- * `error_description`). It resolves `false` when there was nothing to handle.
- * The resolved URL may be a different route, so navigate to it rather than
- * only calling `history.replaceState`.
- *
- * `AuthBoundary` runs this for you when the app lands on the OAuth redirect
- * URI. Reach for this hook only when building a custom callback component.
- *
- * Concurrent calls are single-flight in core, so React StrictMode's double
- * invocation will not trigger a second code exchange, and a repeated call with
- * a stale callback URL is ignored once a session is established.
- *
- * @example
- * ```tsx
- * function OAuthCallback() {
- *   const handleCallback = useHandleOAuthCallback()
- *   const navigate = useNavigate() // your router's navigation
- *
- *   useEffect(() => {
- *     handleCallback(window.location.href)
- *       .then((nextUrl) => {
- *         // Returns the user to where they started, with OAuth params removed
- *         if (nextUrl) navigate(nextUrl, {replace: true})
- *       })
- *       .catch(console.error)
- *   }, [handleCallback, navigate])
- *
- *   return <div>Completing sign-in…</div>
- * }
- * ```
- *
- * @returns A callback handler that processes the OAuth redirect
- * @public
- */
-export const useHandleOAuthCallback = createCallbackHook(handleOAuthCallback)

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

@@ -1,16 +0,0 @@
-import {startOAuthAuthorization} from '@sanity/sdk'
-import {identity} from 'rxjs'
-import {describe, it} from 'vitest'
-
-import {createCallbackHook} from '../helpers/createCallbackHook'
-
-vi.mock('../helpers/createCallbackHook', () => ({createCallbackHook: vi.fn(identity)}))
-vi.mock('@sanity/sdk', () => ({startOAuthAuthorization: vi.fn()}))
-
-describe('useOAuthAuthorize', () => {
-  it('calls `createCallbackHook` with `startOAuthAuthorization`', async () => {
-    const {useOAuthAuthorize} = await import('./useOAuthAuthorize')
-    expect(createCallbackHook).toHaveBeenCalledWith(startOAuthAuthorization)
-    expect(useOAuthAuthorize).toBe(startOAuthAuthorization)
-  })
-})

package/src/hooks/auth/useOAuthAuthorize.tsx

@@ -1,28 +0,0 @@
-import {startOAuthAuthorization} from '@sanity/sdk'
-
-import {createCallbackHook} from '../helpers/createCallbackHook'
-
-/**
- * A React hook that returns a function for starting the OAuth authorization-code + PKCE flow.
- *
- * @remarks
- * The returned function invokes core's `startOAuthAuthorization`, which generates
- * the PKCE `code_verifier`, `code_challenge` and `state`, persists the verifier and
- * state to `sessionStorage`, and navigates the browser to the authorize endpoint.
- * `clientId`, `redirectUri` and `organizationId` are read from the instance's
- * `auth.oauth` config. The returned promise rejects if the instance has no `auth.oauth` config.
- *
- * Pair with {@link useHandleOAuthCallback} on the redirect URI to complete the flow.
- *
- * @example
- * ```tsx
- * function LoginButton() {
- *   const authorize = useOAuthAuthorize()
- *   return <button onClick={() => authorize().catch(console.error)}>Sign in</button>
- * }
- * ```
- *
- * @returns A function that starts the OAuth flow by navigating to the authorization URL
- * @public
- */
-export const useOAuthAuthorize = createCallbackHook(startOAuthAuthorization)

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

@@ -1,240 +0,0 @@
-import {
-  getOAuthTokensState,
-  type OAuthTokens,
-  refreshOAuthTokens,
-  revokeOAuthTokens,
-  type StateSource,
-} from '@sanity/sdk'
-import {act, renderHook} from '@testing-library/react'
-import {throwError} from 'rxjs'
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {ResourceProvider} from '../../context/ResourceProvider'
-import {useOAuthTokens} from './useOAuthTokens'
-
-vi.mock('@sanity/sdk', async (importOriginal) => {
-  const original = await importOriginal<typeof import('@sanity/sdk')>()
-  return {
-    ...original,
-    getOAuthTokensState: vi.fn(),
-    refreshOAuthTokens: vi.fn(),
-    revokeOAuthTokens: vi.fn(),
-  }
-})
-
-/**
- * A controllable stand-in for core's token state source. `set` mimics core
- * updating the store (refresh/revoke or a cross-tab `storage` event) and
- * notifies subscribers so the hook re-renders.
- */
-function createFakeTokenSource(initial: OAuthTokens | null) {
-  let current = initial
-  const listeners = new Set<() => void>()
-  const source: StateSource<OAuthTokens | null> & {set: (next: OAuthTokens | null) => void} = {
-    subscribe: (onStoreChanged?: () => void) => {
-      if (onStoreChanged) listeners.add(onStoreChanged)
-      return () => {
-        if (onStoreChanged) listeners.delete(onStoreChanged)
-      }
-    },
-    getCurrent: () => current,
-    observable: throwError(() => new Error('unexpected usage of observable')),
-    set: (next) => {
-      current = next
-      for (const listener of listeners) listener()
-    },
-  }
-  return source
-}
-
-const makeTokens = (overrides: Partial<OAuthTokens> = {}): OAuthTokens => ({
-  accessToken: 'access-token',
-  tokenType: 'bearer',
-  expiresIn: 3600,
-  expiresAt: new Date(Date.now() + 3600_000),
-  refreshToken: 'refresh-token',
-  ...overrides,
-})
-
-const wrapper = ({children}: {children: React.ReactNode}) => (
-  <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-    {children}
-  </ResourceProvider>
-)
-
-describe('useOAuthTokens', () => {
-  const mockGetState = vi.mocked(getOAuthTokensState)
-  const mockRefresh = vi.mocked(refreshOAuthTokens)
-  const mockRevoke = vi.mocked(revokeOAuthTokens)
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('returns the stored tokens with isExpired=false when expiresAt is in the future', () => {
-    const tokens = makeTokens()
-    mockGetState.mockReturnValue(createFakeTokenSource(tokens))
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-
-    expect(result.current.tokens).toEqual(tokens)
-    expect(result.current.isExpired()).toBe(false)
-  })
-
-  it('derives isExpired=true when expiresAt is in the past', () => {
-    mockGetState.mockReturnValue(
-      createFakeTokenSource(makeTokens({expiresAt: new Date(Date.now() - 1000)})),
-    )
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-
-    expect(result.current.isExpired()).toBe(true)
-  })
-
-  it('treats expiresAt exactly equal to now as expired (<= boundary)', () => {
-    vi.useFakeTimers()
-    const now = new Date('2030-01-01T00:00:00.000Z')
-    vi.setSystemTime(now)
-    mockGetState.mockReturnValue(createFakeTokenSource(makeTokens({expiresAt: new Date(now)})))
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-
-    expect(result.current.isExpired()).toBe(true)
-  })
-
-  it('re-evaluates isExpired against the clock at call time, with no re-render or token change', () => {
-    vi.useFakeTimers()
-    vi.setSystemTime(new Date('2030-01-01T00:00:00.000Z'))
-    const expiresAt = new Date(Date.now() + 10_000)
-    mockGetState.mockReturnValue(createFakeTokenSource(makeTokens({expiresAt})))
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-    const {isExpired} = result.current
-    expect(isExpired()).toBe(false)
-
-    // Advance past expiry. The same function reference must now report expired,
-    // proving the read happens at call time, not render time.
-    vi.setSystemTime(new Date(expiresAt.getTime() + 1000))
-    expect(isExpired()).toBe(true)
-  })
-
-  it('returns tokens=null and isExpired=false when there are no tokens', () => {
-    mockGetState.mockReturnValue(createFakeTokenSource(null))
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-
-    expect(result.current.tokens).toBeNull()
-    expect(result.current.isExpired()).toBe(false)
-  })
-
-  it('calls core refreshOAuthTokens and re-renders with the new tokens', async () => {
-    const source = createFakeTokenSource(makeTokens())
-    mockGetState.mockReturnValue(source)
-    const refreshed = makeTokens({accessToken: 'refreshed-token'})
-    mockRefresh.mockImplementation(() => {
-      source.set(refreshed)
-      return Promise.resolve(refreshed)
-    })
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-
-    let returned: OAuthTokens | null = null
-    await act(async () => {
-      returned = await result.current.refresh()
-    })
-
-    expect(mockRefresh).toHaveBeenCalledTimes(1)
-    expect(returned).toEqual(refreshed)
-    expect(result.current.tokens).toEqual(refreshed)
-  })
-
-  it('resolves null from refresh when core has no refresh token, and tokens become null', async () => {
-    const existing = makeTokens({refreshToken: undefined})
-    const source = createFakeTokenSource(existing)
-    mockGetState.mockReturnValue(source)
-    // Core clears stored tokens and logs out on the no-refresh-token path.
-    mockRefresh.mockImplementation(() => {
-      source.set(null)
-      return Promise.resolve(null)
-    })
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-
-    let returned: OAuthTokens | null = existing
-    await act(async () => {
-      returned = await result.current.refresh()
-    })
-
-    expect(returned).toBeNull()
-    expect(result.current.tokens).toBeNull()
-  })
-
-  it('propagates a rejected refresh and leaves tokens unchanged', async () => {
-    const existing = makeTokens()
-    mockGetState.mockReturnValue(createFakeTokenSource(existing))
-    mockRefresh.mockRejectedValue(new Error('network'))
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-
-    await act(async () => {
-      await expect(result.current.refresh()).rejects.toThrow('network')
-    })
-
-    expect(result.current.tokens).toEqual(existing)
-  })
-
-  it('propagates an unrecoverable refresh rejection after core has cleared tokens', async () => {
-    const source = createFakeTokenSource(makeTokens())
-    mockGetState.mockReturnValue(source)
-    // Core clears stored tokens and logs out before rethrowing a 4xx.
-    mockRefresh.mockImplementation(() => {
-      source.set(null)
-      return Promise.reject(new Error('invalid_grant'))
-    })
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-
-    await act(async () => {
-      await expect(result.current.refresh()).rejects.toThrow('invalid_grant')
-    })
-
-    expect(result.current.tokens).toBeNull()
-  })
-
-  it('calls core revokeOAuthTokens and re-renders with tokens=null', async () => {
-    const source = createFakeTokenSource(makeTokens())
-    mockGetState.mockReturnValue(source)
-    mockRevoke.mockImplementation(() => {
-      source.set(null)
-      return Promise.resolve()
-    })
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-
-    await act(async () => {
-      await result.current.revoke()
-    })
-
-    expect(mockRevoke).toHaveBeenCalledTimes(1)
-    expect(result.current.tokens).toBeNull()
-  })
-
-  it('re-renders when tokens change externally (e.g. another tab)', () => {
-    const source = createFakeTokenSource(null)
-    mockGetState.mockReturnValue(source)
-
-    const {result} = renderHook(() => useOAuthTokens(), {wrapper})
-    expect(result.current.tokens).toBeNull()
-
-    const otherTabTokens = makeTokens({accessToken: 'other-tab-token'})
-    act(() => {
-      source.set(otherTabTokens)
-    })
-
-    expect(result.current.tokens).toEqual(otherTabTokens)
-  })
-})

package/src/hooks/auth/useOAuthTokens.tsx

@@ -1,95 +0,0 @@
-import {
-  getOAuthTokensState,
-  type OAuthTokens,
-  refreshOAuthTokens,
-  revokeOAuthTokens,
-} from '@sanity/sdk'
-
-import {createCallbackHook} from '../helpers/createCallbackHook'
-import {createStateSourceHook} from '../helpers/createStateSourceHook'
-
-/**
- * The current OAuth token state, plus actions to refresh and revoke it.
- *
- * @public
- */
-export interface UseOAuthTokensResult {
-  /** The stored OAuth tokens, or `null` when not logged in via OAuth */
-  tokens: OAuthTokens | null
-  /**
-   * Returns whether the access token has expired, comparing `expiresAt` against
-   * the current time at the moment it is called. Reading the clock does not
-   * trigger a re-render, so call this in an event handler or effect rather than
-   * during render. Returns `false` when there are no tokens.
-   */
-  isExpired: () => boolean
-  /**
-   * Refresh via the OAuth `refresh_token` grant. When there is no refresh token,
-   * core clears the stored tokens, logs the user out, and this resolves `null`.
-   * Rejects on transient failures (network, 5xx, 408, 429), leaving tokens
-   * unchanged so the call can be retried. Also rejects when the server rejects
-   * the refresh token itself (other 4xx); core clears the tokens and logs out
-   * first, so check `tokens` before retrying.
-   */
-  refresh: () => Promise<OAuthTokens | null>
-  /** Revoke the tokens at the OAuth server, clear them locally, and log out. */
-  revoke: () => Promise<void>
-}
-
-const useOAuthTokensState = createStateSourceHook(getOAuthTokensState)
-const useRefreshOAuthTokens = createCallbackHook(refreshOAuthTokens)
-const useRevokeOAuthTokens = createCallbackHook(revokeOAuthTokens)
-
-function isOAuthTokenExpired(tokens: OAuthTokens | null): boolean {
-  return tokens ? tokens.expiresAt.getTime() <= Date.now() : false
-}
-
-/**
- * A React hook that exposes the stored OAuth token state along with `refresh`
- * and `revoke` actions.
- *
- * @remarks
- * The token view is a synchronous read over core's token state source, so the
- * hook re-renders whenever tokens change — including changes made in another
- * tab, which core propagates via `storage` events.
- *
- * @returns The current {@link UseOAuthTokensResult}
- *
- * @example
- * ```tsx
- * function TokenStatus() {
- *   const {tokens, isExpired, refresh, revoke} = useOAuthTokens()
- *
- *   if (!tokens) return <div>Not signed in</div>
- *
- *   const handleRefresh = async () => {
- *     if (!isExpired()) return
- *     try {
- *       await refresh()
- *     } catch {
- *       // Transient failure (tokens unchanged, retry later) or the refresh
- *       // token was rejected (tokens now null, user is logged out).
- *     }
- *   }
- *
- *   return (
- *     <div>
- *       <p>Expires at {tokens.expiresAt.toLocaleTimeString()}</p>
- *       <button onClick={handleRefresh}>Refresh if expired</button>
- *       <button onClick={() => revoke()}>Revoke tokens</button>
- *     </div>
- *   )
- * }
- * ```
- *
- * @public
- */
-export function useOAuthTokens(): UseOAuthTokensResult {
-  const tokens = useOAuthTokensState()
-  return {
-    tokens,
-    isExpired: () => isOAuthTokenExpired(tokens),
-    refresh: useRefreshOAuthTokens(),
-    revoke: useRevokeOAuthTokens(),
-  }
-}