test(experience): add tests for webauthn experience flow (#4643)

packages/integration-tests/src/helpers/sign-in-experience.ts

@@ -83,5 +83,13 @@ export const enableMandatoryMfaWithTotp = async () =>
     },
   });
 
+export const enableMandatoryMfaWithWebAuthn = async () =>
+  updateSignInExperience({
+    mfa: {
+      factors: [MfaFactor.WebAuthn],
+      policy: MfaPolicy.Mandatory,
+    },
+  });
+
 export const resetMfaSettings = async () =>
   updateSignInExperience({ mfa: { policy: MfaPolicy.UserControlled, factors: [] } });

packages/integration-tests/src/tests/experience/mfa/webauthn/index.test.ts

@@ -0,0 +1,99 @@
+import { ConnectorType } from '@logto/connector-kit';
+import { SignInIdentifier } from '@logto/schemas';
+
+import { deleteUser } from '#src/api/admin-user.js';
+import { updateSignInExperience } from '#src/api/sign-in-experience.js';
+import { demoAppUrl } from '#src/constants.js';
+import { clearConnectorsByTypes } from '#src/helpers/connector.js';
+import {
+  enableMandatoryMfaWithWebAuthn,
+  resetMfaSettings,
+} from '#src/helpers/sign-in-experience.js';
+import { generateNewUser } from '#src/helpers/user.js';
+import ExpectWebAuthnExperience from '#src/ui-helpers/expect-webauthn-experience.js';
+import { generateUsername, waitFor } from '#src/utils.js';
+
+describe('MFA - WebAuthn', () => {
+  beforeAll(async () => {
+    await clearConnectorsByTypes([ConnectorType.Email, ConnectorType.Sms, ConnectorType.Social]);
+    await enableMandatoryMfaWithWebAuthn();
+    await updateSignInExperience({
+      signUp: {
+        identifiers: [SignInIdentifier.Username],
+        password: true,
+        verify: false,
+      },
+      signIn: {
+        methods: [
+          {
+            identifier: SignInIdentifier.Username,
+            password: true,
+            verificationCode: false,
+            isPasswordPrimary: true,
+          },
+        ],
+      },
+    });
+  });
+
+  afterAll(async () => {
+    await resetMfaSettings();
+  });
+
+  it('should bind WebAuthn when registering and verify WebAuthn when signing in', async () => {
+    const username = generateUsername();
+    const password = 'l0gt0_T3st_P@ssw0rd';
+
+    const experience = new ExpectWebAuthnExperience(await browser.newPage());
+    await experience.setupVirtualAuthenticator();
+    await experience.startWith(demoAppUrl, 'register');
+    await experience.toFillInput('identifier', username, { submit: true });
+    experience.toBeAt('register/password');
+    await experience.toFillNewPasswords(password);
+    experience.toBeAt('mfa-binding/WebAuthn');
+    await experience.toClick('button', 'Create a passkey');
+    await experience.verifyThenEnd(false);
+
+    await experience.startWith(demoAppUrl, 'sign-in');
+    await experience.toFillForm(
+      {
+        identifier: username,
+        password,
+      },
+      { submit: true }
+    );
+    // Wait for the page to process submitting request.
+    await waitFor(500);
+    experience.toBeAt('mfa-verification/WebAuthn');
+    await experience.toClick('button', 'Verify via passkey');
+
+    await experience.clearVirtualAuthenticator();
+    const userId = await experience.getUserIdFromDemoAppPage();
+    await experience.verifyThenEnd();
+    await deleteUser(userId);
+  });
+
+  it('should bind WebAuthn if an existing user has no WebAuthn', async () => {
+    const { userProfile, user } = await generateNewUser({ username: true, password: true });
+    const experience = new ExpectWebAuthnExperience(await browser.newPage());
+    await experience.setupVirtualAuthenticator();
+    await experience.startWith(demoAppUrl, 'sign-in');
+
+    await experience.toFillForm(
+      {
+        identifier: userProfile.username,
+        password: userProfile.password,
+      },
+      { submit: true }
+    );
+    // Wait for the page to process submitting request.
+    await waitFor(500);
+    experience.toBeAt('mfa-binding/WebAuthn');
+    await experience.toClick('button', 'Create a passkey');
+
+    await experience.clearVirtualAuthenticator();
+    await experience.verifyThenEnd();
+
+    await deleteUser(user.id);
+  });
+});

packages/integration-tests/src/ui-helpers/expect-experience.ts

@@ -20,8 +20,8 @@ export type ExperiencePath =
   | `${ExperienceType}/verify`
   | `${ExperienceType}/verification-code`
   | `forgot-password/reset`
-  | `mfa-binding/${MfaFactor.TOTP}`
-  | `mfa-verification/${MfaFactor.TOTP}`;
+  | `mfa-binding/${MfaFactor}`
+  | `mfa-verification/${MfaFactor}`;
 
 export type ExpectExperienceOptions = {
   /** The URL of the experience endpoint. */
@@ -94,8 +94,8 @@ export default class ExpectExperience extends ExpectPage {
    *
    * It will clear the ongoing experience if the experience is ended successfully.
    */
-  async verifyThenEnd() {
-    // Wait for 500ms since some times the sign-in success callback haven't been handled yet
+  async verifyThenEnd(closePage = true) {
+    // Wait for 500ms since sometimes the sign-in success callback haven't been handled yet
     await waitFor(500);
     if (this.#ongoing === undefined) {
       return this.throwNoOngoingExperienceError();
@@ -105,7 +105,9 @@ export default class ExpectExperience extends ExpectPage {
     await this.toClick('div[role=button]', /sign out/i);
 
     this.#ongoing = undefined;
-    await this.page.close();
+    if (closePage) {
+      await this.page.close();
+    }
   }
 
   /**

packages/integration-tests/src/ui-helpers/expect-totp-experience.ts

@@ -1,4 +1,3 @@
-import { MfaFactor } from '@logto/schemas';
 import { authenticator } from 'otplib';
 
 import { demoAppUrl } from '#src/constants.js';
@@ -22,7 +21,7 @@ export default class ExpectTotpExperience extends ExpectExperience {
     // Wait for the page to load
     await waitFor(500);
 
-    this.toBeAt(`mfa-binding/${MfaFactor.TOTP}`);
+    this.toBeAt('mfa-binding/Totp');
     // Expect the QR code rendered
     await expect(this.page).toMatchElement(`${dcls('qrCode')} img[src*="data:image"]`);
 
@@ -61,7 +60,7 @@ export default class ExpectTotpExperience extends ExpectExperience {
     // Wait for the page to load
     await waitFor(500);
 
-    this.toBeAt(`mfa-verification/${MfaFactor.TOTP}`);
+    this.toBeAt('mfa-verification/Totp');
 
     const code = authenticator.generate(secret);
 

packages/integration-tests/src/ui-helpers/expect-webauthn-experience.ts

@@ -0,0 +1,58 @@
+import { type CDPSession } from 'puppeteer';
+
+import ExpectExperience from './expect-experience.js';
+
+export default class ExpectWebAuthnExperience extends ExpectExperience {
+  private authenticatorId?: string;
+  private _cdpClient?: CDPSession;
+
+  constructor(thePage = global.page) {
+    super(thePage);
+  }
+
+  async setupVirtualAuthenticator() {
+    if (this.authenticatorId) {
+      this.throwError('Virtual authenticator already setup');
+    }
+
+    /**
+     * Note: The Chrome DevTools supports emulating WebAuthn authenticators.
+     * We use puppeteer to create a CDP(Chrome Devtools Protocol) session and use the CDP session to add a virtual authenticator.
+     *
+     * Useful links:
+     * - https://developer.chrome.com/docs/devtools/webauthn
+     * - https://github.com/aslushnikov/getting-started-with-cdp/blob/HEAD/README.md
+     */
+    const client = await this.getCdpClient();
+    await client.send('WebAuthn.enable');
+    const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+      options: {
+        protocol: 'ctap2',
+        transport: 'internal',
+        hasResidentKey: true,
+        hasUserVerification: true,
+        isUserVerified: true,
+      },
+    });
+
+    this.authenticatorId = authenticatorId;
+  }
+
+  async clearVirtualAuthenticator() {
+    if (!this.authenticatorId) {
+      this.throwError('Virtual authenticator not added');
+    }
+
+    const client = await this.getCdpClient();
+    await client.send('WebAuthn.removeVirtualAuthenticator', {
+      authenticatorId: this.authenticatorId,
+    });
+  }
+
+  private async getCdpClient() {
+    if (!this._cdpClient) {
+      this._cdpClient = await this.page.target().createCDPSession();
+    }
+    return this._cdpClient;
+  }
+}