Merge shared-ui and react package

Author: incorbador

package-lock.json

@@ -47,5 +47,6 @@
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-merge": "^5.10.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package.json

@@ -0,0 +1,79 @@
+# Observe SDK Integration into Complete React SDK — STATUS
+
+All planned phases have been implemented. This document now reflects the final status.
+
+## What was implemented
+
+### Flow-level events (ProcessHandler)
+- [x] `loginVisible` — fires when LoginInitBlock first becomes primary
+- [x] `loginFinish` — fires in onProcessCompleted when authType === Login
+- [x] `signupVisible` — fires when SignupInitBlock first becomes primary
+- [x] `signupFinish` — fires in onProcessCompleted when authType === Signup
+- [x] `loginReset` — fires when LoginInitBlock becomes primary again (after being away)
+
+### Social login (LoginInitBlock + SignupInitBlock)
+- [x] `socialLoginStart` — fires before startSocialVerification API call
+- [x] `socialLoginFinish` — fires when finishSocialVerification succeeds
+- [x] `socialLoginError` — fires when finishSocialVerification fails
+
+### Identifier tracking (LoginInitBlock + SignupInitBlock + React components)
+- [x] `provideIdentifierStartable` — created via tracker in LoginForm.tsx / SignupInit.tsx with DOM ref
+- [x] `provideIdentifierSubmitted` — fires in start() / updateUserData() before API call
+- [x] `provideIdentifierFinished` — fires on successful API response
+- [x] `provideIdentifierError` — fires on failed API response
+- [x] Input field instrumentation (auto-detect first character, paste, CUI via PatternDetector)
+
+### Login methods decision (LoginInit + PasskeyError screens)
+- [x] `loginMethodsDecisionOffered` — fires in LoginInit.tsx, PasskeyError.tsx, PasskeyErrorLight.tsx
+
+### Email OTP (EmailVerifyBlock)
+- [x] `emailOTPStartable` — fires when block is created with verificationMethod === 'email-otp'
+- [x] `emailOTPSubmitted` — fires in validateCode() before API call
+- [x] `emailOTPFinished` — fires on successful validation
+- [x] `emailOTPError` — fires on failed validation
+- [x] `emailOTPResent` — fires on successful resend
+
+### Email Link (EmailVerifyBlock)
+- [x] `emailLinkStartable` — fires when block is created with verificationMethod === 'email-link'
+- [x] `emailLinkSubmitted` — fires in validateEmailLink() before API call
+- [x] `emailLinkFinished` — fires on successful link validation
+- [x] `emailLinkError` — fires on failed link validation
+
+### web-core changes (B1 fix)
+- [x] `loginWithPasskey()` — added `onCeremonyData` callback exposing assertionOptions + assertionResponse
+- [x] `loginWithPasskeyChallenge()` — extended `onAuthenticatorCompleted` to pass assertionOptions + assertionResponse
+- [x] `appendPasskey()` — added `onCeremonyData` callback exposing attestationOptions + attestationResponse
+
+### Passkey login (PasskeyVerifyBlock + LoginInitBlock conditional UI)
+- [x] `passkeyLoginStart` — fires via onCeremonyData callback with assertionOptions
+- [x] `passkey.submitted` — fires with assertionResponse
+- [x] `passkey.finished` — fires on successful login
+- [x] `passkey.clientError` / `passkey.serverErrorUnknown` — fires on failure
+- [x] Conditional UI tracking — `conditionalUIStartable`, `conditionalUISubmitted`, `conditionalUIFinished`, `conditionalUIClientError` in LoginInitBlock
+
+### Passkey enrollment (PasskeyAppendBlock)
+- [x] `passkeyEnrollmentStartable` — fires when block is initialized
+- [x] `passkey_enrollment.started` — fires via onCeremonyData with attestationOptions
+- [x] `passkey_enrollment.submitted` — fires with attestationResponse
+- [x] `passkey_enrollment.finished` — fires on successful append
+- [x] `passkey_enrollment.clientError` — fires on failure
+- [x] `passkey_enrollment.skipped` — fires in skipPasskeyAppend()
+
+---
+
+## Architecture
+
+- `ObserveTracker` interface defined in `src/contexts/ObserveContext.ts` (no hard dependency on @corbado/observe)
+- Tracker passed via `CorbadoProvider` → `ObserveContext` → `FlowHandlerProvider` → `ProcessHandler` → Block classes
+- Flow-level events fire from `ProcessHandler`
+- Block-level events fire from Block class methods
+- DOM-dependent events (provideIdentifierStartable) bridge via React components setting operations on blocks
+
+## Remaining gaps (future work)
+
+| Gap | Description |
+|-----|-------------|
+| Phone OTP events | No `phoneOTP*` events in observe SDK |
+| Missing fields events | No tracking for the "complete your profile" step |
+| Phone identifier instrumentation | `provideIdentifierStartable` assumes text input |
+| Password events | No password login events tracked (not present in complete SDK) |

packages/react/TODO-observe-integration.md

@@ -31,18 +31,22 @@
     "url": "https://github.com/corbado/javascript/issues"
   },
   "dependencies": {
-    "@corbado/shared-ui": "^3.6.0",
+    "@corbado/observe": "file:../../../../js/packages/observe",
     "@corbado/shared-util": "^1.0.12",
     "@corbado/web-core": "^3.6.0",
     "i18next": "23.5.1",
     "i18next-browser-languagedetector": "7.1.0",
     "libphonenumber-js": "^1.10.59",
     "react-i18next": "13.2.2",
-    "react-phone-number-input": "^3.3.9"
+    "react-phone-number-input": "^3.3.9",
+    "rxjs": "^7.8.1",
+    "ua-parser-js": "^1.0.37"
   },
   "devDependencies": {
     "@corbado/types": "^3.2.0",
     "@types/react": "^18.2.0",
+    "css-loader": "^6.8.1",
+    "style-loader": "^3.3.3",
     "ts-results": "^3.3.0",
     "typescript": "^5.2.2"
   },

packages/react/package.json

@@ -8,8 +8,8 @@ import type {
   PasskeyVerifyBlock,
   PhoneVerifyBlock,
   SignupInitBlock,
-} from '@corbado/shared-ui';
-import { BlockTypes, InitState, ScreenNames } from '@corbado/shared-ui';
+} from '../../shared-ui';
+import { BlockTypes, InitState, ScreenNames } from '../../shared-ui';
 import type { FC } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
 

packages/react/src/components/authentication/AuthFlow.tsx

@@ -1,4 +1,4 @@
-import { LoginIdentifierType, type LoginInitBlock } from '@corbado/shared-ui';
+import { LoginIdentifierType, type LoginInitBlock } from '../../../shared-ui';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -44,7 +44,7 @@ export const LastIdentifier: FC<LastIdentifierProps> = ({
     }
 
     block
-      .start(lastIdentifier.value, lastIdentifier.type === LoginIdentifierType.Phone)
+      .start(lastIdentifier.value, lastIdentifier.type === LoginIdentifierType.Phone, true)
       .finally(() => setLoading(false));
   };
 

packages/react/src/components/authentication/login-init/LastIdentifier.tsx

@@ -1,8 +1,9 @@
-import type { LoginInitBlock, TextFieldWithError } from '@corbado/shared-ui';
+import type { LoginInitBlock, TextFieldWithError } from '../../../shared-ui';
 import type { FC, FormEvent } from 'react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { ObserveContext } from '../../../contexts/ObserveContext';
 import { useTelemetry } from '../../../hooks/useTelemetry';
 import type { InputFieldProps } from '../../ui';
 import { InputField, PhoneInputField, PrimaryButton } from '../../ui';
@@ -25,6 +26,7 @@ export const LoginForm: FC<LoginFormProps> = ({
   const { t } = useTranslation('translation', { keyPrefix: `login.login-init.login-init` });
 
   const { logMethodCalled } = useTelemetry();
+  const { tracker } = useContext(ObserveContext);
 
   const [textField, setTextField] = useState<TextFieldWithError | null>(null);
   const [usePhone, setUsePhone] = useState<boolean>(
@@ -52,6 +54,19 @@ export const LoginForm: FC<LoginFormProps> = ({
     textFieldRef.current.value = block.data.loginIdentifier ? block.data.loginIdentifier : '';
   }, [block]);
 
+  useEffect(() => {
+    if (!tracker || !textFieldRef.current) {
+      return;
+    }
+
+    const op = tracker.provideIdentifierStartable(textFieldRef.current);
+    block.setProvideIdentifierOp(op);
+
+    return () => {
+      block.destroyProvideIdentifierOp();
+    };
+  }, [tracker, block]);
+
   const submitButtonText = useMemo(() => t('button_submit'), [t]);
   const IdentifierInputField = useMemo(() => {
     const commonProps: Partial<InputFieldProps> & React.RefAttributes<HTMLInputElement> = {
@@ -135,9 +150,9 @@ export const LoginForm: FC<LoginFormProps> = ({
       logMethodCalled('loginStart', 'loginInit');
 
       if (usePhone) {
-        void block.start(phoneInput, true);
+        void block.start(phoneInput, true, false);
       } else {
-        void block.start(textFieldRef.current?.value ?? '', false);
+        void block.start(textFieldRef.current?.value ?? '', false, false);
       }
     },
     [block, usePhone, phoneInput],

packages/react/src/components/authentication/login-init/LoginForm.tsx

@@ -1,4 +1,4 @@
-import { InitState } from '@corbado/shared-ui';
+import { InitState } from '../../shared-ui';
 import type { FC } from 'react';
 import React from 'react';
 

packages/react/src/components/ui/FreemiumBadge.tsx

@@ -1,4 +1,4 @@
-import type { SocialLogin } from '@corbado/shared-ui';
+import type { SocialLogin } from '../../shared-ui';
 import type { SocialProviderType } from '@corbado/web-core';
 import type { TFunction } from 'i18next';
 import type { FC, ReactNode } from 'react';

packages/react/src/components/ui/SocialLoginButtons.tsx

@@ -1,4 +1,4 @@
-import addSrc from '@corbado/shared-ui/assets/add.svg';
+import addSrc from '../../../shared-ui/assets/add.svg';
 import type { FC } from 'react';
 import { memo, useRef } from 'react';
 import React from 'react';