@atproto/oauth-provider 0.3.1 → 0.5.0

package/src/assets/app/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/assets/app/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/assets/app/hooks/use-csrf-token.ts

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

package/src/assets/app/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/assets/app/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/assets/app/index.html

@@ -0,0 +1,182 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./main.css" />
+    <title>OAuth Provider</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      /*
+       * This file's purpose is to provide a way to develop the UI without
+       * running a full featured OAuth server. It mocks the server responses and
+       * provides configuration data to the UI.
+       *
+       * This file is not part of the production build.
+       *
+       * Start the development server with the following command from the
+       * oauth-provider root:
+       *
+       * ```sh
+       * pnpm run start:ui
+       * ```
+       *
+       * Then open the browser at http://localhost:5173/
+       */
+    </script>
+    <style>
+      /*
+       * PDS branding configuration (colors), in R G B format.
+       *
+       * The variables here are meant to override the default values defined in
+       * main.css. These values are typically generated by the backend and
+       * injected into the HTML. The colors suffixed with "-c" denote the
+       * "contrast" color of the corresponding color name. These are also
+       * automatically generated by the backend from the branding colors.
+       *
+       * The default colors can be seen by commenting out a color name (and
+       * corresponding "-c" contrast color) below:
+       */
+      :root {
+        --color-brand: 10 122 255;
+        --color-brand-c: 255 255 255;
+        --color-error: 244 11 66;
+        --color-error-c: 255 255 255;
+        --color-warning: 251 86 7;
+        --color-warning-c: 255 255 255;
+        --color-success: 2 195 154;
+        --color-success-c: 0 0 0;
+      }
+    </style>
+    <script type="module">
+      /*
+       * PDS branding configuration
+       */
+
+      const name = 'Bluesky'
+      const links = [
+        {
+          title: { en: 'Home' },
+          href: 'https://bsky.social/',
+          rel: 'canonical', // prevents the login page from being indexed by search engines
+        },
+        {
+          title: { en: 'Terms of Service' },
+          href: 'https://bsky.social/about/support/tos',
+          rel: 'terms-of-service',
+        },
+        {
+          title: { en: 'Privacy Policy' },
+          href: 'https://bsky.social/about/support/privacy-policy',
+          rel: 'privacy-policy',
+        },
+        {
+          title: { en: 'Support' },
+          href: 'https://blueskyweb.zendesk.com/hc/en-us',
+          rel: 'help',
+        },
+      ]
+      const logo = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 320 286"><path fill="rgb(10,122,255)" d="M69.364 19.146c36.687 27.806 76.147 84.186 90.636 114.439 14.489-30.253 53.948-86.633 90.636-114.439C277.107-.917 320-16.44 320 32.957c0 9.865-5.603 82.875-8.889 94.729-11.423 41.208-53.045 51.719-90.071 45.357 64.719 11.12 81.182 47.953 45.627 84.785-80 82.874-106.667-44.333-106.667-44.333s-26.667 127.207-106.667 44.333c-35.555-36.832-19.092-73.665 45.627-84.785-37.026 6.362-78.648-4.149-90.071-45.357C5.603 115.832 0 42.822 0 32.957 0-16.44 42.893-.917 69.364 19.147Z" /></svg>')}`
+
+      // Provide a value here to test the "sing-in only" flow
+      const loginHint = undefined // 'alice.test'
+
+      // Use empty array to disable the "sing-up" flow, use a single value to
+      // disable the domain selector.
+      const availableUserDomains = ['.bsky.social', '.bsky.team']
+
+      // Use non empty string to enable hCaptcha during "sing-up" flow
+      const hcaptchaSiteKey = undefined
+
+      /*
+       * Client branding configuration
+       */
+
+      // Use an "http://" URL to test the "an app on your device" flow
+      const clientId = 'https://example.com/client.json'
+      const clientName = 'My App'
+      const clientPolicyUri = 'https://bsky.app'
+      const clientTosUri = 'https://bsky.app'
+      const clientLogoUri = 'https://bsky.app'
+
+      // Mock data
+
+      const requestUri = 'foo-bar'
+
+      document.cookie = `csrf-${requestUri}=xyz; path=/`
+
+      window.__customizationData = {
+        availableUserDomains,
+        inviteCodeRequired: false,
+        hcaptchaSiteKey,
+        name,
+        links,
+        logo,
+      }
+
+      window.__authorizeData = {
+        clientId: clientId,
+        clientMetadata: {
+          client_id: clientId,
+          client_name: clientName,
+          policy_uri: clientPolicyUri,
+          tos_uri: clientTosUri,
+          logo_uri: clientLogoUri,
+        },
+        clientTrusted: false,
+        requestUri,
+        loginHint,
+        newSessionsRequireConsent: true,
+        sessions: [],
+        scopeDetails: [
+          { scope: 'atproto' },
+          { scope: 'transition:generic' },
+          { scope: 'transition:chat.bsky' },
+        ],
+      }
+
+      const origFetch = window.fetch
+
+      async function mockFetch(...args) {
+        const [input, init] = args
+
+        if (typeof input === 'string' && init.method === 'POST') {
+          const url = new URL(input, window.location)
+          switch (url.pathname) {
+            case '/oauth/authorize/sign-up':
+            case '/oauth/authorize/sign-in':
+              return new Response(
+                JSON.stringify({
+                  consentRequired: false,
+                  account: {
+                    sub: 'did:plc:123',
+                    name: 'Alice',
+                    email: 'alice@test.com',
+                    email_verified: false,
+                    preferred_username: 'alice.test',
+                    picture: 'https://cat.com/cat.jpg',
+                  },
+                }),
+                { status: 200 },
+              )
+            case '/oauth/authorize/verify-handle-availability':
+            case '/oauth/authorize/reset-password-request':
+            case '/oauth/authorize/reset-password-confirm':
+              return new Response(null, { status: 204 })
+          }
+        }
+
+        return origFetch.call(this, ...args)
+      }
+
+      Object.defineProperty(window, 'fetch', {
+        value: mockFetch,
+        writable: true,
+        configurable: true,
+      })
+    </script>
+    <script src="./main.tsx" type="module"></script>
+  </body>
+</html>