@atproto/oauth-provider-ui 0.0.2

package/src/components/utils/help-card.tsx

@@ -0,0 +1,46 @@
+import { Trans } from '@lingui/react/macro'
+import { JSX } from 'react'
+import type { LinkDefinition } from '@atproto/oauth-provider-api'
+import { clsx } from '../../lib/clsx.ts'
+import { Override } from '../../lib/util.ts'
+
+export type HelpCardProps = Override<
+  Omit<JSX.IntrinsicElements['p'], 'children'>,
+  {
+    links?: readonly LinkDefinition[]
+  }
+>
+
+export function HelpCard({
+  links,
+
+  className,
+  ...props
+}: HelpCardProps) {
+  const helpLink = links?.find((l) => l.rel === 'help')
+
+  if (!helpLink) return null
+
+  return (
+    <p
+      {...props}
+      className={clsx(
+        'text-sm rounded-md bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400 p-3',
+        className,
+      )}
+    >
+      <Trans>
+        Having trouble?{' '}
+        <a
+          role="link"
+          href={helpLink.href}
+          rel={helpLink.rel}
+          target="_blank"
+          className="text-brand"
+        >
+          <Trans>Contact support</Trans>
+        </a>
+      </Trans>
+    </p>
+  )
+}

package/src/components/utils/icons.tsx

@@ -0,0 +1,88 @@
+import type { FunctionComponent, JSX } from 'react'
+import { Override } from '../../lib/util.ts'
+
+export type IconProps = Override<
+  Omit<JSX.IntrinsicElements['svg'], 'viewBox' | 'children' | 'xmlns'>,
+  {
+    /**
+     * The title of the icon, used for accessibility.
+     */
+    title?: string
+  }
+>
+
+const makeSvgComponent = (path: string, displayName: string) => {
+  const SvgComponent: FunctionComponent<IconProps> = ({ title, ...props }) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+      aria-hidden={!title}
+    >
+      {title && <title>{title}</title>}
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d={path}
+      ></path>
+    </svg>
+  )
+  SvgComponent.displayName = displayName
+  return SvgComponent
+}
+
+export const AccountIcon = makeSvgComponent(
+  'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z',
+  'AccountIcon',
+)
+
+export const AlertIcon = makeSvgComponent(
+  'M11.14 4.494a.995.995 0 0 1 1.72 0l7.001 12.008a.996.996 0 0 1-.86 1.498H4.999a.996.996 0 0 1-.86-1.498L11.14 4.494Zm3.447-1.007c-1.155-1.983-4.019-1.983-5.174 0L2.41 15.494C1.247 17.491 2.686 20 4.998 20h14.004c2.312 0 3.751-2.509 2.587-4.506L14.587 3.487ZM13 9.019a1 1 0 1 0-2 0v2.994a1 1 0 1 0 2 0V9.02Zm-1 4.731a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z',
+  'AlertIcon',
+)
+
+export const AtSymbolIcon = makeSvgComponent(
+  'M12 4a8 8 0 1 0 4.21 14.804 1 1 0 0 1 1.054 1.7A9.958 9.958 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 1.104-.27 2.31-.949 3.243-.716.984-1.849 1.6-3.331 1.465a4.207 4.207 0 0 1-2.93-1.585c-.94 1.21-2.388 1.94-3.985 1.715-2.53-.356-4.04-2.91-3.682-5.458.358-2.547 2.514-4.586 5.044-4.23.905.127 1.68.536 2.286 1.126a1 1 0 0 1 1.964.368l-.515 3.545v.002a2.222 2.222 0 0 0 1.999 2.526c.75.068 1.212-.21 1.533-.65.358-.493.566-1.245.566-2.067a8 8 0 0 0-8-8Zm-.112 5.13c-1.195-.168-2.544.819-2.784 2.529-.24 1.71.784 3.03 1.98 3.198 1.195.168 2.543-.819 2.784-2.529.24-1.71-.784-3.03-1.98-3.198Z',
+  'AtSymbolIcon',
+)
+
+export const CaretRightIcon = makeSvgComponent(
+  'M8.293 3.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 0-1.414Z',
+  'CaretRightIcon',
+)
+
+export const CheckMarkIcon = makeSvgComponent(
+  'M21.59 3.193a1 1 0 0 1 .217 1.397l-11.706 16a1 1 0 0 1-1.429.193l-6.294-5a1 1 0 1 1 1.244-1.566l5.48 4.353 11.09-15.16a1 1 0 0 1 1.398-.217Z',
+  'CheckMarkIcon',
+)
+
+export const EmailIcon = makeSvgComponent(
+  'M4.568 4h14.864c.252 0 .498 0 .706.017.229.019.499.063.77.201a2 2 0 0 1 .874.874c.138.271.182.541.201.77.017.208.017.454.017.706v10.864c0 .252 0 .498-.017.706a2.022 2.022 0 0 1-.201.77 2 2 0 0 1-.874.874 2.022 2.022 0 0 1-.77.201c-.208.017-.454.017-.706.017H4.568c-.252 0-.498 0-.706-.017a2.022 2.022 0 0 1-.77-.201 2 2 0 0 1-.874-.874 2.022 2.022 0 0 1-.201-.77C2 17.93 2 17.684 2 17.432V6.568c0-.252 0-.498.017-.706.019-.229.063-.499.201-.77a2 2 0 0 1 .874-.874c.271-.138.541-.182.77-.201C4.07 4 4.316 4 4.568 4Zm.456 2L12 11.708 18.976 6H5.024ZM20 7.747l-6.733 5.509a2 2 0 0 1-2.534 0L4 7.746V17.4a8.187 8.187 0 0 0 .011.589h.014c.116.01.278.011.575.011h14.8a8.207 8.207 0 0 0 .589-.012v-.013c.01-.116.011-.279.011-.575V7.747Z',
+  'EmailIcon',
+)
+
+export const EyeIcon = makeSvgComponent(
+  'M12 6.5c3.79 0 7.17 2.13 8.82 5.5-1.65 3.37-5.02 5.5-8.82 5.5S4.83 15.37 3.18 12C4.83 8.63 8.21 6.5 12 6.5m0-2C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5m0 5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5-2.5-1.12-2.5-2.5 1.12-2.5 2.5-2.5m0-2c-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5-2.02-4.5-4.5-4.5',
+  'EyeIcon',
+)
+
+export const EyeSlashIcon = makeSvgComponent(
+  'M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6m-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14M2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45zm7.5 7.5 2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13m-3.4-3.4 1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53',
+  'EyeSlashIcon',
+)
+
+export const LockIcon = makeSvgComponent(
+  'M7 7a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h1V7Zm-1 4v9h12v-9H6Zm9-2H9V7a3 3 0 1 1 6 0v2Zm-3 4a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Z',
+  'LockIcon',
+)
+
+export const TokenIcon = makeSvgComponent(
+  'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z',
+  'TokenIcon',
+)
+
+export const XMarkIcon = makeSvgComponent(
+  'M4.293 4.293a1 1 0 0 1 1.414 0L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L10.586 12 4.293 5.707a1 1 0 0 1 0-1.414Z',
+  'XMarkIcon',
+)

package/src/components/utils/link-anchor.tsx

@@ -0,0 +1,28 @@
+import { JSX } from 'react'
+import type { LinkDefinition } from '@atproto/oauth-provider-api'
+import { Override } from '../../lib/util.ts'
+import { LinkTitle } from './link-title.tsx'
+
+export type LinkAnchorProps = Override<
+  JSX.IntrinsicElements['a'],
+  {
+    link: LinkDefinition
+  }
+>
+export function LinkAnchor({
+  link,
+
+  // a
+  children = <LinkTitle link={link} />,
+  role = 'link',
+  target = '_blank',
+  href = link.href,
+  rel = link.rel,
+  ...props
+}: LinkAnchorProps) {
+  return (
+    <a {...props} role={role} target={target} href={href} rel={rel}>
+      {children}
+    </a>
+  )
+}

package/src/components/utils/link-title.tsx

@@ -0,0 +1,26 @@
+import { Trans } from '@lingui/react/macro'
+import type { LinkDefinition } from '@atproto/oauth-provider-api'
+import { MultiLangString } from './multi-lang-string.tsx'
+
+export type LinkNameProps = {
+  link: LinkDefinition
+}
+
+export function LinkTitle({ link }: LinkNameProps) {
+  return (
+    <MultiLangString
+      value={link.title}
+      fallback={
+        link.rel === 'canonical' ? (
+          <Trans>Home</Trans>
+        ) : link.rel === 'privacy-policy' ? (
+          <Trans>Privacy Policy</Trans>
+        ) : link.rel === 'terms-of-service' ? (
+          <Trans>Terms of Service</Trans>
+        ) : link.rel === 'help' ? (
+          <Trans>Support</Trans>
+        ) : undefined
+      }
+    />
+  )
+}

package/src/components/utils/multi-lang-string.tsx

@@ -0,0 +1,56 @@
+import { useLingui } from '@lingui/react/macro'
+import { ReactNode } from 'react'
+import type { LocalizedString } from '@atproto/oauth-provider-api'
+
+export type MultiLangStringProps = {
+  value: LocalizedString
+  fallback?: ReactNode
+}
+
+export function MultiLangString({
+  value,
+  fallback,
+}: MultiLangStringProps): ReactNode {
+  const { i18n } = useLingui()
+  return (
+    findMatchingString(value, i18n.locale) ??
+    fallback ??
+    (typeof value === 'string' ? value : value.en)
+  )
+}
+
+/**
+ * Only returns a string if it matches the desired locale.
+ */
+function findMatchingString(
+  value: LocalizedString,
+  locale: string,
+): string | undefined {
+  switch (typeof value) {
+    case 'string':
+      // By convention, string values are in english ("en")
+      if (locale.startsWith('en')) return value
+      break
+
+    case 'object': {
+      // Exact match
+      const localeMatch = value[locale]
+      if (typeof localeMatch === 'string') return localeMatch
+
+      // Fallback to language match
+      const lang = locale.split('-')[0]
+      const langMatch = value[lang]
+      if (typeof langMatch === 'string') return langMatch
+
+      // Fallback to any locale from same language (e.g. "pt-PT" -> "pt-BR")
+      for (const k in value) {
+        if (k.startsWith(`${lang}-`)) {
+          const fallbackMatch = value[k]
+          if (typeof fallbackMatch === 'string') return fallbackMatch
+        }
+      }
+    }
+  }
+
+  return undefined
+}

package/src/components/utils/password-strength-label.tsx

@@ -0,0 +1,37 @@
+import { Trans, useLingui } from '@lingui/react/macro'
+import { JSX } from 'react'
+import { PasswordStrength, getPasswordStrength } from '../../lib/password.ts'
+import { Override } from '../../lib/util.ts'
+
+export type PasswordStrengthLabelProps = Override<
+  Omit<JSX.IntrinsicElements['span'], 'children' | 'aria-label'>,
+  {
+    password: string
+  }
+>
+
+export function PasswordStrengthLabel({
+  password,
+
+  // span
+  ...props
+}: PasswordStrengthLabelProps) {
+  const { t } = useLingui()
+  const strength = getPasswordStrength(password)
+
+  return (
+    <span {...props} aria-label={t`Password strength`}>
+      {strength === PasswordStrength.extra ? (
+        <Trans>Extra</Trans>
+      ) : strength === PasswordStrength.strong ? (
+        <Trans>Strong</Trans>
+      ) : strength === PasswordStrength.moderate ? (
+        <Trans>Moderate</Trans>
+      ) : password ? (
+        <Trans>Weak</Trans>
+      ) : (
+        <Trans>Missing</Trans>
+      )}
+    </span>
+  )
+}

package/src/components/utils/password-strength-meter.tsx

@@ -0,0 +1,58 @@
+import { useLingui } from '@lingui/react/macro'
+import { JSX } from 'react'
+import { clsx } from '../../lib/clsx.ts'
+import { PasswordStrength, getPasswordStrength } from '../../lib/password.ts'
+import { Override } from '../../lib/util.ts'
+
+export type PasswordStrengthMeterProps = Override<
+  Omit<
+    JSX.IntrinsicElements['div'],
+    | 'children'
+    | 'role'
+    | 'aria-label'
+    | 'aria-valuemin'
+    | 'aria-valuemax'
+    | 'aria-valuenow'
+  >,
+  {
+    password: string
+  }
+>
+
+export function PasswordStrengthMeter({
+  password,
+
+  // div
+  className,
+  ...props
+}: PasswordStrengthMeterProps) {
+  const { t } = useLingui()
+  const strength = password ? getPasswordStrength(password) : 0
+
+  const colorBg = 'bg-gray-300 dark:bg-slate-500'
+  const color =
+    strength === PasswordStrength.extra || strength === PasswordStrength.strong
+      ? 'bg-success'
+      : strength === PasswordStrength.moderate
+        ? 'bg-warning'
+        : 'bg-error'
+
+  return (
+    <div
+      {...props}
+      className={clsx('w-full h-1 flex space-x-2', className)}
+      role="meter"
+      aria-label={t`Password strength indicator`}
+      aria-valuemin={0}
+      aria-valuemax={PasswordStrength.extra}
+      aria-valuenow={strength}
+    >
+      {Array.from({ length: 4 }, (_, i) => (
+        <div
+          key={i}
+          className={`rounded h-1 w-1/4 ${strength > i ? color : colorBg}`}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/utils/url-viewer.tsx

@@ -0,0 +1,73 @@
+import { JSX, useMemo } from 'react'
+import { Override } from '../../lib/util.ts'
+
+export type UrlPartRenderingOptions = {
+  faded?: boolean
+  bold?: boolean
+}
+
+export type UrlRendererProps = {
+  url: string | URL
+  proto?: boolean | UrlPartRenderingOptions
+  host?: boolean | UrlPartRenderingOptions
+  path?: boolean | UrlPartRenderingOptions
+  query?: boolean | UrlPartRenderingOptions
+  hash?: boolean | UrlPartRenderingOptions
+  as?: string
+}
+
+export function UrlViewer<As extends keyof JSX.IntrinsicElements = 'span'>({
+  url,
+  proto = false,
+  host = true,
+  path = false,
+  query = false,
+  hash = false,
+  as: As = 'span',
+
+  // Element
+  ...props
+}: Override<JSX.IntrinsicElements[As], UrlRendererProps>) {
+  const urlObj = useMemo(() => new URL(url), [url])
+
+  return (
+    <As {...props}>
+      {proto && (
+        <UrlPartViewer
+          value={`${urlObj.protocol}//`}
+          {...(proto === true ? null : proto)}
+        />
+      )}
+      {host && (
+        <UrlPartViewer
+          value={urlObj.host}
+          {...(host === true ? { faded: false, bold: true } : host)}
+        />
+      )}
+      {path && (
+        <UrlPartViewer
+          value={urlObj.pathname}
+          {...(path === true ? null : path)}
+        />
+      )}
+      {query && (
+        <UrlPartViewer
+          value={urlObj.search}
+          {...(query === true ? null : query)}
+        />
+      )}
+      {hash && (
+        <UrlPartViewer value={urlObj.hash} {...(hash === true ? null : hash)} />
+      )}
+    </As>
+  )
+}
+
+function UrlPartViewer({
+  value,
+  faded = true,
+  bold = false,
+}: { value: string } & UrlPartRenderingOptions) {
+  const Comp = bold ? 'b' : 'span'
+  return <Comp className={faded ? 'opacity-50' : ''}>{value}</Comp>
+}

package/src/cookies.ts

@@ -0,0 +1,11 @@
+export const parseCookieString = (
+  cookie: string,
+): Record<string, string | undefined> =>
+  Object.fromEntries(
+    cookie
+      .split(';')
+      .filter(Boolean)
+      .map((str) => str.split('=', 2).map((s) => decodeURIComponent(s.trim()))),
+  )
+
+export const cookies = parseCookieString(document.cookie)

package/src/error-page.html

@@ -0,0 +1,125 @@
+<!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'
+
+      window.__availableLocales = ['en', 'fr']
+
+      window.__customizationData = {
+        availableUserDomains,
+        inviteCodeRequired: false,
+        hcaptchaSiteKey,
+        name,
+        links,
+        logo,
+      }
+
+      window.__errorData = {
+        error: 'foo',
+        error_description: 'bar',
+      }
+    </script>
+    <script src="./error-page.tsx" type="module"></script>
+  </body>
+</html>

package/src/error-page.tsx

@@ -0,0 +1,29 @@
+import './styles.css'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import type {
+  AvailableLocales,
+  CustomizationData,
+  ErrorData,
+} from '@atproto/oauth-provider-api'
+import { readBackendData } from './lib/backend-data.ts'
+import { LocaleProvider } from './locales/locale-provider.tsx'
+import { ErrorView } from './views/error/error-view.tsx'
+
+export const availableLocales =
+  readBackendData<AvailableLocales>('__availableLocales')
+export const customizationData = readBackendData<CustomizationData>(
+  '__customizationData',
+)
+export const errorData = readBackendData<ErrorData>('__errorData')
+
+const container = document.getElementById('root')!
+
+createRoot(container).render(
+  <StrictMode>
+    <LocaleProvider availableLocales={availableLocales}>
+      <ErrorView error={errorData} customizationData={customizationData} />
+    </LocaleProvider>
+  </StrictMode>,
+)