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

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

# 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:

<!-- 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/[email protected]
• No code changes required in your integration

Getting Started

Installation

CDN:

Add this code to your index.html header

<script
  async
  src="https://sdk.authbridge.io/authbridge-sdk.umd.cjs"
  crossorigin="anonymous"
></script>

Package Managers:

# 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 |Initializing flows, preloading needed assets and ui packs| | endUserInfo | EndUserInfo| Use data like ID, name etc.. | | backendConfig | FlowsBackendConfig |Backend endpoint the flows should interact with| | translations | FlowsTranslations | 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

# 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:

// 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

// 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:

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:

<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 |Initializing flows, preloading needed assets and ui packs| | endUserInfo | EndUserInfo| Use data like ID, name etc.. | | backendConfig | FlowsBackendConfig |Backend endpoint the flows should interact with| | translations | FlowsTranslations | 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 |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