@atproto/oauth-provider 0.5.1 → 0.6.0

package/rollup.config.js

@@ -1,98 +0,0 @@
-/* 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 { defineConfig } = require('rollup')
-const {
-  default: manifest,
-} = require('@atproto-labs/rollup-plugin-bundle-manifest')
-const postcss = ((m) => m.default || m)(require('rollup-plugin-postcss'))
-
-module.exports = defineConfig((commandLineArguments) => {
-  const NODE_ENV =
-    process.env['NODE_ENV'] ??
-    (commandLineArguments.watch ? 'development' : 'production')
-
-  const devMode = NODE_ENV === 'development'
-
-  return {
-    input: ['src/assets/app/main.tsx', 'src/assets/app/main.css'],
-    output: {
-      manualChunks: undefined,
-      sourcemap: true,
-      dir: 'dist/assets/app',
-      format: 'module',
-      entryFileNames: 'main-[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/assets/app/app.tsx

@@ -1,43 +0,0 @@
-import { ErrorBoundary } from 'react-error-boundary'
-import type {
-  AuthorizeData,
-  AvailableLocales,
-  CustomizationData,
-  ErrorData,
-} from './backend-types.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 type AppProps = {
-  availableLocales?: AvailableLocales
-  authorizeData?: AuthorizeData
-  customizationData?: CustomizationData
-  errorData?: ErrorData
-}
-
-export function App({
-  availableLocales,
-  authorizeData,
-  customizationData,
-  errorData,
-}: AppProps) {
-  return (
-    <LocaleProvider availableLocales={availableLocales}>
-      <ErrorBoundary
-        fallbackRender={({ error }) => (
-          <ErrorView error={error} customizationData={customizationData} />
-        )}
-      >
-        {errorData || !authorizeData ? (
-          <ErrorView error={errorData} customizationData={customizationData} />
-        ) : (
-          <AuthorizeView
-            customizationData={customizationData}
-            authorizeData={authorizeData}
-          />
-        )}
-      </ErrorBoundary>
-    </LocaleProvider>
-  )
-}

package/src/assets/app/backend-data.ts

@@ -1,27 +0,0 @@
-import {
-  AuthorizeData,
-  AvailableLocales,
-  CustomizationData,
-  ErrorData,
-} from './backend-types.ts'
-
-function readBackendData<T>(key: string): T | undefined {
-  const value = window[key] as T | undefined
-  delete window[key] // Prevent accidental usage / potential leaks to dependencies
-  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')
-/** @deprecated Do not import directly. Only import this from main.tsx */
-export const customizationData = readBackendData<CustomizationData>(
-  '__customizationData',
-)
-/** @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/assets/app/backend-types.ts

@@ -1,66 +0,0 @@
-import type { OAuthClientMetadata } from '@atproto/oauth-types'
-
-// @TODO: Find a way to share these types with the backend code
-
-export type Account = {
-  sub: string
-  aud: string | [string, ...string[]]
-
-  email?: string
-  email_verified?: boolean
-  name?: string
-  preferred_username?: string
-  picture?: string
-}
-
-export type Session = {
-  account: Account
-  info?: never // Prevent relying on this in the frontend
-
-  selected: boolean
-  loginRequired: boolean
-  consentRequired: boolean
-}
-
-export type LocalizedString = string | ({ en: string } & Record<string, string>)
-
-export type AvailableLocales = readonly string[]
-
-export type LinkDefinition = {
-  title: LocalizedString
-  href: string
-  rel?: string
-}
-
-export type CustomizationData = {
-  // Functional customization
-  hcaptchaSiteKey?: string
-  inviteCodeRequired?: boolean
-  availableUserDomains?: string[]
-
-  // Aesthetic customization
-  name?: string
-  logo?: string
-  links?: LinkDefinition[]
-}
-
-export type ErrorData = {
-  error: string
-  error_description: string
-}
-
-export type ScopeDetail = {
-  scope: string
-  description?: string
-}
-
-export type AuthorizeData = {
-  clientId: string
-  clientMetadata: OAuthClientMetadata
-  clientTrusted: boolean
-  requestUri: string
-  loginHint?: string
-  scopeDetails?: ScopeDetail[]
-  newSessionsRequireConsent: boolean
-  sessions: Session[]
-}

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

@@ -1,43 +0,0 @@
-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/assets/app/components/forms/button.tsx

@@ -1,60 +0,0 @@
-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/assets/app/components/forms/fieldset.tsx

@@ -1,55 +0,0 @@
-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>
-  )
-}

package/src/assets/app/components/forms/form-card-async.tsx

@@ -1,103 +0,0 @@
-import { Trans } from '@lingui/react/macro'
-import { FormEvent, ReactNode, useCallback } from 'react'
-import {
-  UseAsyncActionOptions,
-  useAsyncAction,
-} from '../../hooks/use-async-action.ts'
-import { Override } from '../../lib/util.ts'
-import { ErrorCard } from '../utils/error-card.tsx'
-import { Button } from './button.tsx'
-import { FormCard, FormCardProps } from './form-card.tsx'
-
-export type { AsyncActionController } from '../../hooks/use-async-action.ts'
-
-export type ErrorRender = (data: { error: Error }) => ReactNode
-export const errorRenderDefault: ErrorRender = ({ error }) => (
-  <ErrorCard error={error} />
-)
-
-export type FormCardAsyncProps = Override<
-  Override<
-    Omit<FormCardProps, 'cancel' | 'actions' | 'prepend'>,
-    Pick<UseAsyncActionOptions, 'ref' | 'onLoading' | 'onError'>
-  >,
-  {
-    invalid?: boolean
-    disabled?: boolean
-
-    onSubmit: (signal: AbortSignal) => void | PromiseLike<void>
-    submitLabel?: ReactNode
-
-    onCancel?: () => void
-    cancelLabel?: ReactNode
-
-    errorRender?: ErrorRender
-  }
->
-
-export function FormCardAsync({
-  invalid,
-  disabled,
-
-  onSubmit,
-  submitLabel,
-
-  onCancel = undefined,
-  cancelLabel,
-
-  errorRender = errorRenderDefault,
-
-  // UseAsyncActionOptions
-  ref,
-  onLoading,
-  onError,
-
-  // FormCardProps
-  children,
-  ...props
-}: FormCardAsyncProps) {
-  const { run, loading, error } = useAsyncAction(onSubmit, {
-    ref,
-    onError,
-    onLoading,
-  })
-
-  const doSubmit = useCallback(
-    (event: FormEvent<HTMLFormElement>) => {
-      event.preventDefault()
-
-      if (!event.currentTarget.reportValidity()) return
-
-      if (!disabled && !invalid) void run()
-    },
-    [disabled, invalid, run],
-  )
-
-  return (
-    <FormCard
-      {...props}
-      onSubmit={doSubmit}
-      disabled={disabled || loading}
-      prepend={error != null ? errorRender({ error }) : undefined}
-      cancel={
-        onCancel && (
-          <Button onClick={onCancel}>
-            {cancelLabel || <Trans>Cancel</Trans>}
-          </Button>
-        )
-      }
-      actions={
-        <Button
-          color="brand"
-          type="submit"
-          loading={loading}
-          disabled={disabled}
-        >
-          {submitLabel || <Trans>Submit</Trans>}
-        </Button>
-      }
-    >
-      {children}
-    </FormCard>
-  )
-}

package/src/assets/app/components/forms/form-card.tsx

@@ -1,49 +0,0 @@
-import { JSX, ReactNode } from 'react'
-import { Override } from '../../lib/util.ts'
-
-export type FormCardProps = Override<
-  JSX.IntrinsicElements['form'],
-  {
-    disabled?: boolean
-    append?: ReactNode
-    prepend?: ReactNode
-    cancel?: ReactNode
-    actions?: ReactNode
-  }
->
-
-export function FormCard({
-  actions,
-  cancel,
-  append,
-  children,
-  prepend,
-  disabled,
-
-  // form
-  inert = disabled,
-  ...props
-}: FormCardProps) {
-  return (
-    <form {...props} inert={inert} className="flex flex-col space-y-4">
-      {prepend && <div key="prepend">{prepend}</div>}
-
-      <div key="children" className="space-y-4">
-        {children}
-      </div>
-
-      {append && <div key="append">{append}</div>}
-
-      {(actions || cancel) && (
-        <div
-          key="buttons"
-          className="flex flex-wrap flex-row-reverse items-center justify-end space-x-reverse space-x-2"
-        >
-          {actions}
-          <div className="flex-auto" />
-          {cancel}
-        </div>
-      )}
-    </form>
-  )
-}

package/src/assets/app/components/forms/input-checkbox.tsx

@@ -1,73 +0,0 @@
-import { JSX, ReactNode, useContext, useRef } from 'react'
-import { useRandomString } from '../../hooks/use-random-string.ts'
-import { clsx } from '../../lib/clsx.ts'
-import { mergeRefs } from '../../lib/ref.ts'
-import { Override } from '../../lib/util.ts'
-import { FieldsetContext } from './fieldset.tsx'
-import { InputContainer } from './input-container.tsx'
-
-export type InputCheckboxProps = Override<
-  Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'children'>,
-  {
-    className?: string
-    children?: ReactNode
-  }
->
-
-export function InputCheckbox({
-  className,
-  children,
-
-  // input
-  id,
-  ref,
-  disabled,
-  'aria-labelledby': ariaLabelledBy,
-  ...props
-}: InputCheckboxProps) {
-  const htmlFor = useRandomString('input-checkbox-')
-  const containerRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const ctx = useContext(FieldsetContext)
-
-  const inputId = id ?? htmlFor
-
-  return (
-    <InputContainer
-      ref={containerRef}
-      className={clsx('cursor-pointer', className)}
-      icon={
-        <input
-          {...props}
-          disabled={disabled ?? ctx.disabled}
-          aria-labelledby={
-            children
-              ? // Prefer the local "<label>" element (through "htmlFor") over the wrapping "<fieldset>" to describe the checkbox.
-                undefined
-              : ariaLabelledBy ?? ctx.labelId
-          }
-          ref={mergeRefs([ref, inputRef])}
-          id={inputId}
-          className="accent-brand outline-none"
-          type="checkbox"
-        />
-      }
-      tabIndex={-1}
-      onClick={(event) => {
-        if (event.target === containerRef.current && !event.defaultPrevented) {
-          inputRef.current?.click()
-          inputRef.current?.focus()
-        }
-      }}
-    >
-      {children && (
-        <label
-          htmlFor={inputId}
-          className="block w-full leading-[1.6] select-none cursor-pointer"
-        >
-          {children}
-        </label>
-      )}
-    </InputContainer>
-  )
-}