Add first version of conditional create

Author: incorbador

packages/web-core/src/services/WebAuthnService.ts

@@ -2,7 +2,7 @@
 /// <reference types="user-agent-data-types" /> <- add this line
 import type { ClientCapabilities } from '@corbado/types';
 import type { CredentialRequestOptionsJSON } from '@corbado/webauthn-json';
-import { create, get } from '@corbado/webauthn-json';
+import { get } from '@corbado/webauthn-json';
 import type { CredentialCreationOptionsJSON } from '@corbado/webauthn-json/src/webauthn-json/basic/json';
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
 import { detectIncognito } from 'detectincognitojs';
@@ -39,10 +39,19 @@ export class WebAuthnService {
   async createPasskeyRaw(serializedChallenge: string): Promise<string> {
     const abortController = this.abortOngoingOperation();
     const challenge = JSON.parse(serializedChallenge);
-    challenge.signal = abortController.signal;
     this.#abortController = abortController;
 
-    const signedChallenge = await create(challenge);
+    console.log('createPasskeyRaw challenge', challenge);
+
+    const publicKey = PublicKeyCredential.parseCreationOptionsFromJSON(challenge.publicKey);
+    console.log('createPasskeyRaw publicKey', publicKey);
+    const credential = (await navigator.credentials.create({
+      publicKey,
+      signal: abortController.signal,
+      mediation: challenge.mediation,
+    } as any)) as PublicKeyCredential;
+    const signedChallenge = credential.toJSON();
+
     return JSON.stringify(signedChallenge);
   }
 

playground/connect-next/app/(no-auth)/login/PasswordForm.tsx

@@ -35,7 +35,7 @@ export const PasswordForm = ({ onClick, initialUserProvidedIdentifier, initialEr
           name='email'
           type='email'
           placeholder='user@acme.com'
-          autoComplete='email'
+          autoComplete='username'
           required
           className='mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm'
           value={username}
@@ -53,6 +53,7 @@ export const PasswordForm = ({ onClick, initialUserProvidedIdentifier, initialEr
           id='password'
           name='password'
           type='password'
+          autoComplete='current-password'
           required
           className='mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm'
           value={password}

playground/connect-next/app/(no-auth)/page.tsx

@@ -14,7 +14,7 @@ export default function SignupPage() {
   const [password, setPassword] = useState('');
   const [message, setMessage] = useState('');
 
-  const handleSignup = async (e: FormEvent<HTMLButtonElement>) => {
+  const handleSignup = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const username = generateRandomString(10);
 
@@ -58,7 +58,10 @@ export default function SignupPage() {
           <h3 className='text-xl font-semibold'>Sign Up</h3>
           <p className='text-sm text-gray-500'>Create an account with your email, phone and password</p>
         </div>
-        <form className='flex flex-col space-y-4 bg-gray-50 px-4 py-8 sm:px-8'>
+        <form
+          className='flex flex-col space-y-4 bg-gray-50 px-4 py-8 sm:px-8'
+          onSubmit={handleSignup}
+        >
           <div>
             <label
               htmlFor='email'
@@ -71,7 +74,7 @@ export default function SignupPage() {
               name='email'
               type='email'
               placeholder='Email'
-              autoComplete='email'
+              autoComplete='username'
               required
               className='mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm'
               value={email}
@@ -90,6 +93,7 @@ export default function SignupPage() {
               name='password'
               type='password'
               placeholder='Password'
+              autoComplete='new-password'
               required
               className='mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm'
               value={password}
@@ -118,7 +122,7 @@ export default function SignupPage() {
           </div>
           {message && <div className='text-center text-red-700'>{message}</div>}
           <Button
-            onClick={handleSignup}
+            type='submit'
             className='w-full'
             size='lg'
           >