@atproto/oauth-provider 0.1.0 → 0.1.2-rc.0

package/src/output/customization.ts

@@ -1,22 +1,9 @@
 // Matches colors defined in tailwind.config.js
-const colorNames = ['primary', 'error'] as const
+const colorNames = ['brand', 'error', 'warning'] as const
 type ColorName = (typeof colorNames)[number]
 const isColorName = (name: string): name is ColorName =>
   (colorNames as readonly string[]).includes(name)
 
-export type FieldDefinition = {
-  label?: string
-  placeholder?: string
-  pattern?: string
-  title?: string
-}
-
-export type ExtraFieldDefinition = FieldDefinition & {
-  type: 'text' | 'password' | 'date' | 'captcha'
-  required?: boolean
-  [_: string]: unknown
-}
-
 export type Customization = {
   name?: string
   logo?: string
@@ -41,56 +28,91 @@ export function buildCustomizationData({
 }
 
 export function buildCustomizationCss(customization?: Customization) {
-  if (!customization?.colors) return ''
+  const vars = Array.from(buildCustomizationVars(customization))
+  if (vars.length) return `:root { ${vars.join(' ')} }`
+
+  return ''
+}
+
+export function* buildCustomizationVars(customization?: Customization) {
+  if (customization?.colors) {
+    for (const [name, value] of Object.entries(customization.colors)) {
+      if (!isColorName(name)) {
+        throw new TypeError(`Invalid color name: ${name}`)
+      }
+
+      // Skip undefined values
+      if (value === undefined) continue
 
-  const vars = Object.entries(customization.colors)
-    .filter((e) => isColorName(e[0]) && e[1] != null)
-    .map(([name, value]) => [name, parseColor(value)] as const)
-    .filter((e): e is [ColorName, ParsedColor] => e[1] != null)
-    // alpha not supported by tailwind (it does not work that way)
-    .map(([name, { r, g, b }]) => `--color-${name}: ${r} ${g} ${b};`)
+      const { r, g, b, a } = parseColor(value)
 
-  return `:root { ${vars.join(' ')} }`
+      // Tailwind does not apply alpha values to base colors
+      if (a !== undefined) throw new TypeError('Alpha not supported')
+
+      yield `--color-${name}: ${r} ${g} ${b};`
+    }
+  }
 }
 
-type ParsedColor = { r: number; g: number; b: number; a?: number }
-function parseColor(color: string): undefined | ParsedColor {
+type RgbaColor = { r: number; g: number; b: number; a?: number }
+function parseColor(color: unknown): RgbaColor {
+  if (typeof color !== 'string') {
+    throw new TypeError(`Invalid color value: ${typeof color}`)
+  }
+
   if (color.startsWith('#')) {
     if (color.length === 4 || color.length === 5) {
-      const [r, g, b, a] = color
-        .slice(1)
-        .split('')
-        .map((c) => parseInt(c + c, 16))
+      const r = parseUi8Hex(color.slice(1, 2))
+      const g = parseUi8Hex(color.slice(2, 3))
+      const b = parseUi8Hex(color.slice(3, 4))
+      const a = color.length > 4 ? parseUi8Hex(color.slice(4, 5)) : undefined
       return { r, g, b, a }
     }
 
     if (color.length === 7 || color.length === 9) {
-      const r = parseInt(color.slice(1, 3), 16)
-      const g = parseInt(color.slice(3, 5), 16)
-      const b = parseInt(color.slice(5, 7), 16)
-      const a = color.length > 8 ? parseInt(color.slice(7, 9), 16) : undefined
+      const r = parseUi8Hex(color.slice(1, 3))
+      const g = parseUi8Hex(color.slice(3, 5))
+      const b = parseUi8Hex(color.slice(5, 7))
+      const a = color.length > 8 ? parseUi8Hex(color.slice(7, 9)) : undefined
       return { r, g, b, a }
     }
 
-    return undefined
+    throw new TypeError(`Invalid hex color: ${color}`)
   }
 
-  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+  const rgbMatch = color.match(
+    /^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,
+  )
   if (rgbMatch) {
-    const [, r, g, b] = rgbMatch
-    return { r: parseInt(r, 10), g: parseInt(g, 10), b: parseInt(b, 10) }
+    const r = parseUi8Dec(rgbMatch[1])
+    const g = parseUi8Dec(rgbMatch[2])
+    const b = parseUi8Dec(rgbMatch[3])
+    return { r, g, b }
   }
 
-  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+)\)/)
+  const rgbaMatch = color.match(
+    /^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,
+  )
   if (rgbaMatch) {
-    const [, r, g, b, a] = rgbaMatch
-    return {
-      r: parseInt(r, 10),
-      g: parseInt(g, 10),
-      b: parseInt(b, 10),
-      a: parseInt(a, 10),
-    }
+    const r = parseUi8Dec(rgbaMatch[1])
+    const g = parseUi8Dec(rgbaMatch[2])
+    const b = parseUi8Dec(rgbaMatch[3])
+    const a = parseUi8Dec(rgbaMatch[4])
+    return { r, g, b, a }
   }
 
-  return undefined
+  throw new TypeError(`Unsupported color format: ${color}`)
+}
+
+function parseUi8Hex(v: string) {
+  return asUi8(parseInt(v, 16))
+}
+
+function parseUi8Dec(v: string) {
+  return asUi8(parseInt(v, 10))
+}
+
+function asUi8(v: number) {
+  if (v >= 0 && v <= 255 && v === (v | 0)) return v
+  throw new TypeError(`Invalid color component: ${v}`)
 }

package/src/output/output-manager.ts

@@ -0,0 +1,87 @@
+import { ServerResponse } from 'node:http'
+
+import { Asset } from '../assets/asset.js'
+import { getAsset } from '../assets/index.js'
+import { cssCode, Html, html } from '../lib/html/index.js'
+import {
+  AuthorizationResultAuthorize,
+  buildAuthorizeData,
+} from './build-authorize-data.js'
+import { buildErrorPayload, buildErrorStatus } from './build-error-payload.js'
+import {
+  buildCustomizationCss,
+  buildCustomizationData,
+  Customization,
+} from './customization.js'
+import { declareBackendData, sendWebPage } from './send-web-page.js'
+
+export class OutputManager {
+  readonly customizationScript: Html
+  readonly customizationStyle: Html
+  readonly customizationLinks?: Customization['links']
+
+  // Could technically cause an "UnhandledPromiseRejection", which might cause
+  // the process to exit. This is intentional, as it's a critical error. It
+  // should never happen in practice, as the built assets are bundled with the
+  // package.
+  readonly assetsPromise: Promise<[js: Asset, css: Asset]> = Promise.all([
+    getAsset('main.js'),
+    getAsset('main.css'),
+  ] as const)
+
+  constructor(customization?: Customization) {
+    // Note: building this here for two reasons:
+    // 1. To avoid re-building it on every request
+    // 2. To throw during init if the customization is invalid
+    this.customizationScript = declareBackendData(
+      '__customizationData',
+      buildCustomizationData(customization),
+    )
+    this.customizationStyle = cssCode(buildCustomizationCss(customization))
+    this.customizationLinks = customization?.links
+  }
+
+  async sendAuthorizePage(
+    res: ServerResponse,
+    data: AuthorizationResultAuthorize,
+  ): Promise<void> {
+    const [jsAsset, cssAsset] = await this.assetsPromise
+
+    return sendWebPage(res, {
+      scripts: [
+        declareBackendData('__authorizeData', buildAuthorizeData(data)),
+        this.customizationScript,
+        jsAsset, // Last (to be able to read the "backend data" variables)
+      ],
+      styles: [
+        cssAsset, // First (to be overridden by customization)
+        this.customizationStyle,
+      ],
+      links: this.customizationLinks,
+      htmlAttrs: { lang: 'en' },
+      title: 'Authorize',
+      body: html`<div id="root"></div>`,
+    })
+  }
+
+  async sendErrorPage(res: ServerResponse, err: unknown): Promise<void> {
+    const [jsAsset, cssAsset] = await this.assetsPromise
+
+    return sendWebPage(res, {
+      status: buildErrorStatus(err),
+      scripts: [
+        declareBackendData('__errorData', buildErrorPayload(err)),
+        this.customizationScript,
+        jsAsset, // Last (to be able to read the "backend data" variables)
+      ],
+      styles: [
+        cssAsset, // First (to be overridden by customization)
+        this.customizationStyle,
+      ],
+      links: this.customizationLinks,
+      htmlAttrs: { lang: 'en' },
+      title: 'Error',
+      body: html`<div id="root"></div>`,
+    })
+  }
+}

package/src/output/send-web-page.ts

@@ -18,11 +18,12 @@ export function declareBackendData(name: string, data: unknown) {
   return js`window[${name}]=${data};document.currentScript.remove();`
 }
 
-export function sendWebPage(
+export async function sendWebPage(
   res: ServerResponse,
   { status = 200, ...options }: BuildDocumentOptions & { status?: number },
-): void {
+): Promise<void> {
   // @TODO: make these headers configurable (?)
+  res.setHeader('Permissions-Policy', 'otp-credentials=*, document-domain=()')
   res.setHeader('Cross-Origin-Embedder-Policy', 'credentialless')
   res.setHeader('Cross-Origin-Resource-Policy', 'same-origin')
   res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
@@ -52,7 +53,7 @@ export function sendWebPage(
 
   const html = buildDocument(options)
 
-  writeHtml(res, html.toString(), status)
+  return writeHtml(res, html.toString(), status)
 }
 
 function assetToHash(asset: Html | AssetRef): string {

package/tailwind.config.js

@@ -2,10 +2,23 @@
 export default {
   content: ['src/assets/app/**/*.{js,ts,jsx,tsx}'],
   theme: {
+    fontFamily: {
+      sans: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        'Helvetica',
+        'Arial',
+        'sans-serif',
+      ],
+      mono: ['Monaco', 'mono'],
+    },
     extend: {
       colors: {
-        primary: 'rgb(var(--color-primary) / <alpha-value>)',
+        brand: 'rgb(var(--color-brand) / <alpha-value>)',
         error: 'rgb(var(--color-error) / <alpha-value>)',
+        warning: 'rgb(var(--color-warning) / <alpha-value>)',
       },
     },
   },

package/src/assets/app/components/error-card.tsx

@@ -1,41 +0,0 @@
-import { HtmlHTMLAttributes } from 'react'
-import { clsx } from '../lib/clsx'
-
-export type ErrorCardProps = {
-  message?: null | string
-  role?: 'alert' | 'status'
-}
-
-export function ErrorCard({
-  message,
-
-  role = 'alert',
-  className,
-  ...attrs
-}: Partial<ErrorCardProps> &
-  Omit<HtmlHTMLAttributes<HTMLDivElement>, keyof ErrorCardProps | 'children'>) {
-  return (
-    <div
-      {...attrs}
-      className={clsx(
-        'flex items-center rounded bg-error py-1 px-2 text-white dark:text-black shadow-md',
-        className,
-      )}
-      role={role}
-    >
-      <svg
-        className="fill-current h-4 w-4"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-      >
-        <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
-      </svg>
-
-      <div className="ml-4">
-        <p>
-          {typeof message === 'string' ? message : 'An unknown error occurred'}
-        </p>
-      </div>
-    </div>
-  )
-}

package/src/output/send-error-page.ts

@@ -1,41 +0,0 @@
-import { ServerResponse } from 'node:http'
-
-import { getAsset } from '../assets/index.js'
-import { cssCode, html } from '../lib/html/index.js'
-import { buildErrorPayload, buildErrorStatus } from './build-error-payload.js'
-import {
-  Customization,
-  buildCustomizationCss,
-  buildCustomizationData,
-} from './customization.js'
-import { declareBackendData, sendWebPage } from './send-web-page.js'
-
-export async function sendErrorPage(
-  res: ServerResponse,
-  err: unknown,
-  customization?: Customization,
-): Promise<void> {
-  const [jsAsset, cssAsset] = await Promise.all([
-    getAsset('main.js'),
-    getAsset('main.css'),
-  ])
-
-  return sendWebPage(res, {
-    status: buildErrorStatus(err),
-    scripts: [
-      declareBackendData(
-        '__customizationData',
-        buildCustomizationData(customization),
-      ),
-      declareBackendData('__errorData', buildErrorPayload(err)),
-      jsAsset, // Last (to be able to read the global variables)
-    ],
-    styles: [
-      cssAsset, // First (to be overridden by customization)
-      cssCode(buildCustomizationCss(customization)),
-    ],
-    htmlAttrs: { lang: 'en' },
-    title: 'Error',
-    body: html`<div id="root"></div>`,
-  })
-}