@atproto/oauth-provider-ui 0.0.2

package/src/hooks/use-api.ts

@@ -0,0 +1,182 @@
+import { useLingui } from '@lingui/react/macro'
+import { useCallback, useMemo, useState } from 'react'
+import { useErrorBoundary } from 'react-error-boundary'
+import type {
+  Account,
+  ConfirmResetPasswordData,
+  InitiatePasswordResetData,
+  Session,
+  SignInData,
+  SignUpData,
+  VerifyHandleAvailabilityData,
+} from '@atproto/oauth-provider-api'
+import { AcceptData, Api, UnknownRequestUriError } from '../lib/api.ts'
+import { upsert } from '../lib/util.ts'
+import { useCsrfToken } from './use-csrf-token.ts'
+
+/**
+ * Any function wrapped with this helper will automatically show the error
+ * boundary when an `UnknownRequestUriError` is thrown. This typically happens
+ * in development, or if the user left its browser session open for a (very)
+ * long time.
+ *
+ * @note Requires an error boundary to be present in the component tree.
+ */
+function useSafeCallback<F extends (...a: any) => any>(fn: F, deps: unknown[]) {
+  const { showBoundary } = useErrorBoundary<UnknownRequestUriError>()
+
+  return useCallback(
+    async (...args: Parameters<F>): Promise<Awaited<ReturnType<F>>> => {
+      try {
+        return await fn(...args)
+      } catch (error) {
+        if (error instanceof UnknownRequestUriError) showBoundary(error)
+        throw error
+      }
+    },
+    deps.concat(showBoundary),
+  )
+}
+
+export type UseApiOptions = {
+  requestUri: string
+  sessions?: readonly Session[]
+  newSessionsRequireConsent?: boolean
+  onRedirected?: () => void
+}
+
+export function useApi({
+  requestUri,
+  sessions: sessionsInit = [],
+  newSessionsRequireConsent = true,
+  onRedirected,
+}: UseApiOptions) {
+  const csrfToken = useCsrfToken(`csrf-${requestUri}`)
+  if (!csrfToken) throw new Error('CSRF token is missing')
+
+  const api = useMemo(() => new Api(csrfToken), [csrfToken])
+  const [sessions, setSessions] = useState(sessionsInit)
+
+  const { i18n } = useLingui()
+  const { locale } = i18n
+
+  const selectSub = useCallback(
+    (sub: string | null) => {
+      setSessions((sessions) =>
+        sub === (sessions.find((s) => s.selected)?.account.sub || null)
+          ? sessions
+          : sessions.map((s) => ({ ...s, selected: s.account.sub === sub })),
+      )
+    },
+    [setSessions],
+  )
+
+  const upsertSession = useCallback(
+    ({
+      account,
+      consentRequired,
+    }: {
+      account: Account
+      consentRequired: boolean
+    }) => {
+      const session: Session = {
+        account,
+        selected: true,
+        loginRequired: false,
+        consentRequired: newSessionsRequireConsent || consentRequired,
+      }
+
+      setSessions((sessions) =>
+        upsert(sessions, session, (s) => s.account.sub === account.sub).map(
+          // Make sure to de-select any other selected session
+          (s) => (s === session || !s.selected ? s : { ...s, selected: false }),
+        ),
+      )
+    },
+    [setSessions, newSessionsRequireConsent],
+  )
+
+  const performRedirect = useCallback(
+    (url: URL) => {
+      window.location.href = String(url)
+      if (onRedirected) setTimeout(onRedirected)
+    },
+    [onRedirected],
+  )
+
+  const doSignIn = useSafeCallback(
+    async (data: Omit<SignInData, 'locale'>, signal?: AbortSignal) => {
+      const response = await api.fetch(
+        '/sign-in',
+        { ...data, locale },
+        { signal },
+      )
+      upsertSession(response)
+    },
+    [api, locale, upsertSession],
+  )
+
+  const doInitiatePasswordReset = useSafeCallback(
+    async (
+      data: Omit<InitiatePasswordResetData, 'locale'>,
+      signal?: AbortSignal,
+    ) => {
+      await api.fetch(
+        '/reset-password-request',
+        { ...data, locale },
+        { signal },
+      )
+    },
+    [api, locale],
+  )
+
+  const doConfirmResetPassword = useSafeCallback(
+    async (data: ConfirmResetPasswordData, signal?: AbortSignal) => {
+      await api.fetch('/reset-password-confirm', data, { signal })
+    },
+    [api],
+  )
+
+  const doValidateNewHandle = useSafeCallback(
+    async (data: VerifyHandleAvailabilityData, signal?: AbortSignal) => {
+      await api.fetch('/verify-handle-availability', data, { signal })
+    },
+    [api],
+  )
+
+  const doSignUp = useSafeCallback(
+    async (data: Omit<SignUpData, 'locale'>, signal?: AbortSignal) => {
+      const response = await api.fetch(
+        '/sign-up',
+        { ...data, locale },
+        { signal },
+      )
+      upsertSession(response)
+    },
+    [api, locale, upsertSession],
+  )
+
+  const doAccept = useSafeCallback(
+    async (data: AcceptData) => {
+      performRedirect(api.buildAcceptUrl(data))
+    },
+    [api, performRedirect],
+  )
+
+  const doReject = useSafeCallback(async () => {
+    performRedirect(api.buildRejectUrl())
+  }, [api, performRedirect])
+
+  return {
+    sessions,
+    selectSub,
+
+    doSignIn,
+    doInitiatePasswordReset,
+    doConfirmResetPassword,
+    doValidateNewHandle,
+    doSignUp,
+    doAccept,
+    doReject,
+  }
+}

package/src/hooks/use-async-action.ts

@@ -0,0 +1,120 @@
+import {
+  ForwardedRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+
+export type AsyncActionController = {
+  reset: () => void
+}
+
+export type UseAsyncActionOptions = {
+  ref?: ForwardedRef<AsyncActionController>
+  onLoading?: (loading: boolean) => void
+  onError?: (error: Error | undefined) => void
+}
+
+export function useAsyncAction(
+  fn: (signal: AbortSignal) => void | PromiseLike<void>,
+  { ref, onLoading, onError }: UseAsyncActionOptions = {},
+) {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | undefined>()
+
+  const doSetError = useCallback(
+    (error: Error | undefined) => {
+      setError(error)
+      onError?.(error)
+    },
+    [onError],
+  )
+
+  const doSetLoading = useCallback(
+    (loading: boolean) => {
+      setLoading(loading)
+      onLoading?.(loading)
+    },
+    [onLoading],
+  )
+
+  const controllerRef = useRef<AbortController>(null)
+
+  const resetRef = useRef<() => void>(null)
+  useEffect(() => {
+    resetRef.current = () => {
+      controllerRef.current?.abort()
+      controllerRef.current = null
+      doSetError(undefined)
+      doSetLoading(false)
+    }
+    return () => {
+      resetRef.current = null
+    }
+  }, [doSetError, doSetLoading])
+
+  useImperativeHandle(
+    ref,
+    (): AsyncActionController => ({
+      reset: () => resetRef.current?.(),
+    }),
+    [],
+  )
+
+  // Cancel pending action when unmounted
+  useEffect(() => {
+    return () => {
+      controllerRef.current?.abort()
+      controllerRef.current = null
+    }
+  }, [])
+
+  const run = useCallback(async (): Promise<void> => {
+    // Cancel previous run
+    controllerRef.current?.abort()
+
+    doSetLoading(true)
+    doSetError(undefined)
+
+    const controller = new AbortController()
+    const { signal } = controller
+
+    controllerRef.current = controller
+
+    try {
+      await fn(signal)
+    } catch (err) {
+      if (controller === controllerRef.current) {
+        doSetError(err instanceof Error ? err : new Error(String(err)))
+      } else {
+        if (!isAbortReason(signal, err)) {
+          console.warn('Async action error after abort', err)
+        }
+      }
+    } finally {
+      if (controller === controllerRef.current) {
+        controllerRef.current = null
+        doSetLoading(false)
+      }
+
+      controller.abort()
+    }
+  }, [fn, doSetLoading, doSetError])
+
+  return {
+    loading,
+    error,
+    run,
+  }
+}
+
+function isAbortReason(signal: AbortSignal, err: unknown): boolean {
+  return (
+    signal.aborted &&
+    (signal.reason === err ||
+      signal.reason === err?.['cause'] ||
+      (err instanceof DOMException && err.name === 'AbortError'))
+  )
+}

package/src/hooks/use-bound-dispatch.ts

@@ -0,0 +1,5 @@
+import { Dispatch, useCallback } from 'react'
+
+export function useBoundDispatch<A>(dispatch: Dispatch<A>, value: A) {
+  return useCallback(() => dispatch(value), [dispatch, value])
+}

package/src/hooks/use-browser-color-scheme.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+const query =
+  typeof window === 'undefined'
+    ? null
+    : window.matchMedia('(prefers-color-scheme: dark)')
+
+export function useBrowserColorScheme() {
+  const [theme, setTheme] = useState<'light' | 'dark'>(
+    query?.matches ? 'dark' : 'light',
+  )
+
+  useEffect(() => {
+    if (!query) return
+
+    const listener = () => {
+      setTheme(query.matches ? 'dark' : 'light')
+    }
+
+    query.addEventListener('change', listener)
+
+    return () => {
+      query.removeEventListener('change', listener)
+    }
+
+    // @NOTE "query" is a global constant and does not need to be part of the
+    // array bellow:
+  }, [])
+
+  return theme
+}

package/src/hooks/use-csrf-token.ts

@@ -0,0 +1,5 @@
+import { cookies } from '../cookies.ts'
+
+export function useCsrfToken(cookieName: string) {
+  return cookies[cookieName]
+}

package/src/hooks/use-random-string.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+
+export const UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+export const LOWER = UPPER.toLowerCase() as Lowercase<typeof UPPER>
+export const DIGITS = '0123456789'
+
+export const ALPHANUMERIC = `${UPPER}${LOWER}${DIGITS}` as const
+
+export type UseRandomStringOptions = BuildRandomStringOptions & {
+  prefix?: string
+  suffix?: string
+}
+
+export function useRandomString(options?: UseRandomStringOptions) {
+  const [state, setState] = useState(() => buildRandomString(options))
+  useEffect(() => {
+    setState(buildRandomString(options))
+  }, [options?.length, options?.alphabet])
+
+  return `${options?.prefix ?? ''}${state}${options?.suffix ?? ''}`
+}
+
+type BuildRandomStringOptions = {
+  length?: number
+  alphabet?: string
+}
+
+function buildRandomString({
+  length = 16,
+  alphabet = ALPHANUMERIC,
+}: BuildRandomStringOptions = {}) {
+  return Array.from({ length }, () => getRandomCharFrom(alphabet)).join('')
+}
+
+function getRandomCharFrom(alphabet: string) {
+  return alphabet.charAt((Math.random() * alphabet.length) | 0)
+}

package/src/hooks/use-stepper.ts

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export type DisabledStep = false | null | undefined
+export type Step = {
+  invalid: boolean
+}
+
+const isEnabled = <S extends Step | DisabledStep>(
+  s: S,
+): s is S extends DisabledStep ? never : S => s != null && s !== false
+const isRequired = <S extends Step | DisabledStep>(
+  s: S,
+): s is S extends DisabledStep ? never : S & { invalid: true } =>
+  isEnabled(s) && s.invalid === true
+const isCompleted = <S extends Step | DisabledStep>(
+  s: S,
+): s is S extends DisabledStep ? S : S & { invalid: false } =>
+  !isEnabled(s) || s.invalid === false
+
+export function useStepper<const S extends Step>(
+  steps: readonly (S | DisabledStep)[],
+) {
+  const firstIdx = steps.findIndex(isEnabled)
+  const lastIdx = steps.findLastIndex(isEnabled)
+  const requiredIdx = steps.findIndex(isRequired)
+
+  const [currentIdx, setCurrentIdx] = useState<number>(firstIdx)
+
+  const to = useCallback(
+    (idx: number) => {
+      if (idx !== -1 && steps[idx]) {
+        setCurrentIdx(idx)
+        return true
+      } else {
+        return false
+      }
+    },
+    [steps.map(isEnabled).join()],
+  )
+
+  const prevIdx = steps.findLastIndex((s, i) => isEnabled(s) && i < currentIdx)
+  const nextIdx = steps.findIndex((s, i) => isEnabled(s) && i > currentIdx)
+
+  const toFirst = useCallback(() => to(firstIdx), [to, firstIdx])
+  const toLast = useCallback(() => to(lastIdx), [to, lastIdx])
+  const toPrev = useCallback(() => to(prevIdx), [to, prevIdx])
+  const toNext = useCallback(() => to(nextIdx), [to, nextIdx])
+  const toRequired = useCallback(() => to(requiredIdx), [to, requiredIdx])
+
+  // Step number in user friendly terms (accounting for disabled steps)
+  const currentPosition =
+    currentIdx +
+    // use "1 indexed position" (for user friendliness):
+    1 +
+    // Adjust the position by counting the number of disabled steps before the
+    // current step (if any):
+    steps.reduce(
+      (acc, s, i) => (i >= currentIdx || isEnabled(s) ? acc : acc - 1),
+      0,
+    )
+
+  const count = steps.filter(isEnabled).length
+  const completed = steps.every(isCompleted)
+
+  const current =
+    currentIdx === -1 || !steps[currentIdx] ? undefined : steps[currentIdx]
+
+  // Fool-proof (reset current step in case the current step becomes disabled)
+  const broken = currentIdx === -1
+  useEffect(() => {
+    if (broken) toFirst()
+  }, [broken])
+
+  return {
+    current,
+    currentPosition,
+    count,
+    completed,
+    atFirst: currentPosition === 1,
+    atLast: currentPosition === count,
+    toFirst,
+    toLast,
+    toPrev,
+    toNext,
+    toRequired,
+  }
+}

package/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OAuth mock pages</title>
+  </head>
+  <body>
+    <a href="authorization-page.html">authorization-page</a>
+    <br />
+    <a href="error-page.html">error-page</a>
+  </body>
+</html>