From 4e052346bf64ffa2fd053699f3a89acf467edc5e Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Mon, 8 May 2023 16:09:46 +0200
Subject: [PATCH] [PM-2014] feat: implement credential creation

---
 .../webauthn/webauthn.service.spec.ts         | 10 ++++++++++
 .../services/webauthn/webauthn.service.ts     | 19 ++++++++++++++++---
 .../create-credential-dialog.component.html   |  2 ++
 .../create-credential-dialog.component.ts     |  1 +
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/auth/core/services/webauthn/webauthn.service.spec.ts b/apps/web/src/app/auth/core/services/webauthn/webauthn.service.spec.ts
index ff0f78cfbb6..92aa3950254 100644
--- a/apps/web/src/app/auth/core/services/webauthn/webauthn.service.spec.ts
+++ b/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);
+    });
   });
 });
 
diff --git a/apps/web/src/app/auth/core/services/webauthn/webauthn.service.ts b/apps/web/src/app/auth/core/services/webauthn/webauthn.service.ts
index 71c56f004a4..31beea6745d 100644
--- a/apps/web/src/app/auth/core/services/webauthn/webauthn.service.ts
+++ b/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;
+    }
   }
 }
diff --git a/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html b/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html
index 81673ae37ba..82877573e3e 100644
--- a/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html
+++ b/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">
diff --git a/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts b/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts
index 9c5efbf228b..81e30cff858 100644
--- a/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts
+++ b/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;