mirror of
https://github.com/supabase/supabase.git
synced 2026-09-07 02:20:52 +08:00
920571fcf7
## Summary
Rewrites the secret API key reveal flow in `ApiKeyPill` to remove its
dependency on React Query, replacing it with a lightweight custom hook.
## Changes
- **`useRevealedSecret` (new hook)**
A simple, reusable hook that:
- Fetches the unmasked secret key via `getAPIKeysById`
- Exposes `data`, `isLoading`, `reveal()`, and `clear()`
- Keeps sensitive data in local component state (no global cache)
- **`ApiKeyPill` (refactored)**
- Removes all React Query imports (`useQueryClient`, `useAPIKeyIdQuery`,
`apiKeysKeys`)
- Uses `useRevealedSecret` for reveal / copy operations
- Preserves existing UX:
- 10-second auto-hide timer
- Permission-based gating (`canManageSecretKeys`)
- Loading states on toggle / copy
- **`api-key-id-query.ts` (cleaned up)**
- Removes the now-unused `useAPIKeyIdQuery` hook
- Retains the `getAPIKeysById` fetcher for direct use
## Motivation
The previous React Query–based flow had to aggressively disable caching
(`staleTime: 0`, `gcTime: 0`) and manually purge queries from the cache
on every interaction, which was cumbersome and leaked implementation
details into the component. A plain fetch + local state is simpler and
safer for transient, sensitive data.
## Testing
- [x] Toggle reveal on a secret API key
- [x] Verify 10-second auto-hide
- [x] Copy a secret key (both revealed and unrevealed states)
- [x] Verify restricted users cannot reveal/copy
---
Resolves [FE-3206](https://linear.app/supabase/issue/FE-3206)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Improved API key reveal/copy flow: uses a dedicated reveal/clear
mechanism, preserves permission checks and 10s auto-hide, and shows
reveal/copy failures via user-facing toasts. Copy now falls back to
masked key when needed and the reveal toggle behavior is more reliable.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45792)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
32 lines
720 B
TypeScript
32 lines
720 B
TypeScript
import { get, handleError } from '@/data/fetchers'
|
|
|
|
export interface APIKeyVariables {
|
|
projectRef?: string
|
|
id?: string
|
|
reveal: boolean
|
|
}
|
|
|
|
export async function getAPIKeysById(
|
|
{ projectRef, id, reveal }: APIKeyVariables,
|
|
signal?: AbortSignal
|
|
) {
|
|
if (typeof projectRef === 'undefined') throw new Error('projectRef is required')
|
|
if (typeof id === 'undefined') throw new Error('Content ID is required')
|
|
|
|
const { data, error } = await get('/v1/projects/{ref}/api-keys/{id}', {
|
|
params: {
|
|
path: { ref: projectRef, id },
|
|
query: { reveal },
|
|
},
|
|
signal,
|
|
})
|
|
|
|
if (error) {
|
|
handleError(error)
|
|
}
|
|
|
|
return data
|
|
}
|
|
|
|
export type APIKeyIdData = Awaited<ReturnType<typeof getAPIKeysById>>
|