feat(sso): show the saved client secret as a masked fact with an explicit Replace action

waleedlatif1 · waleedlatif1 · commit cfc8f278aa64 · 2026-08-06T02:01:58.000-07:00
diff --git a/apps/sim/app/api/auth/sso/providers/route.ts b/apps/sim/app/api/auth/sso/providers/route.ts
@@ -11,6 +11,21 @@ import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 
 const logger = createLogger('SSOProvidersRoute')
 
+/** Secrets shorter than this reveal too large a fraction of themselves in 4 characters. */
+const MIN_LENGTH_FOR_HINT = 16
+
+/**
+ * Last four characters of a stored client secret, so an admin can tell *which*
+ * secret is saved rather than only that one exists. Four characters of a
+ * high-entropy secret is not a meaningful disclosure to an owner or admin, who
+ * can rotate it anyway — but short secrets are left unhinted, where the same four
+ * characters would be a large share of the value.
+ */
+function buildClientSecretHint(clientSecret: unknown): string | null {
+  if (typeof clientSecret !== 'string' || clientSecret.length < MIN_LENGTH_FOR_HINT) return null
+  return clientSecret.slice(-4)
+}
+
 export const GET = withRouteHandler(async (request: NextRequest) => {
   try {
     const session = await getSession()
@@ -69,7 +84,9 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         if (oidcConfig) {
           try {
             const parsed = JSON.parse(oidcConfig)
+            const hint = buildClientSecretHint(parsed.clientSecret)
             parsed.clientSecret = REDACTED_MARKER
+            if (hint) parsed.clientSecretHint = hint
             oidcConfig = JSON.stringify(parsed)
           } catch {
             oidcConfig = null
diff --git a/apps/sim/ee/sso/components/sso-settings.tsx b/apps/sim/ee/sso/components/sso-settings.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import {
   Button,
+  Chip,
   ChipCombobox,
   ChipCopyInput,
   ChipInput,
@@ -70,6 +71,17 @@ const SAML_NAMEID_FORMATS = [
 
 const PROVIDER_ID_SUGGESTIONS = SSO_TRUSTED_PROVIDERS.map((id) => ({ label: id, value: id }))
 
+/** Reads the display-only hint the API attaches beside the redacted client secret. */
+function readClientSecretHint(oidcConfig?: string): string | null {
+  if (!oidcConfig) return null
+  try {
+    const hint = JSON.parse(oidcConfig).clientSecretHint
+    return typeof hint === 'string' ? hint : null
+  } catch {
+    return null
+  }
+}
+
 const DEFAULT_FORM_DATA = {
   providerType: 'oidc' as 'oidc' | 'saml',
   providerId: '',
@@ -145,12 +157,18 @@ function OrganizationSsoSettings({ organizationId }: SSOProps) {
   const [errors, setErrors] = useState<Record<string, string[]>>(DEFAULT_ERRORS)
   const [showErrors, setShowErrors] = useState(false)
 
+  const [isReplacingClientSecret, setIsReplacingClientSecret] = useState(false)
+
   /**
    * Editing an OIDC provider always means a secret is stored — the contract
    * requires one to register, and the API returns only its sentinel, never the
    * value. Leaving the field blank therefore means "keep it", not "clear it".
    */
   const hasStoredClientSecret = isEditing && existingProvider?.providerType === 'oidc'
+  /** Last four characters of the saved secret, when the API judged it safe to hint. */
+  const storedClientSecretHint = hasStoredClientSecret
+    ? readClientSecretHint(existingProvider?.oidcConfig)
+    : null
 
   const hasChanges = (Object.keys(formData) as (keyof typeof formData)[]).some(
     (k) => formData[k] !== originalFormData[k]
@@ -263,6 +281,7 @@ function OrganizationSsoSettings({ organizationId }: SSOProps) {
     setErrors(DEFAULT_ERRORS)
     setShowErrors(false)
     setShowAdvanced(false)
+    setIsReplacingClientSecret(false)
   }
 
   const handleSubmit = async (e?: React.FormEvent) => {
@@ -339,6 +358,7 @@ function OrganizationSsoSettings({ organizationId }: SSOProps) {
       setShowErrors(false)
       setIsEditing(false)
       setShowAdvanced(false)
+      setIsReplacingClientSecret(false)
     } catch (err) {
       const message = getErrorMessage(err, 'Unknown error occurred')
       toast.error(message)
@@ -447,6 +467,7 @@ function OrganizationSsoSettings({ organizationId }: SSOProps) {
       setIsEditing(true)
       setShowErrors(false)
       setShowAdvanced(false)
+      setIsReplacingClientSecret(false)
       setShowMapping(Boolean(snapshot.mapId || snapshot.mapEmail || snapshot.mapName))
     } catch (err) {
       logger.error('Failed to parse provider config', { error: err })
@@ -684,57 +705,97 @@ function OrganizationSsoSettings({ organizationId }: SSOProps) {
                 <SettingRow
                   label='Client Secret'
                   description={
-                    hasStoredClientSecret
-                      ? 'Your saved secret is never shown again. Leave this blank to keep it, or type a new one to replace it.'
-                      : undefined
+                    isReplacingClientSecret ? 'Replaces the saved secret when you save.' : undefined
                   }
                   error={
                     showErrors && errors.clientSecret.length > 0
                       ? errors.clientSecret.join(' ')
                       : undefined
                   }
                 >
-                  <ChipInput
-                    id='sso-client-secret'
-                    type='text'
-                    placeholder={hasStoredClientSecret ? '••••••••••••' : 'Enter Client Secret'}
-                    value={formData.clientSecret}
-                    name='sso_client_key'
-                    autoComplete='off'
-                    autoCapitalize='none'
-                    spellCheck={false}
-                    readOnly
-                    onFocus={(e) => {
-                      e.target.removeAttribute('readOnly')
-                      setShowClientSecret(true)
-                    }}
-                    onBlurCapture={() => setShowClientSecret(false)}
-                    onChange={(e) => handleInputChange('clientSecret', e.target.value)}
-                    inputClassName={!showClientSecret ? '[-webkit-text-security:disc]' : undefined}
-                    error={showErrors && errors.clientSecret.length > 0}
-                    endAdornment={
-                      // Only offer the reveal once there is something to reveal. The
-                      // stored secret is never sent to the browser, so on an untouched
-                      // edit the toggle would be a control that visibly does nothing.
-                      formData.clientSecret ? (
-                        <Button
-                          type='button'
-                          variant='ghost'
-                          onClick={() => setShowClientSecret((s) => !s)}
-                          className='size-6 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-                          aria-label={
-                            showClientSecret ? 'Hide client secret' : 'Show client secret'
-                          }
+                  {hasStoredClientSecret && !isReplacingClientSecret ? (
+                    // A saved secret is a fact, not an editable value — the browser
+                    // never receives it. Showing it as a static row with an explicit
+                    // Replace action removes the "is blank going to clear it?" question
+                    // an empty input invites, and stops a stray keystroke from arming
+                    // a replacement.
+                    <div className='flex items-center gap-2'>
+                      <ChipInput
+                        id='sso-client-secret'
+                        readOnly
+                        value={
+                          storedClientSecretHint
+                            ? `••••••••••••${storedClientSecretHint}`
+                            : '••••••••••••'
+                        }
+                        inputClassName='cursor-default font-mono'
+                        className='min-w-0 flex-1'
+                        aria-label={
+                          storedClientSecretHint
+                            ? `Saved client secret ending ${storedClientSecretHint}`
+                            : 'Saved client secret'
+                        }
+                      />
+                      <Chip onClick={() => setIsReplacingClientSecret(true)}>Replace</Chip>
+                    </div>
+                  ) : (
+                    <div className='flex items-center gap-2'>
+                      <ChipInput
+                        id='sso-client-secret'
+                        type='text'
+                        placeholder='Enter Client Secret'
+                        className='min-w-0 flex-1'
+                        value={formData.clientSecret}
+                        name='sso_client_key'
+                        autoComplete='off'
+                        autoCapitalize='none'
+                        spellCheck={false}
+                        readOnly
+                        onFocus={(e) => {
+                          e.target.removeAttribute('readOnly')
+                          setShowClientSecret(true)
+                        }}
+                        onBlurCapture={() => setShowClientSecret(false)}
+                        onChange={(e) => handleInputChange('clientSecret', e.target.value)}
+                        inputClassName={
+                          !showClientSecret ? '[-webkit-text-security:disc]' : undefined
+                        }
+                        error={showErrors && errors.clientSecret.length > 0}
+                        endAdornment={
+                          // Only offer the reveal once there is something to reveal. The
+                          // stored secret is never sent to the browser, so on an untouched
+                          // edit the toggle would be a control that visibly does nothing.
+                          formData.clientSecret ? (
+                            <Button
+                              type='button'
+                              variant='ghost'
+                              onClick={() => setShowClientSecret((s) => !s)}
+                              className='size-6 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                              aria-label={
+                                showClientSecret ? 'Hide client secret' : 'Show client secret'
+                              }
+                            >
+                              {showClientSecret ? (
+                                <EyeOff className='size-[14px]' />
+                              ) : (
+                                <Eye className='size-[14px]' />
+                              )}
+                            </Button>
+                          ) : undefined
+                        }
+                      />
+                      {hasStoredClientSecret && (
+                        <Chip
+                          onClick={() => {
+                            setIsReplacingClientSecret(false)
+                            handleInputChange('clientSecret', '')
+                          }}
                         >
-                          {showClientSecret ? (
-                            <EyeOff className='size-[14px]' />
-                          ) : (
-                            <Eye className='size-[14px]' />
-                          )}
-                        </Button>
-                      ) : undefined
-                    }
-                  />
+                          Cancel
+                        </Chip>
+                      )}
+                    </div>
+                  )}
                 </SettingRow>
 
                 <div className='flex flex-col gap-2'>
