fix(core): add display name to webauthn registration options (#7439)

Author: wangsijie

.changeset/pink-rules-compare.md

@@ -0,0 +1,8 @@
+---
+'@logto/integration-tests': patch
+'@logto/core': patch
+---
+
+fix potential WebAuthn registration errors by specifying the displayName
+
+This is an optional field, but it's actually required by some browsers. For example, when using Chrome on Windows 11 with the "Use other devices" option (scanning QR code), an empty displayName will cause the registration to fail.

packages/core/src/routes/interaction/additional.ts

@@ -237,6 +237,7 @@ export default function additionalRoutes<T extends IRouterParamContext>(
           user: {
             id: newAccountId,
             username: newUserProfile.username ?? newAccountId,
+            name: newUserProfile.name ?? null,
             primaryEmail: newUserProfile.primaryEmail ?? null,
             primaryPhone: newUserProfile.primaryPhone ?? null,
             mfaVerifications: [],
@@ -260,12 +261,13 @@ export default function additionalRoutes<T extends IRouterParamContext>(
 
       if (isSignInInteractionResult(profileVerifiedInteraction)) {
         const { accountId } = profileVerifiedInteraction;
-        const { id, username, primaryEmail, primaryPhone, mfaVerifications } =
+        const { id, name, username, primaryEmail, primaryPhone, mfaVerifications } =
           await findUserById(accountId);
         const options = await generateWebAuthnRegistrationOptions({
           rpId: ctx.URL.hostname,
           user: {
             id,
+            name,
             username,
             primaryEmail,
             primaryPhone,

packages/core/src/routes/interaction/utils/webauthn.ts

@@ -25,20 +25,25 @@ import RequestError from '#src/errors/RequestError/index.js';
 
 type GenerateWebAuthnRegistrationOptionsParameters = {
   rpId: string;
-  user: Pick<User, 'id' | 'username' | 'primaryEmail' | 'primaryPhone' | 'mfaVerifications'>;
+  user: Pick<
+    User,
+    'id' | 'name' | 'username' | 'primaryEmail' | 'primaryPhone' | 'mfaVerifications'
+  >;
 };
 
 export const generateWebAuthnRegistrationOptions = async ({
   rpId,
   user,
 }: GenerateWebAuthnRegistrationOptionsParameters): Promise<WebAuthnRegistrationOptions> => {
-  const { username, primaryEmail, primaryPhone, id, mfaVerifications } = user;
+  const { username, name, primaryEmail, primaryPhone, id, mfaVerifications } = user;
 
   const options: GenerateRegistrationOptionsOpts = {
     rpName: rpId,
     rpID: rpId,
     userID: Uint8Array.from(Buffer.from(id)),
     userName: getUserDisplayName({ username, primaryEmail, primaryPhone }) ?? 'Unnamed User',
+    userDisplayName:
+      getUserDisplayName({ name, username, primaryEmail, primaryPhone }) ?? 'Unnamed User',
     timeout: 60_000,
     attestationType: 'none',
     excludeCredentials: mfaVerifications

packages/integration-tests/src/tests/api/account/mfa.test.ts

@@ -44,6 +44,7 @@ describe('my-account (mfa)', () => {
 
       expect(verificationRecordId).toBeTruthy();
       expect(registrationOptions.rp.name).toBe('localhost');
+      expect(registrationOptions.user.displayName).toBe(user.username);
 
       await deleteDefaultTenantUser(user.id);
     });