@atproto/oauth-provider 0.1.0 → 0.1.1

package/dist/output/customization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"customization.d.ts","sourceRoot":"","sources":["../../src/output/customization.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,UAAU,+BAAgC,CAAA;AAChD,KAAK,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAI5C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE;SAAG,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,MAAM;KAAE,CAAA;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;QACb,GAAG,CAAC,EAAE,MAAM,CAAA;KACb,CAAC,CAAA;CACH,CAAA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,GAAE,aAAkB;;;;;;;;EAMpB;AAED,wBAAgB,qBAAqB,CAAC,aAAa,CAAC,EAAE,aAAa,UAWlE"}
+{"version":3,"file":"customization.d.ts","sourceRoot":"","sources":["../../src/output/customization.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,UAAU,wCAAyC,CAAA;AACzD,KAAK,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAI5C,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE;SAAG,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,MAAM;KAAE,CAAA;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;QACb,GAAG,CAAC,EAAE,MAAM,CAAA;KACb,CAAC,CAAA;CACH,CAAA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,GAAE,aAAkB;;;;;;;;EAMpB;AAED,wBAAgB,qBAAqB,CAAC,aAAa,CAAC,EAAE,aAAa,UAKlE;AAED,wBAAiB,sBAAsB,CAAC,aAAa,CAAC,EAAE,aAAa,oCAkBpE"}

package/dist/output/customization.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildCustomizationCss = exports.buildCustomizationData = void 0;
+exports.buildCustomizationVars = exports.buildCustomizationCss = exports.buildCustomizationData = void 0;
 // Matches colors defined in tailwind.config.js
-const colorNames = ['primary', 'error'];
+const colorNames = ['brand', 'error', 'warning'];
 const isColorName = (name) => colorNames.includes(name);
 function buildCustomizationData({ name, logo, links, } = {}) {
     return {
@@ -13,50 +13,77 @@ function buildCustomizationData({ name, logo, links, } = {}) {
 }
 exports.buildCustomizationData = buildCustomizationData;
 function buildCustomizationCss(customization) {
-    if (!customization?.colors)
-        return '';
-    const vars = Object.entries(customization.colors)
-        .filter((e) => isColorName(e[0]) && e[1] != null)
-        .map(([name, value]) => [name, parseColor(value)])
-        .filter((e) => e[1] != null)
-        // alpha not supported by tailwind (it does not work that way)
-        .map(([name, { r, g, b }]) => `--color-${name}: ${r} ${g} ${b};`);
-    return `:root { ${vars.join(' ')} }`;
+    const vars = Array.from(buildCustomizationVars(customization));
+    if (vars.length)
+        return `:root { ${vars.join(' ')} }`;
+    return '';
 }
 exports.buildCustomizationCss = buildCustomizationCss;
+function* buildCustomizationVars(customization) {
+    if (customization?.colors) {
+        for (const [name, value] of Object.entries(customization.colors)) {
+            if (!isColorName(name)) {
+                throw new TypeError(`Invalid color name: ${name}`);
+            }
+            // Skip undefined values
+            if (value === undefined)
+                continue;
+            const { r, g, b, a } = parseColor(value);
+            // Tailwind does not apply alpha values to base colors
+            if (a !== undefined)
+                throw new TypeError('Alpha not supported');
+            yield `--color-${name}: ${r} ${g} ${b};`;
+        }
+    }
+}
+exports.buildCustomizationVars = buildCustomizationVars;
 function parseColor(color) {
+    if (typeof color !== 'string') {
+        throw new TypeError(`Invalid color value: ${typeof color}`);
+    }
     if (color.startsWith('#')) {
         if (color.length === 4 || color.length === 5) {
-            const [r, g, b, a] = color
-                .slice(1)
-                .split('')
-                .map((c) => parseInt(c + c, 16));
+            const r = parseUi8Hex(color.slice(1, 2));
+            const g = parseUi8Hex(color.slice(2, 3));
+            const b = parseUi8Hex(color.slice(3, 4));
+            const a = color.length > 4 ? parseUi8Hex(color.slice(4, 5)) : undefined;
             return { r, g, b, a };
         }
         if (color.length === 7 || color.length === 9) {
-            const r = parseInt(color.slice(1, 3), 16);
-            const g = parseInt(color.slice(3, 5), 16);
-            const b = parseInt(color.slice(5, 7), 16);
-            const a = color.length > 8 ? parseInt(color.slice(7, 9), 16) : undefined;
+            const r = parseUi8Hex(color.slice(1, 3));
+            const g = parseUi8Hex(color.slice(3, 5));
+            const b = parseUi8Hex(color.slice(5, 7));
+            const a = color.length > 8 ? parseUi8Hex(color.slice(7, 9)) : undefined;
             return { r, g, b, a };
         }
-        return undefined;
+        throw new TypeError(`Invalid hex color: ${color}`);
     }
-    const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    const rgbMatch = color.match(/^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/);
     if (rgbMatch) {
-        const [, r, g, b] = rgbMatch;
-        return { r: parseInt(r, 10), g: parseInt(g, 10), b: parseInt(b, 10) };
+        const r = parseUi8Dec(rgbMatch[1]);
+        const g = parseUi8Dec(rgbMatch[2]);
+        const b = parseUi8Dec(rgbMatch[3]);
+        return { r, g, b };
     }
-    const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+)\)/);
+    const rgbaMatch = color.match(/^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/);
     if (rgbaMatch) {
-        const [, r, g, b, a] = rgbaMatch;
-        return {
-            r: parseInt(r, 10),
-            g: parseInt(g, 10),
-            b: parseInt(b, 10),
-            a: parseInt(a, 10),
-        };
+        const r = parseUi8Dec(rgbaMatch[1]);
+        const g = parseUi8Dec(rgbaMatch[2]);
+        const b = parseUi8Dec(rgbaMatch[3]);
+        const a = parseUi8Dec(rgbaMatch[4]);
+        return { r, g, b, a };
     }
-    return undefined;
+    throw new TypeError(`Unsupported color format: ${color}`);
+}
+function parseUi8Hex(v) {
+    return asUi8(parseInt(v, 16));
+}
+function parseUi8Dec(v) {
+    return asUi8(parseInt(v, 10));
+}
+function asUi8(v) {
+    if (v >= 0 && v <= 255 && v === (v | 0))
+        return v;
+    throw new TypeError(`Invalid color component: ${v}`);
 }
 //# sourceMappingURL=customization.js.map

package/dist/output/customization.js.map

@@ -1 +1 @@
-{"version":3,"file":"customization.js","sourceRoot":"","sources":["../../src/output/customization.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"customization.js","sourceRoot":"","sources":["../../src/output/customization.ts"],"names":[],"mappings":"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"}

package/dist/output/output-manager.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="node" />
+import { ServerResponse } from 'node:http';
+import { Asset } from '../assets/asset.js';
+import { Html } from '../lib/html/index.js';
+import { AuthorizationResultAuthorize } from './build-authorize-data.js';
+import { Customization } from './customization.js';
+export declare class OutputManager {
+    readonly customizationScript: Html;
+    readonly customizationStyle: Html;
+    readonly customizationLinks?: Customization['links'];
+    readonly assetsPromise: Promise<[js: Asset, css: Asset]>;
+    constructor(customization?: Customization);
+    sendAuthorizePage(res: ServerResponse, data: AuthorizationResultAuthorize): Promise<void>;
+    sendErrorPage(res: ServerResponse, err: unknown): Promise<void>;
+}
+//# sourceMappingURL=output-manager.d.ts.map

package/dist/output/output-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"output-manager.d.ts","sourceRoot":"","sources":["../../src/output/output-manager.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAE1C,OAAO,EAAW,IAAI,EAAQ,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EACL,4BAA4B,EAE7B,MAAM,2BAA2B,CAAA;AAElC,OAAO,EAGL,aAAa,EACd,MAAM,oBAAoB,CAAA;AAG3B,qBAAa,aAAa;IACxB,QAAQ,CAAC,mBAAmB,EAAE,IAAI,CAAA;IAClC,QAAQ,CAAC,kBAAkB,EAAE,IAAI,CAAA;IACjC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAMpD,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,CAG7C;gBAEC,aAAa,CAAC,EAAE,aAAa;IAYnC,iBAAiB,CACrB,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,4BAA4B,GACjC,OAAO,CAAC,IAAI,CAAC;IAoBV,aAAa,CAAC,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;CAoBtE"}

package/dist/output/output-manager.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutputManager = void 0;
+const index_js_1 = require("../assets/index.js");
+const index_js_2 = require("../lib/html/index.js");
+const build_authorize_data_js_1 = require("./build-authorize-data.js");
+const build_error_payload_js_1 = require("./build-error-payload.js");
+const customization_js_1 = require("./customization.js");
+const send_web_page_js_1 = require("./send-web-page.js");
+class OutputManager {
+    customizationScript;
+    customizationStyle;
+    customizationLinks;
+    // Could technically cause an "UnhandledPromiseRejection", which might cause
+    // the process to exit. This is intentional, as it's a critical error. It
+    // should never happen in practice, as the built assets are bundled with the
+    // package.
+    assetsPromise = Promise.all([
+        (0, index_js_1.getAsset)('main.js'),
+        (0, index_js_1.getAsset)('main.css'),
+    ]);
+    constructor(customization) {
+        // Note: building this here for two reasons:
+        // 1. To avoid re-building it on every request
+        // 2. To throw during init if the customization is invalid
+        this.customizationScript = (0, send_web_page_js_1.declareBackendData)('__customizationData', (0, customization_js_1.buildCustomizationData)(customization));
+        this.customizationStyle = (0, index_js_2.cssCode)((0, customization_js_1.buildCustomizationCss)(customization));
+        this.customizationLinks = customization?.links;
+    }
+    async sendAuthorizePage(res, data) {
+        const [jsAsset, cssAsset] = await this.assetsPromise;
+        return (0, send_web_page_js_1.sendWebPage)(res, {
+            scripts: [
+                (0, send_web_page_js_1.declareBackendData)('__authorizeData', (0, build_authorize_data_js_1.buildAuthorizeData)(data)),
+                this.customizationScript,
+                jsAsset, // Last (to be able to read the "backend data" variables)
+            ],
+            styles: [
+                cssAsset, // First (to be overridden by customization)
+                this.customizationStyle,
+            ],
+            links: this.customizationLinks,
+            htmlAttrs: { lang: 'en' },
+            title: 'Authorize',
+            body: (0, index_js_2.html) `<div id="root"></div>`,
+        });
+    }
+    async sendErrorPage(res, err) {
+        const [jsAsset, cssAsset] = await this.assetsPromise;
+        return (0, send_web_page_js_1.sendWebPage)(res, {
+            status: (0, build_error_payload_js_1.buildErrorStatus)(err),
+            scripts: [
+                (0, send_web_page_js_1.declareBackendData)('__errorData', (0, build_error_payload_js_1.buildErrorPayload)(err)),
+                this.customizationScript,
+                jsAsset, // Last (to be able to read the "backend data" variables)
+            ],
+            styles: [
+                cssAsset, // First (to be overridden by customization)
+                this.customizationStyle,
+            ],
+            links: this.customizationLinks,
+            htmlAttrs: { lang: 'en' },
+            title: 'Error',
+            body: (0, index_js_2.html) `<div id="root"></div>`,
+        });
+    }
+}
+exports.OutputManager = OutputManager;
+//# sourceMappingURL=output-manager.js.map

package/dist/output/output-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"output-manager.js","sourceRoot":"","sources":["../../src/output/output-manager.ts"],"names":[],"mappings":";;;AAGA,iDAA6C;AAC7C,mDAA0D;AAC1D,uEAGkC;AAClC,qEAA8E;AAC9E,yDAI2B;AAC3B,yDAAoE;AAEpE,MAAa,aAAa;IACf,mBAAmB,CAAM;IACzB,kBAAkB,CAAM;IACxB,kBAAkB,CAAyB;IAEpD,4EAA4E;IAC5E,yEAAyE;IACzE,4EAA4E;IAC5E,WAAW;IACF,aAAa,GAAqC,OAAO,CAAC,GAAG,CAAC;QACrE,IAAA,mBAAQ,EAAC,SAAS,CAAC;QACnB,IAAA,mBAAQ,EAAC,UAAU,CAAC;KACZ,CAAC,CAAA;IAEX,YAAY,aAA6B;QACvC,4CAA4C;QAC5C,8CAA8C;QAC9C,0DAA0D;QAC1D,IAAI,CAAC,mBAAmB,GAAG,IAAA,qCAAkB,EAC3C,qBAAqB,EACrB,IAAA,yCAAsB,EAAC,aAAa,CAAC,CACtC,CAAA;QACD,IAAI,CAAC,kBAAkB,GAAG,IAAA,kBAAO,EAAC,IAAA,wCAAqB,EAAC,aAAa,CAAC,CAAC,CAAA;QACvE,IAAI,CAAC,kBAAkB,GAAG,aAAa,EAAE,KAAK,CAAA;IAChD,CAAC;IAED,KAAK,CAAC,iBAAiB,CACrB,GAAmB,EACnB,IAAkC;QAElC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,MAAM,IAAI,CAAC,aAAa,CAAA;QAEpD,OAAO,IAAA,8BAAW,EAAC,GAAG,EAAE;YACtB,OAAO,EAAE;gBACP,IAAA,qCAAkB,EAAC,iBAAiB,EAAE,IAAA,4CAAkB,EAAC,IAAI,CAAC,CAAC;gBAC/D,IAAI,CAAC,mBAAmB;gBACxB,OAAO,EAAE,yDAAyD;aACnE;YACD,MAAM,EAAE;gBACN,QAAQ,EAAE,4CAA4C;gBACtD,IAAI,CAAC,kBAAkB;aACxB;YACD,KAAK,EAAE,IAAI,CAAC,kBAAkB;YAC9B,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACzB,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,IAAA,eAAI,EAAA,uBAAuB;SAClC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,GAAmB,EAAE,GAAY;QACnD,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,MAAM,IAAI,CAAC,aAAa,CAAA;QAEpD,OAAO,IAAA,8BAAW,EAAC,GAAG,EAAE;YACtB,MAAM,EAAE,IAAA,yCAAgB,EAAC,GAAG,CAAC;YAC7B,OAAO,EAAE;gBACP,IAAA,qCAAkB,EAAC,aAAa,EAAE,IAAA,0CAAiB,EAAC,GAAG,CAAC,CAAC;gBACzD,IAAI,CAAC,mBAAmB;gBACxB,OAAO,EAAE,yDAAyD;aACnE;YACD,MAAM,EAAE;gBACN,QAAQ,EAAE,4CAA4C;gBACtD,IAAI,CAAC,kBAAkB;aACxB;YACD,KAAK,EAAE,IAAI,CAAC,kBAAkB;YAC9B,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACzB,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,IAAA,eAAI,EAAA,uBAAuB;SAClC,CAAC,CAAA;IACJ,CAAC;CACF;AArED,sCAqEC"}

package/dist/output/send-web-page.d.ts

@@ -4,5 +4,5 @@ import { BuildDocumentOptions, Html } from '../lib/html/index.js';
 export declare function declareBackendData(name: string, data: unknown): Html;
 export declare function sendWebPage(res: ServerResponse, { status, ...options }: BuildDocumentOptions & {
     status?: number;
-}): void;
+}): Promise<void>;
 //# sourceMappingURL=send-web-page.d.ts.map

package/dist/output/send-web-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"send-web-page.d.ts","sourceRoot":"","sources":["../../src/output/send-web-page.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAE1C,OAAO,EAGL,oBAAoB,EACpB,IAAI,EAEL,MAAM,sBAAsB,CAAA;AAG7B,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,QAM7D;AAED,wBAAgB,WAAW,CACzB,GAAG,EAAE,cAAc,EACnB,EAAE,MAAY,EAAE,GAAG,OAAO,EAAE,EAAE,oBAAoB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GACvE,IAAI,CAgCN"}
+{"version":3,"file":"send-web-page.d.ts","sourceRoot":"","sources":["../../src/output/send-web-page.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAE1C,OAAO,EAGL,oBAAoB,EACpB,IAAI,EAEL,MAAM,sBAAsB,CAAA;AAG7B,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,QAM7D;AAED,wBAAsB,WAAW,CAC/B,GAAG,EAAE,cAAc,EACnB,EAAE,MAAY,EAAE,GAAG,OAAO,EAAE,EAAE,oBAAoB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GACvE,OAAO,CAAC,IAAI,CAAC,CAiCf"}

package/dist/output/send-web-page.js

@@ -12,8 +12,9 @@ function declareBackendData(name, data) {
     return (0, index_js_1.js) `window[${name}]=${data};document.currentScript.remove();`;
 }
 exports.declareBackendData = declareBackendData;
-function sendWebPage(res, { status = 200, ...options }) {
+async function sendWebPage(res, { status = 200, ...options }) {
     // @TODO: make these headers configurable (?)
+    res.setHeader('Permissions-Policy', 'otp-credentials=*, document-domain=()');
     res.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
     res.setHeader('Cross-Origin-Resource-Policy', 'same-origin');
     res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
@@ -34,7 +35,7 @@ function sendWebPage(res, { status = 200, ...options }) {
         `upgrade-insecure-requests`,
     ].join('; '));
     const html = (0, index_js_1.buildDocument)(options);
-    (0, response_js_1.writeHtml)(res, html.toString(), status);
+    return (0, response_js_1.writeHtml)(res, html.toString(), status);
 }
 exports.sendWebPage = sendWebPage;
 function assetToHash(asset) {

package/dist/output/send-web-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"send-web-page.js","sourceRoot":"","sources":["../../src/output/send-web-page.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAGxC,mDAM6B;AAC7B,yDAAmD;AAEnD,SAAgB,kBAAkB,CAAC,IAAY,EAAE,IAAa;IAC5D,8EAA8E;IAC9E,8EAA8E;IAC9E,8DAA8D;IAC9D,yDAAyD;IACzD,OAAO,IAAA,aAAE,EAAA,UAAU,IAAI,KAAK,IAAI,mCAAmC,CAAA;AACrE,CAAC;AAND,gDAMC;AAED,SAAgB,WAAW,CACzB,GAAmB,EACnB,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,OAAO,EAA8C;IAExE,6CAA6C;IAC7C,GAAG,CAAC,SAAS,CAAC,8BAA8B,EAAE,gBAAgB,CAAC,CAAA;IAC/D,GAAG,CAAC,SAAS,CAAC,8BAA8B,EAAE,aAAa,CAAC,CAAA;IAC5D,GAAG,CAAC,SAAS,CAAC,4BAA4B,EAAE,aAAa,CAAC,CAAA;IAC1D,GAAG,CAAC,SAAS,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAA;IAC/C,GAAG,CAAC,SAAS,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,CAAC,SAAS,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAA;IAClD,GAAG,CAAC,SAAS,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAA;IACtC,GAAG,CAAC,SAAS,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,CAAA;IAC9D,GAAG,CAAC,SAAS,CACX,yBAAyB,EACzB;QACE,oBAAoB;QACpB,wBAAwB;QACxB,oBAAoB;QACpB,YAAY,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,QAAQ,EAAE;QAC9C,qBACE,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EACpE,EAAE;QACF,oBACE,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EACnE,EAAE;QACF,6BAA6B;QAC7B,oBAAoB;QACpB,2BAA2B;KAC5B,CAAC,IAAI,CAAC,IAAI,CAAC,CACb,CAAA;IAED,MAAM,IAAI,GAAG,IAAA,wBAAa,EAAC,OAAO,CAAC,CAAA;IAEnC,IAAA,uBAAS,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAA;AACzC,CAAC;AAnCD,kCAmCC;AAED,SAAS,WAAW,CAAC,KAAsB;IACzC,OAAO,KAAK,YAAY,eAAI;QAC1B,CAAC,CAAC,IAAA,wBAAU,EAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;QAChE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAA;AAClB,CAAC;AAED,SAAS,aAAa,CAAC,IAAY;IACjC,OAAO,WAAW,IAAI,GAAG,CAAA;AAC3B,CAAC"}
+{"version":3,"file":"send-web-page.js","sourceRoot":"","sources":["../../src/output/send-web-page.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAGxC,mDAM6B;AAC7B,yDAAmD;AAEnD,SAAgB,kBAAkB,CAAC,IAAY,EAAE,IAAa;IAC5D,8EAA8E;IAC9E,8EAA8E;IAC9E,8DAA8D;IAC9D,yDAAyD;IACzD,OAAO,IAAA,aAAE,EAAA,UAAU,IAAI,KAAK,IAAI,mCAAmC,CAAA;AACrE,CAAC;AAND,gDAMC;AAEM,KAAK,UAAU,WAAW,CAC/B,GAAmB,EACnB,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,OAAO,EAA8C;IAExE,6CAA6C;IAC7C,GAAG,CAAC,SAAS,CAAC,oBAAoB,EAAE,uCAAuC,CAAC,CAAA;IAC5E,GAAG,CAAC,SAAS,CAAC,8BAA8B,EAAE,gBAAgB,CAAC,CAAA;IAC/D,GAAG,CAAC,SAAS,CAAC,8BAA8B,EAAE,aAAa,CAAC,CAAA;IAC5D,GAAG,CAAC,SAAS,CAAC,4BAA4B,EAAE,aAAa,CAAC,CAAA;IAC1D,GAAG,CAAC,SAAS,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAA;IAC/C,GAAG,CAAC,SAAS,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,CAAC,SAAS,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAA;IAClD,GAAG,CAAC,SAAS,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAA;IACtC,GAAG,CAAC,SAAS,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,CAAA;IAC9D,GAAG,CAAC,SAAS,CACX,yBAAyB,EACzB;QACE,oBAAoB;QACpB,wBAAwB;QACxB,oBAAoB;QACpB,YAAY,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,QAAQ,EAAE;QAC9C,qBACE,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EACpE,EAAE;QACF,oBACE,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EACnE,EAAE;QACF,6BAA6B;QAC7B,oBAAoB;QACpB,2BAA2B;KAC5B,CAAC,IAAI,CAAC,IAAI,CAAC,CACb,CAAA;IAED,MAAM,IAAI,GAAG,IAAA,wBAAa,EAAC,OAAO,CAAC,CAAA;IAEnC,OAAO,IAAA,uBAAS,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAA;AAChD,CAAC;AApCD,kCAoCC;AAED,SAAS,WAAW,CAAC,KAAsB;IACzC,OAAO,KAAK,YAAY,eAAI;QAC1B,CAAC,CAAC,IAAA,wBAAU,EAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;QAChE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAA;AAClB,CAAC;AAED,SAAS,aAAa,CAAC,IAAY;IACjC,OAAO,WAAW,IAAI,GAAG,CAAA;AAC3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atproto/oauth-provider",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "description": "Generic OAuth2 and OpenID Connect provider for Node.js. Currently only supports features needed for Atproto.",
   "keywords": [
@@ -41,11 +41,11 @@
     "@atproto-labs/fetch": "0.1.0",
     "@atproto-labs/fetch-node": "0.1.0",
     "@atproto-labs/pipe": "0.1.0",
-    "@atproto-labs/simple-store": "0.1.0",
-    "@atproto-labs/simple-store-memory": "0.1.0",
-    "@atproto/jwk": "0.1.0",
-    "@atproto/jwk-jose": "0.1.0",
-    "@atproto/oauth-types": "0.1.0"
+    "@atproto-labs/simple-store-memory": "0.1.1",
+    "@atproto-labs/simple-store": "0.1.1",
+    "@atproto/jwk": "0.1.1",
+    "@atproto/jwk-jose": "0.1.1",
+    "@atproto/oauth-types": "0.1.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",

package/src/account/account-manager.ts

@@ -9,7 +9,7 @@ import {
   Account,
   AccountInfo,
   AccountStore,
-  LoginCredentials,
+  SignInCredentials,
 } from './account-store.js'
 
 const TIMING_ATTACK_MITIGATION_DELAY = 400
@@ -18,7 +18,7 @@ export class AccountManager {
   constructor(protected readonly store: AccountStore) {}
 
   public async signIn(
-    credentials: LoginCredentials,
+    credentials: SignInCredentials,
     deviceId: DeviceId,
   ): Promise<AccountInfo> {
     return constantTime(TIMING_ATTACK_MITIGATION_DELAY, async () => {

package/src/account/account-store.ts

@@ -1,20 +1,26 @@
+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 { Sub } from '../oidc/sub.js'
 import { Account } from './account.js'
 
-export type LoginCredentials = {
-  username: string
-  password: string
+export const signInCredentialsSchema = z.object({
+  username: z.string(),
+  password: z.string(),
 
   /**
    * 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?: boolean
-}
+  remember: z.boolean().optional().default(false),
+
+  emailOtp: z.string().optional(),
+})
+
+export type SignInCredentials = z.TypeOf<typeof signInCredentialsSchema>
 
 export type DeviceAccountInfo = {
   remembered: boolean
@@ -32,7 +38,7 @@ export type AccountInfo = {
 
 export interface AccountStore {
   authenticateAccount(
-    credentials: LoginCredentials,
+    credentials: SignInCredentials,
     deviceId: DeviceId,
   ): Awaitable<AccountInfo | null>
 

package/src/assets/app/components/accept-form.tsx

@@ -1,26 +1,32 @@
 import { OAuthClientMetadata } from '@atproto/oauth-types'
-import { type HTMLAttributes } from 'react'
+import { FormEvent } from 'react'
 
 import { Account } from '../backend-data'
-import { clsx } from '../lib/clsx'
+import { Override } from '../lib/util'
 import { AccountIdentifier } from './account-identifier'
+import { Button } from './button'
 import { ClientIdentifier } from './client-identifier'
 import { ClientName } from './client-name'
+import { FormCard, FormCardProps } from './form-card'
+import { Fieldset } from './fieldset'
 
-export type AcceptFormProps = {
-  account: Account
-  clientId: string
-  clientMetadata: OAuthClientMetadata
-  clientTrusted: boolean
-  onAccept: () => void
-  acceptLabel?: string
+export type AcceptFormProps = Override<
+  FormCardProps,
+  {
+    account: Account
+    clientId: string
+    clientMetadata: OAuthClientMetadata
+    clientTrusted: boolean
+    onAccept: () => void
+    acceptLabel?: string
 
-  onReject: () => void
-  rejectLabel?: string
+    onReject: () => void
+    rejectLabel?: string
 
-  onBack?: () => void
-  backLabel?: string
-}
+    onBack?: () => void
+    backLabel?: string
+  }
+>
 
 export function AcceptForm({
   account,
@@ -34,79 +40,76 @@ export function AcceptForm({
   onBack,
   backLabel = 'Back',
 
-  ...attrs
-}: AcceptFormProps & HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div {...attrs} className={clsx('flex flex-col', attrs.className)}>
-      {clientTrusted && clientMetadata.logo_uri && (
-        <div className="flex items-center justify-center mb-4">
-          <img
-            crossOrigin="anonymous"
-            src={clientMetadata.logo_uri}
-            alt={clientMetadata.client_name}
-            className="w-16 h-16 rounded-full"
-          />
-        </div>
-      )}
-
-      <ClientName
-        clientId={clientId}
-        clientMetadata={clientMetadata}
-        as="h1"
-        className="text-2xl font-semibold text-center text-primary"
-      />
-
-      <p className="mt-4">
-        <ClientIdentifier clientId={clientId} clientMetadata={clientMetadata} />{' '}
-        is asking for permission to access your{' '}
-        <AccountIdentifier account={account} /> account.
-      </p>
-
-      <p className="mt-4">
-        By clicking <b>{acceptLabel}</b>, you allow this application to access
-        your information in accordance to its{' '}
-        <a
-          href={clientMetadata.tos_uri}
-          rel="nofollow noopener"
-          target="_blank"
-          className="text-primary underline"
-        >
-          terms of service
-        </a>
-        .
-      </p>
+  ...props
+}: AcceptFormProps) {
+  const doSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    onAccept()
+  }
 
-      <div className="flex-auto" />
-
-      <div className="p-4 flex flex-wrap items-center justify-between">
-        <button
-          type="button"
-          onClick={onAccept}
-          className="py-2 bg-transparent text-primary rounded-md font-semibold order-last"
-        >
-          {acceptLabel}
-        </button>
+  return (
+    <FormCard
+      onSubmit={doSubmit}
+      cancel={onBack && <Button onClick={onBack}>{backLabel}</Button>}
+      actions={
+        <>
+          <Button type="submit" color="brand">
+            {acceptLabel}
+          </Button>
 
-        {onBack && (
-          <button
-            type="button"
-            onClick={() => onBack()}
-            className="mr-2 py-2 bg-transparent text-primary rounded-md font-light"
-          >
-            {backLabel}
-          </button>
+          <Button onClick={onReject}>{rejectLabel}</Button>
+        </>
+      }
+      {...props}
+    >
+      <Fieldset
+        title={
+          <ClientName clientId={clientId} clientMetadata={clientMetadata} />
+        }
+      >
+        {clientTrusted && clientMetadata.logo_uri && (
+          <div key="logo" className="flex items-center justify-center">
+            <img
+              crossOrigin="anonymous"
+              src={clientMetadata.logo_uri}
+              alt={clientMetadata.client_name}
+              className="w-16 h-16 rounded-full"
+            />
+          </div>
         )}
 
-        <div className="flex-auto"></div>
+        <p>
+          <ClientIdentifier
+            clientId={clientId}
+            clientMetadata={clientMetadata}
+          />{' '}
+          is asking for permission to access your{' '}
+          <AccountIdentifier account={account} /> account.
+        </p>
 
-        <button
-          type="button"
-          onClick={onReject}
-          className="mr-2 py-2 bg-transparent text-primary rounded-md font-light"
-        >
-          {rejectLabel}
-        </button>
-      </div>
-    </div>
+        <p>
+          By clicking <b>{acceptLabel}</b>, you allow this application to access
+          your information in accordance to their{' '}
+          <a
+            href={clientMetadata.tos_uri}
+            rel="nofollow noopener"
+            target="_blank"
+            className="text-brand underline"
+          >
+            terms of service
+          </a>
+          {' and '}
+          <a
+            href={clientMetadata.policy_uri}
+            rel="nofollow noopener"
+            target="_blank"
+            className="text-brand underline"
+          >
+            privacy policy
+          </a>
+          .
+        </p>
+      </Fieldset>
+    </FormCard>
   )
 }