cauthy-auth 0.11.0 → 0.12.0

package/dist/react.mjs

@@ -7,6 +7,15 @@ import { createContext, useCallback, useContext, useEffect as useEffect2, useMem
 function canUsePasskeys() {
   return typeof window !== "undefined" && typeof window.PublicKeyCredential === "function" && typeof navigator !== "undefined" && typeof navigator.credentials?.get === "function";
 }
+async function canAutofillPasskeys() {
+  if (!canUsePasskeys()) return false;
+  const pkc = window.PublicKeyCredential;
+  try {
+    return typeof pkc.isConditionalMediationAvailable === "function" && await pkc.isConditionalMediationAvailable() === true;
+  } catch {
+    return false;
+  }
+}
 function bytes(text2) {
   const b64 = text2.replace(/-/g, "+").replace(/_/g, "/").padEnd(Math.ceil(text2.length / 4) * 4, "=");
   const bin = atob(b64);
@@ -22,9 +31,9 @@ function text(buf) {
   return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
 var withId = (list) => (list ?? []).map((c) => ({ ...c, id: bytes(c.id) }));
-async function getPasskey(options) {
+async function getPasskey(options, how = {}) {
   const publicKey = { ...options, challenge: bytes(options.challenge), allowCredentials: withId(options.allowCredentials) };
-  const cred = await navigator.credentials.get({ publicKey });
+  const cred = await navigator.credentials.get({ publicKey, ...how });
   if (cred === null) throw new DOMException("No passkey was chosen.", "NotAllowedError");
   const r = cred.response;
   return {
@@ -168,6 +177,24 @@ function firstProblem(...checks) {
 }
 
 // src/client.ts
+var googleScript = null;
+function loadGoogleIdentity() {
+  const ready = () => window.google?.accounts?.id;
+  if (ready()) return Promise.resolve(ready());
+  googleScript ??= new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "https://accounts.google.com/gsi/client";
+    script.async = true;
+    script.onload = () => ready() ? resolve(ready()) : reject(new Error("google identity services did not load"));
+    script.onerror = () => {
+      googleScript = null;
+      reject(new Error("google identity services did not load"));
+    };
+    document.head.appendChild(script);
+  });
+  return googleScript;
+}
+var PASSKEY_SECONDS = 300;
 var UNAVAILABLE = { code: "unavailable", message: "Sign-in is unavailable right now. Try again in a moment." };
 function createAuthClient(options = {}) {
   const base = (options.basePath ?? "/api/auth").replace(/\/+$/, "");
@@ -251,6 +278,66 @@ function createAuthClient(options = {}) {
         window.location.assign(passkeyUrl(o));
         return { ok: true, status: "redirected" };
       },
+      async passkeyAutofill(o = {}) {
+        const cancelled = { ok: false, error: { code: "cancelled", message: "No passkey was chosen." } };
+        const m = await methods();
+        if (!m.passkeyHere || !await canAutofillPasskeys()) return cancelled;
+        for (; ; ) {
+          if (o.signal?.aborted) return cancelled;
+          const begun = await post("/sign-in/passkey/begin", {}, null);
+          if (!begun.ok) return begun;
+          const renew = new AbortController();
+          const stop = () => renew.abort();
+          o.signal?.addEventListener("abort", stop, { once: true });
+          const timer = setTimeout(stop, (PASSKEY_SECONDS - 30) * 1e3);
+          let credential;
+          try {
+            credential = await getPasskey(begun.options, { mediation: "conditional", signal: renew.signal });
+          } catch (e) {
+            if (o.signal?.aborted) return cancelled;
+            if (renew.signal.aborted) continue;
+            return { ok: false, error: ceremonyError(e) };
+          } finally {
+            clearTimeout(timer);
+            o.signal?.removeEventListener("abort", stop);
+          }
+          return post("/sign-in/passkey/finish", { credential }, null);
+        }
+      },
+      async googleOneTap(o = {}) {
+        const cancelled = { ok: false, error: { code: "cancelled", message: "No Google account was chosen." } };
+        if (typeof window === "undefined" || o.signal?.aborted) return cancelled;
+        const begun = await post("/sign-in/google-one-tap/begin", {}, null);
+        if (!begun.ok) return begun;
+        let gis;
+        try {
+          gis = await loadGoogleIdentity();
+        } catch {
+          return { ok: false, error: { code: "unavailable", message: "Google could not be reached. Try again, or sign in another way." } };
+        }
+        const credential = await new Promise((done) => {
+          o.signal?.addEventListener("abort", () => {
+            gis.cancel();
+            done(null);
+          }, { once: true });
+          gis.initialize({
+            client_id: begun.clientId,
+            nonce: begun.nonce,
+            context: o.context ?? "signin",
+            callback: (r) => done(r.credential ?? null),
+            auto_select: false,
+            cancel_on_tap_outside: true,
+            itp_support: true,
+            use_fedcm_for_prompt: true
+          });
+          gis.prompt((moment) => {
+            if (moment.isNotDisplayed?.() || moment.isSkippedMoment?.()) done(null);
+            else if (moment.isDismissedMoment?.() && moment.getDismissedReason?.() !== "credential_returned") done(null);
+          });
+        });
+        if (credential === null) return cancelled;
+        return post("/sign-in/google-one-tap", { credential }, null);
+      },
       socialUrl,
       social(provider, o) {
         window.location.assign(socialUrl(provider, o));
@@ -667,6 +754,8 @@ function SignIn(props) {
   const [password, setPassword] = useState("");
   const [code, setCode] = useState("");
   const [step, setStep] = useState("password");
+  const autofill = useRef(null);
+  const [offer, setOffer] = useState(0);
   useEffect(() => {
     void auth.methods().then(setMethods);
     const back = returnedError();
@@ -681,26 +770,46 @@ function SignIn(props) {
       setStep("password");
     });
   });
+  useEffect(() => {
+    if (step !== "password" || !methods?.passkeyHere) return;
+    const ctl = new AbortController();
+    autofill.current = ctl;
+    void auth.signIn.passkeyAutofill({ signal: ctl.signal }).then((r) => {
+      if (ctl.signal.aborted) return;
+      if (r.ok) return f.done();
+      if (r.error.code === "cancelled") return;
+      f.setError(r.error);
+      if (r.error.code === "passkey_failed" || r.error.code === "step_expired") setOffer((n) => n + 1);
+    });
+    return () => ctl.abort();
+  }, [step, methods, offer]);
   const submit = async (e) => {
     e.preventDefault();
+    autofill.current?.abort();
     f.setBusy(true);
     f.setError(null);
     const r = step === "code" ? await auth.signIn.mfa({ code }) : step === "sent" ? await auth.signIn.emailCode({ code }) : await auth.signIn.email({ email, password });
     f.setBusy(false);
-    if (!r.ok) return f.setError(r.error);
+    if (!r.ok) {
+      setOffer((n) => n + 1);
+      return f.setError(r.error);
+    }
     if (r.status === "mfa_required") return setStep("code");
     f.done();
   };
   const usePasskey = async () => {
+    autofill.current?.abort();
     f.setBusy(true);
     f.setError(null);
     const r = await auth.signIn.passkey({ returnTo: props.returnTo, locale: props.locale });
     if (r.ok && r.status === "redirected") return;
     f.setBusy(false);
+    if (!r.ok) setOffer((n) => n + 1);
     if (!r.ok) return r.error.code === "cancelled" ? void 0 : f.setError(r.error);
     f.done();
   };
   const sendLink = async () => {
+    autofill.current?.abort();
     f.setBusy(true);
     f.setError(null);
     const r = await auth.signIn.magicLink({ email });
@@ -736,7 +845,7 @@ function SignIn(props) {
     ] }, p.id)),
     methods?.passkey && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void usePasskey(), children: f.t.usePasskey }),
     ((methods?.providers.length ?? 0) > 0 || methods?.passkey) && /* @__PURE__ */ jsx("p", { className: f.cx("separator"), children: f.t.orWithEmail }),
-    /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "username", required: true, onChange: setEmail }),
+    /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: methods?.passkeyHere ? "username webauthn" : "username", required: true, onChange: setEmail }),
     /* @__PURE__ */ jsx(
       Field,
       {
@@ -760,6 +869,21 @@ function SignIn(props) {
     ] })
   ] });
 }
+function GoogleOneTap(props) {
+  const auth = useAuth();
+  const unauthenticated = auth.status === "unauthenticated";
+  useEffect(() => {
+    if (!unauthenticated) return;
+    const ctl = new AbortController();
+    void auth.signIn.googleOneTap({ signal: ctl.signal, context: props.context }).then((r) => {
+      if (!r.ok || ctl.signal.aborted) return;
+      if (props.onSuccess) props.onSuccess();
+      else if (props.returnTo) window.location.assign(props.returnTo);
+    });
+    return () => ctl.abort();
+  }, [unauthenticated]);
+  return null;
+}
 function SignUp(props) {
   const auth = useAuth();
   const f = useForm(props);
@@ -1251,7 +1375,16 @@ function useAuth() {
     };
     return {
       ...client,
-      signIn: { ...client.signIn, email: (f) => then(client.signIn.email(f)), mfa: (f) => then(client.signIn.mfa(f)), magicLinkVerify: (f) => then(client.signIn.magicLinkVerify(f)), emailCode: (f) => then(client.signIn.emailCode(f)) },
+      signIn: {
+        ...client.signIn,
+        email: (f) => then(client.signIn.email(f)),
+        mfa: (f) => then(client.signIn.mfa(f)),
+        magicLinkVerify: (f) => then(client.signIn.magicLinkVerify(f)),
+        emailCode: (f) => then(client.signIn.emailCode(f)),
+        passkey: (o) => then(client.signIn.passkey(o)),
+        passkeyAutofill: (o) => then(client.signIn.passkeyAutofill(o)),
+        googleOneTap: (o) => then(client.signIn.googleOneTap(o))
+      },
       signUp: { email: (f) => then(client.signUp.email(f)) },
       signOut: () => then(client.signOut()),
       account: {
@@ -1271,11 +1404,13 @@ export {
   Account,
   CauthyProvider,
   ForgotPassword,
+  GoogleOneTap,
   ResetPassword,
   SignIn,
   SignUp,
   VerifyEmail,
   can,
+  canAutofillPasskeys,
   canUsePasskeys,
   createAuthClient,
   definePolicy,