Files
supabase/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/DefaultEdgeFunctionSecrets.utils.ts
Alaister Young 45ffa97240 [FE-3096] feat(studio): split edge function secrets into custom and default sections (#45355)
Splits the Edge Function secrets page into two sections so reserved
Supabase env vars are always visible, even on new projects without any
user secrets created.

<img width="1605" height="1006" alt="Screenshot 2026-04-29 at 12 20
43 PM"
src="https://github.com/user-attachments/assets/fc74f10e-557d-45bb-b0f0-66a706a9facb"
/>

**Added:**
- `DefaultEdgeFunctionSecrets` component — a read-only reference list
(Name + Description) of every `SUPABASE_*`, `SB_*`, and `DENO_*` env var
available in every project, sourced from [the
docs](https://supabase.com/docs/guides/functions/secrets#default-secrets)
- `isInternalEdgeFunctionSecret` helper used to filter the custom
secrets table

**Changed:**
- The custom secrets section now renders first (more actionable), with
the educational default secrets section below it
- Custom secrets table now filters out anything matching `SUPABASE_*` or
any of the hardcoded default names

**Removed:**
- `isReservedSecret` regex check + its tooltip branches in
`EdgeFunctionSecret.tsx` — dead code now that the custom table never
receives an internal secret

Addresses
[FE-3096](https://linear.app/supabase/issue/FE-3096/split-edge-function-secrets-into-internal-and-user-defined-views).

## To test

- Open `/project/_/functions/secrets` on a fresh project (no custom
secrets)
- "Default secrets" section is visible and lists all 9 env vars with
descriptions
  - "Custom secrets" section shows the empty state
- Create a custom secret — appears in the Custom section, not the
Default section
- Edit/delete dropdown still works on custom secrets
- Search input only filters the custom secrets table

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a "Default secrets" section showing built-in edge-function
secrets with names, descriptions, and a "Deprecated" badge where
applicable.
* Secret names are clickable to copy to clipboard with a success
notification; secret names/values use inline code styling.
* UI now separates "Custom secrets" and "Default secrets" with distinct
empty states.

* **Bug Fixes**
* Edit/Delete controls reflect actual permission state (no longer
disabled for default/reserved secrets).

* **Tests**
  * Added tests for default-secret detection and visibility rules.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-04-29 18:08:32 +08:00

93 lines
3.2 KiB
TypeScript

export interface DefaultEdgeFunctionSecret {
name: string
description: string
// Runtime secrets are set by the Edge Functions runtime per invocation and
// are never returned by the secrets API. They should always be shown.
isRuntime: boolean
isDeprecated?: boolean
}
export const DEFAULT_EDGE_FUNCTION_SECRETS: DefaultEdgeFunctionSecret[] = [
{
name: 'SUPABASE_URL',
description: 'The API gateway for your Supabase project.',
isRuntime: false,
},
{
name: 'SUPABASE_DB_URL',
description:
'The direct PostgreSQL connection URL. Should not be shared with anyone, only use it on the server.',
isRuntime: false,
},
{
name: 'SUPABASE_PUBLISHABLE_KEYS',
description:
'JSON dictionary of publishable API keys. Safe to use in a browser if RLS is enabled.',
isRuntime: false,
},
{
name: 'SUPABASE_SECRET_KEYS',
description: 'JSON dictionary of secret API keys. Should never be exposed to a browser.',
isRuntime: false,
},
{
name: 'SUPABASE_ANON_KEY',
description:
'Legacy anonymous key. Use SUPABASE_PUBLISHABLE_KEYS issued through JWT Signing Keys instead.',
isRuntime: false,
isDeprecated: true,
},
{
name: 'SUPABASE_SERVICE_ROLE_KEY',
description:
'Legacy service role key. Use SUPABASE_SECRET_KEYS issued through JWT Signing Keys instead.',
isRuntime: false,
isDeprecated: true,
},
{
name: 'SUPABASE_JWKS',
description: "JSON Web Key Set used to verify JWTs issued by your project's auth server.",
isRuntime: false,
},
{
name: 'SB_REGION',
description: 'The region the function was invoked in. Set per request.',
isRuntime: true,
},
{
name: 'SB_EXECUTION_ID',
description: 'A unique identifier for each function instance. Set per request.',
isRuntime: true,
},
{
name: 'DENO_DEPLOYMENT_ID',
description: 'The version of the function code. Set when the function is deployed.',
isRuntime: true,
},
]
const DEFAULT_EDGE_FUNCTION_SECRET_NAMES = new Set(
DEFAULT_EDGE_FUNCTION_SECRETS.map((secret) => secret.name)
)
// Internal secrets are anything reserved by Supabase that the user can't manage:
// either prefixed with SUPABASE_ (enforced by the API) or in the hardcoded
// list of default secrets above.
export const isInternalEdgeFunctionSecret = (name: string) =>
/^SUPABASE_/.test(name) || DEFAULT_EDGE_FUNCTION_SECRET_NAMES.has(name)
// Picks the default secrets to display: runtime ones are always shown, static
// SUPABASE_* ones are filtered to those actually present in the API response.
// If the API returned none of the static defaults (brand-new project state),
// fall back to showing the full hardcoded list so the page stays educational.
export const getVisibleDefaultEdgeFunctionSecrets = (apiSecretNames: Set<string>) => {
const staticDefaults = DEFAULT_EDGE_FUNCTION_SECRETS.filter((secret) => !secret.isRuntime)
const runtimeDefaults = DEFAULT_EDGE_FUNCTION_SECRETS.filter((secret) => secret.isRuntime)
const presentStaticDefaults = staticDefaults.filter((secret) => apiSecretNames.has(secret.name))
const visibleStaticDefaults =
presentStaticDefaults.length > 0 ? presentStaticDefaults : staticDefaults
return [...visibleStaticDefaults, ...runtimeDefaults]
}