Guard against concurrent passkey autofill requests (#85)

* guard against concurrent passkey autofill requests * bump version * Add console log for rp error * export webauthnerror
authsignal · Nov 11, 2024 · c44865c · c44865c
1 parent 1144588
commit c44865c
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 102 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@authsignal/browser",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

diff --git a/src/helpers.ts b/src/helpers.ts
@@ -1,3 +1,4 @@
+import {WebAuthnError} from "@simplewebauthn/browser";
 import {ErrorResponse} from "./api/types/shared";
 
 type CookieOptions = {
@@ -79,3 +80,13 @@ export function handleApiResponse<T>(response: ErrorResponse | T) {
     };
   }
 }
+
+export function handleWebAuthnError(error: unknown) {
+  if (error instanceof WebAuthnError && error.code === "ERROR_INVALID_RP_ID") {
+    const rpId = error.message?.match(/"([^"]*)"/)?.[1] || "";
+
+    console.error(
+      `[Authsignal] The Relying Party ID "${rpId}" is invalid for this domain.\n To learn more, visit https://docs.authsignal.com/scenarios/passkeys-prebuilt-ui#defining-the-relying-party`
+    );
+  }
+}
diff --git a/src/passkey.ts b/src/passkey.ts
@@ -3,7 +3,7 @@ import {startAuthentication, startRegistration} from "@simplewebauthn/browser";
 import {PasskeyApiClient} from "./api";
 import {AuthenticationResponseJSON, RegistrationResponseJSON, AuthenticatorAttachment} from "@simplewebauthn/types";
 import {TokenCache} from "./token-cache";
-import {handleErrorResponse} from "./helpers";
+import {handleErrorResponse, handleWebAuthnError} from "./helpers";
 import {AuthsignalResponse} from "./types";
 
 type PasskeyOptions = {
@@ -43,6 +43,8 @@ type SignInResponse = {
   authenticationResponse?: AuthenticationResponseJSON;
 };
 
+let autofillRequestPending = false;
+
 export class Passkey {
   public api: PasskeyApiClient;
   private passkeyLocalStorageKey = "as_user_passkey_map";
@@ -80,35 +82,43 @@ export class Passkey {
       return handleErrorResponse(optionsResponse);
     }
 
-    const registrationResponse = await startRegistration({optionsJSON: optionsResponse.options, useAutoRegister});
+    try {
+      const registrationResponse = await startRegistration({optionsJSON: optionsResponse.options, useAutoRegister});
 
-    const addAuthenticatorResponse = await this.api.addAuthenticator({
-      challengeId: optionsResponse.challengeId,
-      registrationCredential: registrationResponse,
-      token: userToken,
-    });
+      const addAuthenticatorResponse = await this.api.addAuthenticator({
+        challengeId: optionsResponse.challengeId,
+        registrationCredential: registrationResponse,
+        token: userToken,
+      });
 
-    if ("error" in addAuthenticatorResponse) {
-      return handleErrorResponse(addAuthenticatorResponse);
-    }
+      if ("error" in addAuthenticatorResponse) {
+        return handleErrorResponse(addAuthenticatorResponse);
+      }
 
-    if (addAuthenticatorResponse.isVerified) {
-      this.storeCredentialAgainstDevice({
-        ...registrationResponse,
-        userId: addAuthenticatorResponse.userId,
-      });
-    }
+      if (addAuthenticatorResponse.isVerified) {
+        this.storeCredentialAgainstDevice({
+          ...registrationResponse,
+          userId: addAuthenticatorResponse.userId,
+        });
+      }
 
-    if (addAuthenticatorResponse.accessToken) {
-      this.cache.token = addAuthenticatorResponse.accessToken;
-    }
+      if (addAuthenticatorResponse.accessToken) {
+        this.cache.token = addAuthenticatorResponse.accessToken;
+      }
 
-    return {
-      data: {
-        token: addAuthenticatorResponse.accessToken,
-        registrationResponse,
-      },
-    };
+      return {
+        data: {
+          token: addAuthenticatorResponse.accessToken,
+          registrationResponse,
+        },
+      };
+    } catch (e) {
+      autofillRequestPending = false;
+
+      handleWebAuthnError(e);
+
+      throw e;
+    }
   }
 
   async signIn(params?: SignInParams): Promise<AuthsignalResponse<SignInResponse>> {
@@ -120,9 +130,19 @@ export class Passkey {
       throw new Error("action is not supported when providing a token");
     }
 
+    if (params?.autofill) {
+      if (autofillRequestPending) {
+        return {};
+      } else {
+        autofillRequestPending = true;
+      }
+    }
+
     const challengeResponse = params?.action ? await this.api.challenge(params.action) : null;
 
     if (challengeResponse && "error" in challengeResponse) {
+      autofillRequestPending = false;
+
       return handleErrorResponse(challengeResponse);
     }
 
@@ -132,50 +152,64 @@ export class Passkey {
     });
 
     if ("error" in optionsResponse) {
+      autofillRequestPending = false;
+
       return handleErrorResponse(optionsResponse);
     }
 
-    const authenticationResponse = await startAuthentication({
-      optionsJSON: optionsResponse.options,
-      useBrowserAutofill: params?.autofill,
-    });
+    try {
+      const authenticationResponse = await startAuthentication({
+        optionsJSON: optionsResponse.options,
+        useBrowserAutofill: params?.autofill,
+      });
 
-    if (params?.onVerificationStarted) {
-      params.onVerificationStarted();
-    }
+      if (params?.onVerificationStarted) {
+        params.onVerificationStarted();
+      }
 
-    const verifyResponse = await this.api.verify({
-      challengeId: optionsResponse.challengeId,
-      authenticationCredential: authenticationResponse,
-      token: params?.token,
-      deviceId: this.anonymousId,
-    });
+      const verifyResponse = await this.api.verify({
+        challengeId: optionsResponse.challengeId,
+        authenticationCredential: authenticationResponse,
+        token: params?.token,
+        deviceId: this.anonymousId,
+      });
 
-    if ("error" in verifyResponse) {
-      return handleErrorResponse(verifyResponse);
-    }
+      if ("error" in verifyResponse) {
+        autofillRequestPending = false;
 
-    if (verifyResponse.isVerified) {
-      this.storeCredentialAgainstDevice({...authenticationResponse, userId: verifyResponse.userId});
-    }
+        return handleErrorResponse(verifyResponse);
+      }
 
-    if (verifyResponse.accessToken) {
-      this.cache.token = verifyResponse.accessToken;
-    }
+      if (verifyResponse.isVerified) {
+        this.storeCredentialAgainstDevice({...authenticationResponse, userId: verifyResponse.userId});
+      }
 
-    const {accessToken: token, userId, userAuthenticatorId, username, userDisplayName, isVerified} = verifyResponse;
-
-    return {
-      data: {
-        isVerified,
-        token,
-        userId,
-        userAuthenticatorId,
-        username,
-        displayName: userDisplayName,
-        authenticationResponse,
-      },
-    };
+      if (verifyResponse.accessToken) {
+        this.cache.token = verifyResponse.accessToken;
+      }
+
+      const {accessToken: token, userId, userAuthenticatorId, username, userDisplayName, isVerified} = verifyResponse;
+
+      autofillRequestPending = false;
+
+      return {
+        data: {
+          isVerified,
+          token,
+          userId,
+          userAuthenticatorId,
+          username,
+          displayName: userDisplayName,
+          authenticationResponse,
+        },
+      };
+    } catch (e) {
+      autofillRequestPending = false;
+
+      handleWebAuthnError(e);
+
+      throw e;
+    }
   }
 
   async isAvailableOnDevice({userId}: {userId: string}) {

diff --git a/src/security-key.ts b/src/security-key.ts
@@ -2,7 +2,7 @@ import {startAuthentication, startRegistration} from "@simplewebauthn/browser";
 
 import {AuthenticationResponseJSON, RegistrationResponseJSON} from "@simplewebauthn/types";
 import {TokenCache} from "./token-cache";
-import {handleErrorResponse} from "./helpers";
+import {handleErrorResponse, handleWebAuthnError} from "./helpers";
 import {AuthsignalResponse} from "./types";
 import {SecurityKeyApiClient} from "./api/security-key-api-client";
 
@@ -46,27 +46,33 @@ export class SecurityKey {
       return handleErrorResponse(optionsResponse);
     }
 
-    const registrationResponse = await startRegistration({optionsJSON: optionsResponse});
+    try {
+      const registrationResponse = await startRegistration({optionsJSON: optionsResponse});
 
-    const addAuthenticatorResponse = await this.api.addAuthenticator({
-      registrationCredential: registrationResponse,
-      token: this.cache.token,
-    });
+      const addAuthenticatorResponse = await this.api.addAuthenticator({
+        registrationCredential: registrationResponse,
+        token: this.cache.token,
+      });
 
-    if ("error" in addAuthenticatorResponse) {
-      return handleErrorResponse(addAuthenticatorResponse);
-    }
+      if ("error" in addAuthenticatorResponse) {
+        return handleErrorResponse(addAuthenticatorResponse);
+      }
 
-    if (addAuthenticatorResponse.accessToken) {
-      this.cache.token = addAuthenticatorResponse.accessToken;
-    }
+      if (addAuthenticatorResponse.accessToken) {
+        this.cache.token = addAuthenticatorResponse.accessToken;
+      }
 
-    return {
-      data: {
-        token: addAuthenticatorResponse.accessToken,
-        registrationResponse,
-      },
-    };
+      return {
+        data: {
+          token: addAuthenticatorResponse.accessToken,
+          registrationResponse,
+        },
+      };
+    } catch (e) {
+      handleWebAuthnError(e);
+
+      throw e;
+    }
   }
 
   async verify(): Promise<AuthsignalResponse<VerifyResponse>> {
@@ -82,29 +88,37 @@ export class SecurityKey {
       return handleErrorResponse(optionsResponse);
     }
 
-    const authenticationResponse = await startAuthentication({optionsJSON: optionsResponse});
-
-    const verifyResponse = await this.api.verify({
-      authenticationCredential: authenticationResponse,
-      token: this.cache.token,
-    });
-
-    if ("error" in verifyResponse) {
-      return handleErrorResponse(verifyResponse);
-    }
-
-    if (verifyResponse.accessToken) {
-      this.cache.token = verifyResponse.accessToken;
+    try {
+      const authenticationResponse = await startAuthentication({
+        optionsJSON: optionsResponse,
+      });
+
+      const verifyResponse = await this.api.verify({
+        authenticationCredential: authenticationResponse,
+        token: this.cache.token,
+      });
+
+      if ("error" in verifyResponse) {
+        return handleErrorResponse(verifyResponse);
+      }
+
+      if (verifyResponse.accessToken) {
+        this.cache.token = verifyResponse.accessToken;
+      }
+
+      const {accessToken: token, isVerified} = verifyResponse;
+
+      return {
+        data: {
+          isVerified,
+          token,
+          authenticationResponse,
+        },
+      };
+    } catch (e) {
+      handleWebAuthnError(e);
+
+      throw e;
     }
-
-    const {accessToken: token, isVerified} = verifyResponse;
-
-    return {
-      data: {
-        isVerified,
-        token,
-        authenticationResponse,
-      },
-    };
   }
 }
diff --git a/src/types.ts b/src/types.ts
@@ -1,3 +1,5 @@
+import {WebAuthnError} from "@simplewebauthn/browser";
+
 type BaseLaunchOptions = {
   /**
    *  How the Authsignal Prebuilt MFA page should launch.
@@ -103,3 +105,5 @@ export type CheckVerificationStatusResponse = {
   isVerified: boolean;
   token?: string;
 };
+
+export {WebAuthnError};