@dloizides/auth-web 1.7.0 → 1.9.0

package/dist/index.js

@@ -236,7 +236,8 @@ var DEFAULT_PASSKEY_LOGIN_LABELS = {
   signInButton: "Sign in with a passkey",
   signInHint: "Use your fingerprint, face, or security key to sign in",
   errorCancelled: "Passkey sign-in was cancelled. You can try again or sign in another way.",
-  errorFailed: "Passkey sign-in didn't work. Try again, or sign in another way."
+  errorFailed: "Passkey sign-in didn't work. Try again, or sign in another way.",
+  tryAnotherWay: "Sign in another way"
 };
 var DEFAULT_PASSKEY_SETTINGS_LABELS = {
   title: "Passkeys",
@@ -338,6 +339,7 @@ var AuthTestIds = {
   passkeyLogin: "auth-passkey-login",
   passkeyLoginButton: "auth-passkey-login-button",
   passkeyLoginError: "auth-passkey-login-error",
+  passkeyLoginFallback: "auth-passkey-login-fallback",
   // Passkey settings card
   passkeySettings: "auth-passkey-settings",
   passkeySettingsAdd: "auth-passkey-settings-add",
@@ -411,6 +413,11 @@ function useAuthStyles(theme) {
       primaryButton: {
         borderRadius: radii.input,
         paddingVertical: BUTTON_VERTICAL_PADDING,
+        paddingHorizontal: spacing.md,
+        // Never shrink below the label width: in a row of actions (e.g. the
+        // forgot-password modal's Cancel + submit), shrinking would clip a long
+        // label like "Send reset link" past the button's rounded edge.
+        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.xs,
@@ -453,6 +460,8 @@ function useAuthStyles(theme) {
         borderWidth: 1,
         borderColor: colors.primary,
         paddingVertical: BUTTON_VERTICAL_PADDING,
+        paddingHorizontal: spacing.md,
+        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.sm,
@@ -895,6 +904,9 @@ function useModalStyles(theme) {
         flexDirection: "row",
         justifyContent: "flex-end",
         alignItems: "center",
+        // Wrap (rather than clip) when a long submit label + Cancel can't
+        // fit a narrow modal on one line.
+        flexWrap: "wrap",
         marginTop: theme.spacing.md,
         gap: theme.spacing.sm
       },
@@ -902,6 +914,8 @@ function useModalStyles(theme) {
         borderRadius: theme.radii.input,
         paddingVertical: theme.spacing.sm,
         paddingHorizontal: theme.spacing.md,
+        // Match the submit button: never shrink below the label width.
+        flexShrink: 0,
         borderWidth: SECONDARY_BORDER_WIDTH,
         borderColor: theme.colors.border
       },
@@ -2499,6 +2513,13 @@ function DevicePinSettingsCard({
   }
 }
 
+// src/passkey/PasskeyCeremonyMode.ts
+var PasskeyCeremonyMode = /* @__PURE__ */ ((PasskeyCeremonyMode2) => {
+  PasskeyCeremonyMode2["Login"] = "login";
+  PasskeyCeremonyMode2["Register"] = "register";
+  return PasskeyCeremonyMode2;
+})(PasskeyCeremonyMode || {});
+
 // src/passkey/passkeyNavigation.ts
 var PASSKEY_LOGIN_ENDPOINT = "/bff/passkey/login";
 var PASSKEY_REGISTER_ENDPOINT = "/bff/passkey/register";
@@ -2550,6 +2571,230 @@ function readPasskeyRegistered() {
   }
   return params.get(PASSKEY_PARAM) === PASSKEY_REGISTERED_VALUE;
 }
+
+// src/passkey/PasskeyCeremonyStatus.ts
+var PasskeyCeremonyStatus = /* @__PURE__ */ ((PasskeyCeremonyStatus2) => {
+  PasskeyCeremonyStatus2["Idle"] = "idle";
+  PasskeyCeremonyStatus2["Running"] = "running";
+  PasskeyCeremonyStatus2["Success"] = "success";
+  PasskeyCeremonyStatus2["Error"] = "error";
+  return PasskeyCeremonyStatus2;
+})(PasskeyCeremonyStatus || {});
+
+// src/passkey/base64url.ts
+function base64UrlToBytes(value) {
+  const base64 = value.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+  const binary = atob(padded);
+  const bytes = new Uint8Array(new ArrayBuffer(binary.length));
+  for (let i = 0; i < binary.length; i += 1) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+function bytesToBase64Url(buffer) {
+  const bytes = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += 1) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+
+// src/passkey/webAuthnCoercion.ts
+var PUBLIC_KEY_TYPE = "public-key";
+function toDescriptors(value) {
+  if (!Array.isArray(value)) {
+    return void 0;
+  }
+  return value.map((entry) => {
+    const descriptor = entry;
+    return {
+      type: PUBLIC_KEY_TYPE,
+      id: base64UrlToBytes(descriptor.id),
+      transports: descriptor.transports
+    };
+  });
+}
+function toCreationOptions(options) {
+  const user = options.user;
+  return {
+    ...options,
+    challenge: base64UrlToBytes(options.challenge),
+    user: { ...user, id: base64UrlToBytes(user.id) },
+    excludeCredentials: toDescriptors(options.excludeCredentials)
+  };
+}
+function toRequestOptions(options) {
+  return {
+    ...options,
+    challenge: base64UrlToBytes(options.challenge),
+    allowCredentials: toDescriptors(options.allowCredentials)
+  };
+}
+function readTransports(response) {
+  return typeof response.getTransports === "function" ? response.getTransports() : [];
+}
+function encodeAttestation(credential) {
+  const response = credential.response;
+  return {
+    id: credential.id,
+    rawId: bytesToBase64Url(credential.rawId),
+    type: credential.type,
+    response: {
+      attestationObject: bytesToBase64Url(response.attestationObject),
+      clientDataJSON: bytesToBase64Url(response.clientDataJSON),
+      transports: readTransports(response)
+    },
+    clientExtensionResults: credential.getClientExtensionResults()
+  };
+}
+function encodeAssertion(credential) {
+  const response = credential.response;
+  const userHandle = response.userHandle !== null ? bytesToBase64Url(response.userHandle) : null;
+  return {
+    id: credential.id,
+    rawId: bytesToBase64Url(credential.rawId),
+    type: credential.type,
+    response: {
+      authenticatorData: bytesToBase64Url(response.authenticatorData),
+      clientDataJSON: bytesToBase64Url(response.clientDataJSON),
+      signature: bytesToBase64Url(response.signature),
+      userHandle
+    },
+    clientExtensionResults: credential.getClientExtensionResults()
+  };
+}
+
+// src/passkey/usePasskeyCeremony.ts
+var ERROR_CANCELLED = "cancelled";
+var ERROR_FAILED = "failed";
+var CANCEL_ERROR_NAMES = ["NotAllowedError", "AbortError"];
+var ENDPOINTS = {
+  ["login" /* Login */]: {
+    options: "/bff/passkey/login/options",
+    verify: "/bff/passkey/login/verify"
+  },
+  ["register" /* Register */]: {
+    options: "/bff/passkey/register/options",
+    verify: "/bff/passkey/register/verify"
+  }
+};
+function detectSupport() {
+  return typeof window !== "undefined" && typeof navigator !== "undefined" && typeof navigator.credentials !== "undefined" && typeof window.PublicKeyCredential !== "undefined";
+}
+function postJson(url, body) {
+  return fetch(url, {
+    method: "POST",
+    credentials: "same-origin",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body ?? {})
+  });
+}
+async function runCeremony(mode, envelope) {
+  const credential = mode === "register" /* Register */ ? await navigator.credentials.create({
+    publicKey: toCreationOptions(envelope.options)
+  }) : await navigator.credentials.get({
+    publicKey: toRequestOptions(envelope.options)
+  });
+  return credential;
+}
+function buildVerifyBody(mode, challengeId, credential) {
+  return mode === "register" /* Register */ ? { challengeId, attestationResponse: encodeAttestation(credential) } : { challengeId, assertionResponse: encodeAssertion(credential) };
+}
+function redirectFallback(mode, returnUrl) {
+  if (mode === "register" /* Register */) {
+    startPasskeyRegistration(returnUrl);
+    return;
+  }
+  startPasskeyLogin(returnUrl);
+}
+function classifyError(caught) {
+  const name = caught instanceof Error ? caught.name : "";
+  return CANCEL_ERROR_NAMES.includes(name) ? ERROR_CANCELLED : ERROR_FAILED;
+}
+function usePasskeyCeremony(optionsArg) {
+  const { mode, returnUrl, onSuccess } = optionsArg;
+  const [status, setStatus] = react.useState("idle" /* Idle */);
+  const [error, setError] = react.useState(null);
+  const isSupported = react.useMemo(detectSupport, []);
+  const succeed = react.useCallback(
+    (user) => {
+      setStatus("success" /* Success */);
+      if (onSuccess !== void 0) {
+        onSuccess(user);
+        return;
+      }
+      if (mode === "login" /* Login */ && typeof window !== "undefined") {
+        window.location.assign(returnUrl);
+      }
+    },
+    [mode, onSuccess, returnUrl]
+  );
+  const start = react.useCallback(() => {
+    if (!isSupported) {
+      redirectFallback(mode, returnUrl);
+      return;
+    }
+    setStatus("running" /* Running */);
+    setError(null);
+    void (async () => {
+      try {
+        const optionsResponse = await postJson(ENDPOINTS[mode].options, {});
+        if (!optionsResponse.ok) {
+          redirectFallback(mode, returnUrl);
+          return;
+        }
+        const envelope = await optionsResponse.json();
+        const credential = await runCeremony(mode, envelope);
+        if (credential === null) {
+          if (mode === "login" /* Login */) {
+            redirectFallback(mode, returnUrl);
+            return;
+          }
+          setStatus("error" /* Error */);
+          setError(ERROR_FAILED);
+          return;
+        }
+        const verifyResponse = await postJson(
+          ENDPOINTS[mode].verify,
+          buildVerifyBody(mode, envelope.challengeId, credential)
+        );
+        if (!verifyResponse.ok) {
+          setStatus("error" /* Error */);
+          setError(ERROR_FAILED);
+          return;
+        }
+        if (mode === "register" /* Register */) {
+          const { success } = await verifyResponse.json();
+          if (!success) {
+            setStatus("error" /* Error */);
+            setError(ERROR_FAILED);
+            return;
+          }
+          succeed(void 0);
+          return;
+        }
+        const { user } = await verifyResponse.json();
+        succeed(user);
+      } catch (caught) {
+        setStatus("error" /* Error */);
+        setError(classifyError(caught));
+      }
+    })();
+  }, [isSupported, mode, returnUrl, succeed]);
+  const fallbackToRedirect = react.useCallback(() => {
+    redirectFallback(mode, returnUrl);
+  }, [mode, returnUrl]);
+  const reset = react.useCallback(() => {
+    setStatus("idle" /* Idle */);
+    setError(null);
+  }, []);
+  return react.useMemo(
+    () => ({ status, error, isSupported, start, fallbackToRedirect, reset }),
+    [status, error, isSupported, start, fallbackToRedirect, reset]
+  );
+}
 var DEFAULT_RETURN_URL = "/";
 function PasskeyLoginButton({
   returnUrl = DEFAULT_RETURN_URL,
@@ -2563,16 +2808,30 @@ function PasskeyLoginButton({
     () => ({ ...DEFAULT_PASSKEY_LOGIN_LABELS, ...labelsProp }),
     [labelsProp]
   );
-  const error = readPasskeyError();
+  const ceremony = usePasskeyCeremony({ mode: "login" /* Login */, returnUrl });
+  const error = ceremony.error ?? readPasskeyError();
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { testID: withTestIdPrefix(AuthTestIds.passkeyLogin, testIdPrefix), children: [
-    error !== null ? /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Text,
-      {
-        style: styles3.errorText,
-        testID: withTestIdPrefix(AuthTestIds.passkeyLoginError, testIdPrefix),
-        children: error === "cancelled" ? labels.errorCancelled : labels.errorFailed
-      }
-    ) : null,
+    error !== null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: styles3.errorText,
+          testID: withTestIdPrefix(AuthTestIds.passkeyLoginError, testIdPrefix),
+          children: error === "cancelled" ? labels.errorCancelled : labels.errorFailed
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.TouchableOpacity,
+        {
+          accessibilityHint: labels.tryAnotherWay,
+          accessibilityLabel: labels.tryAnotherWay,
+          accessibilityRole: "button",
+          testID: withTestIdPrefix(AuthTestIds.passkeyLoginFallback, testIdPrefix),
+          onPress: () => ceremony.fallbackToRedirect(),
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.linkText, children: labels.tryAnotherWay })
+        }
+      )
+    ] }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.TouchableOpacity,
       {
@@ -2581,7 +2840,7 @@ function PasskeyLoginButton({
         accessibilityRole: "button",
         style: styles3.secondaryButton,
         testID: withTestIdPrefix(AuthTestIds.passkeyLoginButton, testIdPrefix),
-        onPress: () => startPasskeyLogin(returnUrl),
+        onPress: () => ceremony.start(),
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.secondaryButtonText, children: labels.signInButton })
       }
     )
@@ -2606,8 +2865,12 @@ function PasskeySettingsCard({
     () => ({ ...DEFAULT_PASSKEY_SETTINGS_LABELS, ...labelsProp }),
     [labelsProp]
   );
-  const justRegistered = readPasskeyRegistered();
   const target = returnUrl ?? readCurrentPath();
+  const ceremony = usePasskeyCeremony({
+    mode: "register" /* Register */,
+    returnUrl: target
+  });
+  const justRegistered = ceremony.status === "success" /* Success */ || readPasskeyRegistered();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
@@ -2633,7 +2896,7 @@ function PasskeySettingsCard({
             accessibilityRole: "button",
             style: styles3.primaryButton,
             testID: withTestIdPrefix(AuthTestIds.passkeySettingsAdd, testIdPrefix),
-            onPress: () => startPasskeyRegistration(target),
+            onPress: () => ceremony.start(),
             children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.primaryButtonText, children: labels.addButton })
           }
         )
@@ -3049,6 +3312,8 @@ exports.OtpForm = OtpForm;
 exports.OtpLoginStep = OtpLoginStep;
 exports.PASSWORD_MAX_LENGTH = PASSWORD_MAX_LENGTH;
 exports.PASSWORD_MIN_LENGTH = PASSWORD_MIN_LENGTH;
+exports.PasskeyCeremonyMode = PasskeyCeremonyMode;
+exports.PasskeyCeremonyStatus = PasskeyCeremonyStatus;
 exports.PasskeyLoginButton = PasskeyLoginButton;
 exports.PasskeySettingsCard = PasskeySettingsCard;
 exports.PasswordPolicyError = PasswordPolicyError;
@@ -3084,6 +3349,7 @@ exports.useDevicePinEnroll = useDevicePinEnroll;
 exports.useDevicePinUnlock = useDevicePinUnlock;
 exports.useForgotPasswordSubmit = useForgotPasswordSubmit;
 exports.useOtpLogin = useOtpLogin;
+exports.usePasskeyCeremony = usePasskeyCeremony;
 exports.usePinLogin = usePinLogin;
 exports.usePreferredMethodSetting = usePreferredMethodSetting;
 exports.useResetPasswordForm = useResetPasswordForm;