diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
index d3916265d7..e87f0ee5cf 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
@@ -2,6 +2,7 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { createLogger } from '@sim/logger'
+import { useQueryClient } from '@tanstack/react-query'
import { Check, Clipboard, Key, Search } from 'lucide-react'
import { useParams, useRouter } from 'next/navigation'
import {
@@ -42,6 +43,7 @@ import {
useWorkspaceCredentials,
type WorkspaceCredential,
type WorkspaceCredentialRole,
+ workspaceCredentialKeys,
} from '@/hooks/queries/credentials'
import {
usePersonalEnvironment,
@@ -125,6 +127,7 @@ interface WorkspaceVariableRowProps {
renamingKey: string | null
pendingKeyValue: string
hasCredential: boolean
+ isAdmin: boolean
onRenameStart: (key: string) => void
onPendingKeyChange: (value: string) => void
onRenameEnd: (key: string, value: string) => void
@@ -138,12 +141,18 @@ function WorkspaceVariableRow({
renamingKey,
pendingKeyValue,
hasCredential,
+ isAdmin,
onRenameStart,
onPendingKeyChange,
onRenameEnd,
onDelete,
onViewDetails,
}: WorkspaceVariableRowProps) {
+ const [valueFocused, setValueFocused] = useState(false)
+
+ const maskedValueStyle =
+ isAdmin && !valueFocused ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties) : undefined
+
return (
{
+ if (isAdmin) setValueFocused(true)
+ }}
+ onBlur={() => {
+ if (isAdmin) setValueFocused(false)
+ }}
autoComplete='off'
autoCorrect='off'
autoCapitalize='off'
spellCheck='false'
+ style={maskedValueStyle}
className='h-9'
/>