fix(secrets): harden visible value reveal

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.test.tsx

@@ -37,13 +37,12 @@ describe('SecretValueField', () => {
     act(() => root.render(<SecretValueField value='visible-secret' canEdit={false} canReveal />))
 
     expect(input().readOnly).toBe(true)
-    expect(input().style.webkitTextSecurity).toBe('disc')
+    expect(input().value).toBe('•'.repeat(10))
 
     act(() => input().focus())
 
     expect(input().value).toBe('visible-secret')
     expect(input().readOnly).toBe(true)
-    expect(input().style.webkitTextSecurity).toBe('')
   })
 
   it('never places a withheld value in the field', () => {
@@ -53,4 +52,10 @@ describe('SecretValueField', () => {
     act(() => input().focus())
     expect(input().value).toBe('•'.repeat(10))
   })
+
+  it('keeps an empty editable value empty while unfocused', () => {
+    act(() => root.render(<SecretValueField value='' />))
+
+    expect(input().value).toBe('')
+  })
 })

apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx

@@ -1,15 +1,12 @@
 'use client'
 
-import type { ComponentProps, CSSProperties } from 'react'
+import type { ComponentProps } from 'react'
 import { useState } from 'react'
 import { ChipInput } from '@sim/emcn'
 
 const BULLET = '\u2022'
 
-/**
- * Viewers without reveal access receive a fixed-length mask so the secret's
- * length is not disclosed.
- */
+/** Fixed-length masks avoid disclosing the secret's length. */
 const VIEWER_MASK_LENGTH = 10
 
 type SecretValueFieldProps = Omit<
@@ -58,11 +55,8 @@ export function SecretValueField({
   const editable = canEdit && !readOnly
   const revealable = canEdit || canReveal
   const maskActive = revealable && !unmasked && !focused
-  const displayValue = revealable ? value : BULLET.repeat(VIEWER_MASK_LENGTH)
-
-  const mergedStyle: CSSProperties | undefined = maskActive
-    ? ({ ...style, WebkitTextSecurity: 'disc' } as CSSProperties)
-    : style
+  const displayValue =
+    !revealable || (maskActive && value.length > 0) ? BULLET.repeat(VIEWER_MASK_LENGTH) : value
 
   return (
     <ChipInput
@@ -71,7 +65,7 @@ export function SecretValueField({
       type='text'
       value={displayValue}
       readOnly
-      style={mergedStyle}
+      style={style}
       onChange={(event) => {
         if (editable) onChange?.(event.target.value)
       }}

apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx

@@ -1038,7 +1038,7 @@ export function SecretsManager() {
                   ).map(([key, value]) => {
                     const cred = workspaceEnvKeyToCredential.get(key)
                     const canEditRow = canCreateWorkspaceSecret && cred?.role === 'admin'
-                    const canRevealRow = canEditRow || Boolean(cred?.unredacted)
+                    const canRevealRow = cred?.role === 'admin' || Boolean(cred?.unredacted)
                     return (
                       <WorkspaceVariableRow
                         key={key}

apps/sim/hooks/queries/environment.test.tsx

@@ -15,7 +15,7 @@ vi.mock('@/lib/environment/api', () => ({
   fetchWorkspaceEnvironment: mockFetchWorkspaceEnvironment,
 }))
 
-import { useWorkspaceEnvironment } from '@/hooks/queries/environment'
+import { environmentKeys, useWorkspaceEnvironment } from '@/hooks/queries/environment'
 
 function renderWorkspaceEnvironment(workspaceId: string, enabled?: boolean) {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
@@ -59,4 +59,43 @@ describe('useWorkspaceEnvironment', () => {
     expect(mockFetchWorkspaceEnvironment).not.toHaveBeenCalled()
     unmount()
   })
+
+  it('does not retain decrypted values while a different workspace loads', () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const pendingWorkspace = new Promise<never>(() => {})
+
+    queryClient.setQueryData(environmentKeys.workspace('workspace-1'), {
+      workspace: { SHARED_KEY: 'workspace-1-secret' },
+      personal: {},
+      conflicts: [],
+    })
+    mockFetchWorkspaceEnvironment.mockReturnValueOnce(pendingWorkspace)
+
+    function Probe({ workspaceId }: { workspaceId: string }) {
+      const { data } = useWorkspaceEnvironment(workspaceId)
+      return <span>{data?.workspace.SHARED_KEY ?? 'loading'}</span>
+    }
+
+    act(() => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <Probe workspaceId='workspace-1' />
+        </QueryClientProvider>
+      )
+    })
+    expect(container.textContent).toBe('workspace-1-secret')
+
+    act(() => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <Probe workspaceId='workspace-2' />
+        </QueryClientProvider>
+      )
+    })
+
+    expect(container.textContent).toBe('loading')
+    act(() => root.unmount())
+  })
 })

apps/sim/hooks/queries/environment.ts

@@ -1,5 +1,5 @@
 import { createLogger } from '@sim/logger'
-import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { requestJson } from '@/lib/api/client/request'
 import {
   type ContractBodyInput,
@@ -53,7 +53,6 @@ export function useWorkspaceEnvironment<TData = WorkspaceEnvironmentData>(
     queryFn: ({ signal }) => fetchWorkspaceEnvironment(workspaceId, signal),
     enabled: Boolean(workspaceId) && (options?.enabled ?? true),
     staleTime: WORKSPACE_ENVIRONMENT_STALE_TIME,
-    placeholderData: keepPreviousData,
     // See usePersonalEnvironment: seeds an editable form, so a focus refetch
     // during a concurrent workspace-env edit must not clobber unsaved rows.
     refetchOnWindowFocus: false,