cauthy-auth 0.11.0 → 0.12.0

package/dist/react.d.mts

@@ -212,6 +212,12 @@ type AuthField = 'email' | 'password' | 'newPassword' | 'name' | 'code';
 
 /** Whether this browser can use a passkey at all. */
 declare function canUsePasskeys(): boolean;
+/**
+ * Whether this browser offers passkeys in the autofill of a field marked
+ * `autocomplete="username webauthn"`, so the person picks one without
+ * looking for a button.
+ */
+declare function canAutofillPasskeys(): Promise<boolean>;
 
 /** What went wrong, in a form the screen can show. */
 interface AuthError {
@@ -426,6 +432,34 @@ interface AuthClient {
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }> | AuthResult<'redirected'>>;
+        /**
+         * Offers the person's passkeys in the browser's autofill of the email
+         * field, which must carry `autocomplete="username webauthn"`, and signs in
+         * with the one they pick. It waits until they pick one or `signal`
+         * aborts: abort it before calling `passkey` or sending the form.
+         * `cancelled`: aborted, or this browser or page cannot (then there is
+         * nothing to offer, and the passkey button still works).
+         */
+        passkeyAutofill(options?: {
+            signal?: AbortSignal;
+        }): Promise<AuthResult<'signed_in', {
+            session: PublicSession;
+        }>>;
+        /**
+         * Google One Tap: Google's prompt over the page offers the Google account
+         * the browser already has, and signs in with it in one tap, as the Google
+         * sign-in does (the same account). Needs the workspace's Google sign-in,
+         * and the page's address among the Google client's authorized JavaScript
+         * origins. Waits until the person picks an account or closes the prompt
+         * (`cancelled`), or `signal` aborts. `one_tap_unavailable`: the workspace
+         * has no Google sign-in.
+         */
+        googleOneTap(options?: {
+            signal?: AbortSignal;
+            context?: 'signin' | 'signup' | 'use';
+        }): Promise<AuthResult<'signed_in', {
+            session: PublicSession;
+        }>>;
         /** Where `passkey` sends the browser when this page cannot use the passkey itself. */
         passkeyUrl(options?: {
             returnTo?: string;
@@ -623,6 +657,21 @@ interface AuthFormProps {
     };
 }
 declare function SignIn(props: AuthFormProps): react.JSX.Element;
+interface GoogleOneTapProps {
+    /** Where to go once signed in. Without it (and without `onSuccess`), the page stays and its session updates. */
+    returnTo?: string;
+    /** Called once signed in, instead of going to `returnTo`. */
+    onSuccess?: () => void;
+    /** The prompt's words: sign in (default), sign up, or use the application. */
+    context?: 'signin' | 'signup' | 'use';
+}
+/**
+ * Google One Tap: put it on any page, and a person who is not signed in sees
+ * Google's prompt with the Google account the browser has; one tap signs them
+ * in. It draws nothing of its own, and shows nothing to somebody signed in or
+ * where the workspace has no Google sign-in.
+ */
+declare function GoogleOneTap(props: GoogleOneTapProps): null;
 declare function SignUp(props: AuthFormProps): react.JSX.Element;
 declare function ForgotPassword(props: AuthFormProps): react.JSX.Element;
 /** The page a "choose a new password" link opens: `pages.resetPassword`. */
@@ -685,4 +734,4 @@ declare function useSession(): SessionContext;
  */
 declare function useAuth(): AuthClient & Pick<SessionContext, 'session' | 'status' | 'refresh'>;
 
-export { Account, type AccountClient, type Account$1 as AccountDetails, type AccountProps, type AccountSession, type AuthClient, type AuthError, type AuthFormProps, type AuthMethods, type AuthResult, type AuthTexts, CauthyProvider, type CauthyProviderProps, ForgotPassword, type JsonValue, type LinkedIdentity, type Passkey, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };
+export { Account, type AccountClient, type Account$1 as AccountDetails, type AccountProps, type AccountSession, type AuthClient, type AuthError, type AuthFormProps, type AuthMethods, type AuthResult, type AuthTexts, CauthyProvider, type CauthyProviderProps, ForgotPassword, GoogleOneTap, type GoogleOneTapProps, type JsonValue, type LinkedIdentity, type Passkey, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canAutofillPasskeys, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };

package/dist/react.d.ts

@@ -212,6 +212,12 @@ type AuthField = 'email' | 'password' | 'newPassword' | 'name' | 'code';
 
 /** Whether this browser can use a passkey at all. */
 declare function canUsePasskeys(): boolean;
+/**
+ * Whether this browser offers passkeys in the autofill of a field marked
+ * `autocomplete="username webauthn"`, so the person picks one without
+ * looking for a button.
+ */
+declare function canAutofillPasskeys(): Promise<boolean>;
 
 /** What went wrong, in a form the screen can show. */
 interface AuthError {
@@ -426,6 +432,34 @@ interface AuthClient {
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }> | AuthResult<'redirected'>>;
+        /**
+         * Offers the person's passkeys in the browser's autofill of the email
+         * field, which must carry `autocomplete="username webauthn"`, and signs in
+         * with the one they pick. It waits until they pick one or `signal`
+         * aborts: abort it before calling `passkey` or sending the form.
+         * `cancelled`: aborted, or this browser or page cannot (then there is
+         * nothing to offer, and the passkey button still works).
+         */
+        passkeyAutofill(options?: {
+            signal?: AbortSignal;
+        }): Promise<AuthResult<'signed_in', {
+            session: PublicSession;
+        }>>;
+        /**
+         * Google One Tap: Google's prompt over the page offers the Google account
+         * the browser already has, and signs in with it in one tap, as the Google
+         * sign-in does (the same account). Needs the workspace's Google sign-in,
+         * and the page's address among the Google client's authorized JavaScript
+         * origins. Waits until the person picks an account or closes the prompt
+         * (`cancelled`), or `signal` aborts. `one_tap_unavailable`: the workspace
+         * has no Google sign-in.
+         */
+        googleOneTap(options?: {
+            signal?: AbortSignal;
+            context?: 'signin' | 'signup' | 'use';
+        }): Promise<AuthResult<'signed_in', {
+            session: PublicSession;
+        }>>;
         /** Where `passkey` sends the browser when this page cannot use the passkey itself. */
         passkeyUrl(options?: {
             returnTo?: string;
@@ -623,6 +657,21 @@ interface AuthFormProps {
     };
 }
 declare function SignIn(props: AuthFormProps): react.JSX.Element;
+interface GoogleOneTapProps {
+    /** Where to go once signed in. Without it (and without `onSuccess`), the page stays and its session updates. */
+    returnTo?: string;
+    /** Called once signed in, instead of going to `returnTo`. */
+    onSuccess?: () => void;
+    /** The prompt's words: sign in (default), sign up, or use the application. */
+    context?: 'signin' | 'signup' | 'use';
+}
+/**
+ * Google One Tap: put it on any page, and a person who is not signed in sees
+ * Google's prompt with the Google account the browser has; one tap signs them
+ * in. It draws nothing of its own, and shows nothing to somebody signed in or
+ * where the workspace has no Google sign-in.
+ */
+declare function GoogleOneTap(props: GoogleOneTapProps): null;
 declare function SignUp(props: AuthFormProps): react.JSX.Element;
 declare function ForgotPassword(props: AuthFormProps): react.JSX.Element;
 /** The page a "choose a new password" link opens: `pages.resetPassword`. */
@@ -685,4 +734,4 @@ declare function useSession(): SessionContext;
  */
 declare function useAuth(): AuthClient & Pick<SessionContext, 'session' | 'status' | 'refresh'>;
 
-export { Account, type AccountClient, type Account$1 as AccountDetails, type AccountProps, type AccountSession, type AuthClient, type AuthError, type AuthFormProps, type AuthMethods, type AuthResult, type AuthTexts, CauthyProvider, type CauthyProviderProps, ForgotPassword, type JsonValue, type LinkedIdentity, type Passkey, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };
+export { Account, type AccountClient, type Account$1 as AccountDetails, type AccountProps, type AccountSession, type AuthClient, type AuthError, type AuthFormProps, type AuthMethods, type AuthResult, type AuthTexts, CauthyProvider, type CauthyProviderProps, ForgotPassword, GoogleOneTap, type GoogleOneTapProps, type JsonValue, type LinkedIdentity, type Passkey, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canAutofillPasskeys, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };

package/dist/react.js

@@ -24,11 +24,13 @@ __export(react_exports, {
   Account: () => Account,
   CauthyProvider: () => CauthyProvider,
   ForgotPassword: () => ForgotPassword,
+  GoogleOneTap: () => GoogleOneTap,
   ResetPassword: () => ResetPassword,
   SignIn: () => SignIn,
   SignUp: () => SignUp,
   VerifyEmail: () => VerifyEmail,
   can: () => can,
+  canAutofillPasskeys: () => canAutofillPasskeys,
   canUsePasskeys: () => canUsePasskeys,
   createAuthClient: () => createAuthClient,
   definePolicy: () => definePolicy,
@@ -42,6 +44,15 @@ var import_react3 = require("react");
 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);
@@ -57,9 +68,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 {
@@ -203,6 +214,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(/\/+$/, "");
@@ -286,6 +315,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));
@@ -702,6 +791,8 @@ function SignIn(props) {
   const [password, setPassword] = (0, import_react.useState)("");
   const [code, setCode] = (0, import_react.useState)("");
   const [step, setStep] = (0, import_react.useState)("password");
+  const autofill = (0, import_react.useRef)(null);
+  const [offer, setOffer] = (0, import_react.useState)(0);
   (0, import_react.useEffect)(() => {
     void auth.methods().then(setMethods);
     const back = returnedError();
@@ -716,26 +807,46 @@ function SignIn(props) {
       setStep("password");
     });
   });
+  (0, import_react.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 });
@@ -771,7 +882,7 @@ function SignIn(props) {
     ] }, p.id)),
     methods?.passkey && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("p", { className: f.cx("separator"), children: f.t.orWithEmail }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "username", required: true, onChange: setEmail }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: methods?.passkeyHere ? "username webauthn" : "username", required: true, onChange: setEmail }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Field,
       {
@@ -795,6 +906,21 @@ function SignIn(props) {
     ] })
   ] });
 }
+function GoogleOneTap(props) {
+  const auth = useAuth();
+  const unauthenticated = auth.status === "unauthenticated";
+  (0, import_react.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);
@@ -1286,7 +1412,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: {
@@ -1307,11 +1442,13 @@ function useAuth() {
   Account,
   CauthyProvider,
   ForgotPassword,
+  GoogleOneTap,
   ResetPassword,
   SignIn,
   SignUp,
   VerifyEmail,
   can,
+  canAutofillPasskeys,
   canUsePasskeys,
   createAuthClient,
   definePolicy,