@atproto/oauth-provider 0.5.1 → 0.6.0

package/src/lib/util/type.ts

@@ -9,6 +9,24 @@ export type Override<T, V> = Simplify<{
 }>
 export type Awaitable<T> = T | Promise<T>
 
+/**
+ * Converts a tuple to the equivalent type of combining every item into a single
+ * one. If any of the item in the tuple is non nullish, the result will be non
+ * nullish.
+ */
+export type CombinedTuple<T extends readonly unknown[]> = T extends []
+  ? undefined
+  : Exclude<
+      T[number],
+      // If any item in the tuple is never `null` (resp. `undefined`), exclude
+      // `null` (resp. `undefined`) from `T[number]`
+      {
+        [K in keyof T]-?:
+          | (null extends T[K] ? never : null)
+          | (undefined extends T[K] ? never : undefined)
+      }[keyof T]
+    >
+
 /**
  * Similar to {@link Required} but also ensures that all values are defined.
  */

package/src/oauth-errors.ts

@@ -12,6 +12,7 @@ export { InvalidClientMetadataError } from './errors/invalid-client-metadata-err
 export { InvalidDpopKeyBindingError } from './errors/invalid-dpop-key-binding-error.js'
 export { InvalidDpopProofError } from './errors/invalid-dpop-proof-error.js'
 export { InvalidGrantError } from './errors/invalid-grant-error.js'
+export { InvalidInviteCodeError } from './errors/invalid-invite-code-error.js'
 export { InvalidParametersError } from './errors/invalid-parameters-error.js'
 export { InvalidRedirectUriError } from './errors/invalid-redirect-uri-error.js'
 export { InvalidRequestError } from './errors/invalid-request-error.js'

package/src/oauth-hooks.ts

@@ -7,7 +7,7 @@ import {
 } from '@atproto/oauth-types'
 import { Account } from './account/account.js'
 import { SignInData } from './account/sign-in-data.js'
-import { SignUpData } from './account/sign-up-data.js'
+import { SignUpInput } from './account/sign-up-input.js'
 import { ClientAuth } from './client/client-auth.js'
 import { ClientId } from './client/client-id.js'
 import { ClientInfo } from './client/client-info.js'
@@ -17,7 +17,7 @@ import { HcaptchaConfig, HcaptchaVerifyResult } from './lib/hcaptcha.js'
 import { RequestMetadata } from './lib/http/request.js'
 import { Awaitable } from './lib/util/type.js'
 import { AccessDeniedError, OAuthError } from './oauth-errors.js'
-import { DeviceAccountInfo, DeviceId } from './oauth-store.js'
+import { DeviceAccountInfo, DeviceId, SignUpData } from './oauth-store.js'
 
 // Make sure all types needed to implement the OAuthHooks are exported
 export {
@@ -42,6 +42,7 @@ export {
   type RequestMetadata,
   type SignInData,
   type SignUpData,
+  type SignUpInput,
 }
 
 export type OAuthHooks = {
@@ -71,36 +72,14 @@ export type OAuthHooks = {
     account: Account
   }) => Awaitable<undefined | OAuthAuthorizationDetails>
 
-  /**
-   * This hook is called whenever an hcaptcha challenge is verified
-   * during sign-up (if hcaptcha is enabled).
-   *
-   * @throws {InvalidRequestError} to deny the sign-up
-   */
-  onSignupHcaptchaResult?: (data: {
-    data: SignUpData
-    /**
-     * This indicates not only wether the hCaptcha challenge succeeded, but also
-     * if the score was low enough according to the
-     * {@link HcaptchaConfig.scoreThreshold}.
-     *
-     * @see {@link HCaptchaClient.isAllowed}
-     */
-    allowed: boolean
-    result: HcaptchaVerifyResult
-    deviceId: DeviceId
-    deviceMetadata: RequestMetadata
-  }) => Awaitable<void>
-
   /**
    * This hook is called when a user attempts to sign up, after every validation
    * has passed (including hcaptcha).
    */
   onSignupAttempt?: (data: {
-    data: SignUpData
+    input: SignUpInput
     deviceId: DeviceId
     deviceMetadata: RequestMetadata
-    hcaptchaResult?: HcaptchaVerifyResult
   }) => Awaitable<void>
 
   /**

package/src/oauth-provider.ts

@@ -45,7 +45,7 @@ import {
 } from './account/account-store.js'
 import { Account } from './account/account.js'
 import { signInDataSchema } from './account/sign-in-data.js'
-import { signUpDataSchema } from './account/sign-up-data.js'
+import { signUpInputSchema } from './account/sign-up-input.js'
 import { authorizeAssetsMiddleware } from './assets/assets-middleware.js'
 import { ClientAuth, authJwkThumbprint } from './client/client-auth.js'
 import {
@@ -1145,28 +1145,27 @@ export class OAuthProvider extends OAuthVerifier {
      * Wrap an OAuth endpoint in a middleware that will set the appropriate
      * response headers and format the response as JSON.
      */
-    const jsonHandler = <T, TReq extends Req, TRes extends Res, Json>(
-      buildJson: (this: T, req: TReq, res: TRes) => Awaitable<Json>,
-      status?: number,
+    const jsonHandler = <T, TReq extends Req, TRes extends Res, Payload>(
+      buildJson: (
+        this: T,
+        req: TReq,
+        res: TRes,
+      ) => Awaitable<{ payload: Payload; status?: number }>,
     ): Handler<T, TReq, TRes> =>
       async function (req, res) {
-        try {
-          // https://www.rfc-editor.org/rfc/rfc6749.html#section-5.1
-          res.setHeader('Cache-Control', 'no-store')
-          res.setHeader('Pragma', 'no-cache')
-
-          // Ensure we can agree on a content encoding & type before starting to
-          // build the JSON response.
-          if (!negotiateContent(req, ['application/json'])) {
-            throw createHttpError(406, 'Unsupported media type')
-          }
+        // https://www.rfc-editor.org/rfc/rfc6749.html#section-5.1
+        res.setHeader('Cache-Control', 'no-store')
+        res.setHeader('Pragma', 'no-cache')
+
+        // Ensure we can agree on a content encoding & type before starting to
+        // build the JSON response.
+        if (!negotiateContent(req, ['application/json'])) {
+          throw createHttpError(406, 'Unsupported media type')
+        }
 
-          const result = await buildJson.call(this, req, res)
-          if (result !== undefined) {
-            writeJson(res, result, { status })
-          } else if (!res.headersSent) {
-            res.writeHead(status ?? 204).end()
-          }
+        try {
+          const { payload, status = 200 } = await buildJson.call(this, req, res)
+          writeJson(res, payload, { status })
         } catch (err) {
           onError?.(req, res, err, 'OAuth request error')
 
@@ -1180,13 +1179,13 @@ export class OAuthProvider extends OAuthVerifier {
         }
       }
 
-    const oauthHandler = <T, TReq extends Req, TRes extends Res, Json>(
-      buildOAuthResponse: (this: T, req: TReq, res: TRes) => Awaitable<Json>,
+    const oauthHandler = <T, TReq extends Req, TRes extends Res, Payload>(
+      buildOAuthResponse: (this: T, req: TReq, res: TRes) => Awaitable<Payload>,
       status?: number,
     ) =>
       combineMiddlewares([
         corsHeaders,
-        jsonHandler<T, TReq, TRes, Json>(async function (req, res) {
+        jsonHandler<T, TReq, TRes, Payload>(async function (req, res) {
           try {
             // https://datatracker.ietf.org/doc/html/rfc9449#section-8.2
             const dpopNonce = server.nextDpopNonce()
@@ -1196,7 +1195,8 @@ export class OAuthProvider extends OAuthVerifier {
               res.appendHeader('Access-Control-Expose-Headers', name)
             }
 
-            return await buildOAuthResponse.call(this, req, res)
+            const payload = await buildOAuthResponse.call(this, req, res)
+            return { payload, status }
           } catch (err) {
             if (!res.headersSent && err instanceof WWWAuthenticateError) {
               const name = 'WWW-Authenticate'
@@ -1206,7 +1206,7 @@ export class OAuthProvider extends OAuthVerifier {
 
             throw err
           }
-        }, status),
+        }),
       ])
 
     const apiHandler = <
@@ -1214,7 +1214,7 @@ export class OAuthProvider extends OAuthVerifier {
       TReq extends Req,
       TRes extends Res,
       S extends z.ZodTypeAny,
-      Json,
+      Payload,
     >(
       inputSchema: S,
       buildJson: (
@@ -1223,10 +1223,10 @@ export class OAuthProvider extends OAuthVerifier {
         res: TRes,
         input: z.infer<S>,
         context: ApiContext,
-      ) => Json | Promise<Json>,
+      ) => Awaitable<Payload>,
       status?: number,
     ) =>
-      jsonHandler<T, TReq, TRes, Json>(async function (req, res) {
+      jsonHandler<T, TReq, TRes, Payload>(async function (req, res) {
         validateFetchMode(req, res, ['same-origin'])
         validateFetchSite(req, res, ['same-origin'])
         validateSameOrigin(req, res, issuerOrigin)
@@ -1252,12 +1252,13 @@ export class OAuthProvider extends OAuthVerifier {
           res,
         )
 
-        const payload = await parseHttpRequest(req, ['json'])
-        const input = await inputSchema.parseAsync(payload, { path: ['body'] })
+        const inputRaw = await parseHttpRequest(req, ['json'])
+        const input = await inputSchema.parseAsync(inputRaw, { path: ['body'] })
 
         const context: ApiContext = { requestUri, deviceId, deviceMetadata }
-        return buildJson.call(this, req, res, input, context)
-      }, status)
+        const payload = await buildJson.call(this, req, res, input, context)
+        return { payload, status }
+      })
 
     const navigationHandler = <T, TReq extends Req, TRes extends Res>(
       handler: (this: T, req: TReq, res: TRes) => Awaitable<void>,
@@ -1478,6 +1479,8 @@ export class OAuthProvider extends OAuthVerifier {
         } catch (err) {
           onError?.(req, res, err, 'Failed to revoke token')
         }
+
+        return {}
       }),
     )
     router.get(
@@ -1577,14 +1580,15 @@ export class OAuthProvider extends OAuthVerifier {
       apiHandler(
         z.object({ handle: handleSchema }).strict(),
         async function (req, res, data) {
-          return server.accountManager.verifyHandleAvailability(data.handle)
+          await server.accountManager.verifyHandleAvailability(data.handle)
+          return { available: true }
         },
       ),
     )
 
     router.post(
       '/oauth/authorize/sign-up',
-      apiHandler(signUpDataSchema, async function (req, res, data, ctx) {
+      apiHandler(signUpInputSchema, async function (req, res, data, ctx) {
         return server.signUp(ctx, data)
       }),
     )
@@ -1602,6 +1606,7 @@ export class OAuthProvider extends OAuthVerifier {
         resetPasswordRequestDataSchema,
         async function (req, res, data) {
           await server.accountManager.resetPasswordRequest(data)
+          return { success: true }
         },
       ),
     )
@@ -1612,6 +1617,7 @@ export class OAuthProvider extends OAuthVerifier {
         resetPasswordConfirmDataSchema,
         async function (req, res, data) {
           await server.accountManager.resetPasswordConfirm(data)
+          return { success: true }
         },
       ),
     )

package/src/output/backend-data.ts

@@ -0,0 +1,18 @@
+import { Html, js } from '../lib/html/index.js'
+
+export function declareBackendData(values: Record<string, unknown>): Html {
+  return Html.dangerouslyCreate(backendDataGenerator(values))
+}
+
+export function* backendDataGenerator(
+  values: Record<string, unknown>,
+): Generator<Html> {
+  for (const [key, val] of Object.entries(values)) {
+    yield js`window[${key}]=${val};`
+  }
+  // The script tag is removed after the data is assigned to the global
+  // variables to prevent other scripts from reading the values. The "app"
+  // script will read the global variable and then unset it. See
+  // `readBackendData()` in "src/assets/app/backend-data.ts".
+  yield js`document.currentScript.remove();`
+}

package/src/output/build-authorize-data.ts

@@ -1,7 +1,5 @@
-import {
-  OAuthAuthorizationRequestParameters,
-  OAuthClientMetadata,
-} from '@atproto/oauth-types'
+import type { AuthorizeData, Session } from '@atproto/oauth-provider-api'
+import { OAuthAuthorizationRequestParameters } from '@atproto/oauth-types'
 import { DeviceAccountInfo } from '../account/account-store.js'
 import { Account } from '../account/account.js'
 import { Client } from '../client/client.js'
@@ -30,28 +28,7 @@ export type AuthorizationResultAuthorize = {
   }
 }
 
-// TODO: find a way to share this type with the frontend code
-// (app/backend-types.ts)
-
-type Session = {
-  account: Account
-  info?: never // Prevent accidental leaks to frontend
-
-  selected: boolean
-  loginRequired: boolean
-  consentRequired: boolean
-}
-
-export type AuthorizeData = {
-  clientId: string
-  clientMetadata: OAuthClientMetadata
-  clientTrusted: boolean
-  requestUri: string
-  loginHint?: string
-  scopeDetails?: ScopeDetail[]
-  newSessionsRequireConsent: boolean
-  sessions: Session[]
-}
+export type { AuthorizeData, Session }
 
 export function buildAuthorizeData(
   data: AuthorizationResultAuthorize,

package/src/output/build-customization-data.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod'
+import { CustomizationData } from '@atproto/oauth-provider-api'
 import { hcaptchaConfigSchema } from '../lib/hcaptcha.js'
 import { isLinkRel } from '../lib/html/build-document.js'
 import { multiLangStringSchema } from '../lib/locale.js'
@@ -59,7 +60,7 @@ export const brandingConfigSchema = z.object({
   name: z.string().optional(),
   logo: z.string().optional(),
   colors: colorsDefinitionSchema.optional(),
-  links: z.array(linkDefinitionSchema).readonly().optional(),
+  links: z.array(linkDefinitionSchema).optional(),
 })
 export type BrandingInput = z.input<typeof brandingConfigSchema>
 export type Branding = z.infer<typeof brandingConfigSchema>
@@ -86,18 +87,6 @@ export const customizationSchema = z.object({
 export type CustomizationInput = z.input<typeof customizationSchema>
 export type Customization = z.infer<typeof customizationSchema>
 
-export type CustomizationData = {
-  // Functional customization
-  hcaptchaSiteKey?: string
-  inviteCodeRequired?: boolean
-  availableUserDomains?: string[]
-
-  // Aesthetic customization
-  name?: string
-  logo?: string
-  links?: readonly LinkDefinition[]
-}
-
 export function buildCustomizationData({
   branding,
   availableUserDomains,

package/src/output/build-error-data.ts

@@ -0,0 +1,8 @@
+import { ErrorData } from '@atproto/oauth-provider-api'
+import { buildErrorPayload } from './build-error-payload.js'
+
+// @NOTE: The primary role of this function is to ensure that the ErrorPayload
+// and ErrorData types are in sync.
+export function buildErrorData(error: unknown): ErrorData {
+  return buildErrorPayload(error)
+}

package/src/output/build-error-payload.ts

@@ -50,10 +50,12 @@ export function buildErrorStatus(error: unknown): number {
   return 500
 }
 
-export function buildErrorPayload(error: unknown): {
+export type ErrorPayload = {
   error: string
   error_description: string
-} {
+}
+
+export function buildErrorPayload(error: unknown): ErrorPayload {
   if (error instanceof OAuthError) {
     return error.toJSON()
   }

package/src/output/output-manager.ts

@@ -1,8 +1,10 @@
 import type { ServerResponse } from 'node:http'
-import { Asset } from '../assets/asset.js'
-import { enumerateAssets } from '../assets/index.js'
+import { CustomizationData } from '@atproto/oauth-provider-api'
+import { assets } from '@atproto/oauth-provider-ui'
+import { buildAssetUrl } from '../assets/assets-middleware.js'
 import { CspConfig, mergeCsp } from '../lib/csp/index.js'
 import {
+  AssetRef,
   Html,
   LinkAttrs,
   MetaAttrs,
@@ -10,7 +12,9 @@ import {
   html,
   isLinkRel,
 } from '../lib/html/index.js'
+import { CrossOriginEmbedderPolicy } from '../lib/http/security-headers.js'
 import { AVAILABLE_LOCALES, Locale, isAvailableLocale } from '../lib/locale.js'
+import { declareBackendData } from './backend-data.js'
 import {
   AuthorizationResultAuthorize,
   buildAuthorizeData,
@@ -21,15 +25,28 @@ import {
   buildCustomizationCss,
   buildCustomizationData,
 } from './build-customization-data.js'
-import { buildErrorPayload, buildErrorStatus } from './build-error-payload.js'
-import { assetToCsp, declareBackendData, sendWebPage } from './send-web-page.js'
+import { buildErrorData } from './build-error-data.js'
+import { buildErrorStatus } from './build-error-payload.js'
+import { sendWebPage } from './send-web-page.js'
+
+const BASE_CSP: CspConfig = {
+  // API calls are made to the same origin
+  'connect-src': ["'self'"],
+  // Allow loading of PDS logo & User avatars
+  'img-src': ['data:', 'https:'],
+  // Prevent embedding in iframes
+  'frame-ancestors': ["'none'"],
+}
 
-const HCAPTCHA_CSP = {
+/**
+ * @see {@link https://docs.hcaptcha.com/#content-security-policy-settings}
+ */
+const HCAPTCHA_CSP: CspConfig = {
   'script-src': ['https://hcaptcha.com', 'https://*.hcaptcha.com'],
   'frame-src': ['https://hcaptcha.com', 'https://*.hcaptcha.com'],
   'style-src': ['https://hcaptcha.com', 'https://*.hcaptcha.com'],
   'connect-src': ['https://hcaptcha.com', 'https://*.hcaptcha.com'],
-} as const satisfies CspConfig
+}
 
 export type SendPageOptions = {
   preferredLocales?: readonly string[]
@@ -41,43 +58,57 @@ export class OutputManager {
     { name: 'robots', content: 'noindex' },
     { name: 'description', content: 'ATProto OAuth authorization page' },
   ]
-  readonly scripts: readonly (Asset | Html)[]
-  readonly styles: readonly (Asset | Html)[]
   readonly csp: CspConfig
+  readonly coep: CrossOriginEmbedderPolicy
+  readonly customizationData: CustomizationData
+  readonly customizationCss: Html
 
   constructor(customization: Customization) {
     this.links = customization.branding?.links
 
-    const scripts = Array.from(enumerateAssets('application/javascript'))
-    const styles = Array.from(enumerateAssets('text/css'))
-
-    // Note: building scripts/styles/csp here for two reasons:
-    // 1. To avoid re-building it on every request
-    // 2. To throw during init if the customization/config is invalid
-
-    this.scripts = [
-      declareBackendData('__availableLocales', AVAILABLE_LOCALES),
-      declareBackendData(
-        '__customizationData',
-        buildCustomizationData(customization),
-      ),
-      // Last (to be able to read the "backend data" variables)
-      ...scripts.filter((asset) => asset.isEntry),
-    ]
-
-    this.styles = [
-      // First (to be overridden by customization)
-      ...styles,
-      cssCode(buildCustomizationCss(customization)),
-    ]
-
-    const customizationCsp = customization?.hcaptcha ? HCAPTCHA_CSP : undefined
-    const assetsCsp: CspConfig = {
-      'script-src': scripts.map(assetToCsp),
-      'style-src': styles.map(assetToCsp),
-    }
+    // "cache" these:
+    this.customizationData = buildCustomizationData(customization)
+    this.customizationCss = cssCode(buildCustomizationCss(customization))
 
-    this.csp = mergeCsp(customizationCsp, assetsCsp)
+    this.csp = mergeCsp(
+      BASE_CSP,
+      customization?.hcaptcha ? HCAPTCHA_CSP : undefined,
+    )
+    // Because we are loading avatar images from external sources, that might
+    // not have CORP headers set, we need to use at least "credentialless".
+    this.coep = customization?.hcaptcha
+      ? // https://github.com/hCaptcha/react-hcaptcha/issues/259
+        // @TODO Remove the use of `unsafeNone` once the issue above is resolved
+        CrossOriginEmbedderPolicy.unsafeNone
+      : CrossOriginEmbedderPolicy.credentialless
+  }
+
+  buildAssets(
+    name: string,
+    backendData: Record<string, unknown>,
+  ): {
+    scripts: (AssetRef | Html)[]
+    styles: (AssetRef | Html)[]
+  } {
+    return {
+      scripts: [
+        declareBackendData(backendData),
+        // After backend injected data
+        ...Array.from(assets)
+          .filter(
+            ([, item]) =>
+              item.type === 'chunk' && item.isEntry && item.name === name,
+          )
+          .map(([filename]) => ({ url: buildAssetUrl(filename) })),
+      ],
+      styles: [
+        ...Array.from(assets)
+          .filter(([, item]) => item.mime === 'text/css')
+          .map(([filename]) => ({ url: buildAssetUrl(filename) })),
+        // Last (to be able to override the default styles)
+        this.customizationCss,
+      ],
+    }
   }
 
   async sendAuthorizePage(
@@ -89,17 +120,21 @@ export class OutputManager {
       data.parameters.ui_locales?.split(' ') ?? options?.preferredLocales,
     )
 
+    const { scripts, styles } = this.buildAssets('authorization-page', {
+      __availableLocales: AVAILABLE_LOCALES,
+      __customizationData: this.customizationData,
+      __authorizeData: buildAuthorizeData(data),
+    })
+
     return sendWebPage(res, {
-      scripts: [
-        declareBackendData('__authorizeData', buildAuthorizeData(data)),
-        ...this.scripts,
-      ],
-      styles: this.styles,
+      scripts,
+      styles,
       meta: this.meta,
       links: this.buildLinks(locale),
       htmlAttrs: { lang: locale },
       body: html`<div id="root"></div>`,
       csp: this.csp,
+      coep: this.coep,
     })
   }
 
@@ -110,18 +145,22 @@ export class OutputManager {
   ): Promise<void> {
     const locale = negotiateLocale(options?.preferredLocales)
 
+    const { scripts, styles } = this.buildAssets('error-page', {
+      __availableLocales: AVAILABLE_LOCALES,
+      __customizationData: this.customizationData,
+      __errorData: buildErrorData(err),
+    })
+
     return sendWebPage(res, {
       status: buildErrorStatus(err),
-      scripts: [
-        declareBackendData('__errorData', buildErrorPayload(err)),
-        ...this.scripts,
-      ],
-      styles: this.styles,
+      scripts,
+      styles,
       meta: this.meta,
       links: this.buildLinks(locale),
       htmlAttrs: { lang: locale },
       body: html`<div id="root"></div>`,
       csp: this.csp,
+      coep: this.coep,
     })
   }