@_mustachio/openauth 0.6.0

package/dist/esm/ui/icon.js

@@ -0,0 +1,92 @@
+// src/ui/icon.tsx
+import { jsxDEV } from "hono/jsx/jsx-dev-runtime";
+var ICON_GITHUB = /* @__PURE__ */ jsxDEV("svg", {
+  viewBox: "0 0 256 250",
+  width: "256",
+  height: "250",
+  fill: "currentColor",
+  xmlns: "http://www.w3.org/2000/svg",
+  preserveAspectRatio: "xMidYMid",
+  children: /* @__PURE__ */ jsxDEV("path", {
+    d: "M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z"
+  }, undefined, false, undefined, this)
+}, undefined, false, undefined, this);
+var ICON_GOOGLE = /* @__PURE__ */ jsxDEV("svg", {
+  width: "256",
+  height: "262",
+  viewBox: "0 0 256 262",
+  xmlns: "http://www.w3.org/2000/svg",
+  preserveAspectRatio: "xMidYMid",
+  children: [
+    /* @__PURE__ */ jsxDEV("path", {
+      d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027",
+      fill: "#4285F4"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("path", {
+      d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1",
+      fill: "#34A853"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("path", {
+      d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782",
+      fill: "#FBBC05"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("path", {
+      d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251",
+      fill: "#EB4335"
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+var ICON_EMAIL = /* @__PURE__ */ jsxDEV("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6",
+  children: /* @__PURE__ */ jsxDEV("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    d: "M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
+  }, undefined, false, undefined, this)
+}, undefined, false, undefined, this);
+var ICON_SLACK = /* @__PURE__ */ jsxDEV("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /* @__PURE__ */ jsxDEV("g", {
+    children: [
+      /* @__PURE__ */ jsxDEV("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M8.79948 0C7.47279 0.000978593 6.39909 1.07547 6.40007 2.39951C6.39909 3.72355 7.47377 4.79804 8.80046 4.79902H11.2009V2.40049C11.2018 1.07645 10.1271 0.00195719 8.79948 0ZM8.79948 6.4H2.40039C1.07371 6.40098 -0.000977873 7.47547 2.67973e-06 8.79951C-0.00195842 10.1235 1.07273 11.198 2.39941 11.2H8.79948C10.1262 11.199 11.2009 10.1245 11.1999 8.80049C11.2009 7.47547 10.1262 6.40098 8.79948 6.4Z",
+        fill: "currentColor"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M24.0007 8.79951C24.0016 7.47547 22.9269 6.40098 21.6003 6.4C20.2736 6.40098 19.1989 7.47547 19.1999 8.79951V11.2H21.6003C22.9269 11.199 24.0016 10.1245 24.0007 8.79951ZM17.6006 8.79951V2.39951C17.6016 1.07645 16.5279 0.00195719 15.2012 0C13.8745 0.000978593 12.7998 1.07547 12.8008 2.39951V8.79951C12.7988 10.1235 13.8735 11.198 15.2002 11.2C16.5269 11.199 17.6016 10.1245 17.6006 8.79951Z",
+        fill: "currentColor"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M15.1992 23.9998C16.5259 23.9988 17.6006 22.9243 17.5996 21.6003C17.6006 20.2763 16.5259 19.2018 15.1992 19.2008H12.7988V21.6003C12.7978 22.9234 13.8725 23.9978 15.1992 23.9998ZM15.1992 17.5988H21.5993C22.926 17.5978 24.0007 16.5234 23.9997 15.1993C24.0016 13.8753 22.927 12.8008 21.6003 12.7988H15.2002C13.8735 12.7998 12.7988 13.8743 12.7998 15.1983C12.7988 16.5234 13.8725 17.5978 15.1992 17.5988Z",
+        fill: "currentColor"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M0 15.1993C-0.000979882 16.5234 1.07371 17.5978 2.40039 17.5988C3.72708 17.5978 4.80177 16.5234 4.80079 15.1993V12.7998H2.40039C1.07371 12.8008 -0.000979882 13.8753 0 15.1993ZM6.40007 15.1993V21.5993C6.3981 22.9234 7.47279 23.9978 8.79948 23.9998C10.1262 23.9988 11.2009 22.9243 11.1999 21.6003V15.2013C11.2018 13.8772 10.1271 12.8027 8.80046 12.8008C7.47279 12.8008 6.39909 13.8753 6.40007 15.1993Z",
+        fill: "currentColor"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this)
+}, undefined, false, undefined, this);
+export {
+  ICON_SLACK,
+  ICON_GOOGLE,
+  ICON_GITHUB,
+  ICON_EMAIL
+};

package/dist/esm/ui/passkey.js

@@ -0,0 +1,329 @@
+// src/ui/passkey.tsx
+import { Layout } from "./base.js";
+import { FormAlert } from "./form.js";
+import { jsxDEV } from "hono/jsx/jsx-dev-runtime";
+var DEFAULT_COPY = {
+  register: "Register",
+  register_with_passkey: "Register With Passkey",
+  register_other_device: "Use another device",
+  register_prompt: "Don't have an account?",
+  login_prompt: "Already have an account?",
+  login: "Login",
+  login_with_passkey: "Login With Passkey",
+  change_prompt: "Forgot password?",
+  code_resend: "Resend code",
+  code_return: "Back to",
+  input_email: "Email"
+};
+function PasskeyUI(options) {
+  const {
+    rpName,
+    rpID,
+    origin,
+    userCanRegisterPasskey,
+    authenticatorSelection,
+    attestationType,
+    timeout
+  } = options;
+  const copy = {
+    ...DEFAULT_COPY,
+    ...options.copy
+  };
+  return {
+    authorize: async () => {
+      const jsx = /* @__PURE__ */ jsxDEV(Layout, {
+        children: [
+          /* @__PURE__ */ jsxDEV("script", {
+            dangerouslySetInnerHTML: {
+              __html: `
+
+window.addEventListener("load", async () => {
+  const { startAuthentication } = SimpleWebAuthnBrowser;
+  const message = document.querySelector("[data-slot='message']");
+  const authorizeForm = document.getElementById("authorizeForm");
+  const origin = window.location.origin;
+  const rpID = window.location.hostname;
+  authorizeForm.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const formData = new FormData(authorizeForm);
+    const email = formData.get("email");
+    message.innerHTML = "";
+
+    // GET registration options from the endpoint that calls
+    // @simplewebauthn/server -> generateRegistrationOptions()
+    const resp = await fetch(
+      "/passkey/authenticate-options?userId=" + email + "&rpID=" + rpID
+    );
+
+    const optionsJSON = await resp.json();
+
+    if (optionsJSON.error) {
+      message.innerHTML = optionsJSON.error;
+      return;
+    }
+
+    let attResp;
+    try {
+      // Pass the options to the authenticator and wait for a response
+      attResp = await startAuthentication({ optionsJSON });
+    } catch (error) {
+      message.innerHTML = error;
+      throw error;
+    }
+    const verificationResp = await fetch(
+      "/passkey/authenticate-verify?userId=" +
+        email +
+        "&rpID=" +
+        rpID +
+        "&origin=" +
+        origin,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(attResp),
+      }
+    );
+    
+    // Check if the request was redirected and the final response is OK
+    if (verificationResp.redirected && verificationResp.ok) {
+      // Navigate the browser to the final URL
+      window.location.href = verificationResp.url;
+    } else {
+      // Handle errors (e.g., 4xx, 5xx status codes from the final URL)
+      console.error(
+        "Request failed:",
+        verificationResp.status,
+        verificationResp.statusText
+      );
+      try {
+        const errorData = await verificationResp.json();
+        message.innerHTML = errorData.error;
+      } catch (error) {
+        message.innerHTML = "Something went wrong";
+      }
+    }
+  });
+});
+              `
+            }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            children: "Passkeys are a simple and more secure alternative to passwords."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            children: "With passkeys, you can log in with your PIN, biometric sensor, or hardware security key. You can create a passkey on this device, or use another device."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("form", {
+            id: "authorizeForm",
+            "data-component": "form",
+            method: "post",
+            children: [
+              /* @__PURE__ */ jsxDEV(FormAlert, {}, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("input", {
+                "data-component": "input",
+                type: "email",
+                name: "email",
+                required: true,
+                placeholder: copy.input_email
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("button", {
+                type: "submit",
+                id: "btnLogin",
+                "data-component": "button",
+                children: copy.login_with_passkey
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                "data-component": "form-footer",
+                children: /* @__PURE__ */ jsxDEV("span", {
+                  children: [
+                    copy.register_prompt,
+                    " ",
+                    /* @__PURE__ */ jsxDEV("a", {
+                      "data-component": "link",
+                      href: "register",
+                      children: copy.register
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("script", {
+            src: "https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+      return new Response(jsx.toString(), {
+        status: 200,
+        headers: {
+          "Content-Type": "text/html"
+        }
+      });
+    },
+    register: async () => {
+      const jsx = /* @__PURE__ */ jsxDEV(Layout, {
+        children: [
+          /* @__PURE__ */ jsxDEV("script", {
+            dangerouslySetInnerHTML: {
+              __html: `
+
+window.addEventListener("load", async () => {
+  const { startRegistration } = SimpleWebAuthnBrowser;
+  const message = document.querySelector("[data-slot='message']");
+  const registerForm = document.getElementById("registerForm");
+  const origin = window.location.origin;
+  const rpID = window.location.hostname;
+  // Start registration when the user clicks a button
+  const register = async (otherDevice = false) => {
+    const formData = new FormData(registerForm);
+    const email = formData.get("email");
+    message.innerHTML = "";
+
+    // GET registration options from the endpoint that calls
+    // @simplewebauthn/server -> generateRegistrationOptions()
+    const resp = await fetch(
+      "/passkey/register-request?userId=" +
+        email +
+        "&origin=" +
+        origin +
+        "&rpID=" +
+        rpID +
+        "&otherDevice=" +
+        otherDevice,
+    );
+    const optionsJSON = await resp.json();
+
+    if (optionsJSON.error) {
+      message.innerHTML = optionsJSON.error;
+      return;
+    }
+
+    let attResp;
+    try {
+      // Pass the options to the authenticator and wait for a response
+      attResp = await startRegistration({ optionsJSON });
+    } catch (error) {
+      message.innerHTML = error;
+
+      throw error;
+    }
+
+    // POST the response to the endpoint that calls
+    // @simplewebauthn/server -> verifyRegistrationResponse()
+    try {
+      const verificationResp = await fetch(
+        "/passkey/register-verify?userId=" +
+          email +
+          "&origin=" +
+          origin +
+          "&rpID=" +
+          rpID,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(attResp),
+        }
+      );
+
+      // Check if the request was redirected and the final response is OK
+      if (verificationResp.redirected && verificationResp.ok) {
+        // Navigate the browser to the final URL
+        window.location.href = verificationResp.url;
+      } else {
+        // Handle errors (e.g., 4xx, 5xx status codes from the final URL)
+        console.error(
+          "Request failed:",
+          verificationResp.status,
+          verificationResp.statusText
+        );
+        try {
+          const errorData = await verificationResp.json();
+          message.innerHTML = errorData.error;
+        } catch (error) {
+          message.innerHTML = "Something went wrong";
+        }
+      }
+    } catch (error) {
+      console.error(error);
+      message.innerHTML = "Something went wrong";
+    }
+  };
+  registerForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+    register();
+  });
+    
+});
+
+              `
+            }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("form", {
+            id: "registerForm",
+            "data-component": "form",
+            method: "post",
+            children: [
+              /* @__PURE__ */ jsxDEV(FormAlert, {}, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("input", {
+                "data-component": "input",
+                type: "email",
+                name: "email",
+                required: true,
+                placeholder: copy.input_email
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("button", {
+                "data-component": "button",
+                type: "submit",
+                id: "btnRegister",
+                children: copy.register_with_passkey
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("button", {
+                "data-component": "button",
+                type: "submit",
+                id: "btnOtherDevice",
+                children: copy.register_other_device
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                "data-component": "form-footer",
+                children: /* @__PURE__ */ jsxDEV("span", {
+                  children: [
+                    copy.login_prompt,
+                    " ",
+                    /* @__PURE__ */ jsxDEV("a", {
+                      "data-component": "link",
+                      href: "authorize",
+                      children: copy.login
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("script", {
+            src: "https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+      return new Response(jsx.toString(), {
+        status: 200,
+        headers: {
+          "Content-Type": "text/html"
+        }
+      });
+    },
+    rpName,
+    rpID,
+    origin,
+    userCanRegisterPasskey,
+    authenticatorSelection,
+    attestationType,
+    timeout
+  };
+}
+export {
+  PasskeyUI
+};