@atproto/oauth-provider 0.3.1 → 0.5.0

package/src/account/account-store.ts

@@ -1,25 +1,86 @@
+import { isEmailValid } from '@hapi/address'
+import { isDisposableEmail } from 'disposable-email-domains-js'
 import { z } from 'zod'
 import { ClientId } from '../client/client-id.js'
 import { DeviceId } from '../device/device-id.js'
-import { Awaitable } from '../lib/util/type.js'
+import { localeSchema } from '../lib/locale.js'
+import { Awaitable, buildInterfaceChecker } from '../lib/util/type.js'
+import {
+  HandleUnavailableError,
+  InvalidRequestError,
+  SecondAuthenticationFactorRequiredError,
+} from '../oauth-errors.js'
 import { Sub } from '../oidc/sub.js'
 import { Account } from './account.js'
 
-export const signInCredentialsSchema = z.object({
-  username: z.string(),
-  password: z.string(),
+// @NOTE Change the length here to force stronger passwords (through a reset)
+export const oldPasswordSchema = z.string().min(1)
+export const newPasswordSchema = z.string().min(8)
+export const tokenSchema = z.string().regex(/^[A-Z2-7]{5}-[A-Z2-7]{5}$/)
+export const handleSchema = z
+  .string()
+  .min(3)
+  .max(30)
+  .regex(/^[a-z0-9][a-z0-9-]+[a-z0-9](?:\.[a-z0-9][a-z0-9-]+[a-z0-9])+$/)
+export const emailSchema = z
+  .string()
+  .email()
+  // @NOTE using @hapi/address here, in addition to the email() check to ensure
+  // compatibility with the current email validation in the PDS's account
+  // manager
+  .refine(isEmailValid, {
+    message: 'Invalid email address',
+  })
+  .refine((email) => !isDisposableEmail(email), {
+    message: 'Disposable email addresses are not allowed',
+  })
 
-  /**
-   * If false, the account must not be returned from
-   * {@link AccountStore.listDeviceAccounts}. Note that this only makes sense when
-   * used with a device ID.
-   */
-  remember: z.boolean().optional().default(false),
+export const authenticateAccountDataSchema = z
+  .object({
+    locale: localeSchema,
+    username: z.string(),
+    password: oldPasswordSchema,
+    emailOtp: z.string().optional(),
+  })
+  .strict()
+
+export type AuthenticateAccountData = z.TypeOf<
+  typeof authenticateAccountDataSchema
+>
+
+export const createAccountDataSchema = z
+  .object({
+    locale: localeSchema,
+    handle: handleSchema,
+    email: emailSchema,
+    password: z.intersection(oldPasswordSchema, newPasswordSchema),
+    inviteCode: tokenSchema.optional(),
+  })
+  .strict()
+
+export type CreateAccountData = z.TypeOf<typeof createAccountDataSchema>
+
+export const resetPasswordRequestDataSchema = z
+  .object({
+    locale: localeSchema,
+    email: emailSchema,
+  })
+  .strict()
+
+export type ResetPasswordRequestData = z.TypeOf<
+  typeof resetPasswordRequestDataSchema
+>
 
-  emailOtp: z.string().optional(),
-})
+export const resetPasswordConfirmDataSchema = z
+  .object({
+    token: tokenSchema,
+    password: z.intersection(oldPasswordSchema, newPasswordSchema),
+  })
+  .strict()
 
-export type SignInCredentials = z.TypeOf<typeof signInCredentialsSchema>
+export type ResetPasswordConfirmData = z.TypeOf<
+  typeof resetPasswordConfirmDataSchema
+>
 
 export type DeviceAccountInfo = {
   remembered: boolean
@@ -28,7 +89,14 @@ export type DeviceAccountInfo = {
 }
 
 // Export all types needed to implement the AccountStore interface
-export type { Account, DeviceId, Sub }
+export {
+  type Account,
+  type DeviceId,
+  HandleUnavailableError,
+  InvalidRequestError,
+  SecondAuthenticationFactorRequiredError,
+  type Sub,
+}
 
 export type AccountInfo = {
   account: Account
@@ -36,10 +104,17 @@ export type AccountInfo = {
 }
 
 export interface AccountStore {
-  authenticateAccount(
-    credentials: SignInCredentials,
-    deviceId: DeviceId,
-  ): Awaitable<AccountInfo | null>
+  /**
+   * @throws {HandleUnavailableError} - To indicate that the handle is already taken
+   * @throws {InvalidRequestError} - To indicate that some data is invalid
+   */
+  createAccount(data: CreateAccountData): Awaitable<Account>
+
+  /**
+   * @throws {InvalidRequestError} - When the credentials are not valid
+   * @throws {SecondAuthenticationFactorRequiredError} - To indicate that an {@link SecondAuthenticationFactorRequiredError.type} is required in the credentials
+   */
+  authenticateAccount(data: AuthenticateAccountData): Awaitable<Account>
 
   addAuthorizedClient(
     deviceId: DeviceId,
@@ -47,6 +122,19 @@ export interface AccountStore {
     clientId: ClientId,
   ): Awaitable<void>
 
+  /**
+   * @param remember If false, the account must not be returned from
+   * {@link AccountStore.listDeviceAccounts}.
+   */
+  addDeviceAccount(
+    deviceId: DeviceId,
+    sub: Sub,
+    remember: boolean,
+  ): Awaitable<DeviceAccountInfo>
+
+  /**
+   * @returns The account info, whether the account, even if remember was false.
+   */
   getDeviceAccount(deviceId: DeviceId, sub: Sub): Awaitable<AccountInfo | null>
   removeDeviceAccount(deviceId: DeviceId, sub: Sub): Awaitable<void>
 
@@ -55,23 +143,30 @@ export interface AccountStore {
    * be returned. The others will be ignored.
    */
   listDeviceAccounts(deviceId: DeviceId): Awaitable<AccountInfo[]>
-}
 
-export function isAccountStore(
-  implementation: Record<string, unknown> & Partial<AccountStore>,
-): implementation is Record<string, unknown> & AccountStore {
-  return (
-    typeof implementation.authenticateAccount === 'function' &&
-    typeof implementation.getDeviceAccount === 'function' &&
-    typeof implementation.addAuthorizedClient === 'function' &&
-    typeof implementation.listDeviceAccounts === 'function' &&
-    typeof implementation.removeDeviceAccount === 'function'
-  )
+  resetPasswordRequest(data: ResetPasswordRequestData): Awaitable<void>
+  resetPasswordConfirm(data: ResetPasswordConfirmData): Awaitable<void>
+
+  /**
+   * @throws {HandleUnavailableError} - To indicate that the handle is already taken
+   */
+  verifyHandleAvailability(handle: string): Awaitable<void>
 }
 
-export function asAccountStore(
-  implementation?: Record<string, unknown> & Partial<AccountStore>,
-): AccountStore {
+export const isAccountStore = buildInterfaceChecker<AccountStore>([
+  'createAccount',
+  'authenticateAccount',
+  'addAuthorizedClient',
+  'addDeviceAccount',
+  'getDeviceAccount',
+  'removeDeviceAccount',
+  'listDeviceAccounts',
+  'resetPasswordRequest',
+  'resetPasswordConfirm',
+  'verifyHandleAvailability',
+])
+
+export function asAccountStore<V>(implementation: V): V & AccountStore {
   if (!implementation || !isAccountStore(implementation)) {
     throw new Error('Invalid AccountStore implementation')
   }

package/src/account/sign-in-data.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod'
+import { authenticateAccountDataSchema } from './account-store.js'
+
+export const signInDataSchema = authenticateAccountDataSchema
+  .extend({
+    /**
+     * If false, the account must not be returned from
+     * {@link AccountStore.listDeviceAccounts}. Note that this only makes sense when
+     * used with a device ID.
+     */
+    remember: z.boolean().optional().default(false),
+  })
+  .strict()
+
+export type SignInData = z.TypeOf<typeof signInDataSchema>

package/src/account/sign-up-data.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod'
+import { hcaptchaTokenSchema } from '../lib/hcaptcha.js'
+import { createAccountDataSchema } from './account-store.js'
+
+export const signUpDataSchema = createAccountDataSchema
+  .extend({
+    hcaptchaToken: hcaptchaTokenSchema.optional(),
+  })
+  .strict()
+
+export type SignUpData = z.TypeOf<typeof signUpDataSchema>

package/src/assets/app/app.tsx

@@ -1,28 +1,43 @@
+import { ErrorBoundary } from 'react-error-boundary'
 import type {
   AuthorizeData,
+  AvailableLocales,
   CustomizationData,
   ErrorData,
-} from './backend-data'
-import { AuthorizeView } from './views/authorize-view'
-import { ErrorView } from './views/error-view'
+} 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({ authorizeData, customizationData, errorData }: AppProps) {
-  if (authorizeData && !errorData) {
-    return (
-      <AuthorizeView
-        customizationData={customizationData}
-        authorizeData={authorizeData}
-      />
-    )
-  } else {
-    return (
-      <ErrorView 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,72 +1,27 @@
-import { OAuthClientMetadata } from '@atproto/oauth-types'
-
-// TODO: Find a way to share these types with the backend code
-
-export type Account = {
-  sub: string
-  aud: string
-
-  email?: string
-  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 LinkDefinition = {
-  title: string
-  href: string
-  rel?: string
-}
-
-export type CustomizationData = {
-  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
-  csrfCookie: string
-  loginHint?: string
-  scopeDetails?: ScopeDetail[]
-  newSessionsRequireConsent: boolean
-  sessions: Session[]
-}
-
-// see "declareBackendData()" in the backend
-const readBackendData = <T>(key: string): T | undefined => {
+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.
+// 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

@@ -0,0 +1,66 @@
+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

@@ -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/assets/app/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/assets/app/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>
+  )
+}