Files
supabase/apps/studio/components/interfaces/Database/Hooks/HTTPParameters.tsx
Vaibhav 1cffe632e3 fix: webhook apikey (#47317)
## TL;DR
Database webhooks/Cron jobs now add `apikey: <secret-key>` for edge
function auth..

## ref:
- related to: https://github.com/supabase/supabase/pull/46890
- towards COM-269

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

## New Features
* Improved edge function webhook authentication by automatically
selecting the appropriate API key or authorization header format.
* Authorization headers are now added or normalized when required, while
preserving existing custom headers and supported credentials.

## Improvements
* Simplified “Add header” and “Add parameter” controls with clearer
labels.
* Updated authentication actions to clearly describe the selected header
type.

## Tests
* Expanded coverage for key formats, authorization behavior, header
preservation, and revised control labels.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Tomás Pozo <tomaspozo@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-08-24 10:06:36 -06:00

37 lines
1.1 KiB
TypeScript

import { UseFormReturn } from 'react-hook-form'
import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
import { WebhookFormValues } from './EditHookPanel.constants'
import {
FormSection,
FormSectionContent,
FormSectionLabel,
} from '@/components/ui/Forms/FormSection'
import { uuidv4 } from '@/lib/helpers'
interface HTTPParametersProps {
form: UseFormReturn<WebhookFormValues>
}
export const HTTPParameters = ({ form }: HTTPParametersProps) => {
return (
<FormSection
header={<FormSectionLabel className="lg:col-span-4!">HTTP Parameters</FormSectionLabel>}
>
<FormSectionContent loading={false} className="lg:col-span-8!">
<KeyValueFieldArray
control={form.control}
name="httpParameters"
keyFieldName="name"
valueFieldName="value"
createEmptyRow={() => ({ id: uuidv4(), name: '', value: '' })}
keyPlaceholder="Parameter name"
valuePlaceholder="Parameter value"
addLabel="Add parameter"
removeLabel="Remove parameter"
/>
</FormSectionContent>
</FormSection>
)
}