Add low events (#600)

Author: incorbador

examples/nextjs/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -23,9 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
   "include": [
@@ -37,7 +31,5 @@
     "scripts/seed.js",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

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

@@ -128,7 +128,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
         return navigateToScreen(LoginScreenType.PasskeyReLogin);
       } else if (flags.hasSupportForConditionalUI()) {
         log.debug('starting conditional UI');
-        void startConditionalUI(res.val.conditionalUIChallenge);
+        void startConditionalUI(res.val.conditionalUIChallenge, flags);
       }
 
       statefulLoader.current.finish();
@@ -143,11 +143,15 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
     };
   }, [getConnectService]);
 
-  const startConditionalUI = async (challenge: string | null) => {
+  const startConditionalUI = async (challenge: string | null, resolvedFlags: Flags) => {
     if (!challenge) {
       return;
     }
 
+    if (resolvedFlags.hasSupportForEventLow()) {
+      getConnectService().enqueueLowEvent({ eventType: 'cui-ready', timestamp: Date.now() });
+    }
+
     let cuiStarted = false;
     const res = await getConnectService().conditionalUILogin(
       ac => config.onConditionalLoginStart?.(ac),
@@ -187,6 +191,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
     }
 
     try {
+      await getConnectService().flushLowEvents();
       await config.onComplete(
         connectLoginFinishToComplete(res.val),
         getConnectService().encodeClientState(),
@@ -204,6 +209,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
 
     setIdentifierBasedLoading(true);
     setCurrentIdentifier(identifier);
+    await getConnectService().flushLowEvents();
     config.onLoginStart?.();
 
     const resStart = await getConnectService().loginStart(identifier, PasskeyLoginSource.TextField, loadedMs);
@@ -242,6 +248,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
     }
 
     try {
+      await getConnectService().flushLowEvents();
       await config.onComplete(
         connectLoginFinishToComplete(res.val),
         getConnectService().encodeClientState(),
@@ -328,6 +335,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
   // This is needed to enable multiple login instances on the same page however only one should have the autocomplete
   // Else the conditionalUI won't work
   const autoComplete = useMemo(() => (flags?.hasSupportForConditionalUI() ? 'username webauthn' : ''), [flags]);
+  const enableEventLow = useMemo(() => flags?.hasSupportForEventLow() ?? false, [flags]);
 
   switch (loginInitState) {
     case LoginInitState.SilentLoading:
@@ -340,6 +348,7 @@ const LoginInitScreen: FC<Props> = ({ showFallback = false }) => {
           isLoading={cuiBasedLoading || identifierBasedLoading}
           error={error}
           autoComplete={autoComplete}
+          enableEventLow={enableEventLow}
           handleSubmit={() => void handleSubmit()}
           handleIdentifierUpdate={(v: string) => setIdentifier(v)}
         />

packages/connect-react/src/components/login/base/LoginInitLoaded.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
+import useLoginInputEventLow from '../../../hooks/useLoginInputEventLow';
+import useShared from '../../../hooks/useShared';
 import InputField from '../../shared/InputField';
 import { LinkButton } from '../../shared/LinkButton';
 import { Notification } from '../../shared/Notification';
@@ -9,6 +11,7 @@ interface Props {
   isLoading: boolean;
   error: string | undefined;
   autoComplete: string;
+  enableEventLow?: boolean;
   onSignupClick?: () => void;
   handleSubmit: () => void;
   handleIdentifierUpdate: (v: string) => void;
@@ -19,9 +22,19 @@ const LoginInitLoaded = ({
   error,
   onSignupClick,
   autoComplete,
+  enableEventLow = false,
   handleSubmit,
   handleIdentifierUpdate,
 }: Props) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { getConnectService } = useShared();
+
+  useLoginInputEventLow({
+    inputRef,
+    connectService: getConnectService(),
+    enabled: enableEventLow,
+  });
+
   return (
     <>
       {error ? (
@@ -37,6 +50,7 @@ const LoginInitLoaded = ({
         autoComplete={autoComplete}
         autoFocus={true}
         placeholder=''
+        ref={inputRef}
         onChange={e => handleIdentifierUpdate(e.target.value)}
       />
       <PrimaryButton