Identity verification

Compute the hash on your server for the signed-in user and pass it to the page.

import crypto from "node:crypto";

// PENGO_IDENTITY_SECRET: the secret from Pengo settings. Never send it to the browser.
export function pengoUserHash(userId) {
  return crypto
    .createHmac("sha256", process.env.PENGO_IDENTITY_SECRET)
    .update(String(userId))
    .digest("hex");
}

Compute the hash on your server for the signed-in user and pass it to the page.

import hashlib
import hmac
import os

def pengo_user_hash(user_id) -> str:
    secret = os.environ["PENGO_IDENTITY_SECRET"].encode()
    return hmac.new(secret, str(user_id).encode(), hashlib.sha256).hexdigest()

Compute the hash on your server for the signed-in user and pass it to the page.

<?php
function pengo_user_hash($userId): string {
    return hash_hmac('sha256', (string) $userId, getenv('PENGO_IDENTITY_SECRET'));
}

Compute the hash on your server for the signed-in user and pass it to the page.

require "openssl"

def pengo_user_hash(user_id)
  OpenSSL::HMAC.hexdigest("SHA256", ENV.fetch("PENGO_IDENTITY_SECRET"), user_id.to_s)
end

After the Pengo snippet, on pages where the user is signed in. Call pengo('shutdown') when they sign out so the next person on this computer starts fresh.

<script>
  pengo('identify', {
    userId: '{{ user.id }}',
    userHash: '{{ pengo_user_hash(user.id) }}', // computed on your server
    name: '{{ user.name }}',
    email: '{{ user.email }}',
    attributes: { plan: '{{ user.plan }}' }
  });
</script>

<!-- On sign out: -->
<script>
  document.querySelector('#logout').addEventListener('click', function () {
    pengo('shutdown');
  });
</script>

Identify whenever the signed-in user changes and shut down on sign-out. Get userHash from your API, never compute it in the browser.

import { useEffect } from "react";

declare global {
  interface Window { pengo?: (...args: unknown[]) => unknown }
}

export function usePengoIdentity(user: { id: string; name?: string; email?: string; pengoHash: string } | null) {
  useEffect(() => {
    if (!user) return;
    window.pengo?.("identify", { userId: user.id, userHash: user.pengoHash, name: user.name, email: user.email });
  }, [user?.id, user?.pengoHash]);
}

// In your sign-out handler:
export function signOut() {
  window.pengo?.("shutdown");
  // …then your own sign-out
}

Compute the hash in a server component and identify from a small client component in your layout. Pengo follows client-side navigation on its own.

// app/PengoIdentify.tsx
"use client";
import { useEffect } from "react";

export default function PengoIdentify({ userId, userHash, name, email }: {
  userId: string; userHash: string; name?: string; email?: string;
}) {
  useEffect(() => {
    (window as any).pengo?.("identify", { userId, userHash, name, email });
  }, [userId, userHash, name, email]);
  return null;
}

// app/layout.tsx (server component)
// import crypto from "node:crypto";
// const user = await getCurrentUser();
// const userHash = user && crypto.createHmac("sha256", process.env.PENGO_IDENTITY_SECRET!).update(user.id).digest("hex");
// {user ? <PengoIdentify userId={user.id} userHash={userHash!} name={user.name} email={user.email} /> : null}

// Sign-out button: onClick={() => { (window as any).pengo?.("shutdown"); signOut(); }}

Watch the signed-in user and identify or shut down as it changes.

import { watch } from "vue";

export function usePengoIdentity(user) {
  watch(
    () => user.value,
    (current, previous) => {
      if (current) {
        window.pengo?.("identify", {
          userId: current.id,
          userHash: current.pengoHash, // from your API
          name: current.name,
          email: current.email,
        });
      } else if (previous) {
        window.pengo?.("shutdown"); // signed out
      }
    },
    { immediate: true }
  );
}