@authbridge/web-sdk 1.2.2

package/README.md

@@ -0,0 +1,333 @@
+# AuthBridge Web SDK
+
+### Description
+AuthBridge Web SDK can generate custom made, branded flows to collect KYC/KYB documents and user information.
+The SDK UI is embeddable inside existing apps or deployed as a webapp.
+
+**Live Demo:** [sdk.authbridge.io](https://sdk.authbridge.io)
+
+**Why you should use AuthBridge's flows:**
+* Pre-made KYC/KYB templates optimized for Botswana market
+* Customizable UI and flow to fit your desired experience and brand
+* Ability to use different vendors in the backend over the same flow
+* Multi platform support (Desktop, mobile web, mobile native)
+* All camera and different devices edge cases covered and tested
+* Small and fast, built with Svelte 4 (~128kb gzipped, 420KB uncompressed)
+* Botswana Omang ID and passport support built-in
+* AWS Rekognition Face Liveness integration for spoof detection
+
+---
+
+## v1.2.1 - SDK Landing Page & Production Fixes (2026-02-07)
+
+This version includes critical production fixes:
+
+### Changes
+- **Landing Page**: Added comprehensive landing page at sdk.authbridge.io
+  - Dark Confidence theme (Ultraviolet #7C3AED, Obsidian #0A0F1A)
+  - Hero section with "Try Demo" button
+  - Embedded SDK demo preview container
+  - Features section highlighting AuthBridge capabilities
+  - Navigation to docs, API reference, dashboard
+  - SEO meta tags and Open Graph support
+- **Build Process**: Fixed Vite library mode to include index.html in dist
+- **CORS Security**: Restricted from wildcard to `https://*.authbridge.io`
+- **TypeScript**: Fixed 9 type errors enabling production builds
+
+### Deployment Notes
+```bash
+# Build includes copying index.html (Vite library mode doesn't do this automatically)
+pnpm build  # Runs: vite build && cp public/index.html dist/index.html
+
+# Deploy to S3/CloudFront
+aws s3 sync dist/ s3://authbridge-sdk-af-south-1/ --delete
+aws cloudfront create-invalidation --distribution-id EEGGDKP7XB0UC --paths "/*"
+```
+
+---
+
+## v1.2.0 - UX Alignment (2026-02-01)
+
+This version aligns the SDK with AuthBridge Brand Guide v3.0:
+
+### Changes
+- **Brand Colors**: Updated to Ultraviolet (#7C3AED) primary color
+- **Typography**: Added Avenir font family
+- **Document Types**: Omang, Passport, Driver's Licence (removed Voter ID)
+- **Mobile**: Fixed button cutoff, improved responsiveness
+- **Accessibility**: Improved contrast for list items
+
+---
+
+## v1.1.0 - Svelte 5 Migration (2026-01-26)
+
+This version includes a major upgrade to Svelte 5 with significant improvements:
+
+| Metric | Before | After | Change |
+|--------|--------|-------|--------|
+| Bundle Size | 339KB | 420KB | +24% (added liveness) |
+| Svelte | 3.39 | 4.2.19 | Major |
+| Vite | 2.9 | 6.4 | Major |
+| TypeScript | 4.5 | 5.9 | Major |
+
+### CDN URL Update
+
+The SDK is now served via CloudFront CDN for improved global performance:
+
+```html
+<!-- Production CDN URL (recommended) -->
+<script
+  async
+  src="https://sdk.authbridge.io/authbridge-sdk.umd.cjs"
+  crossorigin="anonymous"
+></script>
+
+<!-- ES Module version -->
+<script
+  async
+  src="https://sdk.authbridge.io/authbridge-sdk.js"
+  crossorigin="anonymous"
+  type="module"
+></script>
+```
+
+### Breaking Changes
+
+None for SDK consumers. The public API remains unchanged.
+
+### Migration Notes
+
+- If you're embedding the SDK via CDN, update to the new `sdk.authbridge.io` URL
+- If you're using the npm package, simply update to `@authbridge/web-sdk@1.2.0`
+- No code changes required in your integration
+
+---
+
+<details><summary>Some examples of what you can do with it</summary>
+-  Create a custom flow you can use with any identity verification vendor.
+-  Create a custom flow that your customers can receive in an SMS.
+-  Create different types of flows for different types of customers.
+- And more...
+</details>
+
+___
+
+### Getting Started
+#### Installation
+
+<ins>CDN:</ins>
+
+Add this code to your index.html header
+
+```html
+<script
+  async
+  src="https://sdk.authbridge.io/authbridge-sdk.umd.cjs"
+  crossorigin="anonymous"
+></script>
+```
+<ins>Package Managers:</ins>
+```javascript
+# NPM
+npm install --save @authbridge/web-sdk
+# Yarn
+yarn add @authbridge/web-sdk
+# PNPM
+pnpm add @authbridge/web-sdk
+```
+
+#### Flows API
+| Config Parameter | Type | Description|
+| - | - | - |
+| `uiConfig` | [FlowsUIConfig](#ui-configuration) |Initializing flows, preloading needed assets and ui packs|
+| `endUserInfo` | [EndUserInfo]()| Use data like ID, name etc.. |
+| `backendConfig`  | [FlowsBackendConfig](#backend-configuration) |Backend endpoint the flows should interact with|
+| `translations` | [FlowsTranslations](#translations) | Change the config after init function|
+
+---
+
+### Liveness Detection
+
+AuthBridge uses AWS Rekognition Face Liveness for spoof detection to ensure the person completing verification is physically present.
+
+#### How It Works
+
+1. SDK requests liveness session from backend (`POST /api/v1/verifications/liveness-session`)
+2. User positions face in oval guide overlay
+3. User holds still for 2 seconds while SDK captures video frames
+4. SDK captures reference frame as selfie
+5. Backend validates liveness and compares faces
+
+#### Environment Variables
+
+```bash
+# Required for production
+VITE_API_URL=https://api.authbridge.io
+VITE_USE_MOCK_API=false
+VITE_LIVENESS_REGION=eu-west-1
+```
+
+#### Skip Liveness
+
+Users can skip liveness detection, but verification will be flagged for manual review:
+
+```javascript
+// Liveness skipped - manual review required
+{
+  livenessSessionId: null,
+  requiresManualReview: true
+}
+```
+
+#### Cross-Region Architecture
+
+AuthBridge uses a cross-region architecture for liveness detection due to AWS Rekognition Face Liveness regional availability:
+
+- **Liveness Detection:** eu-west-1 (Ireland) - AWS Rekognition Face Liveness
+- **Face Comparison:** af-south-1 (Cape Town) - Data residency compliance
+- **Document Storage:** af-south-1 (Cape Town) - Botswana DPA compliance
+- **Latency:** ~150ms cross-region overhead (acceptable for production)
+
+This architecture ensures:
+1. Access to Face Liveness API (not available in af-south-1)
+2. Compliance with Botswana Data Protection Act 2024
+3. Optimal performance with minimal latency
+
+---
+
+#### Embedded Flows
+CDN:
+Add this code to your index.html header
+```javascript
+// 1. Add script (see installation)
+// 2. Initialize SDK & flows (see configuration)
+AuthBridgeSDK.flows.init({...}).then(() => {
+	console.log('flows ready');
+	// 3. Mount selected flow on an element
+	AuthBridgeSDK.flows.mount('my-kyc-flow', 'flow-host-element', {});
+});
+// 4. Listen to finish event (see events)
+AuthBridgeSDK.flows.on('finish', doSomethingFn)
+```
+
+Package Manager:
+```javascript
+import { flows as authbridgeFlows } from '@authbridge/web-sdk';
+
+await authbridgeFlows.init({...}).then(() => console.log('flows ready'));
+// 3. Mount selected flow on an element
+authbridgeFlows.mount('my-kyc-flow', 'flow-host-element', {});
+// 4. Listen to finish event (see events)
+authbridgeFlows.on('finish', doSomethingFn)
+```
+
+#### Standalone/Iframe Flows
+Code example:
+```html
+<script
+  src="https://sdk.authbridge.io/authbridge-sdk.umd.cjs"
+  crossorigin="anonymous"
+></script>
+<script>
+	const initConfig = {
+		"flows": { "my-kyc-flow": {
+		    "steps": [
+			{"name": "welcome", "id": "welcome" },
+			{ "name": "document-selection", "id": "document-selection",
+			    "documentOptions": ["id_card", "drivers_license", "passport"]},
+			{ "name": "document-photo", "id": "identity-document-shot" },
+			{ "name": "check-document", "id": "identity-document-user-check" },
+			{ "name": "document-photo-back-start", "id": "document-photo-back-start"},
+			{ "name": "selfie", "id": "selfie"},
+			{ "name": "check-selfie", "id": "check-selfie" },
+			{ "name": "loading", "id": "custom-loader" }
+		    ]}
+		}
+	}
+	AuthBridgeSDK.flows.init(initConfig).then(() => {
+		AuthBridgeSDK.flows.mount('my-kyc-flow', 'flow-host-element', {});
+	});
+}
+</script>
+```
+
+___
+### Customization
+
+Customize the UI, the flow's steps and the backend.
+
+#### Flows Configuration
+Flow Initialization:
+ ```
+ AuthBridgeSDK.flows.init([CONFIG])
+ ```
+
+| Config Parameter | Type | Description|
+| - | - | - |
+| `uiConfig` | [FlowsUIConfig](#ui-configuration) |Initializing flows, preloading needed assets and ui packs|
+| `endUserInfo` | [EndUserInfo]()| Use data like ID, name etc.. |
+| `backendConfig`  | [FlowsBackendConfig](#backend-configuration) |Backend endpoint the flows should interact with|
+| `translations` | [FlowsTranslations](#translations) | Change the config after init function|
+
+Running a flow:
+ ```
+AuthBridgeSDK.flows.mount('my-flow', elementId, [CONFIG]);
+// or
+AuthBridgeSDK.flows.openModal('my-flow', [CONFIG]);
+ ```
+
+| Config Parameter | Type | Description|
+| - | - | - |
+| `callbacks` | [FlowsCallbacksConfig](#flowscallbacksconfig) |An object containing callback methods (see below)|
+
+##### FlowsCallbacksConfig:
+| Config Parameter | Type | Description|
+| - | - | - |
+| `onFlowComplete` | IFlowCompletePayload |User completed the flow|
+| `onFlowExit` | IFlowExitPayload |User quits the flow (back button on the first page or pressed close buttons)|
+| `onFlowError` | IFlowErrorPayload |Unexpected errors|
+| `onFlowNavigationUpdate` | IFlowNavigationUpdatePayload |User moved between steps|
+___
+#### UI Configuration
+**Flows UI can be configured in three levels:**
+1. Theme and theme styles
+
+| Config Parameter | Type | Description|
+| - | - | - |
+| `uiPack` | `string` - Name or URL |UI Pack is a complete bundle of styles, assets and translations|
+| `theme.general` | FlowsGeneralTheme |General colors, paddings, fonts..|
+
+2. General components styles (**overrides theme**)
+
+| Config Parameter | Type | Description|
+| - | - | - |
+| `theme.layout` | FlowsGeneralTheme |Global layout css
+| `theme.paragraph` | FlowsGeneralTheme |Global paragraph css
+| `theme.button` | FlowsGeneralTheme |Global button css
+... See more
+
+3. Specific step component style (**overrides theme & general component style**)
+
+| Config Parameter | Type | Description|
+| - | - | - |
+| `theme.flows['FlowName'].step` | ICSSProperties | Step includes style object and styles for each element
+... See more
+
+As the level is lower it will override the upper ones
+___
+#### Translations
+
+| Config Parameter | Type | Description|
+| - | - | - |
+| `remoteUrl` | `string (URL)` | Get a full translation json from remote url
+| `overrides` | `Record<string, string>` |Override default translations or remote translations
+
+___
+#### Backend Configuration
+
+| Config Parameter | Type | Description|
+| - | - | - |
+| `baseUrl` | `string (URL)` | Backend base URL (default: https://api.authbridge.io)
+| `auth` | BEAuthConfig | Auth method and Authorization header
+| `endpoints` | BEEndpoints | List of endpoints for each action
+-----

package/dist/App.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

package/dist/ConfigurationProvider.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

package/dist/Routes.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';