[PM-2014] feat: implement credential creation

apps/web/src/app/auth/core/services/webauthn/webauthn.service.spec.ts

@@ -62,6 +62,16 @@ describe("WebauthnService", () => {
 
       expect(result).toBeUndefined();
     });
+
+    it("should return credential when navigator.credentials does not throw", async () => {
+      const credential: Credential = Symbol() as any;
+      credentials.create.mockResolvedValue(credential);
+      const options = createNewCredentialOptions();
+
+      const result = await webauthnService.createCredential(options);
+
+      expect(result).toBe(credential);
+    });
   });
 });
 

apps/web/src/app/auth/core/services/webauthn/webauthn.service.ts

@@ -14,12 +14,17 @@ type WebauthnCredentialView = unknown;
 
 @Injectable({ providedIn: CoreAuthModule })
 export class WebauthnService {
+  private credentials: CredentialsContainer;
+
   constructor(
     private apiService: WebauthnApiService,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
-    @Optional() private credentials: CredentialsContainer = navigator.credentials
-  ) {}
+    @Optional() credentials: CredentialsContainer
+  ) {
+    // Default parameters don't work when used with Angular DI
+    this.credentials = credentials ?? navigator.credentials;
+  }
 
   async getNewCredentialOptions(
     verification: Verification
@@ -43,6 +48,14 @@ export class WebauthnService {
   async createCredential(
     credentialOptions: NewCredentialOptionsView
   ): Promise<WebauthnCredentialView | undefined> {
-    return await new Promise((resolve) => setTimeout(() => resolve(undefined), 1000));
+    const nativeOptions: CredentialCreationOptions = {
+      publicKey: credentialOptions.challenge,
+    };
+
+    try {
+      return await this.credentials.create(nativeOptions);
+    } catch {
+      return undefined;
+    }
   }
 }

apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html

@@ -31,6 +31,8 @@
         <h3 bitTypography="h3">{{ "errorCreatingPasskey" | i18n }}</h3>
         <p bitTypography="body1">{{ "errorCreatingPasskeyInfo" | i18n }}</p>
       </div>
+
+      <div *ngIf="currentStep === 'credentialNaming'">Name your credential plz</div>
     </ng-container>
     <ng-container bitDialogFooter>
       <button type="submit" bitButton bitFormButton buttonType="primary">

apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts

@@ -76,6 +76,7 @@ export class CreateCredentialDialogComponent {
           this.currentStep = "credentialCreationFailed";
           return;
         }
+        this.currentStep = "credentialNaming";
       }
     } finally {
       this.dialogRef.disableClose = false;