1. Load the widget in your root layout
Next.js 13+ App Router. The Script component defers cleanly.
tsx
// app/layout.tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://your-domain.com/widget/banner.js"
data-api-key={process.env.NEXT_PUBLIC_DPDP_API_KEY}
strategy="afterInteractive"
/>
</body>
</html>
);
}2. Server route that mints the identity token
Uses the helper shipped with DPDP Comply. The DPDP_PROJECT_ID and NEXTAUTH_SECRET must match the server that hosts the widget.
ts
// app/api/dpdp-identity-token/route.ts
import { NextResponse } from "next/server";
import { auth } from "@/auth";
import { createIdentityToken } from "@dpdp/identity";
export async function GET() {
const session = await auth();
if (!session?.user?.email) {
return NextResponse.json({ error: "Not signed in" }, { status: 401 });
}
const token = createIdentityToken({
email: session.user.email,
externalId: session.user.id,
projectId: process.env.DPDP_PROJECT_ID!,
});
return NextResponse.json({ token });
}3. Call identify() after login
Client component that hooks into your session change event.
tsx
// components/DpdpIdentify.tsx
"use client";
import { useEffect } from "react";
import { useSession } from "next-auth/react";
export function DpdpIdentify() {
const { status } = useSession();
useEffect(() => {
if (status !== "authenticated") return;
(async () => {
const res = await fetch("/api/dpdp-identity-token");
if (!res.ok) return;
const { token } = await res.json();
window.DPDPConsent?.identify({ identityToken: token });
})();
}, [status]);
return null;
}4. Forget on sign-out
tsx
import { signOut } from "next-auth/react";
async function handleLogout() {
window.DPDPConsent?.forget();
await signOut({ callbackUrl: "/" });
}Security note: never trust a raw email from the browser. Mint the token on your server so a malicious script on the page can't attribute a consent to someone else's inbox. Tokens expire in 5 minutes by default.