Add explicit role check

Author: Theodore Li

apps/sim/app/workspace/[workspaceId]/impersonation-banner.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { useState } from 'react'
+import { Banner } from '@/components/emcn'
+import { useStopImpersonating } from '@/hooks/queries/admin-users'
+import { useSession } from '@/lib/auth/auth-client'
+
+function getImpersonationBannerText(userLabel: string, userEmail?: string) {
+  return `Impersonating ${userLabel}${userEmail ? ` (${userEmail})` : ''}. Changes will apply to this account until you switch back.`
+}
+
+export function ImpersonationBanner() {
+  const { data: session, isPending } = useSession()
+  const stopImpersonating = useStopImpersonating()
+  const [isRedirecting, setIsRedirecting] = useState(false)
+  const userLabel = session?.user?.name || 'this user'
+  const userEmail = session?.user?.email
+
+  if (isPending || !session?.session?.impersonatedBy) {
+    return null
+  }
+
+  return (
+    <Banner
+      variant='destructive'
+      text={getImpersonationBannerText(userLabel, userEmail)}
+      textClassName='text-red-700 dark:text-red-300'
+      actionLabel={stopImpersonating.isPending || isRedirecting ? 'Returning...' : 'Stop impersonating'}
+      actionVariant='destructive'
+      actionDisabled={stopImpersonating.isPending || isRedirecting}
+      onAction={() =>
+        stopImpersonating.mutate(undefined, {
+          onError: () => {
+            setIsRedirecting(false)
+          },
+          onSuccess: () => {
+            setIsRedirecting(true)
+            window.location.assign('/workspace')
+          },
+        })
+      }
+    />
+  )
+}

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

@@ -1,49 +1,11 @@
-import { Banner, Button, ToastProvider } from '@/components/emcn'
+import { ToastProvider } from '@/components/emcn'
 import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
+import { ImpersonationBanner } from '@/app/workspace/[workspaceId]/impersonation-banner'
 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>

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

@@ -37,6 +37,8 @@ export function Admin() {
   const [searchQuery, setSearchQuery] = useState('')
   const [banUserId, setBanUserId] = useState<string | null>(null)
   const [banReason, setBanReason] = useState('')
+  const [impersonatingUserId, setImpersonatingUserId] = useState<string | null>(null)
+  const [impersonationGuardError, setImpersonationGuardError] = useState<string | null>(null)
 
   const {
     data: usersData,
@@ -70,10 +72,21 @@ export function Admin() {
   }
 
   const handleImpersonate = (userId: string) => {
+    setImpersonationGuardError(null)
+    if (session?.user?.role !== 'admin') {
+      setImpersonatingUserId(null)
+      setImpersonationGuardError('Only admins can impersonate users.')
+      return
+    }
+
+    setImpersonatingUserId(userId)
     impersonateUser.reset()
     impersonateUser.mutate(
       { userId },
       {
+        onError: () => {
+          setImpersonatingUserId(null)
+        },
         onSuccess: () => {
           window.location.assign('/workspace')
         },
@@ -91,6 +104,7 @@ export function Admin() {
       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)
+    if (impersonatingUserId) ids.add(impersonatingUserId)
     return ids
   }, [
     setUserRole.isPending,
@@ -101,6 +115,7 @@ export function Admin() {
     unbanUser.variables,
     impersonateUser.isPending,
     impersonateUser.variables,
+    impersonatingUserId,
   ])
   return (
     <div className='flex h-full flex-col gap-[24px]'>
@@ -170,10 +185,15 @@ export function Admin() {
           </p>
         )}
 
-        {(setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error) && (
+        {(setUserRole.error ||
+          banUser.error ||
+          unbanUser.error ||
+          impersonateUser.error ||
+          impersonationGuardError) && (
           <p className='text-[13px] text-[var(--text-error)]'>
-            {(setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error)
-              ?.message ??
+            {impersonationGuardError ||
+              (setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error)
+                ?.message ||
               'Action failed. Please try again.'}
           </p>
         )}
@@ -234,9 +254,10 @@ export function Admin() {
                           onClick={() => handleImpersonate(u.id)}
                           disabled={pendingUserIds.has(u.id)}
                         >
-                          {impersonateUser.isPending &&
-                          (impersonateUser.variables as { userId?: string } | undefined)?.userId ===
-                            u.id
+                          {(impersonatingUserId === u.id ||
+                            (impersonateUser.isPending &&
+                              (impersonateUser.variables as { userId?: string } | undefined)
+                                ?.userId === u.id))
                             ? 'Switching...'
                             : 'Impersonate'}
                         </Button>

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

@@ -3,6 +3,7 @@
 import type { HTMLAttributes, ReactNode } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
+import { Button, type ButtonProps } from '@/components/emcn/components/button/button'
 
 const bannerVariants = cva('shrink-0 px-[24px] py-[10px]', {
   variants: {
@@ -19,13 +20,51 @@ const bannerVariants = cva('shrink-0 px-[24px] py-[10px]', {
 export interface BannerProps
   extends HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof bannerVariants> {
-  children: ReactNode
+  actionClassName?: string
+  actionDisabled?: boolean
+  actionLabel?: ReactNode
+  actionProps?: Omit<ButtonProps, 'children' | 'className' | 'disabled' | 'onClick' | 'variant'>
+  actionVariant?: ButtonProps['variant']
+  children?: ReactNode
+  contentClassName?: string
+  onAction?: () => void
+  text?: ReactNode
+  textClassName?: string
 }
 
-export function Banner({ className, variant, children, ...props }: BannerProps) {
+export function Banner({
+  actionClassName,
+  actionDisabled,
+  actionLabel,
+  actionProps,
+  actionVariant = 'default',
+  children,
+  className,
+  contentClassName,
+  onAction,
+  text,
+  textClassName,
+  variant,
+  ...props
+}: BannerProps) {
   return (
     <div className={cn(bannerVariants({ variant }), className)} {...props}>
-      {children}
+      {children ?? (
+        <div className={cn('mx-auto flex max-w-[1400px] items-center justify-between gap-[12px]', contentClassName)}>
+          <p className={cn('text-[13px]', textClassName)}>{text}</p>
+          {actionLabel ? (
+            <Button
+              variant={actionVariant}
+              className={cn('h-[28px] shrink-0 px-[8px] text-[12px]', actionClassName)}
+              onClick={onAction}
+              disabled={actionDisabled}
+              {...actionProps}
+            >
+              {actionLabel}
+            </Button>
+          ) : null}
+        </div>
+      )}
     </div>
   )
 }