shadcn.io is not affiliated with official shadcn/ui
Webhook Integration File Upload Block for Radix UI
A signature check with a real HMAC-SHA256 from crypto.subtle: edit the payload and demo secret, sign it into an X-Signature header with Copy, then paste a signature to see Match or No match.
Installation
Overview
Show the exact check a webhook receiver has to make, with this file upload panel for React with Radix UI. It is the signing screen of Hookhouse, webhooks for a file API. The start cell sets the delivery: an endpoint in an Input that must be https, three event Switches that decide which events appear in the sample payload, and a demo secret in a Password Input. The end cell holds the payload in a Textarea, which you can edit until a change to the endpoint or an event rewrites it. Sign payload computes a real HMAC-SHA256 of the payload under the secret with the browser's crypto.subtle and shows it as the X-Signature header with a Copy Button. Under both cells you paste a received signature and the block says Match or No match; Change one character alters the last character of the real one so you can watch it fail. The panel is ruled by Guides. It is built from Textarea, Password Input, Input, Switch, Copy Button, Badge, Shine Button and Guides, with a CSS entrance only. For webhook docs and any receiver you want to get right the first time.
FAQ
Is the signature real?
Yes. It is a genuine HMAC-SHA256 of the exact payload text under the secret, as lowercase hex with a sha256= prefix, computed in the browser with crypto.subtle. Paste the same payload and secret into your own HMAC code and you get the same value.
When is it computed?
Only when you press Sign payload, inside the handler, never while rendering. If the payload or the secret changes afterwards, the block says the signature is out of date and you sign again.
Is the secret real?
No. It is a made-up value for the demo and nothing is saved or sent. crypto.subtle needs a secure (https) page; on any other it says so instead of failing.
How does the check compare signatures?
It trims and lowercases what you paste, drops an optional sha256= prefix, and compares it to the signature from the last signing. A real receiver should compare in constant time; this demo has no timing to protect.
Why does the endpoint need https?
A webhook body and its signature should not travel in clear text. Sign payload refuses an endpoint that does not start with https:// and says so beside the field.
What stays local, and how do I wire it?
The payload, secret and result live in this page only and nothing is delivered. To wire it, keep the secret on your server, sign the raw request body with HMAC-SHA256 there, and in your receiver recompute the signature from the raw body, compare it in constant time, and reject old timestamps.