@bridge-ai-dev/ecom-chat
v1.0.8
Published
Bridge E-commerce Chat widget integration for Next.js with Litium authentication
Maintainers
sreelakshmi.bridgeReadme
@bridge-ai-dev/ecom-chat
Bridge E-commerce Chat widget integration for Next.js with Litium authentication.
Why This Package?
When integrating a chat widget with Litium e-commerce, you often need access to authentication cookies like .AspNetCore.Identity.Application. However, these cookies are typically HttpOnly, meaning they cannot be accessed from client-side JavaScript for security reasons.
This package solves this problem by:
- Creating a secure API route that runs on the server and can access HttpOnly cookies
- Providing a React component that fetches these cookies via the API and passes them to the chat widget
Installation
Step 1: Run the Setup Command
In your Next.js project root, run:
npx @bridge-ai-dev/ecom-chatThis will create the API route at app/api/bridge-auth/route.ts.
Step 2: Install the Package
npm install @bridge-ai-dev/ecom-chatUsage
Basic Usage
Add the ChatComponent to your layout:
// app/layout.tsx
import { ChatComponent } from '@bridge-ai-dev/ecom-chat';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<ChatComponent
tenantId="your-tenant-uuid"
widgetScriptUrl="http://localhost:5173/chat-widget.js"
/>
</body>
</html>
);
}With Full Widget Configuration
<ChatComponent
tenantId="your-tenant-uuid"
widgetScriptUrl="http://localhost:5173/chat-widget.js"
accessToken="optional-access-token"
position="bottom-right"
backgroundColor="#6366f1"
foregroundColor="#ffffff"
size="medium"
borderWidth={2}
borderColor="#4f46e5"
autoPopup={false}
onAuthSuccess={(authData) => {
console.log('Auth successful, cart context:', authData.cart_context);
}}
onAuthError={(error) => {
console.error('Auth failed:', error.message);
}}
/>Custom API Endpoint
<ChatComponent
tenantId="your-tenant-uuid"
bridgeAuthEndpoint="/api/custom-bridge-auth" // Custom API route path
containerId="my-chat-container" // Custom container ID
/>Passing Auth Data Directly (No API Route Call)
If you already have access to the identity/cart tokens (e.g. in a Server Component), you can pass them directly:
<ChatComponent
tenantId="your-tenant-uuid"
identity="optional-identity-token"
cartContext="optional-cart-jwt"
// ... other props
/>API Reference
ChatComponent Props
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| tenantId | string | ✅ | - | Your Bridge Chat tenant identifier |
| identity | string | ❌ | - | Identity token (skips API call if provided) |
| cartContext | string | ❌ | - | Cart context token (skips API call if provided) |
| widgetScriptUrl | string | ❌ | - | URL to the chat widget script (loads dynamically) |
| accessToken | string | ❌ | - | Optional access token for authenticated requests |
| position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | ❌ | 'bottom-right' | Widget position on screen |
| backgroundColor | string | ❌ | '#6366f1' | Widget background color |
| foregroundColor | string | ❌ | '#ffffff' | Widget foreground/text color |
| size | 'small' \| 'medium' \| 'large' | ❌ | 'medium' | Widget size |
| borderWidth | number | ❌ | 2 | Widget border width in pixels |
| borderColor | string | ❌ | '#4f46e5' | Widget border color |
| autoPopup | boolean | ❌ | false | Auto popup the chat widget on load |
| onAuthSuccess | (authData: BridgeAuthResponse) => void | ❌ | - | Callback when auth bridge succeeds |
| onAuthError | (error: Error) => void | ❌ | - | Callback when auth bridge fails |
| bridgeAuthEndpoint | string | ❌ | /api/bridge-auth | Custom API endpoint path |
| containerId | string | ❌ | bgc-chat-container | Container element ID |
BridgeAuthResponse
interface BridgeAuthResponse {
cart_context: string | null;
identity: string | null;
raw?: string | null;
}How It Works
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ ChatComponent │ ──▶ │ /api/bridge-auth │ ──▶ │ Chat Widget │
│ (Client) │ │ (Server) │ │ (BridgeChat) │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│ │ │
│ 1. Fetch cookies │ │
│ ──────────────────────▶│ │
│ │ Server can read │
│ │ HttpOnly cookies │
│ │ │
│ 2. Return JSON │ │
│ ◀──────────────────────│ │
│ │ │
│ 3. Initialize with cookies + config │
│ ────────────────────────────────────────────────▶│
│ │ │What Gets Passed to BridgeChat.init()
When the component initializes, it calls BridgeChat.init() with:
BridgeChat.init({
tenantId: 'your-tenant-uuid',
backendUrl: 'https://your-backend-api.com',
accessToken: 'optional-access-token',
cookies: {
cart_context: 'value-from-cookie'
},
identityCookie: 'value-from-identity-cookie',
container: 'bgc-chat-container',
position: 'bottom-right',
backgroundColor: '#6366f1',
foregroundColor: '#ffffff',
size: 'medium',
borderWidth: 2,
borderColor: '#4f46e5',
autoPopup: false
});Security
- The API route runs server-side, allowing access to
HttpOnlycookies - Cookies are passed to the chat widget via JavaScript, not exposed to third parties
- The component uses
credentials: 'include'to ensure cookies are sent with the request
Requirements
- Next.js 13+ with App Router
- React 17+
License
MIT