feat(auth): migrate to better-auth admin plugin with unified Admin tab

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

@@ -13,6 +13,7 @@ export type AppSession = {
     emailVerified?: boolean
     name?: string | null
     image?: string | null
+    role?: string
     createdAt?: Date
     updatedAt?: Date
   } | null

apps/sim/app/api/users/me/settings/route.ts

@@ -72,7 +72,7 @@ export async function GET() {
           emailPreferences: userSettings.emailPreferences ?? {},
           billingUsageNotificationsEnabled: userSettings.billingUsageNotificationsEnabled ?? true,
           showTrainingControls: userSettings.showTrainingControls ?? false,
-          superUserModeEnabled: userSettings.superUserModeEnabled ?? true,
+          superUserModeEnabled: userSettings.superUserModeEnabled ?? false,
           errorNotificationsEnabled: userSettings.errorNotificationsEnabled ?? true,
           snapToGridSize: userSettings.snapToGridSize ?? 0,
           showActionBar: userSettings.showActionBar ?? true,

apps/sim/app/templates/[id]/template.tsx

@@ -148,7 +148,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
   const [currentUserOrgRoles, setCurrentUserOrgRoles] = useState<
     Array<{ organizationId: string; role: string }>
   >([])
-  const [isSuperUser, setIsSuperUser] = useState(false)
+  const isSuperUser = session?.user?.role === 'admin'
   const [isUsing, setIsUsing] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const [isApproving, setIsApproving] = useState(false)
@@ -186,21 +186,6 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
       }
     }
 
-    const fetchSuperUserStatus = async () => {
-      if (!currentUserId) return
-
-      try {
-        const response = await fetch('/api/user/super-user')
-        if (response.ok) {
-          const data = await response.json()
-          setIsSuperUser(data.isSuperUser || false)
-        }
-      } catch (error) {
-        logger.error('Error fetching super user status:', error)
-      }
-    }
-
-    fetchSuperUserStatus()
     fetchUserOrganizations()
   }, [currentUserId])
 

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

@@ -3,13 +3,14 @@
 import dynamic from 'next/dynamic'
 import { useSearchParams } from 'next/navigation'
 import { Skeleton } from '@/components/emcn'
+import { useSession } from '@/lib/auth/auth-client'
+import { AdminSkeleton } from '@/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton'
 import { ApiKeysSkeleton } from '@/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton'
 import { BYOKSkeleton } from '@/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton'
 import { CopilotSkeleton } from '@/app/workspace/[workspaceId]/settings/components/copilot/copilot-skeleton'
 import { CredentialSetsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton'
 import { CredentialsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton'
 import { CustomToolsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton'
-import { DebugSkeleton } from '@/app/workspace/[workspaceId]/settings/components/debug/debug-skeleton'
 import { GeneralSkeleton } from '@/app/workspace/[workspaceId]/settings/components/general/general-skeleton'
 import { InboxSkeleton } from '@/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton'
 import { McpSkeleton } from '@/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton'
@@ -130,10 +131,10 @@ const Inbox = dynamic(
     import('@/app/workspace/[workspaceId]/settings/components/inbox/inbox').then((m) => m.Inbox),
   { loading: () => <InboxSkeleton /> }
 )
-const Debug = dynamic(
+const Admin = dynamic(
   () =>
-    import('@/app/workspace/[workspaceId]/settings/components/debug/debug').then((m) => m.Debug),
-  { loading: () => <DebugSkeleton /> }
+    import('@/app/workspace/[workspaceId]/settings/components/admin/admin').then((m) => m.Admin),
+  { loading: () => <AdminSkeleton /> }
 )
 const RecentlyDeleted = dynamic(
   () =>
@@ -157,9 +158,15 @@ interface SettingsPageProps {
 export function SettingsPage({ section }: SettingsPageProps) {
   const searchParams = useSearchParams()
   const mcpServerId = searchParams.get('mcpServerId')
+  const { data: session } = useSession()
 
+  const isAdminRole = session?.user?.role === 'admin'
   const effectiveSection =
-    !isBillingEnabled && (section === 'subscription' || section === 'team') ? 'general' : section
+    !isBillingEnabled && (section === 'subscription' || section === 'team')
+      ? 'general'
+      : section === 'admin' && !isAdminRole
+        ? 'general'
+        : section
 
   const label =
     allNavigationItems.find((item) => item.id === effectiveSection)?.label ?? effectiveSection
@@ -185,7 +192,7 @@ export function SettingsPage({ section }: SettingsPageProps) {
       {effectiveSection === 'workflow-mcp-servers' && <WorkflowMcpServers />}
       {effectiveSection === 'inbox' && <Inbox />}
       {effectiveSection === 'recently-deleted' && <RecentlyDeleted />}
-      {effectiveSection === 'debug' && <Debug />}
+      {effectiveSection === 'admin' && <Admin />}
     </div>
   )
 }

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

@@ -0,0 +1,23 @@
+import { Skeleton } from '@/components/emcn'
+
+export function AdminSkeleton() {
+  return (
+    <div className='flex h-full flex-col gap-[24px]'>
+      <div className='flex items-center justify-between'>
+        <Skeleton className='h-[14px] w-[120px]' />
+        <Skeleton className='h-[20px] w-[36px] rounded-full' />
+      </div>
+      <div className='flex flex-col gap-[8px]'>
+        <Skeleton className='h-[14px] w-[340px]' />
+        <div className='flex gap-[8px]'>
+          <Skeleton className='h-9 flex-1 rounded-[6px]' />
+          <Skeleton className='h-9 w-[80px] rounded-[6px]' />
+        </div>
+      </div>
+      <div className='flex flex-col gap-[8px]'>
+        <Skeleton className='h-[14px] w-[120px]' />
+        <Skeleton className='h-[200px] w-full rounded-[8px]' />
+      </div>
+    </div>
+  )
+}