@atproto/oauth-provider-ui 0.0.2

package/src/lib/api.ts

@@ -0,0 +1,234 @@
+import type { ApiEndpoints } from '@atproto/oauth-provider-api'
+import {
+  JsonClient,
+  JsonErrorPayload,
+  JsonErrorResponse,
+} from './json-client.ts'
+
+export type { Options } from './json-client.ts'
+
+export type AcceptData = {
+  sub: string
+}
+
+export class Api extends JsonClient<ApiEndpoints> {
+  constructor(csrfToken: string) {
+    const baseUrl = new URL('/oauth/authorize', window.origin).toString()
+    super(baseUrl, csrfToken)
+  }
+
+  public buildAcceptUrl({ sub }: AcceptData): URL {
+    const url = new URL(`${this.baseUrl}/accept`)
+    url.searchParams.set('account_sub', sub)
+    url.searchParams.set('csrf_token', this.csrfToken)
+    return url
+  }
+
+  public buildRejectUrl(): URL {
+    const url = new URL(`${this.baseUrl}/reject`)
+    url.searchParams.set('csrf_token', this.csrfToken)
+    return url
+  }
+
+  // Override the parent's parseError method to handle expected error responses
+  // and transform them into instances of the corresponding error classes.
+  public static override parseError(
+    json: unknown,
+  ): undefined | JsonErrorResponse {
+    // @NOTE Most specific errors first !
+    if (SecondAuthenticationFactorRequiredError.is(json)) {
+      return new SecondAuthenticationFactorRequiredError(json)
+    }
+    if (InvalidCredentialsError.is(json)) {
+      return new InvalidCredentialsError(json)
+    }
+    if (InvalidInviteCodeError.is(json)) {
+      return new InvalidInviteCodeError(json)
+    }
+    if (HandleUnavailableError.is(json)) {
+      return new HandleUnavailableError(json)
+    }
+    if (EmailTakenError.is(json)) {
+      return new EmailTakenError(json)
+    }
+    if (RequestExpiredError.is(json)) {
+      return new RequestExpiredError(json)
+    }
+    if (UnknownRequestUriError.is(json)) {
+      return new UnknownRequestUriError(json)
+    }
+    if (InvalidRequestError.is(json)) {
+      return new InvalidRequestError(json)
+    }
+    if (AccessDeniedError.is(json)) {
+      return new AccessDeniedError(json)
+    }
+    return super.parseError(json)
+  }
+}
+
+export type AccessDeniedPayload = JsonErrorPayload<'access_denied'>
+export class AccessDeniedError<
+  P extends AccessDeniedPayload = AccessDeniedPayload,
+> extends JsonErrorResponse<P> {
+  constructor(
+    payload: P,
+    message = payload.error_description || 'Access denied',
+  ) {
+    super(payload, message)
+  }
+
+  static is(json: unknown): json is AccessDeniedPayload {
+    return super.is(json) && json.error === 'access_denied'
+  }
+}
+
+export type InvalidRequestPayload = JsonErrorPayload<'invalid_request'>
+export class InvalidRequestError<
+  P extends InvalidRequestPayload = InvalidRequestPayload,
+> extends JsonErrorResponse<P> {
+  constructor(
+    payload: P,
+    message = payload.error_description || 'Invalid request',
+  ) {
+    super(payload, message)
+  }
+
+  static is(json: unknown): json is InvalidRequestPayload {
+    return super.is(json) && json.error === 'invalid_request'
+  }
+}
+
+export type InvalidInviteCodePayload = InvalidRequestPayload & {
+  error_description: `This invite code is invalid.${string}`
+}
+export class InvalidInviteCodeError<
+  P extends InvalidInviteCodePayload = InvalidInviteCodePayload,
+> extends InvalidRequestError<P> {
+  constructor(payload: P) {
+    super(payload)
+  }
+
+  static is(json: unknown): json is InvalidInviteCodePayload {
+    return (
+      super.is(json) &&
+      json.error_description != null &&
+      json.error_description.startsWith('This invite code is invalid.')
+    )
+  }
+}
+
+export type RequestExpiredPayload = AccessDeniedPayload & {
+  error_description: 'This request has expired'
+}
+export class RequestExpiredError<
+  P extends RequestExpiredPayload = RequestExpiredPayload,
+> extends AccessDeniedError<P> {
+  static is(json: unknown): json is RequestExpiredPayload {
+    return (
+      super.is(json) && json.error_description === 'This request has expired'
+    )
+  }
+}
+
+export type InvalidCredentialsPayload = InvalidRequestPayload & {
+  error_description: 'Invalid identifier or password'
+}
+export class InvalidCredentialsError<
+  P extends InvalidCredentialsPayload = InvalidCredentialsPayload,
+> extends InvalidRequestError<P> {
+  static is(json: unknown): json is InvalidCredentialsPayload {
+    return (
+      super.is(json) &&
+      json.error_description === 'Invalid identifier or password'
+    )
+  }
+}
+
+export type UnknownRequestPayload = InvalidRequestPayload & {
+  error_description: 'Unknown request_uri'
+}
+export class UnknownRequestUriError<
+  P extends UnknownRequestPayload = UnknownRequestPayload,
+> extends InvalidRequestError<P> {
+  static is(json: unknown): json is UnknownRequestPayload {
+    return super.is(json) && json.error_description === 'Unknown request_uri'
+  }
+}
+export type EmailTakenPayload = InvalidRequestPayload & {
+  error_description: 'Email already taken'
+}
+export class EmailTakenError<
+  P extends EmailTakenPayload = EmailTakenPayload,
+> extends InvalidRequestError<P> {
+  static is(json: unknown): json is EmailTakenPayload {
+    return super.is(json) && json.error_description === 'Email already taken'
+  }
+}
+
+export type HandleUnavailablePayload =
+  JsonErrorPayload<'handle_unavailable'> & {
+    reason: 'syntax' | 'domain' | 'slur' | 'taken'
+  }
+export class HandleUnavailableError<
+  P extends HandleUnavailablePayload = HandleUnavailablePayload,
+> extends JsonErrorResponse<P> {
+  constructor(
+    payload: P,
+    message = payload.error_description || 'That handle cannot be used',
+  ) {
+    super(payload, message)
+  }
+
+  get reason() {
+    return this.payload.reason
+  }
+
+  static is(json: unknown): json is HandleUnavailablePayload {
+    return (
+      super.is(json) &&
+      json.error === 'handle_unavailable' &&
+      'reason' in json &&
+      (json.reason === 'syntax' ||
+        json.reason === 'domain' ||
+        json.reason === 'slur' ||
+        json.reason === 'taken')
+    )
+  }
+}
+
+export type SecondAuthenticationFactorRequiredPayload =
+  JsonErrorPayload<'second_authentication_factor_required'> & {
+    type: 'emailOtp'
+    hint: string
+  }
+export class SecondAuthenticationFactorRequiredError<
+  P extends
+    SecondAuthenticationFactorRequiredPayload = SecondAuthenticationFactorRequiredPayload,
+> extends JsonErrorResponse<P> {
+  constructor(
+    payload: P,
+    message = payload.error_description ||
+      `${payload.type} authentication factor required (hint: ${payload.hint})`,
+  ) {
+    super(payload, message)
+  }
+
+  get type() {
+    return this.payload.type
+  }
+  get hint() {
+    return this.payload.hint
+  }
+
+  static is(json: unknown): json is SecondAuthenticationFactorRequiredPayload {
+    return (
+      super.is(json) &&
+      json.error === 'second_authentication_factor_required' &&
+      'type' in json &&
+      json.type === 'emailOtp' &&
+      'hint' in json &&
+      typeof json.hint === 'string'
+    )
+  }
+}

package/src/lib/backend-data.ts

@@ -0,0 +1,6 @@
+export function readBackendData<T>(key: string): T {
+  const value = window[key] as T | undefined
+  delete window[key] // Prevent accidental usage / potential leaks to dependencies
+  if (value !== undefined) return value
+  throw new TypeError(`Backend data "${key}" is missing`)
+}

package/src/lib/clsx.ts

@@ -0,0 +1,6 @@
+type ClsxArg = string | false | undefined
+
+export function clsx(...args: [ClsxArg, ...ClsxArg[]]): string | undefined {
+  const filtered = args.filter(Boolean) as string[]
+  return filtered.length > 0 ? filtered.join(' ') : undefined
+}

package/src/lib/json-client.ts

@@ -0,0 +1,97 @@
+// Using a type import to avoid bundling this lib
+import type { Json } from '@atproto-labs/fetch'
+
+export { type Json }
+
+export type Options = {
+  signal?: AbortSignal
+}
+
+export type EndpointPath = `/${string}`
+export type EndpointDefinition = {
+  input: Json
+  output: Json | void
+}
+
+export class JsonClient<
+  Endpoints extends { [Path: EndpointPath]: EndpointDefinition },
+> {
+  constructor(
+    protected readonly baseUrl: string,
+    protected readonly csrfToken: string,
+  ) {}
+
+  public async fetch<Path extends EndpointPath & keyof Endpoints>(
+    path: Path,
+    payload: Endpoints[Path]['input'],
+    options?: Options,
+  ): Promise<Endpoints[Path]['output']> {
+    const response = await fetch(`${this.baseUrl}${path}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': this.csrfToken,
+      },
+      mode: 'same-origin',
+      body: JSON.stringify(payload),
+      signal: options?.signal,
+    })
+
+    if (response.status === 204) {
+      return undefined
+    }
+
+    return response.json().then((json: Json) => {
+      if (response.ok) return json as Endpoints[Path]['output']
+      else throw this.parseError(response, json)
+    })
+  }
+
+  protected parseError(response: Response, json: Json): Error {
+    const Class = this.constructor as typeof JsonClient
+    const error = Class.parseError(json)
+    if (error) return error
+
+    return new Error('Invalid JSON response', { cause: response })
+  }
+
+  public static parseError(json: unknown): undefined | JsonErrorResponse {
+    if (JsonErrorResponse.is(json)) {
+      return new JsonErrorResponse(json)
+    }
+  }
+}
+
+export type JsonErrorPayload<E extends string = string> = {
+  error: E
+  error_description?: string
+}
+
+export class JsonErrorResponse<
+  P extends JsonErrorPayload = JsonErrorPayload,
+> extends Error {
+  constructor(
+    public readonly payload: P,
+    message = payload.error_description,
+  ) {
+    super(message || `Error "${payload.error}"`)
+  }
+
+  get error(): string {
+    return this.payload.error
+  }
+
+  get description(): string | undefined {
+    return this.payload.error_description
+  }
+
+  static is(json: unknown): json is JsonErrorPayload {
+    return (
+      json != null &&
+      typeof json === 'object' &&
+      typeof json['error'] === 'string' &&
+      (json['error_description'] === undefined ||
+        typeof json['error_description'] === 'string')
+    )
+  }
+}

package/src/lib/password.ts

@@ -0,0 +1,98 @@
+export const MIN_PASSWORD_LENGTH = 8
+
+const EMOJI =
+  /(\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/
+const UPPER = /[A-Z]/
+const LOWER = /[a-z]/
+const DEC = /[0-9]/
+const SPECIAL = /[^a-zA-Z0-9]/
+
+export enum PasswordStrength {
+  weak = 1,
+  moderate = 2,
+  strong = 3,
+  extra = 4,
+}
+
+export function getPasswordStrength(pwd: string): PasswordStrength {
+  if (pwd.length < MIN_PASSWORD_LENGTH) {
+    return PasswordStrength.weak
+  }
+
+  // Very long passwords
+  if (pwd.length >= MIN_PASSWORD_LENGTH + 12) {
+    return PasswordStrength.extra
+  }
+
+  // Long passwords
+  if (pwd.length >= MIN_PASSWORD_LENGTH + 8) {
+    if (matches(pwd, [SPECIAL])) {
+      return PasswordStrength.extra
+    }
+    if (matches(pwd, [UPPER, LOWER, DEC], 2)) {
+      return PasswordStrength.extra
+    }
+    return PasswordStrength.strong
+  }
+
+  // Emojis make passwords strong
+  if (pwd.length >= MIN_PASSWORD_LENGTH) {
+    if (matches(pwd, [EMOJI])) {
+      return PasswordStrength.strong
+    }
+  }
+
+  // Pretty long passwords
+  if (pwd.length >= MIN_PASSWORD_LENGTH + 6) {
+    if (matches(pwd, [SPECIAL])) {
+      return PasswordStrength.strong
+    }
+    if (matches(pwd, [UPPER, LOWER, DEC], 2)) {
+      return PasswordStrength.strong
+    }
+    // Only 1 type of alpha-num characters
+    return PasswordStrength.moderate
+  }
+
+  // Longish password
+  if (pwd.length >= MIN_PASSWORD_LENGTH + 4) {
+    if (matches(pwd, [SPECIAL])) {
+      return PasswordStrength.moderate
+    }
+    if (matches(pwd, [UPPER, LOWER, DEC], 2)) {
+      return PasswordStrength.moderate
+    }
+
+    // Only 1 type of alpha-num characters
+    return PasswordStrength.weak
+  }
+
+  // Short password (8-11 characters)
+  if (pwd.length >= MIN_PASSWORD_LENGTH) {
+    if (matches(pwd, [SPECIAL])) {
+      return PasswordStrength.moderate
+    }
+    if (matches(pwd, [UPPER, LOWER, DEC])) {
+      return PasswordStrength.moderate
+    }
+  }
+
+  return PasswordStrength.weak
+}
+
+function matches(
+  pwd: string,
+  regexps: RegExp[],
+  regexpsCountToMatch: number = regexps.length,
+): boolean {
+  if (regexpsCountToMatch < 1 || regexpsCountToMatch > regexps.length) {
+    throw new TypeError('Invalid regexpsCountToMatch')
+  }
+  for (const regexp of regexps) {
+    if (regexp.test(pwd)) {
+      regexpsCountToMatch--
+      if (regexpsCountToMatch === 0) return true
+    }
+  }
+  return false
+}

package/src/lib/ref.ts

@@ -0,0 +1,17 @@
+import { ForwardedRef } from 'react'
+
+export function updateRef<T>(ref: ForwardedRef<T>, value: T | null) {
+  if (typeof ref === 'function') {
+    ref(value)
+  } else if (ref) {
+    ref.current = value
+  }
+}
+
+export function mergeRefs<T>(refs: readonly (ForwardedRef<T> | undefined)[]) {
+  return (value: T | null) => {
+    for (const ref of refs) {
+      if (ref) updateRef(ref, value)
+    }
+  }
+}

package/src/lib/util.ts

@@ -0,0 +1,13 @@
+export function upsert<T>(
+  arr: readonly T[],
+  item: T,
+  predicate: (value: T, index: number, obj: readonly T[]) => boolean,
+): T[] {
+  const idx = arr.findIndex(predicate)
+  return idx === -1
+    ? [...arr, item]
+    : [...arr.slice(0, idx), item, ...arr.slice(idx + 1)]
+}
+
+export type Simplify<T> = { [K in keyof T]: T[K] } & NonNullable<unknown>
+export type Override<T, U> = Simplify<Omit<T, keyof U> & U>