@atproto/oauth-provider 0.6.6 → 0.7.1

package/src/oauth-verifier.ts

@@ -6,7 +6,6 @@ import {
   OAuthTokenType,
   oauthIssuerIdentifierSchema,
 } from '@atproto/oauth-types'
-import { AccessTokenType } from './access-token/access-token-type.js'
 import { DpopManager, DpopManagerOptions } from './dpop/dpop-manager.js'
 import { DpopNonce } from './dpop/dpop-nonce.js'
 import { InvalidDpopProofError } from './errors/invalid-dpop-proof-error.js'
@@ -40,24 +39,6 @@ export type OAuthVerifierOptions = Override<
      */
     keyset: Keyset | Iterable<Key | undefined | null | false>
 
-    /**
-     * If set to {@link AccessTokenType.jwt}, the provider will use JWTs for
-     * access tokens. If set to {@link AccessTokenType.id}, the provider will
-     * use tokenId as access tokens. If set to {@link AccessTokenType.auto},
-     * JWTs will only be used if the audience is different from the issuer.
-     * Defaults to {@link AccessTokenType.jwt}.
-     *
-     * Here is a comparison of the two types:
-     *
-     * - pro id: less CPU intensive (no crypto operations)
-     * - pro id: less bandwidth (shorter tokens than jwt)
-     * - pro id: token data is in sync with database (e.g. revocation)
-     * - pro jwt: stateless: no I/O needed (no db lookups through token store)
-     * - pro jwt: stateless: allows Resource Server to be on a different
-     *   host/server
-     */
-    accessTokenType?: AccessTokenType
-
     /**
      * A redis instance to use for replay protection. If not provided, replay
      * protection will use memory storage.
@@ -68,22 +49,16 @@ export type OAuthVerifierOptions = Override<
   }
 >
 
-export {
-  AccessTokenType,
-  DpopNonce,
-  Keyset,
-  type ReplayStore,
-  type VerifyTokenClaimsOptions,
-}
+export { DpopNonce, Key, Keyset }
+export type { RedisOptions, ReplayStore, VerifyTokenClaimsOptions }
 
 export class OAuthVerifier {
   public readonly issuer: OAuthIssuerIdentifier
   public readonly keyset: Keyset
 
-  protected readonly accessTokenType: AccessTokenType
-  protected readonly dpopManager: DpopManager
-  protected readonly replayManager: ReplayManager
-  protected readonly signer: Signer
+  public readonly dpopManager: DpopManager
+  public readonly replayManager: ReplayManager
+  public readonly signer: Signer
 
   constructor({
     redis,
@@ -92,7 +67,6 @@ export class OAuthVerifier {
     replayStore = redis != null
       ? new ReplayStoreRedis({ redis })
       : new ReplayStoreMemory(),
-    accessTokenType = AccessTokenType.jwt,
 
     ...rest
   }: OAuthVerifierOptions) {
@@ -101,7 +75,7 @@ export class OAuthVerifier {
     const issuerParsed = oauthIssuerIdentifierSchema.parse(issuer)
     const issuerUrl = new URL(issuerParsed)
 
-    // TODO (?) support issuer with path
+    // @TODO (?) support issuer with path
     if (issuerUrl.pathname !== '/') {
       throw new TypeError(
         `"issuer" must be an URL with no path, search or hash (${issuerUrl})`,
@@ -111,7 +85,6 @@ export class OAuthVerifier {
     this.issuer = issuerParsed
     this.keyset = keyset instanceof Keyset ? keyset : new Keyset(keyset)
 
-    this.accessTokenType = accessTokenType
     this.dpopManager = new DpopManager(dpopMgrOptions)
     this.replayManager = new ReplayManager(replayStore)
     this.signer = new Signer(this.issuer, this.keyset)
@@ -142,19 +115,7 @@ export class OAuthVerifier {
     return jkt
   }
 
-  protected assertTokenTypeAllowed(
-    tokenType: OAuthTokenType,
-    accessTokenType: AccessTokenType,
-  ) {
-    if (
-      this.accessTokenType !== AccessTokenType.auto &&
-      this.accessTokenType !== accessTokenType
-    ) {
-      throw new InvalidTokenError(tokenType, `Invalid token type`)
-    }
-  }
-
-  protected async authenticateToken(
+  protected async verifyToken(
     tokenType: OAuthTokenType,
     token: OAuthAccessToken,
     dpopJkt: string | null,
@@ -164,8 +125,6 @@ export class OAuthVerifier {
       throw new InvalidTokenError(tokenType, `Malformed token`)
     }
 
-    this.assertTokenTypeAllowed(tokenType, AccessTokenType.jwt)
-
     const { payload } = await this.signer
       .verifyAccessToken(token)
       .catch((err) => {
@@ -190,7 +149,7 @@ export class OAuthVerifier {
       dpop?: unknown
     },
     verifyOptions?: VerifyTokenClaimsOptions,
-  ): Promise<VerifyTokenClaimsResult> {
+  ) {
     const [tokenType, token] = parseAuthorizationHeader(headers.authorization)
     try {
       const dpopJkt = await this.checkDpopProof(
@@ -204,12 +163,7 @@ export class OAuthVerifier {
         throw new InvalidDpopProofError(`DPoP proof required`)
       }
 
-      return await this.authenticateToken(
-        tokenType,
-        token,
-        dpopJkt,
-        verifyOptions,
-      )
+      return await this.verifyToken(tokenType, token, dpopJkt, verifyOptions)
     } catch (err) {
       if (err instanceof UseDpopNonceError) throw err.toWwwAuthenticateError()
       if (err instanceof WWWAuthenticateError) throw err

package/src/request/request-data.ts

@@ -2,6 +2,7 @@ import { OAuthAuthorizationRequestParameters } from '@atproto/oauth-types'
 import { ClientAuth } from '../client/client-auth.js'
 import { ClientId } from '../client/client-id.js'
 import { DeviceId } from '../device/device-id.js'
+import { NonNullableKeys } from '../lib/util/type.js'
 import { Sub } from '../oidc/sub.js'
 import { Code } from './code.js'
 
@@ -15,10 +16,10 @@ export type RequestData = {
   code: Code | null
 }
 
-export type RequestDataAuthorized = RequestData & {
-  sub: Sub
-  deviceId: DeviceId
-}
+export type RequestDataAuthorized = NonNullableKeys<
+  RequestData,
+  'sub' | 'deviceId'
+>
 
 export const isRequestDataAuthorized = (
   data: RequestData,

package/src/request/request-manager.ts

@@ -1,9 +1,9 @@
+import type { Account } from '@atproto/oauth-provider-api'
 import {
   CLIENT_ASSERTION_TYPE_JWT_BEARER,
   OAuthAuthorizationRequestParameters,
   OAuthAuthorizationServerMetadata,
 } from '@atproto/oauth-types'
-import { Account } from '../account/account.js'
 import { ClientAuth } from '../client/client-auth.js'
 import { ClientId } from '../client/client-id.js'
 import { Client } from '../client/client.js'
@@ -132,7 +132,7 @@ export class RequestManager {
       throw new AccessDeniedError(
         parameters,
         `Unsupported grant_type "authorization_code"`,
-        'unsupported_grant_type',
+        'invalid_request',
       )
     }
 
@@ -377,9 +377,9 @@ export class RequestManager {
     deviceId: DeviceId,
     deviceMetadata: RequestMetadata,
   ): Promise<Code> {
-    const id = decodeRequestUri(uri)
+    const requestId = decodeRequestUri(uri)
 
-    const data = await this.store.readRequest(id)
+    const data = await this.store.readRequest(requestId)
     if (!data) throw new InvalidRequestError('Unknown request_uri')
 
     try {
@@ -409,7 +409,7 @@ export class RequestManager {
       const code = await generateCode()
 
       // Bind the request to the account, preventing it from being used again.
-      await this.store.updateRequest(id, {
+      await this.store.updateRequest(requestId, {
         sub: account.sub,
         code,
         // Allow the client to exchange the code for a token within the next 60 seconds.
@@ -422,11 +422,12 @@ export class RequestManager {
         parameters: data.parameters,
         deviceId,
         deviceMetadata,
+        requestId,
       })
 
       return code
     } catch (err) {
-      await this.store.deleteRequest(id)
+      await this.store.deleteRequest(requestId)
       throw err
     }
   }
@@ -439,13 +440,12 @@ export class RequestManager {
     client: Client,
     clientAuth: ClientAuth,
     code: Code,
-  ): Promise<RequestDataAuthorized> {
+  ): Promise<RequestDataAuthorized & { requestUri: RequestUri }> {
     const result = await this.store.findRequestByCode(code)
     if (!result) throw new InvalidGrantError('Invalid code')
 
+    const { id, data } = result
     try {
-      const { data } = result
-
       if (!isRequestDataAuthorized(data)) {
         // Should never happen: maybe the store implementation is faulty ?
         throw new Error('Unexpected request state')
@@ -478,10 +478,10 @@ export class RequestManager {
         }
       }
 
-      return data
+      return { ...data, requestUri: encodeRequestUri(id) }
     } finally {
       // A "code" can only be used once
-      await this.store.deleteRequest(result.id)
+      await this.store.deleteRequest(id)
     }
   }
 

package/src/request/request-store.ts

@@ -1,3 +1,4 @@
+import { InvalidGrantError } from '../errors/invalid-grant-error.js'
 import { Awaitable, buildInterfaceChecker } from '../lib/util/type.js'
 import { Code } from './code.js'
 import { RequestData } from './request-data.js'
@@ -19,6 +20,8 @@ export type FoundRequestResult = {
   data: RequestData
 }
 
+export { InvalidGrantError }
+
 export interface RequestStore {
   createRequest(id: RequestId, data: RequestData): Awaitable<void>
   /**
@@ -28,6 +31,10 @@ export interface RequestStore {
   readRequest(id: RequestId): Awaitable<RequestData | null>
   updateRequest(id: RequestId, data: UpdateRequestData): Awaitable<void>
   deleteRequest(id: RequestId): void | Awaitable<void>
+  /**
+   * @throws {InvalidGrantError} - When the request is not found or has expired
+   * (allows to provide an error message instead of returning `null`).
+   */
   findRequestByCode(code: Code): Awaitable<FoundRequestResult | null>
 }
 

package/src/result/authorization-redirect-parameters.ts

@@ -0,0 +1,24 @@
+import { OAuthTokenType } from '@atproto/oauth-types'
+import { Code } from '../request/code.js'
+
+/**
+ * @note `iss` and `state` will be added from the
+ * {@link AuthorizationResultRedirect} object.
+ */
+export type AuthorizationRedirectParameters =
+  | {
+      // iss: string
+      // state?: string
+      code: Code
+      id_token?: string
+      access_token?: string
+      token_type?: OAuthTokenType
+      expires_in?: string
+    }
+  | {
+      // iss: string
+      // state?: string
+      error: string
+      error_description?: string
+      error_uri?: string
+    }

package/src/result/authorization-result-authorize-page.ts

@@ -0,0 +1,14 @@
+import type { ScopeDetail, Session } from '@atproto/oauth-provider-api'
+import { OAuthAuthorizationRequestParameters } from '@atproto/oauth-types'
+import { Client } from '../client/client.js'
+import { RequestUri } from '../request/request-uri.js'
+
+export type AuthorizationResultAuthorizePage = {
+  issuer: string
+  client: Client
+  parameters: OAuthAuthorizationRequestParameters
+
+  uri: RequestUri
+  scopeDetails?: ScopeDetail[]
+  sessions: readonly Session[]
+}

package/src/result/authorization-result-redirect.ts

@@ -0,0 +1,8 @@
+import { OAuthAuthorizationRequestParameters } from '@atproto/oauth-types'
+import { AuthorizationRedirectParameters } from './authorization-redirect-parameters.js'
+
+export type AuthorizationResultRedirect = {
+  issuer: string
+  parameters: OAuthAuthorizationRequestParameters
+  redirect: AuthorizationRedirectParameters
+}

package/src/router/assets/assets-manifest.ts

@@ -0,0 +1,115 @@
+import { createReadStream } from 'node:fs'
+import { join } from 'node:path'
+import { Readable } from 'node:stream'
+import type { Manifest } from '@atproto-labs/rollup-plugin-bundle-manifest'
+import { AssetRef } from '../../lib/html/build-document.js'
+import {
+  Middleware,
+  validateFetchDest,
+  validateFetchSite,
+  writeStream,
+} from '../../lib/http/index.js'
+
+type Asset =
+  | {
+      type: 'asset'
+      mime?: string
+      sha256: string
+      stream: () => Readable
+    }
+  | {
+      type: 'chunk'
+      mime: string
+      sha256: string
+      dynamicImports: string[]
+      isDynamicEntry: boolean
+      isEntry: boolean
+      isImplicitEntry: boolean
+      name: string
+      stream: () => Readable
+    }
+
+const ASSETS_URL_PREFIX = '/@atproto/oauth-provider/~assets/'
+
+export function parseAssetsManifest(manifestPath: string) {
+  // Using `require` instead of `JSON.parse(readFileSync())` so that node's
+  // watch mode can pick up changes to the manifest file.
+
+  // eslint-disable-next-line
+  const manifest = require(manifestPath) as Manifest
+
+  const assets = new Map<string, Asset>(
+    Object.entries(manifest).map(([filename, { data, ...item }]) => {
+      const buffer = data ? Buffer.from(data, 'base64') : null
+      const filepath = join(manifestPath, '..', filename)
+      const stream = buffer
+        ? () => Readable.from(buffer)
+        : () => createReadStream(filepath)
+      return [filename, { ...item, stream }]
+    }),
+  )
+
+  const assetsMiddleware: Middleware = (req, res, next) => {
+    if (req.method !== 'GET' && req.method !== 'HEAD') return next()
+    if (!req.url?.startsWith(ASSETS_URL_PREFIX)) return next()
+
+    const filename = decodeURIComponent(req.url.slice(ASSETS_URL_PREFIX.length))
+    if (!filename) return next()
+
+    const asset = assets.get(filename)
+    if (!asset) return next()
+
+    try {
+      // Allow "null" (ie. no header) to allow loading assets outside of a
+      // fetch context (not from a web page).
+      validateFetchSite(req, [null, 'none', 'cross-site', 'same-origin'])
+      validateFetchDest(req, [null, 'document', 'style', 'script'])
+    } catch (err) {
+      return next(err)
+    }
+
+    if (req.headers['if-none-match'] === asset.sha256) {
+      return void res.writeHead(304).end()
+    }
+
+    res.setHeader('ETag', asset.sha256)
+    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
+
+    writeStream(res, asset.stream(), { contentType: asset.mime })
+  }
+
+  return {
+    getAssets,
+    assetsMiddleware,
+  }
+
+  function getAssets(entryName: string) {
+    const scripts = getScripts(entryName)
+    if (!scripts.length) return null
+    const styles = getStyles(entryName)
+    return { scripts, styles }
+  }
+
+  function getScripts(entryName: string) {
+    return Array.from(assets)
+      .filter(
+        ([, asset]) =>
+          asset.type === 'chunk' && asset.isEntry && asset.name === entryName,
+      )
+      .map(assetEntryUrl)
+  }
+
+  function getStyles(_entryName: string) {
+    return Array.from(assets)
+      .filter(([, asset]) => asset.mime === 'text/css')
+      .map(assetEntryUrl)
+  }
+}
+
+function assetEntryUrl([filename]: [string, Asset]): AssetRef {
+  return { url: assetUrl(filename) }
+}
+
+function assetUrl(filename: string) {
+  return `${ASSETS_URL_PREFIX}${encodeURIComponent(filename)}`
+}

package/src/router/assets/assets.ts

@@ -0,0 +1,54 @@
+import type { HydrationData as FeHydrationData } from '@atproto/oauth-provider-frontend/hydration-data'
+import type { HydrationData as UiHydrationData } from '@atproto/oauth-provider-ui/hydration-data'
+import { CspConfig } from '../../lib/csp/index.js'
+import { combineMiddlewares } from '../../lib/http/middleware.js'
+import { Simplify } from '../../lib/util/type.js'
+import { parseAssetsManifest } from './assets-manifest.js'
+
+// If the "ui" and "frontend" packages are ever unified, this can be replaced
+// with a single expression:
+//
+// const { getAssets, assetsMiddleware } = parseAssetsManifest(
+//   require.resolve('@atproto/oauth-provider-ui/bundle-manifest.json'),
+// )
+
+const ui = parseAssetsManifest(
+  require.resolve('@atproto/oauth-provider-ui/bundle-manifest.json'),
+)
+const fe = parseAssetsManifest(
+  require.resolve('@atproto/oauth-provider-frontend/bundle-manifest.json'),
+)
+
+export type HydrationData = Simplify<UiHydrationData & FeHydrationData>
+
+export function getAssets(entryName: keyof HydrationData) {
+  const assetRef = ui.getAssets(entryName) || fe.getAssets(entryName)
+  if (assetRef) return assetRef
+
+  // Fool-proof. Should never happen.
+  throw new Error(`Entry "${entryName}" not found in assets`)
+}
+
+export const assetsMiddleware = combineMiddlewares([
+  ui.assetsMiddleware,
+  fe.assetsMiddleware,
+])
+
+export const SPA_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'"],
+}
+
+/**
+ * @see {@link https://docs.hcaptcha.com/#content-security-policy-settings}
+ */
+export 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'],
+}

package/src/router/assets/csrf.ts

@@ -0,0 +1,63 @@
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import createHttpError from 'http-errors'
+import { CSRF_COOKIE_NAME, CSRF_HEADER_NAME } from '@atproto/oauth-provider-api'
+import {
+  CookieSerializeOptions,
+  parseHttpCookies,
+  setCookie,
+} from '../../lib/http/index.js'
+import { randomHexId } from '../../lib/util/crypto.js'
+
+const TOKEN_BYTE_LENGTH = 12
+const TOKEN_LENGTH = TOKEN_BYTE_LENGTH * 2 // 2 hex chars per byte
+
+// @NOTE Cookie based CSRF protection is redundant with session cookies using
+// `SameSite` and could probably be removed in the future.
+const CSRF_COOKIE_OPTIONS: Readonly<CookieSerializeOptions> = {
+  expires: undefined, // "session" cookie
+  secure: true,
+  httpOnly: false, // Need to be accessible from JavaScript
+  sameSite: 'lax',
+  path: `/`,
+}
+
+export async function setupCsrfToken(
+  req: IncomingMessage,
+  res: ServerResponse,
+): Promise<string> {
+  const token = getCookieCsrf(req) || (await randomHexId(TOKEN_BYTE_LENGTH))
+
+  // Refresh cookie (See Chrome's "Lax+POST" behavior)
+  setCookie(res, CSRF_COOKIE_NAME, token, CSRF_COOKIE_OPTIONS)
+
+  return token
+}
+
+export async function validateCsrfToken(
+  req: IncomingMessage,
+  res: ServerResponse,
+) {
+  const cookieValue = await setupCsrfToken(req, res)
+  const headerValue = getHeadersCsrf(req)
+
+  if (cookieValue !== headerValue) {
+    throw createHttpError(400, `CSRF mismatch`)
+  }
+}
+
+function getCookieCsrf(req: IncomingMessage) {
+  const cookies = parseHttpCookies(req)
+  const cookieValue = cookies[CSRF_COOKIE_NAME]
+  if (cookieValue?.length === TOKEN_LENGTH) {
+    return cookieValue
+  }
+  return undefined
+}
+
+function getHeadersCsrf(req: IncomingMessage) {
+  const headerValue = req.headers[CSRF_HEADER_NAME]
+  if (typeof headerValue === 'string' && headerValue.length === TOKEN_LENGTH) {
+    return headerValue
+  }
+  return undefined
+}

package/src/router/assets/send-account-page.ts

@@ -0,0 +1,43 @@
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { ActiveDeviceSession } from '@atproto/oauth-provider-api'
+import { buildCustomizationCss } from '../../customization/build-customization-css.js'
+import { buildCustomizationData } from '../../customization/build-customization-data.js'
+import { Customization } from '../../customization/customization.js'
+import { declareHydrationData } from '../../lib/html/hydration-data.js'
+import { cssCode } from '../../lib/html/index.js'
+import { html } from '../../lib/html/tags.js'
+import { CrossOriginEmbedderPolicy } from '../../lib/http/security-headers.js'
+import { sendWebPage } from '../../lib/send-web-page.js'
+import { HydrationData, SPA_CSP, getAssets } from './assets.js'
+import { setupCsrfToken } from './csrf.js'
+
+export function sendAccountPageFactory(customization: Customization) {
+  // Pre-computed options:
+  const customizationData = buildCustomizationData(customization)
+  const customizationCss = cssCode(buildCustomizationCss(customization))
+  const { scripts, styles } = getAssets('account-page')
+
+  return async function sendAccountPage(
+    req: IncomingMessage,
+    res: ServerResponse,
+    data: {
+      deviceSessions: readonly ActiveDeviceSession[]
+    },
+  ): Promise<void> {
+    await setupCsrfToken(req, res)
+
+    const script = declareHydrationData<HydrationData['account-page']>({
+      __customizationData: customizationData,
+      __deviceSessions: data.deviceSessions,
+    })
+
+    return sendWebPage(res, {
+      meta: [{ name: 'robots', content: 'noindex' }],
+      body: html`<div id="root"></div>`,
+      csp: SPA_CSP,
+      coep: CrossOriginEmbedderPolicy.credentialless,
+      scripts: [script, ...scripts],
+      styles: [...styles, customizationCss],
+    })
+  }
+}

package/src/router/assets/send-authorization-page.ts

@@ -0,0 +1,62 @@
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import { buildCustomizationCss } from '../../customization/build-customization-css.js'
+import { buildCustomizationData } from '../../customization/build-customization-data.js'
+import { Customization } from '../../customization/customization.js'
+import { mergeCsp } from '../../lib/csp/index.js'
+import { declareHydrationData } from '../../lib/html/hydration-data.js'
+import { cssCode, html } from '../../lib/html/index.js'
+import { CrossOriginEmbedderPolicy } from '../../lib/http/security-headers.js'
+import { sendWebPage } from '../../lib/send-web-page.js'
+import { AuthorizationResultAuthorizePage } from '../../result/authorization-result-authorize-page.js'
+import { HCAPTCHA_CSP, HydrationData, SPA_CSP, getAssets } from './assets.js'
+import { setupCsrfToken } from './csrf.js'
+
+export function sendAuthorizePageFactory(customization: Customization) {
+  // Pre-computed options:
+  const customizationData = buildCustomizationData(customization)
+  const customizationCss = cssCode(buildCustomizationCss(customization))
+  const { scripts, styles } = getAssets('authorization-page')
+  const csp = mergeCsp(
+    SPA_CSP,
+    customization?.hcaptcha ? HCAPTCHA_CSP : undefined,
+  )
+  const 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
+
+  return async function sendAuthorizePage(
+    req: IncomingMessage,
+    res: ServerResponse,
+    data: AuthorizationResultAuthorizePage,
+  ): Promise<void> {
+    await setupCsrfToken(req, res)
+
+    const script = declareHydrationData<HydrationData['authorization-page']>({
+      __customizationData: customizationData,
+      __authorizeData: {
+        requestUri: data.uri,
+
+        clientId: data.client.id,
+        clientMetadata: data.client.metadata,
+        clientTrusted: data.client.info.isTrusted,
+
+        scopeDetails: data.scopeDetails,
+
+        uiLocales: data.parameters.ui_locales,
+        loginHint: data.parameters.login_hint,
+      },
+      __sessions: data.sessions,
+    })
+
+    return sendWebPage(res, {
+      meta: [{ name: 'robots', content: 'noindex' }],
+      body: html`<div id="root"></div>`,
+      csp,
+      coep,
+      scripts: [script, ...scripts],
+      styles: [...styles, customizationCss],
+    })
+  }
+}