Skip to content

Commit 0c82948

Browse files
incorbadorincorbador
authored
Low impr (#602)
1 parent 4adeb61 commit 0c82948

15 files changed

Lines changed: 503 additions & 137 deletions

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import type { ConnectError } from '@corbado/web-core';
22
import { ConnectErrorType } from '@corbado/web-core';
33
import log from 'loglevel';
4-
import React, { useCallback, useState } from 'react';
4+
import React, { useCallback, useMemo, useState } from 'react';
55

66
import useAppendProcess from '../../hooks/useAppendProcess';
77
import useShared from '../../hooks/useShared';
88
import { AppendScreenType } from '../../types/screenTypes';
99
import { AppendSituationCode, getAppendErrorMessage } from '../../types/situations';
10+
import { withLowEventWindow } from '../../utils/lowEventWindow';
1011
import AppendAfterError from './append-init/AppendAfterError';
1112

1213
const AppendAfterErrorScreen = ({ attestationOptions }: { attestationOptions: string }) => {
13-
const { navigateToScreen, handleErrorSoft, handleErrorHard, handleCredentialExistsError, handleSkip } =
14+
const { navigateToScreen, handleErrorSoft, handleErrorHard, handleCredentialExistsError, handleSkip, flags } =
1415
useAppendProcess();
1516
const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
1617
const [loading, setLoading] = useState(false);
1718
const [skipping, setSkipping] = useState(false);
1819
const { getConnectService } = useShared();
20+
const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
1921

2022
const onSubmitClick = async () => {
2123
if (loading) {
@@ -24,7 +26,15 @@ const AppendAfterErrorScreen = ({ attestationOptions }: { attestationOptions: st
2426

2527
setLoading(true);
2628
setErrorMessage(undefined);
27-
const res = await getConnectService().completeAppend(attestationOptions, 'manual');
29+
const res = await withLowEventWindow(
30+
{
31+
connectService: getConnectService(),
32+
enabled: enableEventLow,
33+
startEventType: 'pa-start',
34+
finishEventType: 'pa-finish',
35+
},
36+
() => getConnectService().completeAppend(attestationOptions, 'manual'),
37+
);
2838
if (res.err) {
2939
if (res.val.type === ConnectErrorType.ExcludeCredentialsMatch) {
3040
return handleSituation(AppendSituationCode.ClientExcludeCredentialsMatch, res.val);

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

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import type { ConnectError } from '@corbado/web-core';
22
import { ConnectErrorType } from '@corbado/web-core';
33
import type { AppendCompletionType } from '@corbado/web-core/dist/models/connect/append';
44
import log from 'loglevel';
5-
import React, { useCallback, useEffect, useRef, useState } from 'react';
5+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
66

77
import useAppendProcess from '../../hooks/useAppendProcess';
88
import useShared from '../../hooks/useShared';
99
import { Flags } from '../../types/flags';
1010
import { AppendScreenType } from '../../types/screenTypes';
1111
import { AppendSituationCode, getAppendErrorMessage } from '../../types/situations';
12+
import { withLowEventWindow } from '../../utils/lowEventWindow';
1213
import { StatefulLoader } from '../../utils/statefulLoader';
1314
import AppendBenefits from './append-init/AppendBenetifs';
1415
import AppendInitLoaded2 from './append-init/AppendInitLoaded2';
@@ -31,13 +32,15 @@ const AppendInitScreen = () => {
3132
handleCredentialExistsError,
3233
onReadMoreClick,
3334
setFlags,
35+
flags,
3436
} = useAppendProcess();
3537
const { sharedConfig, getConnectService } = useShared();
3638
const [attestationOptions, setAttestationOptions] = useState('');
3739
const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
3840
const [appendLoading, setAppendLoading] = useState(false);
3941
const [appendInitState, setAppendInitState] = useState(AppendInitState.SilentLoading);
4042
const [skipping, setSkipping] = useState(false);
43+
const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
4144
const statefulLoader = useRef(
4245
new StatefulLoader(
4346
() => setAppendInitState(AppendInitState.Loading),
@@ -180,7 +183,15 @@ const AppendInitScreen = () => {
180183
setAppendLoading(true);
181184
setErrorMessage(undefined);
182185

183-
const res = await getConnectService().completeAppend(attestationOptions, completionType);
186+
const res = await withLowEventWindow(
187+
{
188+
connectService: getConnectService(),
189+
enabled: enableEventLow,
190+
startEventType: 'pa-start',
191+
finishEventType: 'pa-finish',
192+
},
193+
() => getConnectService().completeAppend(attestationOptions, completionType),
194+
);
184195
if (res.err) {
185196
if (res.val.type === ConnectErrorType.ExcludeCredentialsMatch) {
186197
return handleSituation(AppendSituationCode.ClientExcludeCredentialsMatch, res.val);
@@ -203,12 +214,20 @@ const AppendInitScreen = () => {
203214
aaguidIcon: res.val.passkeyOperation.aaguidDetails?.iconLight,
204215
});
205216
},
206-
[getConnectService, appendLoading, skipping],
217+
[getConnectService, appendLoading, skipping, enableEventLow],
207218
);
208219

209220
const handleConditionalCreate = useCallback(
210221
async (attestationOptions: string) => {
211-
const res = await getConnectService().completeAppend(attestationOptions, 'conditional');
222+
const res = await withLowEventWindow(
223+
{
224+
connectService: getConnectService(),
225+
enabled: enableEventLow,
226+
startEventType: 'pa-start',
227+
finishEventType: 'pa-finish',
228+
},
229+
() => getConnectService().completeAppend(attestationOptions, 'conditional'),
230+
);
212231
if (res.err) {
213232
await handleSituation(AppendSituationCode.ClientPasskeyOperationErrorSilent, res.val);
214233

@@ -222,7 +241,7 @@ const AppendInitScreen = () => {
222241

223242
return true;
224243
},
225-
[getConnectService],
244+
[getConnectService, enableEventLow],
226245
);
227246

228247
const handleSituation = async (situationCode: AppendSituationCode, error?: ConnectError) => {

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import type { ConnectError } from '@corbado/web-core';
22
import { ConnectErrorType, PasskeyLoginSource } from '@corbado/web-core';
33
import log from 'loglevel';
4-
import React, { useState } from 'react';
4+
import React, { useMemo, useState } from 'react';
55

66
import useLoginProcess from '../../hooks/useLoginProcess';
77
import useShared from '../../hooks/useShared';
88
import { LoginScreenType } from '../../types/screenTypes';
99
import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
10+
import { withLowEventWindow } from '../../utils/lowEventWindow';
1011
import LoginErrorHard from './base/LoginErrorHard';
1112
import {
1213
type CboApiFallbackOperationError,
@@ -19,10 +20,11 @@ type Props = {
1920
};
2021

2122
const LoginErrorScreenHard = ({ previousAssertionOptions }: Props) => {
22-
const { config, navigateToScreen, currentIdentifier, loadedMs, fallback } = useLoginProcess();
23+
const { config, navigateToScreen, currentIdentifier, loadedMs, fallback, flags } = useLoginProcess();
2324
const { getConnectService } = useShared();
2425
const [loading, setLoading] = useState(false);
2526
const [hardErrorCount, setHardErrorCount] = useState(1);
27+
const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
2628
// only for logging purposes
2729
const [assertionOptions, setAssertionOptions] = useState<string | undefined>(previousAssertionOptions);
2830

@@ -49,7 +51,15 @@ const LoginErrorScreenHard = ({ previousAssertionOptions }: Props) => {
4951

5052
setAssertionOptions(resStart.val.assertionOptions);
5153

52-
const resFinish = await getConnectService().loginContinue(resStart.val);
54+
const resFinish = await withLowEventWindow(
55+
{
56+
connectService: getConnectService(),
57+
enabled: enableEventLow,
58+
startEventType: 'pl-start',
59+
finishEventType: 'pl-finish',
60+
},
61+
() => getConnectService().loginContinue(resStart.val),
62+
);
5363
if (resFinish.err) {
5464
if (resFinish.val.type === ConnectErrorType.Cancel) {
5565
if (hardErrorCount >= 3) {

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import type { ConnectError } from '@corbado/web-core';
22
import { ConnectErrorType, PasskeyLoginSource } from '@corbado/web-core';
33
import log from 'loglevel';
4-
import React, { useState } from 'react';
4+
import React, { useMemo, useState } from 'react';
55

66
import useLoginProcess from '../../hooks/useLoginProcess';
77
import useShared from '../../hooks/useShared';
88
import { LoginScreenType } from '../../types/screenTypes';
99
import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
10+
import { withLowEventWindow } from '../../utils/lowEventWindow';
1011
import LoginErrorSoft from './base/LoginErrorSoft';
1112
import type { CboApiFallbackOperationError } from './LoginInitScreen';
1213
import { connectLoginFinishToComplete, connectLoginFinishToWebauthnId } from './LoginInitScreen';
@@ -16,9 +17,10 @@ type Props = {
1617
};
1718

1819
const LoginErrorScreenSoft = ({ previousAssertionOptions }: Props) => {
19-
const { config, navigateToScreen, currentIdentifier, loadedMs, fallback } = useLoginProcess();
20+
const { config, navigateToScreen, currentIdentifier, loadedMs, fallback, flags } = useLoginProcess();
2021
const { getConnectService } = useShared();
2122
const [loading, setLoading] = useState(false);
23+
const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
2224
// only for logging purposes
2325

2426
const handleSubmit = async () => {
@@ -42,7 +44,15 @@ const LoginErrorScreenSoft = ({ previousAssertionOptions }: Props) => {
4244
return handleSituation(LoginSituationCode.CboApiFallbackOperationError, undefined, data);
4345
}
4446

45-
const resFinish = await getConnectService().loginContinue(resStart.val);
47+
const resFinish = await withLowEventWindow(
48+
{
49+
connectService: getConnectService(),
50+
enabled: enableEventLow,
51+
startEventType: 'pl-start',
52+
finishEventType: 'pl-finish',
53+
},
54+
() => getConnectService().loginContinue(resStart.val),
55+
);
4656
if (resFinish.err) {
4757
if (resFinish.val.type === ConnectErrorType.Cancel || resFinish.val.type === ConnectErrorType.Untyped) {
4858
return handleSituation(

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,37 @@ import type { ConnectError } from '@corbado/web-core';
22
import { ConnectErrorType } from '@corbado/web-core';
33
import type { ConnectLoginStartRsp } from '@corbado/web-core/dist/api/v2';
44
import log from 'loglevel';
5-
import React, { useCallback, useState } from 'react';
5+
import React, { useCallback, useMemo, useState } from 'react';
66

77
import useLoginProcess from '../../hooks/useLoginProcess';
88
import useShared from '../../hooks/useShared';
99
import { LoginScreenType } from '../../types/screenTypes';
1010
import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
11+
import { withLowEventWindow } from '../../utils/lowEventWindow';
1112
import LoginHybrid from './base/LoginHybrid';
1213
import { connectLoginFinishToComplete, connectLoginFinishToWebauthnId } from './LoginInitScreen';
1314

1415
const LoginHybridScreen = (resStart: ConnectLoginStartRsp) => {
15-
const { config, navigateToScreen, currentIdentifier, fallback } = useLoginProcess();
16+
const { config, navigateToScreen, currentIdentifier, fallback, flags } = useLoginProcess();
1617
const [loading, setLoading] = useState(false);
1718
const { getConnectService } = useShared();
19+
const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
1820

1921
const handleSubmit = useCallback(async () => {
2022
if (loading) {
2123
return;
2224
}
2325

2426
setLoading(true);
25-
const res = await getConnectService().loginContinue(resStart);
27+
const res = await withLowEventWindow(
28+
{
29+
connectService: getConnectService(),
30+
enabled: enableEventLow,
31+
startEventType: 'pl-start',
32+
finishEventType: 'pl-finish',
33+
},
34+
() => getConnectService().loginContinue(resStart),
35+
);
2636
if (res.err) {
2737
if (res.val.type === ConnectErrorType.Cancel || res.val.type === ConnectErrorType.Untyped) {
2838
return handleSituation(LoginSituationCode.ClientPasskeyOperationCancelled, res.val);
@@ -40,7 +50,7 @@ const LoginHybridScreen = (resStart: ConnectLoginStartRsp) => {
4050
} catch {
4151
return handleSituation(LoginSituationCode.CtApiNotAvailablePostAuthenticator);
4252
}
43-
}, [getConnectService, config, navigateToScreen, currentIdentifier, loading]);
53+
}, [getConnectService, config, navigateToScreen, currentIdentifier, loading, enableEventLow]);
4454

4555
const handleSituation = (situationCode: LoginSituationCode, error?: ConnectError) => {
4656
const messageCode = `situation: ${situationCode} ${error?.track()}`;

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import useShared from '../../hooks/useShared';
1010
import { Flags } from '../../types/flags';
1111
import { LoginScreenType } from '../../types/screenTypes';
1212
import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
13+
import { withLowEventWindow } from '../../utils/lowEventWindow';
1314
import { StatefulLoader } from '../../utils/statefulLoader';
1415
import LoginInitLoaded from './base/LoginInitLoaded';
1516
import LoginInitLoading from './base/LoginInitLoading';
@@ -126,7 +127,13 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
126127
if (lastLogin) {
127128
log.debug('starting relogin UI');
128129
return navigateToScreen(LoginScreenType.PasskeyReLogin);
129-
} else if (flags.hasSupportForConditionalUI()) {
130+
}
131+
132+
if (flags.hasSupportForEventLow()) {
133+
getConnectService().enqueueLowEvent({ eventType: 'li-ready', timestamp: Date.now() });
134+
}
135+
136+
if (flags.hasSupportForConditionalUI()) {
130137
log.debug('starting conditional UI');
131138
void startConditionalUI(res.val.conditionalUIChallenge, flags);
132139
}
@@ -179,6 +186,11 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
179186
return handleSituation(LoginSituationCode.CboApiNotAvailablePreConditionalAuthenticator, res.val);
180187
}
181188

189+
if (resolvedFlags.hasSupportForEventLow()) {
190+
getConnectService().enqueueLowEvent({ eventType: 'cui-finish', timestamp: Date.now() });
191+
}
192+
await getConnectService().flushLowEvents();
193+
182194
if (res.val.fallbackOperationError) {
183195
const data: CboApiFallbackOperationError = {
184196
initFallback: res.val.fallbackOperationError.initFallback,
@@ -191,7 +203,6 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
191203
}
192204

193205
try {
194-
await getConnectService().flushLowEvents();
195206
await config.onComplete(
196207
connectLoginFinishToComplete(res.val),
197208
getConnectService().encodeClientState(),
@@ -209,6 +220,9 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
209220

210221
setIdentifierBasedLoading(true);
211222
setCurrentIdentifier(identifier);
223+
if (enableEventLow) {
224+
getConnectService().enqueueLowEvent({ eventType: 'li-finish', timestamp: Date.now() });
225+
}
212226
await getConnectService().flushLowEvents();
213227
config.onLoginStart?.();
214228

@@ -233,7 +247,15 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
233247
return handleSituation(LoginSituationCode.CboApiFallbackOperationError, undefined, data);
234248
}
235249

236-
const res = await getConnectService().loginContinue(resStart.val);
250+
const res = await withLowEventWindow(
251+
{
252+
connectService: getConnectService(),
253+
enabled: enableEventLow,
254+
startEventType: 'pl-start',
255+
finishEventType: 'pl-finish',
256+
},
257+
() => getConnectService().loginContinue(resStart.val),
258+
);
237259
if (res.err) {
238260
setIdentifierBasedLoading(false);
239261
if (res.val.type === ConnectErrorType.Cancel || res.val.type === ConnectErrorType.Untyped) {

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import type { ConnectError } from '@corbado/web-core';
22
import { ConnectErrorType, PasskeyLoginSource } from '@corbado/web-core';
33
import log from 'loglevel';
4-
import React, { useEffect, useState } from 'react';
4+
import React, { useEffect, useMemo, useState } from 'react';
55

66
import useLoginProcess from '../../hooks/useLoginProcess';
77
import useShared from '../../hooks/useShared';
88
import { LoginScreenType } from '../../types/screenTypes';
99
import { getLoginErrorMessage, LoginSituationCode } from '../../types/situations';
10+
import { withLowEventWindow } from '../../utils/lowEventWindow';
1011
import LoginOneTap from './base/LoginOneTap';
1112
import {
1213
type CboApiFallbackOperationError,
@@ -15,9 +16,11 @@ import {
1516
} from './LoginInitScreen';
1617

1718
export const LoginPasskeyReLoginScreen = () => {
18-
const { config, navigateToScreen, setCurrentIdentifier, currentIdentifier, loadedMs, fallback } = useLoginProcess();
19+
const { config, navigateToScreen, setCurrentIdentifier, currentIdentifier, loadedMs, fallback, flags } =
20+
useLoginProcess();
1921
const { getConnectService } = useShared();
2022
const [loading, setLoading] = useState(false);
23+
const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
2124

2225
useEffect(() => {
2326
const lastLogin = getConnectService().getLastLogin();
@@ -47,7 +50,15 @@ export const LoginPasskeyReLoginScreen = () => {
4750
return handleSituation(LoginSituationCode.CboApiFallbackOperationError, undefined, data);
4851
}
4952

50-
const resFinish = await getConnectService().loginContinue(resStart.val);
53+
const resFinish = await withLowEventWindow(
54+
{
55+
connectService: getConnectService(),
56+
enabled: enableEventLow,
57+
startEventType: 'pl-start',
58+
finishEventType: 'pl-finish',
59+
},
60+
() => getConnectService().loginContinue(resStart.val),
61+
);
5162
if (resFinish.err) {
5263
if (resFinish.val.type === ConnectErrorType.Cancel || resFinish.val.type === ConnectErrorType.Untyped) {
5364
return handleSituation(LoginSituationCode.ClientPasskeyOperationCancelled, resFinish.val);

0 commit comments

Comments
 (0)