Skip to content

Recognize setup#691

Open
eugeniobet-ping wants to merge 12 commits into
mainfrom
recognize-setup-2
Open

Recognize setup#691
eugeniobet-ping wants to merge 12 commits into
mainfrom
recognize-setup-2

Conversation

@eugeniobet-ping

@eugeniobet-ping eugeniobet-ping commented Jun 17, 2026

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

Release Notes

  • New Features

    • Added the new @forgerock/recognize library entry with recognize() client support for subscribe/init/dispose.
    • Introduced standardized RecognizeErrorCode and RecognizeError handling, plus expanded typed event and configuration surfaces.
    • Added an E2E Recognize test app to demonstrate end-to-end integration.
  • Documentation

    • Added basic build and unit test instructions for the Recognize library.
  • Tests

    • Added automated tests validating init/dispose behavior and error mapping.
  • Chores

    • Added/updated workspace build, lint, and TypeScript/Vite/Vitest configuration.

@changeset-bot

changeset-bot Bot commented Jun 17, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 6f3cc8d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

…d SDK

Renames the public web-component type surface from `RecognizeWc*` to
`RecognizeWebComponent*` (e.g. `RecognizeWcConfig` →
`RecognizeWebComponentConfiguration`, `RecognizeWcClient` →
`RecognizeWebComponentClient`, `RecognizeWcCompleteDetail` →
`RecognizeWebComponentCompleteData`) for clarity at the package boundary,
and re-exports `RecognizeError` from the package entry point.

Reworks `RecognizeError` and the error-code taxonomy:

- `RecognizeErrorCode` switches from string values to numeric values
  grouped by domain (SDK 1xxx, CAMERA 2xxx, CORE 3xxx, BIOM 4xxx,
  SERVER 5xxx, SECURITY 6xxx). Several codes are renamed to match the
  upstream SDK vocabulary (`CAMERA_MISSING` → `CAMERA_NOT_FOUND`,
  `SDK_CONFIGURATION_FAILED` → `SDK_INVALID_CONFIGURATION`,
  `SDK_STORAGE_ERROR` → `SDK_STORAGE_FAILED`,
  `SDK_DYNAMIC_LINKING_MALFORMED_PAYLOAD` →
  `SDK_DYNAMIC_LINKING_PAYLOAD_MALFORMED`), and new codes are added
  (`SDK_OUTDATED_APP`, `SDK_INVALID_CUSTOMER_PROPERTIES`,
  `SDK_INVALID_CLIENT_STATE`, `BIOM_GENUINE_PRESENCE_NOT_ESTABLISHED`).
- `RecognizeError`'s constructor now accepts a standard `ErrorOptions`
  bag (`new RecognizeError(code, { cause })`) and forwards it to the
  base `Error` constructor, so `error.message` is the enum name and
  `error.cause` follows the platform contract instead of being assigned
  manually.
- The `createRecognizeError` factory is removed; `recognize.ts` now
  constructs `RecognizeError` directly. The SDK→proxy error map is
  frozen with `Object.freeze` to prevent accidental mutation at runtime.

Updates `recognize()` accordingly:

- Init failures now throw `RecognizeError` (with `SDK_ERROR` /
  `SDK_WEB_ASSEMBLY_IMPORT_FAILED` and a descriptive `cause`) instead of
  returning the error or throwing a plain `Error`.
- Subscribes to two new web-component events, `begin-stream` and
  `stop-stream`, and forwards them through the observer pipeline.
- Internal renames for readability (`effectiveConfig` → `config`,
  `abortController` → `aborter`, `attachListeners` →
  `addEventListeners`, `applyConfig` → `setAttributes`) and a global
  `HTMLElementTagNameMap` augmentation for `kl-auth` / `kl-enroll`.

Refreshes the bundled keyless SDK (`recognize-sdk/index.{js,d.ts}`,
`wasm.{js,wasm}`, `pthreads/wasm.{js,wasm}`) to a new upstream build.
The package's ESLint config now ignores `src/lib/recognize-sdk/**/*`
for dependency-checks since the bundled artifact pulls in transitive
imports that don't belong in the package manifest.

Updates the e2e example and unit tests to match: the example config
includes `authorizationToken`, and the spec asserts the new
`{ message, cause }` shape on thrown `RecognizeError`s.
@coderabbitai

coderabbitai Bot commented Jun 18, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9a0d8991-fa80-4191-ab19-a982dd68f79e

📥 Commits

Reviewing files that changed from the base of the PR and between 1ce8a57 and 6f3cc8d.

📒 Files selected for processing (1)
  • packages/recognize/eslint.config.mjs
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/recognize/eslint.config.mjs

📝 Walkthrough

Walkthrough

Adds a new @forgerock/recognize library that wraps the Keyless SDK with typed client APIs, error handling, and tests. Also adds a Vite-based e2e/recognize-app that initializes the client, subscribes to events, and mounts the auth component.

Changes

@forgerock/recognize Library

Layer / File(s) Summary
Error codes, constants, and error map
packages/recognize/src/lib/defs/recognize-error-code.ts, packages/recognize/src/lib/classes/recognize-error.ts, packages/recognize/src/lib/defs/constants.ts, packages/recognize/src/lib/defs/recognize-sdk-to-recognize-proxy-error-map.ts
RecognizeErrorCode, RecognizeError, CAMERA_ONLY_DISABLE_STEPS, and the frozen SDK-to-proxy error map are added.
Keyless SDK type declarations (index.d.ts)
packages/recognize/src/lib/recognize-sdk/index.d.ts
Public Keyless SDK declarations are added for web components, events, theming, internal element types, and helper functions.
Public recognize types and interfaces
packages/recognize/src/lib/recognize.types.ts
Public client, configuration, event, observer, init-option, and unsubscribe types are added, along with kl-auth/kl-enroll element typing.
recognize() factory implementation and tests
packages/recognize/src/lib/recognize.ts, packages/recognize/src/lib/recognize.spec.ts
The client factory, event wiring, lifecycle handling, and error mapping are implemented and covered by Vitest tests.
Package entrypoint, tooling, and workspace wiring
packages/recognize/src/index.ts, packages/recognize/package.json, packages/recognize/tsconfig*.json, packages/recognize/vitest.config.mts, packages/recognize/eslint.config.mjs, packages/recognize/README.md, tsconfig.json
The package barrel, build/export metadata, TypeScript and Vitest configs, ESLint config, README, and root project references are added.

E2E recognize-app

Layer / File(s) Summary
E2E app source, config, and tooling
e2e/recognize-app/src/index.html, e2e/recognize-app/src/index.ts, e2e/recognize-app/src/styles.css, e2e/recognize-app/vite.config.ts, e2e/recognize-app/package.json, e2e/recognize-app/tsconfig*.json, e2e/recognize-app/eslint.config.mjs
The e2e app HTML, bootstrap script, styles, Vite config, package metadata, TypeScript configs, and ESLint config are added. The app creates a recognize client, subscribes to events, and calls init() in mount mode.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Suggested reviewers

  • ryanbas21

Poem

🐇 I hopped through types and wires today,
With kl-auth and kl-enroll on display.
Errors now wear tidy names,
And e2e tests light up the lanes.
A carrot-toast to this new flow—
I twitch my nose and let it go!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Description check ⚠️ Warning No pull request description was added, so the required JIRA Ticket and Description sections are missing. Fill in the template with a JIRA ticket, a clear change description, and whether a changeset was added.
Title check ❓ Inconclusive The title is related to the new Recognize package and app, but it is too vague to convey the main change. Use a concise, specific title that names the primary change, such as adding the Recognize package and E2E app setup.
✅ Passed checks (3 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch recognize-setup-2
⚔️ Resolve merge conflicts
  • Resolve merge conflict in branch recognize-setup-2

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 8

🧹 Nitpick comments (3)
e2e/recognize-app/src/index.ts (1)

4-11: ⚡ Quick win

Avoid embedding runtime auth/config material in source.

Keeping token/key/customer/ws values inline is risky once replaced with real values. Prefer env-driven injection with a fail-fast check for missing required values.

Proposed refactor
+const env = import.meta.env;
+const required = (key: string): string => {
+  const value = env[key];
+  if (!value) throw new Error(`Missing required env var: ${key}`);
+  return value;
+};
+
 const client = recognize({
-  authorizationToken: 'USER_AUTHORIZATION_FROM_CUSTOMER',
-  customer: 'CUSTOMER_NAME',
-  key: 'IMAGE_ENCRYPTION_PUBLIC_KEY',
-  keyID: 'IMAGE_ENCRYPTION_KEY_ID',
-  transactionData: 'DATA_FROM_CUSTOMER_SERVER_TO_BE_SIGNED',
-  wsURL: 'KEYLESS_AUTHENTICATION_SERVICE_URL',
+  authorizationToken: required('VITE_RECOGNIZE_AUTHORIZATION_TOKEN'),
+  customer: required('VITE_RECOGNIZE_CUSTOMER'),
+  key: required('VITE_RECOGNIZE_KEY'),
+  keyID: required('VITE_RECOGNIZE_KEY_ID'),
+  transactionData: required('VITE_RECOGNIZE_TRANSACTION_DATA'),
+  wsURL: required('VITE_RECOGNIZE_WS_URL'),
 });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@e2e/recognize-app/src/index.ts` around lines 4 - 11, The recognize function
call in the initialization contains hardcoded sensitive values for
authorizationToken, customer, key, keyID, transactionData, and wsURL which
should not be embedded in source code. Replace these hardcoded string values
with reads from environment variables using process.env. Then add validation
logic before calling recognize to fail fast if any required environment
variables are missing, throwing an error with a clear message listing which
values are undefined.
packages/recognize/src/lib/defs/constants.ts (1)

2-11: ⚡ Quick win

Tighten CAMERA_ONLY_DISABLE_STEPS typing and immutability.

string[] allows invalid step IDs and accidental mutation. This constant is effectively a fixed contract, so make it readonly and typed to the SDK step union.

Suggested change
+import type { KeylessComponentsStep } from '../recognize-sdk/index.js';
+
 /** `@internal` */
-export const CAMERA_ONLY_DISABLE_STEPS: string[] = [
+export const CAMERA_ONLY_DISABLE_STEPS: readonly KeylessComponentsStep[] = [
   'bootstrap',
   'camera-instructions',
   'done',
   'error',
   'microphone-permission',
   'server-computation',
   'stm-choice',
   'stm-qrcode',
-];
+] as const;
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/recognize/src/lib/defs/constants.ts` around lines 2 - 11, The
CAMERA_ONLY_DISABLE_STEPS constant is currently typed as string[] which allows
invalid step IDs and accidental mutations. Change the type annotation from
string[] to readonly and a specific SDK step union type (replace the generic
string type with the appropriate union type that represents valid step
identifiers in the SDK). This will prevent invalid values from being assigned
and protect the constant from being mutated after initialization.
packages/recognize/src/lib/recognize.types.ts (1)

112-114: ⚡ Quick win

Narrow attach-mode element type to the supported custom elements.

element: HTMLElement forces validation at runtime for a shape we already know statically. Narrowing improves API safety and DX.

Suggested refactor
 export type RecognizeWebComponentInitOptions =
   | { mode: 'mount'; container: HTMLElement; type: RecognizeSessionType; username: string }
-  | { mode: 'attach'; element: HTMLElement; username: string };
+  | { mode: 'attach'; element: RecognizeWebComponent; username: string };
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/recognize/src/lib/recognize.types.ts` around lines 112 - 114, The
attach mode in the RecognizeWebComponentInitOptions union type uses the generic
HTMLElement type for the element property, which is too broad and requires
runtime validation. Instead, narrow the element type to a union of the specific
supported custom element types that attach mode actually accepts. Identify all
supported custom element types in your codebase, create a union type for them,
and replace the element: HTMLElement property in the attach mode object with
element: YourCustomElementUnionType to provide compile-time type safety and
improve developer experience.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@e2e/recognize-app/src/index.ts`:
- Around line 32-36: The client.init() promise chain in the mount initialization
section only handles the fulfilled path with .then(), leaving promise rejections
unhandled which can cause flaky E2E test failures. Add a .catch() handler after
the .then() block to properly handle any rejections that occur during the init()
call, ensuring errors from rejected promises are logged and don't destabilize
the test execution.

In `@packages/recognize/src/lib/recognize-sdk/index.d.ts`:
- Around line 1070-1077: There is a type inconsistency between the
KeylessVideoFrameQualityEvent constructor and the
KeylessVideoFrameQualityEventDetail interface. The constructor accepts timestamp
as a number, but the interface defines timestamp as a Date, creating a
contradictory event contract. To fix this, ensure both the constructor parameter
in KeylessVideoFrameQualityEvent and the timestamp property in
KeylessVideoFrameQualityEventDetail use the same type. Either convert the number
to a Date in the constructor before storing it in the event detail, or change
both to consistently use number if that better represents the internal timestamp
format.

In `@packages/recognize/src/lib/recognize.spec.ts`:
- Around line 61-80: The test "throws if init is called twice without dispose"
uses a try-catch block to verify that the second client.init() call throws an
error, but there is no failing assertion outside the catch block. This means the
test will pass even if init() does not throw. Convert this test to use Jest's
rejects matcher (expect(...).rejects.toThrow() or expect(...).rejects.toEqual())
to properly validate that the promise rejects with the expected error, ensuring
the test fails if init() does not throw as expected. Apply the same fix to the
related test also mentioned at lines 108-124.
- Around line 43-57: The unsubscribe test does not actually verify that the
observer stops receiving events because no event is dispatched after the init()
call in the unsubscribe test. The test needs to trigger an event or simulate a
scenario after init() that would cause the client to emit an event, and then
verify that the unsubscribed observer's next callback is not invoked when that
event occurs. This will properly validate that unsubscribe removes the observer
from the subscription and prevents future event delivery.

In `@packages/recognize/src/lib/recognize.ts`:
- Around line 147-151: In the dispose() method, you need to call aborter.abort()
before setting aborter to null. Currently, the code only sets aborter = null
without signaling cancellation to the listeners registered with aborter.signal,
which leaves stale event listeners attached. Add a call to aborter.abort() right
before the assignment to ensure all listeners are properly notified and cleaned
up, preventing memory leaks and event cross-contamination across sessions.
- Around line 63-67: The onError function directly accesses e.error.message
without verifying that e.error is an Error object, which can cause the handler
to crash since ErrorEvent.error is not guaranteed to be an Error. Add defensive
checks to verify that e.error exists and is an Error before accessing its
message property, and provide a fallback error code or message when e.error is
not a valid Error object with a message property. This will prevent the handler
from throwing and ensure observer notifications are still sent even when the
error object is malformed.

In `@packages/recognize/src/lib/recognize.types.ts`:
- Around line 57-60: The `init` method in the `RecognizeWebComponentClient`
interface has an incorrect return type. Since the runtime implementation throws
`RecognizeError` on failure rather than resolving with it, change the return
type of the `init` method from `Promise<void | RecognizeError>` to
`Promise<void>`. This aligns the type signature with the actual behavior and
prevents incorrect error handling patterns where callers might expect to handle
errors from the resolved value rather than catching thrown exceptions.
- Around line 67-76: The `disableSteps` property in the
`RecognizeWebComponentConfiguration` interface is currently typed as `string[]`,
which allows invalid step names to pass type checking. Change the type of the
`disableSteps` property from `string[]` to use the appropriate SDK step type
(such as the enum or union type used elsewhere in the SDK for step definitions)
to enforce valid step names at compile-time and strengthen the SDK contract.

---

Nitpick comments:
In `@e2e/recognize-app/src/index.ts`:
- Around line 4-11: The recognize function call in the initialization contains
hardcoded sensitive values for authorizationToken, customer, key, keyID,
transactionData, and wsURL which should not be embedded in source code. Replace
these hardcoded string values with reads from environment variables using
process.env. Then add validation logic before calling recognize to fail fast if
any required environment variables are missing, throwing an error with a clear
message listing which values are undefined.

In `@packages/recognize/src/lib/defs/constants.ts`:
- Around line 2-11: The CAMERA_ONLY_DISABLE_STEPS constant is currently typed as
string[] which allows invalid step IDs and accidental mutations. Change the type
annotation from string[] to readonly and a specific SDK step union type (replace
the generic string type with the appropriate union type that represents valid
step identifiers in the SDK). This will prevent invalid values from being
assigned and protect the constant from being mutated after initialization.

In `@packages/recognize/src/lib/recognize.types.ts`:
- Around line 112-114: The attach mode in the RecognizeWebComponentInitOptions
union type uses the generic HTMLElement type for the element property, which is
too broad and requires runtime validation. Instead, narrow the element type to a
union of the specific supported custom element types that attach mode actually
accepts. Identify all supported custom element types in your codebase, create a
union type for them, and replace the element: HTMLElement property in the attach
mode object with element: YourCustomElementUnionType to provide compile-time
type safety and improve developer experience.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3341a87f-d24b-40e1-a502-9af34de77df2

📥 Commits

Reviewing files that changed from the base of the PR and between 806da7c and 1ce8a57.

⛔ Files ignored due to path filters (3)
  • packages/recognize/src/lib/recognize-sdk/pthreads/wasm.wasm is excluded by !**/*.wasm
  • packages/recognize/src/lib/recognize-sdk/wasm.wasm is excluded by !**/*.wasm
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (29)
  • e2e/recognize-app/eslint.config.mjs
  • e2e/recognize-app/package.json
  • e2e/recognize-app/src/index.html
  • e2e/recognize-app/src/index.ts
  • e2e/recognize-app/src/styles.css
  • e2e/recognize-app/tsconfig.app.json
  • e2e/recognize-app/tsconfig.json
  • e2e/recognize-app/vite.config.ts
  • packages/recognize/README.md
  • packages/recognize/eslint.config.mjs
  • packages/recognize/package.json
  • packages/recognize/src/index.ts
  • packages/recognize/src/lib/classes/recognize-error.ts
  • packages/recognize/src/lib/defs/constants.ts
  • packages/recognize/src/lib/defs/recognize-error-code.ts
  • packages/recognize/src/lib/defs/recognize-sdk-to-recognize-proxy-error-map.ts
  • packages/recognize/src/lib/recognize-sdk/index.d.ts
  • packages/recognize/src/lib/recognize-sdk/index.js
  • packages/recognize/src/lib/recognize-sdk/pthreads/wasm.js
  • packages/recognize/src/lib/recognize-sdk/wasm.data
  • packages/recognize/src/lib/recognize-sdk/wasm.js
  • packages/recognize/src/lib/recognize.spec.ts
  • packages/recognize/src/lib/recognize.ts
  • packages/recognize/src/lib/recognize.types.ts
  • packages/recognize/tsconfig.json
  • packages/recognize/tsconfig.lib.json
  • packages/recognize/tsconfig.spec.json
  • packages/recognize/vitest.config.mts
  • tsconfig.json

Comment on lines +32 to +36
client
.init({ mode: 'mount', container: appEl, type: 'auth', username: 'USERNAME' })
.then((err) => {
if (err) console.error('[recognize] init error', err);
});

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Handle the rejected init() promise path.

Only the fulfilled path is handled. If init() rejects, this can become an unhandled rejection and destabilize/flaky-fail E2E runs.

Proposed fix
 if (appEl) {
   client
     .init({ mode: 'mount', container: appEl, type: 'auth', username: 'USERNAME' })
     .then((err) => {
       if (err) console.error('[recognize] init error', err);
-    });
+    })
+    .catch((err) => {
+      console.error('[recognize] init rejected', err);
+    });
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
client
.init({ mode: 'mount', container: appEl, type: 'auth', username: 'USERNAME' })
.then((err) => {
if (err) console.error('[recognize] init error', err);
});
client
.init({ mode: 'mount', container: appEl, type: 'auth', username: 'USERNAME' })
.then((err) => {
if (err) console.error('[recognize] init error', err);
})
.catch((err) => {
console.error('[recognize] init rejected', err);
});
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@e2e/recognize-app/src/index.ts` around lines 32 - 36, The client.init()
promise chain in the mount initialization section only handles the fulfilled
path with .then(), leaving promise rejections unhandled which can cause flaky
E2E test failures. Add a .catch() handler after the .then() block to properly
handle any rejections that occur during the init() call, ensuring errors from
rejected promises are logged and don't destabilize the test execution.

Comment on lines +1070 to +1077
export declare class KeylessVideoFrameQualityEvent extends CustomEvent<KeylessVideoFrameQualityEventDetail> {
constructor(filters: KeylessVideoFrameQualityFilter[], timestamp: number);
}

/** @public */
export declare interface KeylessVideoFrameQualityEventDetail {
filters: KeylessVideoFrameQualityFilter[];
timestamp: Date;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Fix inconsistent timestamp typing in KeylessVideoFrameQualityEvent.

KeylessVideoFrameQualityEvent takes timestamp: number, but KeylessVideoFrameQualityEventDetail exposes timestamp: Date. This creates a contradictory event contract for consumers.

Suggested fix
 export declare interface KeylessVideoFrameQualityEventDetail {
     filters: KeylessVideoFrameQualityFilter[];
-    timestamp: Date;
+    timestamp: number;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export declare class KeylessVideoFrameQualityEvent extends CustomEvent<KeylessVideoFrameQualityEventDetail> {
constructor(filters: KeylessVideoFrameQualityFilter[], timestamp: number);
}
/** @public */
export declare interface KeylessVideoFrameQualityEventDetail {
filters: KeylessVideoFrameQualityFilter[];
timestamp: Date;
export declare class KeylessVideoFrameQualityEvent extends CustomEvent<KeylessVideoFrameQualityEventDetail> {
constructor(filters: KeylessVideoFrameQualityFilter[], timestamp: number);
}
/** `@public` */
export declare interface KeylessVideoFrameQualityEventDetail {
filters: KeylessVideoFrameQualityFilter[];
timestamp: number;
}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/recognize/src/lib/recognize-sdk/index.d.ts` around lines 1070 -
1077, There is a type inconsistency between the KeylessVideoFrameQualityEvent
constructor and the KeylessVideoFrameQualityEventDetail interface. The
constructor accepts timestamp as a number, but the interface defines timestamp
as a Date, creating a contradictory event contract. To fix this, ensure both the
constructor parameter in KeylessVideoFrameQualityEvent and the timestamp
property in KeylessVideoFrameQualityEventDetail use the same type. Either
convert the number to a Date in the constructor before storing it in the event
detail, or change both to consistently use number if that better represents the
internal timestamp format.

Comment on lines +43 to +57
it('unsubscribe removes the observer so it no longer receives events', async () => {
const client = recognize(CONFIG);
const next = vi.fn();
const unsub = client.subscribe({ next });

unsub();
await client.init({
mode: 'mount',
container: document.createElement('div'),
type: 'auth',
username: 'user',
});

expect(next).not.toHaveBeenCalled();
});

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

This unsubscribe test does not exercise event delivery.

No event is dispatched after init(), so the assertion passes even if unsubscribe is broken.

Suggested change
   it('unsubscribe removes the observer so it no longer receives events', async () => {
@@
     await client.init({
       mode: 'mount',
-      container: document.createElement('div'),
+      container: document.createElement('div'),
       type: 'auth',
       username: 'user',
     });
+    const el = (document.querySelector('kl-auth') ??
+      document.createElement('kl-auth')) as HTMLElement;
+    el.dispatchEvent(new CustomEvent('step-change', { detail: {} }));
 
     expect(next).not.toHaveBeenCalled();
   });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/recognize/src/lib/recognize.spec.ts` around lines 43 - 57, The
unsubscribe test does not actually verify that the observer stops receiving
events because no event is dispatched after the init() call in the unsubscribe
test. The test needs to trigger an event or simulate a scenario after init()
that would cause the client to emit an event, and then verify that the
unsubscribed observer's next callback is not invoked when that event occurs.
This will properly validate that unsubscribe removes the observer from the
subscription and prevents future event delivery.

Comment on lines +61 to +80
it('throws if init is called twice without dispose', async () => {
const client = recognize(CONFIG);
const container = document.createElement('div');
document.body.appendChild(container);

await client.init({ mode: 'mount', container, type: 'auth', username: 'user' });

try {
await client.init({ mode: 'mount', container, type: 'auth', username: 'user' });
} catch (e: unknown) {
expect(e).toBeInstanceOf(Error);

if (e instanceof Error) {
expect(e.message).toBe('SDK_ERROR');
expect(e.cause).toBe(
'init() called more than once — call dispose() before re-initializing',
);
}
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Convert throw assertions to rejects to prevent false positives.

Both tests can pass even when init() does not throw because there is no failing assertion outside catch.

Suggested change
   it('throws if init is called twice without dispose', async () => {
@@
-    try {
-      await client.init({ mode: 'mount', container, type: 'auth', username: 'user' });
-    } catch (e: unknown) {
-      expect(e).toBeInstanceOf(Error);
-
-      if (e instanceof Error) {
-        expect(e.message).toBe('SDK_ERROR');
-        expect(e.cause).toBe(
-          'init() called more than once — call dispose() before re-initializing',
-        );
-      }
-    }
+    await expect(
+      client.init({ mode: 'mount', container, type: 'auth', username: 'user' }),
+    ).rejects.toMatchObject({
+      message: 'SDK_ERROR',
+      cause: 'init() called more than once — call dispose() before re-initializing',
+    });
@@
   it('throws for attach mode with an unsupported element', async () => {
@@
-    try {
-      await client.init({ mode: 'attach', element: div, username: 'user' });
-    } catch (e: unknown) {
-      expect(e).toBeInstanceOf(Error);
-
-      if (e instanceof Error) {
-        expect(e.message).toBe('SDK_ERROR');
-        expect(e.cause).toBe(
-          'invalid element <div> — options.element must be a <kl-auth> or <kl-enroll> custom element',
-        );
-      }
-    }
+    await expect(client.init({ mode: 'attach', element: div, username: 'user' })).rejects.toMatchObject({
+      message: 'SDK_ERROR',
+      cause: 'invalid element <div> — options.element must be a <kl-auth> or <kl-enroll> custom element',
+    });
   });

Also applies to: 108-124

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/recognize/src/lib/recognize.spec.ts` around lines 61 - 80, The test
"throws if init is called twice without dispose" uses a try-catch block to
verify that the second client.init() call throws an error, but there is no
failing assertion outside the catch block. This means the test will pass even if
init() does not throw. Convert this test to use Jest's rejects matcher
(expect(...).rejects.toThrow() or expect(...).rejects.toEqual()) to properly
validate that the promise rejects with the expected error, ensuring the test
fails if init() does not throw as expected. Apply the same fix to the related
test also mentioned at lines 108-124.

Comment on lines +63 to +67
const onError = (e: ErrorEvent) => {
const code: RecognizeErrorCode =
RECOGNIZE_SDK_TO_RECOGNIZE_PROXY_ERROR_MAP[e.error.message] ?? RecognizeErrorCode.SDK_ERROR;

const error: RecognizeError = new RecognizeError(code, { cause: e.error });

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Harden error event parsing to avoid handler crashes.

ErrorEvent.error is not guaranteed to be an Error. Accessing e.error.message directly can throw and skip observer notification.

Suggested change
     const onError = (e: ErrorEvent) => {
-      const code: RecognizeErrorCode =
-        RECOGNIZE_SDK_TO_RECOGNIZE_PROXY_ERROR_MAP[e.error.message] ?? RecognizeErrorCode.SDK_ERROR;
+      const reason =
+        e.error instanceof Error
+          ? e.error.message
+          : typeof e.error === 'string'
+            ? e.error
+            : e.message;
+      const code: RecognizeErrorCode =
+        RECOGNIZE_SDK_TO_RECOGNIZE_PROXY_ERROR_MAP[reason] ?? RecognizeErrorCode.SDK_ERROR;
 
-      const error: RecognizeError = new RecognizeError(code, { cause: e.error });
+      const error: RecognizeError = new RecognizeError(code, { cause: e.error ?? e });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/recognize/src/lib/recognize.ts` around lines 63 - 67, The onError
function directly accesses e.error.message without verifying that e.error is an
Error object, which can cause the handler to crash since ErrorEvent.error is not
guaranteed to be an Error. Add defensive checks to verify that e.error exists
and is an Error before accessing its message property, and provide a fallback
error code or message when e.error is not a valid Error object with a message
property. This will prevent the handler from throwing and ensure observer
notifications are still sent even when the error object is malformed.

Comment on lines +147 to +151
dispose: (): void => {
if (element === null) return;

aborter = null;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Call abort() in dispose() before dropping the controller.

Listeners are registered with aborter.signal, but dispose() only sets aborter = null. That leaves stale listeners attached to prior elements and can leak/cross-deliver events across sessions.

Suggested change
     dispose: (): void => {
       if (element === null) return;
 
+      aborter?.abort();
       aborter = null;
 
       element.remove();
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/recognize/src/lib/recognize.ts` around lines 147 - 151, In the
dispose() method, you need to call aborter.abort() before setting aborter to
null. Currently, the code only sets aborter = null without signaling
cancellation to the listeners registered with aborter.signal, which leaves stale
event listeners attached. Add a call to aborter.abort() right before the
assignment to ensure all listeners are properly notified and cleaned up,
preventing memory leaks and event cross-contamination across sessions.

Comment on lines +57 to +60
export interface RecognizeWebComponentClient {
subscribe: (observer: RecognizeWebComponentObserver) => RecognizeWebComponentUnsubscribe;
init(options: RecognizeWebComponentInitOptions): Promise<void | RecognizeError>;
dispose: () => void;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Align init return type with actual behavior (Promise<void>).

The runtime implementation throws RecognizeError on failure; it does not resolve with a RecognizeError. The current signature encourages incorrect handling patterns.

Suggested fix
 export interface RecognizeWebComponentClient {
   subscribe: (observer: RecognizeWebComponentObserver) => RecognizeWebComponentUnsubscribe;
-  init(options: RecognizeWebComponentInitOptions): Promise<void | RecognizeError>;
+  init(options: RecognizeWebComponentInitOptions): Promise<void>;
   dispose: () => void;
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/recognize/src/lib/recognize.types.ts` around lines 57 - 60, The
`init` method in the `RecognizeWebComponentClient` interface has an incorrect
return type. Since the runtime implementation throws `RecognizeError` on failure
rather than resolving with it, change the return type of the `init` method from
`Promise<void | RecognizeError>` to `Promise<void>`. This aligns the type
signature with the actual behavior and prevents incorrect error handling
patterns where callers might expect to handle errors from the resolved value
rather than catching thrown exceptions.

Comment on lines +67 to +76
export interface RecognizeWebComponentConfiguration {
authorizationToken?: string;
customer: string;
datadogEnv?: string;
datadogToken?: string;
disableDatadog?: boolean;
disableLogger?: boolean;
disablePoweredBy?: boolean;
disableSteps?: string[];
enableCameraFlash?: boolean;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Use SDK step type for disableSteps instead of string[].

Typing this as string[] allows invalid step names to pass compile-time checks and weakens the SDK contract.

Suggested fix
 import type {
   KeylessAuthElement,
+  KeylessComponentsStep,
   KeylessEnrollElement,
   KeylessFinishedEventDetail,
@@
 export interface RecognizeWebComponentConfiguration {
@@
-  disableSteps?: string[];
+  disableSteps?: KeylessComponentsStep[];
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export interface RecognizeWebComponentConfiguration {
authorizationToken?: string;
customer: string;
datadogEnv?: string;
datadogToken?: string;
disableDatadog?: boolean;
disableLogger?: boolean;
disablePoweredBy?: boolean;
disableSteps?: string[];
enableCameraFlash?: boolean;
export interface RecognizeWebComponentConfiguration {
authorizationToken?: string;
customer: string;
datadogEnv?: string;
datadogToken?: string;
disableDatadog?: boolean;
disableLogger?: boolean;
disablePoweredBy?: boolean;
disableSteps?: KeylessComponentsStep[];
enableCameraFlash?: boolean;
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/recognize/src/lib/recognize.types.ts` around lines 67 - 76, The
`disableSteps` property in the `RecognizeWebComponentConfiguration` interface is
currently typed as `string[]`, which allows invalid step names to pass type
checking. Change the type of the `disableSteps` property from `string[]` to use
the appropriate SDK step type (such as the enum or union type used elsewhere in
the SDK for step definitions) to enforce valid step names at compile-time and
strengthen the SDK contract.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants