feat: use passkey

Signed-off-by: David Dal Busco <[email protected]>

Author: peterpeterparker

templates/angular-example/src/app/components/login/login.component.html

@@ -1 +1,5 @@
-<app-button (click)="signIn({ internet_identity: {} })">Sign in</app-button>
+<div class="gap flex flex-col">
+  <app-passkey />
+
+  <app-button (click)="signIn({ internet_identity: {} })">Sign in</app-button>
+</div>

templates/angular-example/src/app/components/login/login.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { signIn } from '@junobuild/core';
 import { ButtonComponent } from '../button/button.component';
+import { PasskeyComponent } from '../passkey/passkey/passkey.component';
 
 @Component({
   selector: 'app-login',
-  imports: [ButtonComponent],
+  imports: [ButtonComponent, PasskeyComponent],
   templateUrl: './login.component.html',
 })
 export class LoginComponent {

templates/angular-example/src/app/components/passkey/create-passkey/create-passkey.component.ts

@@ -2,7 +2,8 @@ import {
   Component,
   computed,
   ElementRef,
-  input, output,
+  input,
+  output,
   signal,
   ViewChild,
 } from '@angular/core';

templates/angular-example/src/app/components/passkey/passkey/passkey.component.html

@@ -9,10 +9,15 @@
     aria-modal="true"
     aria-labelledby="modalTitle"
   >
-    <div class="w-full max-w-md rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[5px_5px_0px_rgba(0,0,0,1)]">
-      @if (progress === undefined || ('setup' in progress)) {
+    <div
+      class="w-full max-w-md rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[5px_5px_0px_rgba(0,0,0,1)]"
+    >
+      @if (progress === undefined || "setup" in progress) {
         <div class="flex items-start justify-between">
-          <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">
+          <h2
+            id="modalTitle"
+            class="text-xl font-bold text-gray-900 sm:text-2xl"
+          >
             Hey 👋
           </h2>
 
@@ -22,9 +27,19 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">
             aria-label="Close"
             (click)="close()"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="size-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </button>
         </div>
@@ -46,4 +61,3 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">
 
   <app-backdrop></app-backdrop>
 }
-

templates/angular-example/src/app/components/passkey/passkey/passkey.component.ts

@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { Component, signal, OnInit } from '@angular/core';
 import { isWebAuthnAvailable } from '@junobuild/core';
 import { PasskeyProgress } from '../../../types/passkey';
 import { ButtonComponent } from '../../button/button.component';
@@ -8,21 +8,22 @@ import { UsePasskeyComponent } from '../use-passkey/use-passkey.component';
 @Component({
   selector: 'app-passkey',
   templateUrl: './passkey.component.html',
-  imports: [
-    ButtonComponent,
-    CreatePasskeyComponent,
-    UsePasskeyComponent
-  ]
+  imports: [ButtonComponent, CreatePasskeyComponent, UsePasskeyComponent],
 })
-export class PasskeyComponent {
-
+export class PasskeyComponent implements OnInit {
   readonly #passkeySupported = signal(true);
   #showModal = signal(false);
   #passkeyProgress = signal<PasskeyProgress | undefined>(undefined);
 
-  get passkeySupported(): boolean { return this.#passkeySupported(); }
-  get showModal(): boolean { return this.#showModal(); }
-  get progress(): PasskeyProgress | undefined { return this.#passkeyProgress(); }
+  get passkeySupported(): boolean {
+    return this.#passkeySupported();
+  }
+  get showModal(): boolean {
+    return this.#showModal();
+  }
+  get progress(): PasskeyProgress | undefined {
+    return this.#passkeyProgress();
+  }
 
   ngOnInit() {
     isWebAuthnAvailable().then((withWebAuthn) =>

templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.html

@@ -4,7 +4,9 @@
   <app-button (click)="doSignIn()">Use your passkey</app-button>
 } @else if (progress !== null) {
   <app-progress>
-    @if (progress.step === WebAuthnSignInProgressStep.RequestingUserCredential) {
+    @if (
+      progress.step === WebAuthnSignInProgressStep.RequestingUserCredential
+    ) {
       <span>Requesting user credential...</span>
     }
     @if (progress.step === WebAuthnSignInProgressStep.FinalizingCredential) {

templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.ts

@@ -9,7 +9,10 @@ import type { PasskeyProgress } from '../../../types/passkey';
 import { ButtonComponent } from '../../button/button.component';
 import { ProgressComponent } from '../progress/progress.component';
 
-type ProgressSignIn = SignProgress<WebAuthnSignInProgressStep> | undefined | null;
+type ProgressSignIn =
+  | SignProgress<WebAuthnSignInProgressStep>
+  | undefined
+  | null;
 
 @Component({
   selector: 'app-use-passkey',
@@ -27,14 +30,16 @@ export class UsePasskeyComponent {
 
     return progress === undefined
       ? undefined
-      : "signIn" in progress ? progress.signIn : null;
+      : 'signIn' in progress
+        ? progress.signIn
+        : null;
   });
 
   get progress(): ProgressSignIn {
     return this.#computedProgress();
   }
 
-  async doSignIn () {
+  async doSignIn() {
     const onProgress: SignProgressFn<WebAuthnSignInProgressStep> = (progress) =>
       this.wizardOnProgress.emit({ signIn: progress });
 
@@ -51,5 +56,5 @@ export class UsePasskeyComponent {
       // it is one to ignore - for example when the user cancel the flow.
       throw error;
     }
-  };
+  }
 }