Skip to content

Commit 32add5f

Browse files
committed
Display webhook secret in dashboard (#7610)
``` <!-- ## title your PR with this format: "[Dashboard] Feature: Display and Mask Webhook Secret in Contracts Webhooks List" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): INFRA-1524 ## Notes for the reviewer This PR introduces a new column to the Contracts Webhooks table to display the `webhook_secret`. Key points: - The secret is masked for security, showing `**********` followed by the last 3 characters (e.g., `**********xyz`). - The full secret can be copied to the clipboard using the adjacent copy button. - No backend changes were required as the `webhook_secret` is already available in the `WebhookResponse`. ## How to test 1. Navigate to a project's webhooks page on the dashboard (`/dashboard/[team_slug]/[project_slug]/webhooks`). 2. Observe the new "Webhook Secret" column in the table. 3. Verify that the secrets are displayed in the masked format (`**********xyz`). 4. Click the copy icon next to a masked secret and confirm that the full secret is copied to your clipboard. --> ``` --- [Slack Thread](https://thirdwebdev.slack.com/archives/C085X0VQCF3/p1752487882125419?thread_ts=1752487882.125419&cid=C085X0VQCF3) <!-- start pr-codex --> --- ## PR-Codex overview This PR introduces a new function to mask webhook secrets for improved security and updates the `WebhooksTable` component to display the masked secret while allowing users to copy the original secret. ### Detailed summary - Added `maskWebhookSecret` function to mask webhook secrets. - Updated `WebhooksTable` to include a new column for "Webhook Secret." - Displayed masked secret in the table with an option to copy the original secret. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a new "Webhook Secret" column to the webhooks table, displaying masked webhook secrets for improved privacy. * Included a copy button to easily copy the full unmasked webhook secret to the clipboard. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 5f74b3c commit 32add5f

File tree

1 file changed

+33
-0
lines changed
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components

1 file changed

+33
-0
lines changed

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,15 @@ function getEventType(filters: WebhookFilters): string {
3030
return "Unknown";
3131
}
3232

33+
function maskWebhookSecret(secret: string): string {
34+
if (!secret || secret.length <= 3) {
35+
return secret;
36+
}
37+
const lastThreeChars = secret.slice(-3);
38+
const maskedPart = "*".repeat(10);
39+
return maskedPart + lastThreeChars;
40+
}
41+
3342
interface WebhooksTableProps {
3443
webhooks: WebhookResponse[];
3544
projectClientId: string;
@@ -127,6 +136,30 @@ export function ContractsWebhooksTable({
127136
},
128137
header: "Webhook URL",
129138
},
139+
{
140+
accessorKey: "webhook_secret",
141+
cell: ({ getValue }) => {
142+
const secret = getValue() as string;
143+
const maskedSecret = maskWebhookSecret(secret);
144+
return (
145+
<div className="flex items-center gap-2">
146+
<span className="max-w-40 truncate font-mono text-sm">
147+
{maskedSecret}
148+
</span>
149+
<CopyTextButton
150+
className="flex h-6 w-6 items-center justify-center"
151+
copyIconPosition="right"
152+
iconClassName="h-3 w-3"
153+
textToCopy={secret}
154+
textToShow=""
155+
tooltip="Copy Webhook Secret"
156+
variant="ghost"
157+
/>
158+
</div>
159+
);
160+
},
161+
header: "Webhook Secret",
162+
},
130163
{
131164
accessorKey: "created_at",
132165
cell: ({ getValue }) => {

0 commit comments

Comments
 (0)