Support session banner

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

Build it with AI

Paste this into your coding agent. It builds the web version.

Build "Support session banner" in a React web app that uses shadcn/ui components. A banner that tells the user a support agent is viewing the app as them, rendered on the server.

It uses the better-supabase `support-sessions` block (Support sessions). It loads its data on the server through the block's client.

Steps:

1. If the app doesn't have the block yet, add the SQL with `npx better-supabase add support-sessions` and apply the migration.
2. Add the shadcn components the recipe uses: `npx shadcn add alert`.
3. The recipe needs no glue: it calls the block's client on the server.
4. Write the component. Load the data on the server with the block's client, starting from the recipe's snippet (`apps/examples/nextjs/src/features/user/components/impersonation-banner.tsx`). Adapt it to the app's existing components, styling and data loading instead of copying it as is.
5. Check the result against the recipe and the block's docs: it typechecks, it reads the same block data, and it handles the loading and empty states the snippet handles.

Read the full code first:

- Recipe: https://bettersupabase.com/recipes/support-session-banner.md
- Block docs: https://bettersupabase.com/docs/blocks/sql

No screenshot yet. Run the Next.js example (pnpm dev:example) to see it.

1
Add the components
terminal
```
npx shadcn add alert
```
Install the glue
Install the block with npx better-supabase add support-sessions. The glue items are copied into your app, so edit them as you need.
None: the page calls the block's client on the server.

Write the component

React and shadcn

View in the example

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>
  );
}

Build "Support session banner" in a React web app that uses shadcn/ui components. A banner that tells the user a support agent is viewing the app as them, rendered on the server. It uses the better-supabase `support-sessions` block (Support sessions). It loads its data on the server through the block's client. Steps: 1. If the app doesn't have the block yet, add the SQL with `npx better-supabase add support-sessions` and apply the migration. 2. Add the shadcn components the recipe uses: `npx shadcn add alert`. 3. The recipe needs no glue: it calls the block's client on the server. 4. Write the component. Load the data on the server with the block's client, starting from the recipe's snippet (`apps/examples/nextjs/src/features/user/components/impersonation-banner.tsx`). Adapt it to the app's existing components, styling and data loading instead of copying it as is. 5. Check the result against the recipe and the block's docs: it typechecks, it reads the same block data, and it handles the loading and empty states the snippet handles. Read the full code first: - Recipe: https://bettersupabase.com/recipes/support-session-banner.md - Block docs: https://bettersupabase.com/docs/blocks/sql

Write the component

React and shadcn

View in the example

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>
  );
}

Add the components

Install the glue

Write the component

React and shadcn

Add the components

Install the glue

Write the component

React and shadcn