Display webhook secret in dashboard #7610
Merged
+33
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" WalkthroughA utility function to mask webhook secrets was introduced, and the ContractsWebhooksTable component was updated to display a new column showing masked webhook secrets with a copy-to-clipboard button for the full secret. The new column appears between the existing "Webhook URL" and "Created" columns. No other logic was changed. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ContractsWebhooksTable
participant Clipboard
User->>ContractsWebhooksTable: View webhooks table
ContractsWebhooksTable->>ContractsWebhooksTable: Mask webhook secret using maskWebhookSecret
ContractsWebhooksTable-->>User: Display masked secret and copy button
User->>ContractsWebhooksTable: Click copy button
ContractsWebhooksTable->>Clipboard: Copy full secret to clipboard
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7610 +/- ##
=======================================
Coverage 56.42% 56.42%
=======================================
Files 906 906
Lines 58126 58126
Branches 4222 4222
=======================================
Hits 32795 32795
Misses 25223 25223
Partials 108 108
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx (1)
33-40: Consider security implications of revealing the last 3 characters.The masking function reveals the last 3 characters of the webhook secret, which could potentially aid in brute force attacks or social engineering if secrets follow predictable patterns. While this matches the PR requirements, consider if this level of revelation is necessary for user experience.
Additionally, consider extracting this utility function to a shared location if it might be used elsewhere:
+// Move to @/lib/utils.ts or similar +export function maskWebhookSecret(secret: string): string { + if (!secret || secret.length <= 3) { + return secret; + } + const lastThreeChars = secret.slice(-3); + const maskedPart = "*".repeat(10); + return maskedPart + lastThreeChars; +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
apps/{dashboard,playground-web}/**/*.{tsx,ts}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
🧠 Learnings (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx (10)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/hooks/**/*.{ts,tsx} : Prefer API routes or server actions to keep tokens secret; the browser only sees relative paths.
Learnt from: arcoraven
PR: thirdweb-dev/js#7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Side Data Fetching: Keep tokens secret via internal API routes or server actions
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Accessing server-only environment variables or secrets.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Side Data Fetching: Use `Authorization: Bearer` header – never embed tokens in URLs
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/hooks/**/*.{ts,tsx} : Keep `queryKey` stable and descriptive for cache hits.
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx (1)
apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
CopyTextButton(9-68)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx (1)
139-162: Well-implemented column with good UX patterns.The webhook secret column implementation follows established patterns from the codebase:
- Consistent use of
CopyTextButtoncomponent matching the webhook URL column- Appropriate monospace font for the masked secret display
- Proper truncation and responsive design
- Clear tooltip labeling for the copy action
The implementation correctly separates the display value (masked) from the copy value (full secret), providing good security UX.
size-limit report 📦
|
joaquim-verges
approved these changes
Jul 15, 2025
Merge activity
|
``` <!-- ## 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 -->
graphite-app
bot
force-pushed
the
cursor/display-webhook-secret-in-dashboard-6b00
branch
from
da3d336 to
32add5f
Compare
graphite-app
bot
removed
the
merge-queue
graphite-app
bot
deleted the
cursor/display-webhook-secret-in-dashboard-6b00
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Slack Thread
PR-Codex overview
This PR introduces a new function to mask webhook secrets in the
WebhooksTablecomponent, enhancing security by obscuring sensitive information while still allowing users to copy the original secret.Detailed summary
maskWebhookSecretfunction to mask webhook secrets.WebhooksTablecomponent.CopyTextButtonfor copying the original secret.Summary by CodeRabbit