Allow admin users to assume user sessions

Author: Theodore Li

apps/sim/app/_shell/providers/session-provider.tsx

@@ -21,6 +21,7 @@ export type AppSession = {
     id?: string
     userId?: string
     activeOrganizationId?: string
+    impersonatedBy?: string | null
   }
 } | null
 

apps/sim/app/workspace/[workspaceId]/layout.tsx

@@ -1,24 +1,66 @@
-import { ToastProvider } from '@/components/emcn'
+import { Banner, Button, ToastProvider } from '@/components/emcn'
 import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
 import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings-loader'
 import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { useSession } from '@/lib/auth/auth-client'
+import { useStopImpersonating } from '@/hooks/queries/admin-users'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 
+function ImpersonationBanner() {
+  const { data: session, isPending } = useSession()
+  const stopImpersonating = useStopImpersonating()
+  const userLabel = session?.user?.name || 'this user'
+  const userEmail = session?.user?.email
+
+  if (isPending || !session?.session?.impersonatedBy) {
+    return null
+  }
+
+  return (
+    <Banner variant='destructive'>
+      <div className='mx-auto flex max-w-[1400px] items-center justify-between gap-[12px]'>
+        <p className='text-[13px] text-red-700 dark:text-red-300'>
+          Impersonating {userLabel}
+          {userEmail ? ` (${userEmail})` : ''}. Changes will apply to this account until you switch
+          back.
+        </p>
+        <Button
+          variant='destructive'
+          className='h-[28px] shrink-0 px-[8px] text-[12px]'
+          onClick={() =>
+            stopImpersonating.mutate(undefined, {
+              onSuccess: () => {
+                window.location.assign('/workspace')
+              },
+            })
+          }
+          disabled={stopImpersonating.isPending}
+        >
+          {stopImpersonating.isPending ? 'Returning...' : 'Stop impersonating'}
+        </Button>
+      </div>
+    </Banner>
+  )
+}
+
 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
   return (
     <ToastProvider>
       <SettingsLoader />
       <ProviderModelsLoader />
       <GlobalCommandsProvider>
-        <div className='flex h-screen w-full bg-[var(--surface-1)]'>
+        <div className='flex h-screen w-full flex-col overflow-hidden bg-[var(--surface-1)]'>
+          <ImpersonationBanner />
           <WorkspacePermissionsProvider>
-            <div className='shrink-0' suppressHydrationWarning>
-              <Sidebar />
-            </div>
-            <div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
-              <div className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
-                {children}
+            <div className='flex min-h-0 flex-1'>
+              <div className='shrink-0' suppressHydrationWarning>
+                <Sidebar />
+              </div>
+              <div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
+                <div className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
+                  {children}
+                </div>
               </div>
             </div>
           </WorkspacePermissionsProvider>

apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx

@@ -161,10 +161,11 @@ export function SettingsPage({ section }: SettingsPageProps) {
   const { data: session, isPending: sessionLoading } = useSession()
 
   const isAdminRole = session?.user?.role === 'admin'
+  const isImpersonating = Boolean(session?.session?.impersonatedBy)
   const effectiveSection =
     !isBillingEnabled && (section === 'subscription' || section === 'team')
       ? 'general'
-      : section === 'admin' && !sessionLoading && !isAdminRole
+      : section === 'admin' && !sessionLoading && !isAdminRole && !isImpersonating
         ? 'general'
         : section
 

apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx

@@ -8,6 +8,7 @@ import { cn } from '@/lib/core/utils/cn'
 import {
   useAdminUsers,
   useBanUser,
+  useImpersonateUser,
   useSetUserRole,
   useUnbanUser,
 } from '@/hooks/queries/admin-users'
@@ -28,6 +29,7 @@ export function Admin() {
   const setUserRole = useSetUserRole()
   const banUser = useBanUser()
   const unbanUser = useUnbanUser()
+  const impersonateUser = useImpersonateUser()
 
   const [workflowId, setWorkflowId] = useState('')
   const [usersOffset, setUsersOffset] = useState(0)
@@ -67,6 +69,18 @@ export function Admin() {
     )
   }
 
+  const handleImpersonate = (userId: string) => {
+    impersonateUser.reset()
+    impersonateUser.mutate(
+      { userId },
+      {
+        onSuccess: () => {
+          window.location.assign('/workspace')
+        },
+      }
+    )
+  }
+
   const pendingUserIds = useMemo(() => {
     const ids = new Set<string>()
     if (setUserRole.isPending && (setUserRole.variables as { userId?: string })?.userId)
@@ -75,6 +89,8 @@ export function Admin() {
       ids.add((banUser.variables as { userId: string }).userId)
     if (unbanUser.isPending && (unbanUser.variables as { userId?: string })?.userId)
       ids.add((unbanUser.variables as { userId: string }).userId)
+    if (impersonateUser.isPending && (impersonateUser.variables as { userId?: string })?.userId)
+      ids.add((impersonateUser.variables as { userId: string }).userId)
     return ids
   }, [
     setUserRole.isPending,
@@ -83,6 +99,8 @@ export function Admin() {
     banUser.variables,
     unbanUser.isPending,
     unbanUser.variables,
+    impersonateUser.isPending,
+    impersonateUser.variables,
   ])
   return (
     <div className='flex h-full flex-col gap-[24px]'>
@@ -152,9 +170,10 @@ export function Admin() {
           </p>
         )}
 
-        {(setUserRole.error || banUser.error || unbanUser.error) && (
+        {(setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error) && (
           <p className='text-[13px] text-[var(--text-error)]'>
-            {(setUserRole.error || banUser.error || unbanUser.error)?.message ??
+            {(setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error)
+              ?.message ??
               'Action failed. Please try again.'}
           </p>
         )}
@@ -175,7 +194,7 @@ export function Admin() {
                 <span className='flex-1'>Email</span>
                 <span className='w-[80px]'>Role</span>
                 <span className='w-[80px]'>Status</span>
-                <span className='w-[180px] text-right'>Actions</span>
+                <span className='w-[250px] text-right'>Actions</span>
               </div>
 
               {usersData.users.length === 0 && (
@@ -206,9 +225,21 @@ export function Admin() {
                       <Badge variant='green'>Active</Badge>
                     )}
                   </span>
-                  <span className='flex w-[180px] justify-end gap-[4px]'>
+                  <span className='flex w-[250px] justify-end gap-[4px]'>
                     {u.id !== session?.user?.id && (
                       <>
+                        <Button
+                          variant='active'
+                          className='h-[28px] px-[8px] text-[12px]'
+                          onClick={() => handleImpersonate(u.id)}
+                          disabled={pendingUserIds.has(u.id)}
+                        >
+                          {impersonateUser.isPending &&
+                          (impersonateUser.variables as { userId?: string } | undefined)?.userId ===
+                            u.id
+                            ? 'Switching...'
+                            : 'Impersonate'}
+                        </Button>
                         <Button
                           variant='active'
                           className='h-[28px] px-[8px] text-[12px]'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx

@@ -64,6 +64,7 @@ export function SettingsSidebar({
   const hasEnterprisePlan = subscriptionStatus.isEnterprise
 
   const isSuperUser = session?.user?.role === 'admin'
+  const isImpersonating = Boolean(session?.session?.impersonatedBy)
 
   const isSSOProviderOwner = useMemo(() => {
     if (isHosted) return null
@@ -121,7 +122,7 @@ export function SettingsSidebar({
         return false
       }
 
-      if (item.requiresAdminRole && !isSuperUser) {
+      if (item.requiresAdminRole && !isSuperUser && !isImpersonating) {
         return false
       }
 
@@ -135,6 +136,7 @@ export function SettingsSidebar({
     ssoProvidersData?.providers?.length,
     permissionConfig,
     isSuperUser,
+    isImpersonating,
     generalSettings?.superUserModeEnabled,
   ])
 

apps/sim/components/emcn/components/banner/banner.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/core/utils/cn'
+
+const bannerVariants = cva('shrink-0 px-[24px] py-[10px]', {
+  variants: {
+    variant: {
+      default: 'bg-[var(--surface-active)]',
+      destructive: 'bg-red-50 dark:bg-red-950/30',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export interface BannerProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bannerVariants> {
+  children: ReactNode
+}
+
+export function Banner({ className, variant, children, ...props }: BannerProps) {
+  return (
+    <div className={cn(bannerVariants({ variant }), className)} {...props}>
+      {children}
+    </div>
+  )
+}

apps/sim/components/emcn/components/index.ts

@@ -6,6 +6,7 @@ export {
   avatarStatusVariants,
   avatarVariants,
 } from './avatar/avatar'
+export { Banner, type BannerProps } from './banner/banner'
 export { Badge } from './badge/badge'
 export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps } from './breadcrumb/breadcrumb'
 export { Button, type ButtonProps, buttonVariants } from './button/button'

apps/sim/hooks/queries/admin-users.ts

@@ -133,3 +133,27 @@ export function useUnbanUser() {
     },
   })
 }
+
+export function useImpersonateUser() {
+  return useMutation({
+    mutationFn: async ({ userId }: { userId: string }) => {
+      const result = await client.admin.impersonateUser({ userId })
+      return result
+    },
+    onError: (err) => {
+      logger.error('Failed to impersonate user', err)
+    },
+  })
+}
+
+export function useStopImpersonating() {
+  return useMutation({
+    mutationFn: async () => {
+      const result = await client.admin.stopImpersonating()
+      return result
+    },
+    onError: (err) => {
+      logger.error('Failed to stop impersonating', err)
+    },
+  })
+}