Stop conditional creation after 5s

Author: incorbador

packages/connect-react/src/components/append/AppendAfterErrorScreen.tsx

@@ -24,7 +24,7 @@ const AppendAfterErrorScreen = ({ attestationOptions }: { attestationOptions: st
 
     setLoading(true);
     setErrorMessage(undefined);
-    const res = await getConnectService().completeAppend(attestationOptions);
+    const res = await getConnectService().completeAppend(attestationOptions, 'manual');
     if (res.err) {
       if (res.val.type === ConnectErrorType.ExcludeCredentialsMatch) {
         return handleSituation(AppendSituationCode.ClientExcludeCredentialsMatch, res.val);

packages/connect-react/src/components/append/AppendInitScreen.tsx

@@ -12,6 +12,7 @@ import { StatefulLoader } from '../../utils/statefulLoader';
 import AppendBenefits from './append-init/AppendBenetifs';
 import AppendInitLoaded2 from './append-init/AppendInitLoaded2';
 import AppendInitLoading from './append-init/AppendInitLoading';
+import { AppendCompletionType } from '@corbado/web-core/dist/models/connect/append';
 
 export enum AppendInitState {
   SilentLoading,
@@ -147,7 +148,7 @@ const AppendInitScreen = () => {
       statefulLoader.current.finish();
       if (startAppendRes.val.autoAppend || flags.hasSupportForAutomaticAppend()) {
         console.log('starting auto-append');
-        await handleSubmit(startAppendRes.val.attestationOptions, false);
+        await handleSubmit(startAppendRes.val.attestationOptions, 'auto');
       }
     };
 
@@ -164,25 +165,25 @@ const AppendInitScreen = () => {
   }, []);
 
   const handleSubmit = useCallback(
-    async (attestationOptions: string, showErrorIfCancelled: boolean) => {
+    async (attestationOptions: string, completionType: AppendCompletionType) => {
       if (appendLoading || skipping) {
         return;
       }
 
       setAppendLoading(true);
       setErrorMessage(undefined);
 
-      const res = await getConnectService().completeAppend(attestationOptions);
+      const res = await getConnectService().completeAppend(attestationOptions, completionType);
       if (res.err) {
         if (res.val.type === ConnectErrorType.ExcludeCredentialsMatch) {
           return handleSituation(AppendSituationCode.ClientExcludeCredentialsMatch, res.val);
         }
 
         if (res.val.type === ConnectErrorType.Cancel) {
-          if (showErrorIfCancelled) {
-            return handleSituation(AppendSituationCode.ClientPasskeyOperationCancelled, res.val);
-          } else {
+          if (completionType === 'auto') {
             return handleSituation(AppendSituationCode.ClientPasskeyOperationCancelledSilent, res.val);
+          } else {
+            return handleSituation(AppendSituationCode.ClientPasskeyOperationCancelled, res.val);
           }
         }
 
@@ -200,7 +201,7 @@ const AppendInitScreen = () => {
 
   const handleConditionalCreate = useCallback(
     async (attestationOptions: string) => {
-      const res = await getConnectService().completeAppend(attestationOptions, true);
+      const res = await getConnectService().completeAppend(attestationOptions, 'conditional');
       if (res.err) {
         await handleSituation(AppendSituationCode.ClientPasskeyOperationErrorSilent, res.val);
         return false;
@@ -283,7 +284,14 @@ const AppendInitScreen = () => {
             void onReadMoreClick();
             setAppendInitState(AppendInitState.ShowBenefits);
           }}
-          handleSubmit={() => void handleSubmit(attestationOptions, true)}
+          handleSubmit={() => {
+            let completionType: AppendCompletionType = 'manual';
+            if (errorMessage) {
+              completionType = 'manual-retry';
+            }
+
+            void handleSubmit(attestationOptions, completionType);
+          }}
           handleSkip={() => onSkip()}
         />
       );

packages/connect-react/src/components/passkeyList/PasskeyListScreen.tsx

@@ -130,7 +130,7 @@ const PasskeyListScreen = () => {
       return handleSituation(PasskeyListSituationCode.CboApiPasskeysNotSupported);
     }
 
-    const res = await getConnectService().completeAppend(startAppendRes.val.attestationOptions);
+    const res = await getConnectService().completeAppend(startAppendRes.val.attestationOptions, 'manual');
     if (res.err) {
       if (res.val.type === ConnectErrorType.Cancel) {
         return handleSituation(PasskeyListSituationCode.ClientPasskeyOperationCancelled, res.val);

packages/web-core/openapi/spec_v2.yaml

@@ -1507,9 +1507,12 @@ components:
       type: object
       required:
         - attestationResponse
+        - completionType
       properties:
         attestationResponse:
           type: string
+        completionType:
+          $ref: "#/components/schemas/appendCompletionType"
 
     connectAppendFinishRsp:
       type: object
@@ -2376,6 +2379,10 @@ components:
         error:
           $ref: "#/components/schemas/requestError"
 
+    appendCompletionType:
+      type: string
+      enum: ["auto", "conditional", "manual", "manual-retry"]
+
   responses:
     "200":
       description: Operation succeeded

packages/web-core/src/api/v2/api.ts

@@ -48,6 +48,22 @@ export interface AaguidDetails {
      */
     'iconDark': string;
 }
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const AppendCompletionType = {
+    Auto: 'auto',
+    Conditional: 'conditional',
+    Manual: 'manual',
+    ManualRetry: 'manual-retry'
+} as const;
+
+export type AppendCompletionType = typeof AppendCompletionType[keyof typeof AppendCompletionType];
+
+
 /**
  * 
  * @export
@@ -299,7 +315,15 @@ export interface ConnectAppendFinishReq {
      * @memberof ConnectAppendFinishReq
      */
     'attestationResponse': string;
+    /**
+     * 
+     * @type {AppendCompletionType}
+     * @memberof ConnectAppendFinishReq
+     */
+    'completionType': AppendCompletionType;
 }
+
+
 /**
  * 
  * @export

packages/web-core/src/models/connect/append.ts

@@ -0,0 +1 @@
+export type AppendCompletionType = 'manual' | 'manual-retry' | 'auto' | 'conditional';

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

@@ -38,6 +38,7 @@ import { ConnectError, ConnectErrorType } from '../utils';
 import type { LastLogin } from './ClientStateService';
 import { ClientStateService } from './ClientStateService';
 import { WebAuthnService } from './WebAuthnService';
+import { AppendCompletionType } from '../models/connect/append';
 
 const packageVersion = process.env.FE_LIBRARY_VERSION;
 
@@ -434,20 +435,21 @@ export class ConnectService {
 
   async completeAppend(
     attestationOptions: string,
-    conditional = false,
+    completionType: AppendCompletionType,
   ): Promise<Result<ConnectAppendFinishRsp, ConnectError>> {
     const existingProcess = await this.#getExistingProcess(() => this.appendInit(new AbortController()));
     if (!existingProcess) {
       return Err(new ConnectError(ConnectErrorType.MissingInit));
     }
 
+    const conditional = completionType === 'conditional';
     const res = await this.#webAuthnCreatePasskey(attestationOptions, conditional);
     if (res.err) {
       return res;
     }
 
     const finishRes = await this.wrapWithErr(() =>
-      this.#connectApi.connectAppendFinish({ attestationResponse: res.val }),
+      this.#connectApi.connectAppendFinish({ attestationResponse: res.val, completionType }),
     );
     if (finishRes.ok) {
       const latestLogin = finishRes.val.passkeyOperation as LastLogin;

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

@@ -57,19 +57,27 @@ export class WebAuthnService {
       throw new Error('No publicKey in assertionOptions');
     }
 
-    let mediation: CredentialMediationRequirement | undefined;
+    let credential: PublicKeyCredential;
     if (conditional) {
-      mediation = 'conditional';
-    }
-
-    const options = {
-      publicKey,
-      signal: abortController.signal,
-      mediation,
-    } as never;
+      const p1 = await navigator.credentials.create({
+        publicKey,
+        signal: abortController.signal,
+        mediation: 'conditional',
+      } as never);
+      const p2 = new Promise<null>(resolve => setTimeout(() => resolve(null), 5000));
+
+      const result = await Promise.race([p1, p2]);
+      if (!result) {
+        throw new Error('Timeout after 5000ms');
+      }
 
-    console.log('create options', options);
-    const credential = (await navigator.credentials.create(options)) as PublicKeyCredential;
+      credential = result as PublicKeyCredential;
+    } else {
+      credential = (await navigator.credentials.create({
+        publicKey,
+        signal: abortController.signal,
+      } as never)) as PublicKeyCredential;
+    }
 
     return {
       response: JSON.stringify(credential.toJSON()),