@dloizides/auth-web 1.8.1 → 1.9.1

package/dist/index.d.mts

@@ -345,6 +345,13 @@ interface PasskeyLoginLabels {
     errorCancelled: string;
     /** Error banner when the ceremony failed. */
     errorFailed: string;
+    /**
+     * The "try another way" affordance shown after an in-page ceremony error — it
+     * hands off to the Keycloak-hosted passkey/password flow. This is the seam that
+     * rescues a user whose credential is only enrolled in Keycloak (not the in-page
+     * RP store): the in-page ceremony can't see it, so they fall back to KC.
+     */
+    tryAnotherWay: string;
 }
 /** Strings rendered by `<PasskeySettingsCard>` — the account passkey card. */
 interface PasskeySettingsLabels {
@@ -1301,6 +1308,7 @@ declare const AuthTestIds: {
     readonly passkeyLogin: "auth-passkey-login";
     readonly passkeyLoginButton: "auth-passkey-login-button";
     readonly passkeyLoginError: "auth-passkey-login-error";
+    readonly passkeyLoginFallback: "auth-passkey-login-fallback";
     readonly passkeySettings: "auth-passkey-settings";
     readonly passkeySettingsAdd: "auth-passkey-settings-add";
     readonly passkeySettingsSuccess: "auth-passkey-settings-success";
@@ -1686,30 +1694,6 @@ declare const enum PasskeyCeremonyStatus {
     Error = "error"
 }
 
-/**
- * Navigation helpers for the passkey (WebAuthn) BFF endpoints.
- *
- * Unlike the device-PIN client (which is plain `fetch`), the passkey login and
- * registration ceremonies are NOT fetches — they are full-page BROWSER
- * NAVIGATIONS. The BFF (`Bff.AspNetCore` 1.3.x) drives the WebAuthn ceremony
- * through Keycloak's hosted pages, then redirects the browser back:
- *  - login:        `/bff/passkey/login?returnUrl=<rel>` → on success the browser
- *    lands on `returnUrl` with the session cookie already set;
- *  - registration: `/bff/passkey/register?returnUrl=<rel>` → Keycloak re-auths
- *    the user (password) then runs the credential-creation ceremony, returning
- *    the browser to `returnUrl?passkey=registered`;
- *  - failure / cancel: the BFF redirects to `<login>?passkeyError=cancelled` or
- *    `<login>?passkeyError=failed`.
- *
- * react-query-FREE by construction: there is NO fetch here at all — every
- * function is a pure `window.location` read or `window.location.assign`. The
- * login route group has no QueryClient provider, so the passkey login button
- * (which lives there) MUST avoid any react-query primitive; navigation satisfies
- * that trivially.
- *
- * All reads are SSR-safe: when `window` is undefined (server render / native)
- * they return a benign default rather than throwing.
- */
 /** The recognised passkey error codes the BFF sends back via `?passkeyError=`. */
 type PasskeyErrorCode = 'cancelled' | 'failed';
 /**
@@ -1768,6 +1752,13 @@ interface UsePasskeyCeremonyResult {
     isSupported: boolean;
     /** Start the ceremony (or redirect-fallback when the RP is off / unsupported). */
     start: () => void;
+    /**
+     * Hand off to the legacy Keycloak redirect explicitly. Wired to the "try
+     * another way" affordance a surface shows after an in-page error — the escape
+     * hatch for a credential enrolled only in Keycloak (invisible to the in-page
+     * RP store), which the in-page ceremony cannot use.
+     */
+    fallbackToRedirect: () => void;
     /** Clear a terminal state so the affordance can be retried. */
     reset: () => void;
 }

package/dist/index.d.ts

@@ -345,6 +345,13 @@ interface PasskeyLoginLabels {
     errorCancelled: string;
     /** Error banner when the ceremony failed. */
     errorFailed: string;
+    /**
+     * The "try another way" affordance shown after an in-page ceremony error — it
+     * hands off to the Keycloak-hosted passkey/password flow. This is the seam that
+     * rescues a user whose credential is only enrolled in Keycloak (not the in-page
+     * RP store): the in-page ceremony can't see it, so they fall back to KC.
+     */
+    tryAnotherWay: string;
 }
 /** Strings rendered by `<PasskeySettingsCard>` — the account passkey card. */
 interface PasskeySettingsLabels {
@@ -1301,6 +1308,7 @@ declare const AuthTestIds: {
     readonly passkeyLogin: "auth-passkey-login";
     readonly passkeyLoginButton: "auth-passkey-login-button";
     readonly passkeyLoginError: "auth-passkey-login-error";
+    readonly passkeyLoginFallback: "auth-passkey-login-fallback";
     readonly passkeySettings: "auth-passkey-settings";
     readonly passkeySettingsAdd: "auth-passkey-settings-add";
     readonly passkeySettingsSuccess: "auth-passkey-settings-success";
@@ -1686,30 +1694,6 @@ declare const enum PasskeyCeremonyStatus {
     Error = "error"
 }
 
-/**
- * Navigation helpers for the passkey (WebAuthn) BFF endpoints.
- *
- * Unlike the device-PIN client (which is plain `fetch`), the passkey login and
- * registration ceremonies are NOT fetches — they are full-page BROWSER
- * NAVIGATIONS. The BFF (`Bff.AspNetCore` 1.3.x) drives the WebAuthn ceremony
- * through Keycloak's hosted pages, then redirects the browser back:
- *  - login:        `/bff/passkey/login?returnUrl=<rel>` → on success the browser
- *    lands on `returnUrl` with the session cookie already set;
- *  - registration: `/bff/passkey/register?returnUrl=<rel>` → Keycloak re-auths
- *    the user (password) then runs the credential-creation ceremony, returning
- *    the browser to `returnUrl?passkey=registered`;
- *  - failure / cancel: the BFF redirects to `<login>?passkeyError=cancelled` or
- *    `<login>?passkeyError=failed`.
- *
- * react-query-FREE by construction: there is NO fetch here at all — every
- * function is a pure `window.location` read or `window.location.assign`. The
- * login route group has no QueryClient provider, so the passkey login button
- * (which lives there) MUST avoid any react-query primitive; navigation satisfies
- * that trivially.
- *
- * All reads are SSR-safe: when `window` is undefined (server render / native)
- * they return a benign default rather than throwing.
- */
 /** The recognised passkey error codes the BFF sends back via `?passkeyError=`. */
 type PasskeyErrorCode = 'cancelled' | 'failed';
 /**
@@ -1768,6 +1752,13 @@ interface UsePasskeyCeremonyResult {
     isSupported: boolean;
     /** Start the ceremony (or redirect-fallback when the RP is off / unsupported). */
     start: () => void;
+    /**
+     * Hand off to the legacy Keycloak redirect explicitly. Wired to the "try
+     * another way" affordance a surface shows after an in-page error — the escape
+     * hatch for a credential enrolled only in Keycloak (invisible to the in-page
+     * RP store), which the in-page ceremony cannot use.
+     */
+    fallbackToRedirect: () => void;
     /** Clear a terminal state so the affordance can be retried. */
     reset: () => void;
 }

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",
@@ -2518,6 +2520,18 @@ var PasskeyCeremonyMode = /* @__PURE__ */ ((PasskeyCeremonyMode2) => {
   return PasskeyCeremonyMode2;
 })(PasskeyCeremonyMode || {});
 
+// src/passkey/browserLocation.ts
+function getBrowserLocation() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const browserLocation = window.location;
+  if (browserLocation === void 0) {
+    return null;
+  }
+  return browserLocation;
+}
+
 // src/passkey/passkeyNavigation.ts
 var PASSKEY_LOGIN_ENDPOINT = "/bff/passkey/login";
 var PASSKEY_REGISTER_ENDPOINT = "/bff/passkey/register";
@@ -2531,22 +2545,25 @@ function buildNavigationUrl(endpoint, returnUrl) {
   return `${endpoint}?${RETURN_URL_PARAM}=${encodeURIComponent(returnUrl)}`;
 }
 function readSearchParams() {
-  if (typeof window === "undefined") {
+  const browserLocation = getBrowserLocation();
+  if (browserLocation === null) {
     return null;
   }
-  return new URLSearchParams(window.location.search);
+  return new URLSearchParams(browserLocation.search);
 }
 function startPasskeyLogin(returnUrl) {
-  if (typeof window === "undefined") {
+  const browserLocation = getBrowserLocation();
+  if (browserLocation === null) {
     return;
   }
-  window.location.assign(buildNavigationUrl(PASSKEY_LOGIN_ENDPOINT, returnUrl));
+  browserLocation.assign(buildNavigationUrl(PASSKEY_LOGIN_ENDPOINT, returnUrl));
 }
 function startPasskeyRegistration(returnUrl) {
-  if (typeof window === "undefined") {
+  const browserLocation = getBrowserLocation();
+  if (browserLocation === null) {
     return;
   }
-  window.location.assign(buildNavigationUrl(PASSKEY_REGISTER_ENDPOINT, returnUrl));
+  browserLocation.assign(buildNavigationUrl(PASSKEY_REGISTER_ENDPOINT, returnUrl));
 }
 function readPasskeyError() {
   const params = readSearchParams();
@@ -2723,8 +2740,9 @@ function usePasskeyCeremony(optionsArg) {
         onSuccess(user);
         return;
       }
-      if (mode === "login" /* Login */ && typeof window !== "undefined") {
-        window.location.assign(returnUrl);
+      const browserLocation = getBrowserLocation();
+      if (mode === "login" /* Login */ && browserLocation !== null) {
+        browserLocation.assign(returnUrl);
       }
     },
     [mode, onSuccess, returnUrl]
@@ -2746,6 +2764,10 @@ function usePasskeyCeremony(optionsArg) {
         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;
@@ -2777,13 +2799,16 @@ function usePasskeyCeremony(optionsArg) {
       }
     })();
   }, [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, reset }),
-    [status, error, isSupported, start, reset]
+    () => ({ status, error, isSupported, start, fallbackToRedirect, reset }),
+    [status, error, isSupported, start, fallbackToRedirect, reset]
   );
 }
 var DEFAULT_RETURN_URL = "/";
@@ -2802,14 +2827,27 @@ function PasskeyLoginButton({
   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,
       {
@@ -2826,10 +2864,11 @@ function PasskeyLoginButton({
 }
 var DEFAULT_RETURN_PATH = "/";
 function readCurrentPath() {
-  if (typeof window === "undefined") {
+  const browserLocation = getBrowserLocation();
+  if (browserLocation === null) {
     return DEFAULT_RETURN_PATH;
   }
-  return window.location.pathname;
+  return browserLocation.pathname;
 }
 function PasskeySettingsCard({
   returnUrl,