@atproto/oauth-provider-ui 0.0.2

package/lib/index.ts

@@ -0,0 +1,72 @@
+// This file allows exposing the result of the build of the `../src` folder as
+// assets that can be used from a backend service. Specifically, the assets map
+// bellow exposes both the asset items from their manifest, as well as a method
+// to get the stream data (as a Readable stream) of the asset.
+
+// When this library is used as a NodeJS dependency (typically from
+// node_modules), the assets will simply read on disk from the node_modules
+// directory. However, if this file is bundled (e.g. via rollup), the assets
+// need to be copied to the bundler's output directory for the code bellow to
+// work. Most bundlers support this (webpack, rollup, etc.) by re-writing `new
+// URL('./path', import.meta.url)` calls to point to the correct output
+// directory.
+
+// However, that syntax only works in ESM modules. Atproto uses CJS modules, so,
+// at the moment, the logic bellow is **not** compatible with bundlers. To allow
+// bundling this file as a CJS module, the code bellow should not be dependent
+// on reading the files on disk. This can be done by modifying the build system
+// to embed the asset bytes directly into the bundle-manifest.json (see the
+// `data` option of "@atproto-labs/rollup-plugin-bundle-manifest" in
+// rollup.config.js).
+
+// https://github.com/evanw/esbuild/issues/795
+// https://www.npmjs.com/package/@web/rollup-plugin-import-meta-assets
+
+// Note that the bundle-manifest -- being a JSON file -- can be imported
+// directly without any special handling. This is because both bundlers and
+// NodeJS, support JSON imports out of the box.
+
+import { createReadStream } from 'node:fs'
+import { join } from 'node:path'
+import { Readable } from 'node:stream'
+import type { ManifestItem } from '@atproto-labs/rollup-plugin-bundle-manifest'
+// @ts-expect-error: This file is generated at build time
+// eslint-disable-next-line import/no-unresolved
+import bundleManifest from '../assets/bundle-manifest.json'
+
+// @NOTE Not relying on ManifestItem to describe this type to avoid dependency
+// of built code on '@atproto-labs/rollup-plugin-bundle-manifest'.
+export type Asset =
+  | {
+      type: 'asset'
+      mime?: string
+      sha256: string
+      stream: () => Readable
+    }
+  | {
+      type: 'chunk'
+      mime: string
+      sha256: string
+      dynamicImports: string[]
+      isDynamicEntry: boolean
+      isEntry: boolean
+      isImplicitEntry: boolean
+      name: string
+      stream: () => Readable
+    }
+
+export const assets = new Map<string, Asset>(
+  Object.entries<ManifestItem>(bundleManifest).map(
+    ([filename, { data, ...item }]) => {
+      const buffer = data ? Buffer.from(data, 'base64') : null
+      const stream = buffer
+        ? () => Readable.from(buffer)
+        : () =>
+            // ESM version:
+            // createReadStream(new URL(`../assets/${filename}`, import.meta.url))
+            // CJS version:
+            createReadStream(join(__dirname, '..', 'assets', filename))
+      return [filename, { ...item, stream }]
+    },
+  ),
+)

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@atproto/oauth-provider-ui",
+  "version": "0.0.2",
+  "license": "MIT",
+  "description": "Sign-in & Sign-up UI for the @atproto/oauth-provider",
+  "homepage": "https://atproto.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bluesky-social/atproto",
+    "directory": "packages/oauth/oauth-provider-ui"
+  },
+  "type": "commonjs",
+  "main": "dist/lib/index.js",
+  "types": "dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.ts",
+      "default": "./dist/lib/index.js"
+    }
+  },
+  "engines": {
+    "node": ">=18.7.0"
+  },
+  "devDependencies": {
+    "@hcaptcha/react-hcaptcha": "^1.11.2",
+    "@lingui/cli": "^5.2.0",
+    "@lingui/core": "^5.2.0",
+    "@lingui/react": "^5.2.0",
+    "@lingui/swc-plugin": "^5.4.0",
+    "@lingui/vite-plugin": "^5.2.0",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-dynamic-import-vars": "^2.1.5",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-swc": "^0.4.0",
+    "@swc/core": "^1.10.18",
+    "@swc/helpers": "^0.5.15",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "@web/rollup-plugin-import-meta-assets": "^2.2.1",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.38",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
+    "rollup": "^4.13.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.6.3",
+    "vite": "^6.2.0",
+    "@atproto-labs/fetch": "0.2.2",
+    "@atproto-labs/rollup-plugin-bundle-manifest": "0.1.2",
+    "@atproto/oauth-provider-api": "0.0.1",
+    "@atproto/oauth-types": "0.2.4"
+  },
+  "postcss": {
+    "plugins": {
+      "tailwindcss": {},
+      "autoprefixer": {}
+    }
+  },
+  "scripts": {
+    "po:extract": "lingui extract --clean",
+    "po:compile": "lingui compile --typescript",
+    "prebuild:frontend": "pnpm run po:compile",
+    "build:frontend": "rollup --config rollup.config.js",
+    "build:backend": "tsc --build tsconfig.backend.json",
+    "dev:ui": "vite",
+    "dev:frontend": "rollup --config rollup.config.js --watch",
+    "dev:catalogs": "pnpm run po:extract --debounce 250 --watch > /dev/null",
+    "dev:messages": "pnpm run po:compile --debounce 500 --watch"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,102 @@
+/* eslint-env node */
+
+const { default: commonjs } = require('@rollup/plugin-commonjs')
+const {
+  default: dynamicImportVars,
+} = require('@rollup/plugin-dynamic-import-vars')
+const { default: nodeResolve } = require('@rollup/plugin-node-resolve')
+const { default: swc } = require('@rollup/plugin-swc')
+const {
+  default: manifest,
+} = require('@atproto-labs/rollup-plugin-bundle-manifest')
+const postcss = ((m) => m.default || m)(require('rollup-plugin-postcss'))
+
+/**
+ * @type {import('rollup').RollupOptionsFunction}
+ */
+module.exports = (commandLineArguments) => {
+  const NODE_ENV =
+    process.env['NODE_ENV'] ??
+    (commandLineArguments.watch ? 'development' : 'production')
+
+  const devMode = NODE_ENV === 'development'
+
+  return {
+    input: [`src/authorization-page.tsx`, `src/error-page.tsx`],
+    output: {
+      manualChunks: undefined,
+      sourcemap: true,
+      dir: 'dist/assets',
+      format: 'module',
+      entryFileNames: devMode ? '[name]-[hash].js' : '[hash].js',
+    },
+    plugins: [
+      {
+        name: 'resolve-swc-helpers',
+        resolveId(src) {
+          // For some reason, "nodeResolve" doesn't resolve these:
+          if (src.startsWith('@swc/helpers/')) return require.resolve(src)
+        },
+      },
+      nodeResolve({
+        preferBuiltins: false,
+        browser: true,
+        exportConditions: ['browser', 'module', 'import', 'default'],
+      }),
+      commonjs(),
+      postcss({ config: true, extract: true, minimize: !devMode }),
+      swc({
+        swc: {
+          swcrc: false,
+          configFile: false,
+          sourceMaps: true,
+          minify: !devMode,
+          jsc: {
+            experimental: {
+              // @NOTE Because of the experimental nature of SWC plugins, A
+              // very particular version of @swc/core needs to be used. The
+              // link below allows to determine with version of @swc/core is
+              // compatible based on the version of @lingui/swc-plugin used
+              // (click on the swc_core version in the right column to see
+              // which version of the @swc/core is compatible)
+              //
+              // https://github.com/lingui/swc-plugin?tab=readme-ov-file#compatibility
+              plugins: [['@lingui/swc-plugin', {}]],
+            },
+            minify: {
+              compress: true,
+              mangle: true,
+            },
+            externalHelpers: true,
+            target: 'es2020',
+            parser: { syntax: 'typescript', tsx: true },
+            transform: {
+              useDefineForClassFields: true,
+              react: { runtime: 'automatic' },
+              optimizer: {
+                simplify: true,
+                globals: {
+                  vars: {
+                    'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
+                  },
+                },
+              },
+            },
+          },
+        },
+      }),
+      dynamicImportVars({ errorWhenNoFilesFound: true }),
+
+      // Change `data` to `true` to include assets data in the manifest,
+      // allowing for easier bundling of the backend code (eg. using esbuild) as
+      // bundlers know how to bundle JSON files but not how to bundle assets
+      // referenced at runtime.
+      manifest({ data: false }),
+    ],
+    onwarn(warning, warn) {
+      // 'use client' directives are fine
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') return
+      warn(warning)
+    },
+  }
+}

package/src/authorization-page.html

@@ -0,0 +1,183 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mock - 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.__availableLocales = ['en', 'fr']
+
+      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="./authorization-page.tsx" type="module"></script>
+  </body>
+</html>

package/src/authorization-page.tsx

@@ -0,0 +1,55 @@
+import './styles.css'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ErrorBoundary } from 'react-error-boundary'
+import type {
+  AuthorizeData,
+  AvailableLocales,
+  CustomizationData,
+} from '@atproto/oauth-provider-api'
+import { readBackendData } from './lib/backend-data.ts'
+import { LocaleProvider } from './locales/locale-provider.tsx'
+import { AuthorizeView } from './views/authorize/authorize-view.tsx'
+import { ErrorView } from './views/error/error-view.tsx'
+
+export const availableLocales =
+  readBackendData<AvailableLocales>('__availableLocales')
+export const customizationData = readBackendData<CustomizationData>(
+  '__customizationData',
+)
+export const authorizeData = readBackendData<AuthorizeData>('__authorizeData')
+
+if (authorizeData) {
+  // When the user is logging in, make sure the page URL contains the
+  // "request_uri" in case the user refreshes the page.
+  const url = new URL(window.location.href)
+  if (
+    url.pathname === '/oauth/authorize' &&
+    !url.searchParams.has('request_uri')
+  ) {
+    url.search = ''
+    url.searchParams.set('client_id', authorizeData.clientId)
+    url.searchParams.set('request_uri', authorizeData.requestUri)
+    window.history.replaceState(history.state, '', url.pathname + url.search)
+  }
+}
+
+const container = document.getElementById('root')!
+
+createRoot(container).render(
+  <StrictMode>
+    <LocaleProvider availableLocales={availableLocales}>
+      <ErrorBoundary
+        fallbackRender={({ error }) => (
+          <ErrorView error={error} customizationData={customizationData} />
+        )}
+      >
+        <AuthorizeView
+          customizationData={customizationData}
+          authorizeData={authorizeData}
+        />
+      </ErrorBoundary>
+    </LocaleProvider>
+  </StrictMode>,
+)

package/src/backend-data.ts

@@ -0,0 +1,35 @@
+import type {
+  AuthorizeData,
+  AvailableLocales,
+  CustomizationData,
+  ErrorData,
+} from '@atproto/oauth-provider-api'
+
+function readBackendData<T>(key: string, required: true): T
+function readBackendData<T>(key: string, requires?: false): T | undefined
+function readBackendData<T>(key: string, required = false): T | undefined {
+  const value = window[key] as T | undefined
+  delete window[key] // Prevent accidental usage / potential leaks to dependencies
+  if (required && value === undefined) {
+    throw new TypeError(`Backend data "${key}" is missing`)
+  }
+  return value
+}
+
+// These values are injected by the backend when it builds the
+// page HTML. See "declareBackendData()" in the backend.
+
+/** @deprecated Do not import directly. Only import this from main.tsx */
+export const availableLocales = readBackendData<AvailableLocales>(
+  '__availableLocales',
+  true,
+)
+/** @deprecated Do not import directly. Only import this from main.tsx */
+export const customizationData = readBackendData<CustomizationData>(
+  '__customizationData',
+  true,
+)
+/** @deprecated Do not import directly. Only import this from main.tsx */
+export const errorData = readBackendData<ErrorData>('__errorData')
+/** @deprecated Do not import directly. Only import this from main.tsx */
+export const authorizeData = readBackendData<AuthorizeData>('__authorizeData')

package/src/components/forms/button-toggle-visibility.tsx

@@ -0,0 +1,43 @@
+import { useLingui } from '@lingui/react/macro'
+import { Override } from '../../lib/util.ts'
+import { EyeIcon, EyeSlashIcon } from '../utils/icons.tsx'
+import { Button, ButtonProps } from './button.tsx'
+
+export type ButtonToggleVisibilityProps = Override<
+  Omit<ButtonProps, 'aria-label' | 'square'>,
+  {
+    visible: boolean
+    toggleVisible: () => void
+  }
+>
+
+/**
+ * Generic button to toggle visibility of an item (e.g. password).
+ */
+export function ButtonToggleVisibility({
+  visible,
+  toggleVisible,
+
+  // button
+  onClick,
+  ...props
+}: ButtonToggleVisibilityProps) {
+  const { t } = useLingui()
+  return (
+    <Button
+      {...props}
+      square
+      onClick={(event) => {
+        onClick?.(event)
+        if (!event.defaultPrevented) toggleVisible()
+      }}
+      aria-label={visible ? t`Hide` : t`Make visible`}
+    >
+      {visible ? (
+        <EyeIcon className="w-5" aria-hidden />
+      ) : (
+        <EyeSlashIcon className="w-5" aria-hidden />
+      )}
+    </Button>
+  )
+}

package/src/components/forms/button.tsx

@@ -0,0 +1,60 @@
+import { JSX } from 'react'
+import { clsx } from '../../lib/clsx.ts'
+import { Override } from '../../lib/util.ts'
+
+export type ButtonProps = Override<
+  JSX.IntrinsicElements['button'],
+  {
+    color?: 'brand' | 'grey'
+    loading?: boolean
+    transparent?: boolean
+    square?: boolean
+  }
+>
+
+export function Button({
+  color = 'grey',
+  transparent = false,
+  loading = undefined,
+  square = false,
+
+  // button
+  children,
+  className,
+  type = 'button',
+  role = 'Button',
+  disabled = false,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      role={role}
+      type={type}
+      disabled={disabled || loading === true}
+      {...props}
+      className={clsx(
+        'rounded-lg truncate cursor-pointer touch-manipulation tracking-wide overflow-hidden',
+        square ? 'p-2' : 'py-2 px-6',
+        color === 'brand'
+          ? clsx(
+              'accent-slate-100',
+              transparent
+                ? 'bg-transparent text-brand'
+                : 'bg-brand text-brand-c',
+            )
+          : color === 'grey'
+            ? clsx(
+                'accent-brand',
+                'text-slate-600 dark:text-slate-300',
+                'hover:bg-gray-200 dark:hover:bg-gray-700',
+                transparent ? 'bg-transparent' : 'bg-gray-100 dark:bg-gray-800',
+              )
+            : undefined,
+        'disabled:opacity-50',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}

package/src/components/forms/fieldset.tsx

@@ -0,0 +1,55 @@
+import { JSX, ReactNode, createContext, useMemo } from 'react'
+import { useRandomString } from '../../hooks/use-random-string.ts'
+import { Override } from '../../lib/util.ts'
+
+export type FieldsetContextValue = {
+  disabled: boolean
+  labelId?: string
+}
+
+export const FieldsetContext = createContext<FieldsetContextValue>({
+  disabled: false,
+})
+FieldsetContext.displayName = 'FieldsetContext'
+
+export type FieldsetCardProps = Override<
+  Omit<JSX.IntrinsicElements['fieldset'], 'aria-labelledby'>,
+  {
+    label?: ReactNode
+  }
+>
+
+export function Fieldset({
+  label,
+  children,
+  disabled,
+  ...props
+}: FieldsetCardProps) {
+  const labelId = useRandomString({ prefix: 'fieldset-' })
+
+  const contextValue = useMemo(
+    () => ({
+      disabled: disabled ?? false,
+      labelId: label ? labelId : undefined,
+    }),
+    [disabled, label, labelId],
+  )
+
+  return (
+    <fieldset {...props} aria-labelledby={labelId} disabled={disabled}>
+      {label && (
+        <legend
+          id={labelId}
+          key="title"
+          className="mb-1 text-slate-600 dark:text-slate-400 text-sm font-medium"
+        >
+          {label}
+        </legend>
+      )}
+
+      <div className="flex flex-col space-y-4">
+        <FieldsetContext value={contextValue}>{children}</FieldsetContext>
+      </div>
+    </fieldset>
+  )
+}