Support session banner | better-supabase

A banner that tells the user a support agent is viewing the app as them, rendered on the server.

It loads its data on the server through the block's client; the support-sessions block must be installed (npx better-supabase add support-sessions). Its page on bettersupabase.com is /recipes/support-session-banner.

Web, with shadcn components:

npx shadcn add alert

apps/examples/nextjs/src/features/user/components/impersonation-banner.tsx

import { LifeBuoyIcon } from "lucide-react";
import { getExtracted } from "next-intl/server";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

import { getSession } from "../user-queries";

/**
 * Shown during a support session (`bs.startSupport`): staff see the app as the
 * user, and the audit log records who acted. Render inside `<Suspense>`.
 */
export async function ImpersonationBanner() {
  const [session, t] = await Promise.all([getSession(), getExtracted("user")]);

  if (session.kind !== "user" || !session.impersonator) {
    return null;
  }

  const { id, reason } = session.impersonator;

  return (
    <Alert variant="destructive" data-testid="impersonation">
      <LifeBuoyIcon />
      <AlertTitle>{t("Support session")}</AlertTitle>
      <AlertDescription>
        {reason
          ? t("Signed in by support ({id}): {reason}", { id, reason })
          : t("Signed in by support ({id}).", { id })}
      </AlertDescription>
    </Alert>
  );
}

Web, with shadcn components:

npx shadcn add alert

apps/examples/nextjs/src/features/user/components/impersonation-banner.tsx

import { LifeBuoyIcon } from "lucide-react";
import { getExtracted } from "next-intl/server";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

import { getSession } from "../user-queries";

/**
 * Shown during a support session (`bs.startSupport`): staff see the app as the
 * user, and the audit log records who acted. Render inside `<Suspense>`.
 */
export async function ImpersonationBanner() {
  const [session, t] = await Promise.all([getSession(), getExtracted("user")]);

  if (session.kind !== "user" || !session.impersonator) {
    return null;
  }

  const { id, reason } = session.impersonator;

  return (
    <Alert variant="destructive" data-testid="impersonation">
      <LifeBuoyIcon />
      <AlertTitle>{t("Support session")}</AlertTitle>
      <AlertDescription>
        {reason
          ? t("Signed in by support ({id}): {reason}", { id, reason })
          : t("Signed in by support ({id}).", { id })}
      </AlertDescription>
    </Alert>
  );
}