Next.js integration

1. Add the snippet to your layout

Use the async loader from the docs home.

2. Server-side user hash

// app/layout.tsx or a Server Component
import { createHmac } from "node:crypto";
export function rokochatUserHash(userId: string) {
  return createHmac("sha256", process.env.ROKOCHAT_IDENTITY_SECRET!).update(userId).digest("hex");
}

// Pass hash to client component as prop

3. Call identify() in the browser

Rokochat.identify({
  id: user.id,
  user_hash: userHash,
  email: user.email,
  name: user.name,
});

// components/RokochatIdentify.tsx — client component
"use client";
useEffect(() => {
  Rokochat.identify({ id: user.id, user_hash: userHash, email: user.email });
}, [user.id, userHash]);

Always call Rokochat.logout() when the user signs out.