mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
1cffe632e3
## 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>
65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import { useParams } from 'common'
|
|
import { UseFormReturn } from 'react-hook-form'
|
|
import { useWatch } from 'ui'
|
|
import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
|
|
|
|
import { WebhookFormValues } from './EditHookPanel.constants'
|
|
import { buildEdgeFunctionHeaderAddActions } from '@/components/interfaces/Functions/httpHeaderAddActions'
|
|
import {
|
|
FormSection,
|
|
FormSectionContent,
|
|
FormSectionLabel,
|
|
} from '@/components/ui/Forms/FormSection'
|
|
import { useAPIKeys } from '@/data/api-keys/api-keys-query'
|
|
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
|
|
import { uuidv4 } from '@/lib/helpers'
|
|
|
|
interface HTTPHeadersProps {
|
|
form: UseFormReturn<WebhookFormValues>
|
|
}
|
|
|
|
export const HTTPHeaders = ({ form }: HTTPHeadersProps) => {
|
|
const { ref } = useParams()
|
|
const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
|
|
|
|
const { data: apiKeyData } = useAPIKeys(
|
|
{
|
|
projectRef: ref,
|
|
reveal: true,
|
|
},
|
|
{ enabled: canReadAPIKeys }
|
|
)
|
|
const { serviceKey, secretKey } = apiKeyData ?? {}
|
|
const apiKey = secretKey?.api_key ?? serviceKey?.api_key ?? '[YOUR API KEY]'
|
|
|
|
const functionType = useWatch({ control: form.control, name: 'function_type' })
|
|
const addActions =
|
|
functionType === 'supabase_function'
|
|
? buildEdgeFunctionHeaderAddActions({
|
|
apiKey,
|
|
createRow: (name: string, value: string) => ({ id: uuidv4(), name, value }),
|
|
})
|
|
: []
|
|
|
|
return (
|
|
<FormSection
|
|
header={<FormSectionLabel className="lg:col-span-4!">HTTP Headers</FormSectionLabel>}
|
|
>
|
|
<FormSectionContent loading={false} className="lg:col-span-8!">
|
|
<KeyValueFieldArray
|
|
control={form.control}
|
|
name="httpHeaders"
|
|
keyFieldName="name"
|
|
valueFieldName="value"
|
|
createEmptyRow={() => ({ id: uuidv4(), name: '', value: '' })}
|
|
keyPlaceholder="Header name"
|
|
valuePlaceholder="Header value"
|
|
addLabel="Add header"
|
|
addActions={addActions}
|
|
/>
|
|
</FormSectionContent>
|
|
</FormSection>
|
|
)
|
|
}
|