Low impr

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

@@ -1,21 +1,23 @@
 import type { ConnectError } from '@corbado/web-core';
 import { ConnectErrorType } from '@corbado/web-core';
 import log from 'loglevel';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import useAppendProcess from '../../hooks/useAppendProcess';
 import useShared from '../../hooks/useShared';
 import { AppendScreenType } from '../../types/screenTypes';
 import { AppendSituationCode, getAppendErrorMessage } from '../../types/situations';
+import { withLowEventWindow } from '../../utils/lowEventWindow';
 import AppendAfterError from './append-init/AppendAfterError';
 
 const AppendAfterErrorScreen = ({ attestationOptions }: { attestationOptions: string }) => {
-  const { navigateToScreen, handleErrorSoft, handleErrorHard, handleCredentialExistsError, handleSkip } =
+  const { navigateToScreen, handleErrorSoft, handleErrorHard, handleCredentialExistsError, handleSkip, flags } =
     useAppendProcess();
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
   const [loading, setLoading] = useState(false);
   const [skipping, setSkipping] = useState(false);
   const { getConnectService } = useShared();
+  const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
 
   const onSubmitClick = async () => {
     if (loading) {
@@ -24,7 +26,15 @@ const AppendAfterErrorScreen = ({ attestationOptions }: { attestationOptions: st
 
     setLoading(true);
     setErrorMessage(undefined);
-    const res = await getConnectService().completeAppend(attestationOptions, 'manual');
+    const res = await withLowEventWindow(
+      {
+        connectService: getConnectService(),
+        enabled: enableEventLow,
+        startEventType: 'pa-start',
+        finishEventType: 'pa-finish',
+      },
+      () => 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

@@ -2,13 +2,14 @@ import type { ConnectError } from '@corbado/web-core';
 import { ConnectErrorType } from '@corbado/web-core';
 import type { AppendCompletionType } from '@corbado/web-core/dist/models/connect/append';
 import log from 'loglevel';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import useAppendProcess from '../../hooks/useAppendProcess';
 import useShared from '../../hooks/useShared';
 import { Flags } from '../../types/flags';
 import { AppendScreenType } from '../../types/screenTypes';
 import { AppendSituationCode, getAppendErrorMessage } from '../../types/situations';
+import { withLowEventWindow } from '../../utils/lowEventWindow';
 import { StatefulLoader } from '../../utils/statefulLoader';
 import AppendBenefits from './append-init/AppendBenetifs';
 import AppendInitLoaded2 from './append-init/AppendInitLoaded2';
@@ -31,13 +32,15 @@ const AppendInitScreen = () => {
     handleCredentialExistsError,
     onReadMoreClick,
     setFlags,
+    flags,
   } = useAppendProcess();
   const { sharedConfig, getConnectService } = useShared();
   const [attestationOptions, setAttestationOptions] = useState('');
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
   const [appendLoading, setAppendLoading] = useState(false);
   const [appendInitState, setAppendInitState] = useState(AppendInitState.SilentLoading);
   const [skipping, setSkipping] = useState(false);
+  const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
   const statefulLoader = useRef(
     new StatefulLoader(
       () => setAppendInitState(AppendInitState.Loading),
@@ -180,7 +183,15 @@ const AppendInitScreen = () => {
       setAppendLoading(true);
       setErrorMessage(undefined);
 
-      const res = await getConnectService().completeAppend(attestationOptions, completionType);
+      const res = await withLowEventWindow(
+        {
+          connectService: getConnectService(),
+          enabled: enableEventLow,
+          startEventType: 'pa-start',
+          finishEventType: 'pa-finish',
+        },
+        () => getConnectService().completeAppend(attestationOptions, completionType),
+      );
       if (res.err) {
         if (res.val.type === ConnectErrorType.ExcludeCredentialsMatch) {
           return handleSituation(AppendSituationCode.ClientExcludeCredentialsMatch, res.val);
@@ -203,12 +214,20 @@ const AppendInitScreen = () => {
         aaguidIcon: res.val.passkeyOperation.aaguidDetails?.iconLight,
       });
     },
-    [getConnectService, appendLoading, skipping],
+    [getConnectService, appendLoading, skipping, enableEventLow],
   );
 
   const handleConditionalCreate = useCallback(
     async (attestationOptions: string) => {
-      const res = await getConnectService().completeAppend(attestationOptions, 'conditional');
+      const res = await withLowEventWindow(
+        {
+          connectService: getConnectService(),
+          enabled: enableEventLow,
+          startEventType: 'pa-start',
+          finishEventType: 'pa-finish',
+        },
+        () => getConnectService().completeAppend(attestationOptions, 'conditional'),
+      );
       if (res.err) {
         await handleSituation(AppendSituationCode.ClientPasskeyOperationErrorSilent, res.val);
 
@@ -222,7 +241,7 @@ const AppendInitScreen = () => {
 
       return true;
     },
-    [getConnectService],
+    [getConnectService, enableEventLow],
   );
 
   const handleSituation = async (situationCode: AppendSituationCode, error?: ConnectError) => {

packages/connect-react/src/components/login/LoginErrorScreenHard.tsx

@@ -1,12 +1,13 @@
 import type { ConnectError } from '@corbado/web-core';
 import { ConnectErrorType, PasskeyLoginSource } from '@corbado/web-core';
 import log from 'loglevel';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import useLoginProcess from '../../hooks/useLoginProcess';
 import useShared from '../../hooks/useShared';
 import { LoginScreenType } from '../../types/screenTypes';
 import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
+import { withLowEventWindow } from '../../utils/lowEventWindow';
 import LoginErrorHard from './base/LoginErrorHard';
 import {
   type CboApiFallbackOperationError,
@@ -19,10 +20,11 @@ type Props = {
 };
 
 const LoginErrorScreenHard = ({ previousAssertionOptions }: Props) => {
-  const { config, navigateToScreen, currentIdentifier, loadedMs, fallback } = useLoginProcess();
+  const { config, navigateToScreen, currentIdentifier, loadedMs, fallback, flags } = useLoginProcess();
   const { getConnectService } = useShared();
   const [loading, setLoading] = useState(false);
   const [hardErrorCount, setHardErrorCount] = useState(1);
+  const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
   // only for logging purposes
   const [assertionOptions, setAssertionOptions] = useState<string | undefined>(previousAssertionOptions);
 
@@ -49,7 +51,15 @@ const LoginErrorScreenHard = ({ previousAssertionOptions }: Props) => {
 
     setAssertionOptions(resStart.val.assertionOptions);
 
-    const resFinish = await getConnectService().loginContinue(resStart.val);
+    const resFinish = await withLowEventWindow(
+      {
+        connectService: getConnectService(),
+        enabled: enableEventLow,
+        startEventType: 'pl-start',
+        finishEventType: 'pl-finish',
+      },
+      () => getConnectService().loginContinue(resStart.val),
+    );
     if (resFinish.err) {
       if (resFinish.val.type === ConnectErrorType.Cancel) {
         if (hardErrorCount >= 3) {

packages/connect-react/src/components/login/LoginErrorScreenSoft.tsx

@@ -1,12 +1,13 @@
 import type { ConnectError } from '@corbado/web-core';
 import { ConnectErrorType, PasskeyLoginSource } from '@corbado/web-core';
 import log from 'loglevel';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import useLoginProcess from '../../hooks/useLoginProcess';
 import useShared from '../../hooks/useShared';
 import { LoginScreenType } from '../../types/screenTypes';
 import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
+import { withLowEventWindow } from '../../utils/lowEventWindow';
 import LoginErrorSoft from './base/LoginErrorSoft';
 import type { CboApiFallbackOperationError } from './LoginInitScreen';
 import { connectLoginFinishToComplete, connectLoginFinishToWebauthnId } from './LoginInitScreen';
@@ -16,9 +17,10 @@ type Props = {
 };
 
 const LoginErrorScreenSoft = ({ previousAssertionOptions }: Props) => {
-  const { config, navigateToScreen, currentIdentifier, loadedMs, fallback } = useLoginProcess();
+  const { config, navigateToScreen, currentIdentifier, loadedMs, fallback, flags } = useLoginProcess();
   const { getConnectService } = useShared();
   const [loading, setLoading] = useState(false);
+  const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
   // only for logging purposes
 
   const handleSubmit = async () => {
@@ -42,7 +44,15 @@ const LoginErrorScreenSoft = ({ previousAssertionOptions }: Props) => {
       return handleSituation(LoginSituationCode.CboApiFallbackOperationError, undefined, data);
     }
 
-    const resFinish = await getConnectService().loginContinue(resStart.val);
+    const resFinish = await withLowEventWindow(
+      {
+        connectService: getConnectService(),
+        enabled: enableEventLow,
+        startEventType: 'pl-start',
+        finishEventType: 'pl-finish',
+      },
+      () => getConnectService().loginContinue(resStart.val),
+    );
     if (resFinish.err) {
       if (resFinish.val.type === ConnectErrorType.Cancel || resFinish.val.type === ConnectErrorType.Untyped) {
         return handleSituation(

packages/connect-react/src/components/login/LoginHybridScreen.tsx

@@ -2,27 +2,37 @@ import type { ConnectError } from '@corbado/web-core';
 import { ConnectErrorType } from '@corbado/web-core';
 import type { ConnectLoginStartRsp } from '@corbado/web-core/dist/api/v2';
 import log from 'loglevel';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import useLoginProcess from '../../hooks/useLoginProcess';
 import useShared from '../../hooks/useShared';
 import { LoginScreenType } from '../../types/screenTypes';
 import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
+import { withLowEventWindow } from '../../utils/lowEventWindow';
 import LoginHybrid from './base/LoginHybrid';
 import { connectLoginFinishToComplete, connectLoginFinishToWebauthnId } from './LoginInitScreen';
 
 const LoginHybridScreen = (resStart: ConnectLoginStartRsp) => {
-  const { config, navigateToScreen, currentIdentifier, fallback } = useLoginProcess();
+  const { config, navigateToScreen, currentIdentifier, fallback, flags } = useLoginProcess();
   const [loading, setLoading] = useState(false);
   const { getConnectService } = useShared();
+  const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
 
   const handleSubmit = useCallback(async () => {
     if (loading) {
       return;
     }
 
     setLoading(true);
-    const res = await getConnectService().loginContinue(resStart);
+    const res = await withLowEventWindow(
+      {
+        connectService: getConnectService(),
+        enabled: enableEventLow,
+        startEventType: 'pl-start',
+        finishEventType: 'pl-finish',
+      },
+      () => getConnectService().loginContinue(resStart),
+    );
     if (res.err) {
       if (res.val.type === ConnectErrorType.Cancel || res.val.type === ConnectErrorType.Untyped) {
         return handleSituation(LoginSituationCode.ClientPasskeyOperationCancelled, res.val);
@@ -40,7 +50,7 @@ const LoginHybridScreen = (resStart: ConnectLoginStartRsp) => {
     } catch {
       return handleSituation(LoginSituationCode.CtApiNotAvailablePostAuthenticator);
     }
-  }, [getConnectService, config, navigateToScreen, currentIdentifier, loading]);
+  }, [getConnectService, config, navigateToScreen, currentIdentifier, loading, enableEventLow]);
 
   const handleSituation = (situationCode: LoginSituationCode, error?: ConnectError) => {
     const messageCode = `situation: ${situationCode} ${error?.track()}`;

packages/connect-react/src/components/login/LoginInitScreen.tsx

@@ -10,6 +10,7 @@ import useShared from '../../hooks/useShared';
 import { Flags } from '../../types/flags';
 import { LoginScreenType } from '../../types/screenTypes';
 import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
+import { withLowEventWindow } from '../../utils/lowEventWindow';
 import { StatefulLoader } from '../../utils/statefulLoader';
 import LoginInitLoaded from './base/LoginInitLoaded';
 import LoginInitLoading from './base/LoginInitLoading';
@@ -126,7 +127,13 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
       if (lastLogin) {
         log.debug('starting relogin UI');
         return navigateToScreen(LoginScreenType.PasskeyReLogin);
-      } else if (flags.hasSupportForConditionalUI()) {
+      }
+
+      if (flags.hasSupportForEventLow()) {
+        getConnectService().enqueueLowEvent({ eventType: 'li-ready', timestamp: Date.now() });
+      }
+
+      if (flags.hasSupportForConditionalUI()) {
         log.debug('starting conditional UI');
         void startConditionalUI(res.val.conditionalUIChallenge, flags);
       }
@@ -179,6 +186,11 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
       return handleSituation(LoginSituationCode.CboApiNotAvailablePreConditionalAuthenticator, res.val);
     }
 
+    if (resolvedFlags.hasSupportForEventLow()) {
+      getConnectService().enqueueLowEvent({ eventType: 'cui-finish', timestamp: Date.now() });
+    }
+    await getConnectService().flushLowEvents();
+
     if (res.val.fallbackOperationError) {
       const data: CboApiFallbackOperationError = {
         initFallback: res.val.fallbackOperationError.initFallback,
@@ -191,7 +203,6 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
     }
 
     try {
-      await getConnectService().flushLowEvents();
       await config.onComplete(
         connectLoginFinishToComplete(res.val),
         getConnectService().encodeClientState(),
@@ -209,6 +220,9 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
 
     setIdentifierBasedLoading(true);
     setCurrentIdentifier(identifier);
+    if (enableEventLow) {
+      getConnectService().enqueueLowEvent({ eventType: 'li-finish', timestamp: Date.now() });
+    }
     await getConnectService().flushLowEvents();
     config.onLoginStart?.();
 
@@ -233,7 +247,15 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
       return handleSituation(LoginSituationCode.CboApiFallbackOperationError, undefined, data);
     }
 
-    const res = await getConnectService().loginContinue(resStart.val);
+    const res = await withLowEventWindow(
+      {
+        connectService: getConnectService(),
+        enabled: enableEventLow,
+        startEventType: 'pl-start',
+        finishEventType: 'pl-finish',
+      },
+      () => getConnectService().loginContinue(resStart.val),
+    );
     if (res.err) {
       setIdentifierBasedLoading(false);
       if (res.val.type === ConnectErrorType.Cancel || res.val.type === ConnectErrorType.Untyped) {

packages/connect-react/src/components/login/LoginPasskeyReLoginScreen.tsx

@@ -1,12 +1,13 @@
 import type { ConnectError } from '@corbado/web-core';
 import { ConnectErrorType, PasskeyLoginSource } from '@corbado/web-core';
 import log from 'loglevel';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import useLoginProcess from '../../hooks/useLoginProcess';
 import useShared from '../../hooks/useShared';
 import { LoginScreenType } from '../../types/screenTypes';
 import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
+import { withLowEventWindow } from '../../utils/lowEventWindow';
 import LoginOneTap from './base/LoginOneTap';
 import {
   type CboApiFallbackOperationError,
@@ -15,9 +16,11 @@ import {
 } from './LoginInitScreen';
 
 export const LoginPasskeyReLoginScreen = () => {
-  const { config, navigateToScreen, setCurrentIdentifier, currentIdentifier, loadedMs, fallback } = useLoginProcess();
+  const { config, navigateToScreen, setCurrentIdentifier, currentIdentifier, loadedMs, fallback, flags } =
+    useLoginProcess();
   const { getConnectService } = useShared();
   const [loading, setLoading] = useState(false);
+  const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
 
   useEffect(() => {
     const lastLogin = getConnectService().getLastLogin();
@@ -47,7 +50,15 @@ export const LoginPasskeyReLoginScreen = () => {
       return handleSituation(LoginSituationCode.CboApiFallbackOperationError, undefined, data);
     }
 
-    const resFinish = await getConnectService().loginContinue(resStart.val);
+    const resFinish = await withLowEventWindow(
+      {
+        connectService: getConnectService(),
+        enabled: enableEventLow,
+        startEventType: 'pl-start',
+        finishEventType: 'pl-finish',
+      },
+      () => getConnectService().loginContinue(resStart.val),
+    );
     if (resFinish.err) {
       if (resFinish.val.type === ConnectErrorType.Cancel || resFinish.val.type === ConnectErrorType.Untyped) {
         return handleSituation(LoginSituationCode.ClientPasskeyOperationCancelled, resFinish.val);