Skip to content

<ImpersonationBanner />

A warning-coloured banner across the top of the app reading 'You are impersonating' with the user's name and a Stop impersonating button

<ImpersonationBanner /> shows across the top of every page while an admin impersonates a user: who they’re acting as, and a Stop impersonating button that returns them to their own session. The root layout from base already mounts it while AUTH_CONSTANTS.admin is on, so you only touch it when you replace that layout.

Quick start

The root layout mounts it inside the auth providers, above the header:

src/routes/+layout.svelte
src/app/layout.tsx

What it does

  • Asks admin.queries.getImpersonationStatus whether the current session is an impersonation, and renders nothing when it isn’t.
  • Shows You are impersonating with the impersonated user’s name, or “another user” until the name loads.
  • Stop impersonating calls authClient.admin.stopImpersonating(), refreshes the session and reloads the app at ADMIN_ROUTE (/admin) as the admin. If stopping fails, a toast shows the error and the banner stays.

Props

None, in either framework.

Behavior

getImpersonationStatus isn’t limited to admins. During an impersonation, the session belongs to the impersonated user, and the banner has to render for that session. The query only ever reports on the caller’s own session.

The banner sticks to the top of the viewport above other content (sticky top-0 z-50) and has role="status".

An impersonation session lasts at most 1 hour. Mount the banner on every page an admin can reach while impersonating, as the root layout does, so they can always get back to their own session.