Next.js
The React component in the root layout, a route handler that signs identify(), reset on logout.
1. Install
pnpm add @actessia/sdk
2. Sign the identity on the server
A route handler your page calls after login. The identify secret lives in an environment variable; it never reaches the browser.
// app/api/actessia/identify/route.ts
import { signIdentifyPayload } from "@actessia/sdk/server";
import { NextResponse } from "next/server";
import { currentUser } from "@/lib/auth"; // your session helper
export async function GET() {
const user = await currentUser();
if (!user) return NextResponse.json(null);
const signed = signIdentifyPayload(process.env.ACTESSIA_IDENTIFY_SECRET!, {
user_id: user.id, email: user.email, plan: user.plan, entitlements: user.entitlements,
});
return NextResponse.json(signed, { headers: { "cache-control": "no-store" } });
}
3. Mount the widget once
// app/layout.tsx
import { ActessiaWidget } from "@actessia/sdk/react";
export default async function RootLayout({ children }) {
const signed = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/actessia/identify`, { cache: "no-store" }).then((r) => r.json());
return (
<html lang="en">
<body>
{children}
<ActessiaWidget siteKey={process.env.NEXT_PUBLIC_ACTESSIA_SITE_KEY!} user={signed?.payload} signature={signed?.signature} />
</body>
</html>
);
}
When user becomes undefined (the session ended) the component calls reset(), so the next
person on the browser starts anonymous.
4. Context and conversions
import { load } from "@actessia/sdk";
const actessia = load({ siteKey: process.env.NEXT_PUBLIC_ACTESSIA_SITE_KEY! });
actessia.setContext({ custom: { screen: "calendar", location_id: loc.id } });
actessia.track({ event: "upgrade", event_id: invoice.id, value_cents: invoice.total, currency: "EUR" });
5. Content-Security-Policy
script-src https://cdn.actessia.ai and connect-src https://runtime.actessia.ai in your
next.config headers.