ClearFeed Chat Widget Demo

A Next.js application demonstrating the integration of the ClearFeed chat widget with authentication support.

Features

• 🚀 Next.js 14 with App Router
• 💬 ClearFeed chat widget integration
• 🔐 HMAC-based authentication for signed-in users
• 🎨 Modern, responsive UI
• 📱 Mobile-friendly design
• 🔄 Support for both anonymous and authenticated chat

Getting Started

1. Install Dependencies

yarn

2. Configure Environment Variables

Create a .env.local file in the root directory with your ClearFeed credentials:

CLEARFEED_CLIENT_ID=your_client_id
CLEARFEED_CLIENT_SECRET=your_client_secret

3. Run the Development Server

yarn run dev

Open http://localhost:3000 in your browser to see the application.

How It Works

Anonymous Mode

• The chat widget works immediately without signing in
• Users can interact with the chat as anonymous visitors

Authenticated Mode

1. Enter your email address in the input field
2. Click "Sign In" button
3. The application generates an HMAC hash on the server using your client secret
4. The chat widget reinitializes with your authenticated user details
5. Your session is persisted in localStorage

Architecture

API Route (/app/api/generate-hash/route.ts)

• Generates HMAC SHA-256 hash using the client secret
• Ensures secure authentication without exposing the secret to the client

Main Page (/app/page.tsx)

• Handles user authentication flow
• Manages chat widget initialization
• Persists user session in localStorage

Layout (/app/layout.tsx)

• Loads the ClearFeed chat widget script
• Provides consistent layout across the application

Security

• Client secret is stored securely on the server (environment variable)
• HMAC hash generation happens server-side only
• Hash ensures message authenticity and prevents tampering

Project Structure

web-chat-demo/
├── app/
│   ├── api/
│   │   └── generate-hash/
│   │       └── route.ts          # HMAC generation API
│   ├── layout.tsx                # Root layout with chat widget script
│   ├── page.tsx                  # Main page with authentication
│   └── globals.css               # Global styles
├── .env.local                    # Environment variables (create this)
├── .gitignore
├── next.config.js
├── package.json
├── tsconfig.json
└── README.md

Building for Production

npm run build
npm start

Technologies Used

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• ClearFeed - Chat widget integration
• Crypto - HMAC hash generation

License

MIT