Conversation
Flo4604
requested review from
chronark,
mcstepp,
ogzhanolguncu and
perkinsjr
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
📝 WalkthroughWalkthroughSwitched the dashboard "Verify Key" curl snippet to POST https://api.unkey.com/v2/keys.verifyKey with an Authorization: Bearer <UNKEY_ROOT_KEY> header, simplified the JSON body to {"key":""}, and added a "Root Key Required" Alert with required-permission guidance and a link. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as "Dashboard UI"
participant API as "Unkey API\napi.unkey.com"
User->>UI: Open "Verify Key" snippet
Note over UI: Shows curl POST /v2/keys.verifyKey\nHeader: Authorization: Bearer <UNKEY_ROOT_KEY>\nBody: {"key":"<keyValue>"}\nDisplays Alert: Root Key Required (api.*.verify_key or api.{apiId}.verify_key)
User->>API: POST /v2/keys.verifyKey (Auth: Bearer root key, body: {"key":...})
alt Has required permission
API-->>User: 200 OK (verification result)
else Lacks permission
API-->>User: 4xx Permission error
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (2)**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
🧬 Code graph analysis (1)apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx (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). (4)
🔇 Additional comments (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
|
What's a root key? How can I find a root key? The first two questions that will be asked. This dialog doesn't provide that info and also doesn't provide a way for me to get there. The dialog change is fine, but we gotta guide first time users somewhere |
Light mode is broken I guess and probably the reason is, our dashboard uses a different type of ordering for colors. E.g. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx (1)
64-71: Clipboard copies the real key even when the snippet is hiddenWhen the key is masked in the UI, CopyButton still copies the unmasked snippet, which can cause accidental leakage. Make clipboard content mirror visibility.
Apply:
- copyButton={<CopyButton value={snippet} />} + copyButton={ + <CopyButton + value={showKeyInSnippet ? snippet : snippet.replace(keyValue, maskedKey)} + /> + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{js,jsx,ts,tsx}: Use Biome for formatting and linting in TypeScript/JavaScript projects
Prefer named exports over default exports in TypeScript/JavaScript, except for Next.js pages
Files:
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Follow strict TypeScript configuration
Use Zod for runtime validation in TypeScript projects
Files:
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
⏰ 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). (3)
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Go API Local / Test
- GitHub Check: Build / Build
🔇 Additional comments (2)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx (2)
33-36: ✅ Verification Complete: No Changes NeededThe
key-secret-section.tsxcomponent correctly uses the v2 endpoint and the permission names align with server-side checks:
- The curl snippet in
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsxpoints to/v2/keys.verifyKey(not v1) and includes the right headers.- Permission keys throughout the codebase are consistently defined as
"verify_key"(plural snake_case) and referenced asapi.*.verify_keyorapi.{apiId}.verify_key, matching both the TypeScript UI and Go server handlers.No outstanding inconsistencies or deprecated v1 references remain in this component.
4-4: Alert “warn” variant is valid – no changes required; thealertVariantsdefinition inapps/dashboard/components/ui/alert.tsxexplicitly includeswarnalongsidedefaultandalert.
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
Show resolved
Hide resolved
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
Show resolved
Hide resolved
|
Complementary to James comment, I think redirecting users to a root key creation screen with required permissions selected would be dope. |
|
I fixed the light mode version in the second commit. Should we direct users to settings/root-keys, but its not like that site explains what a root key is or does |
|
Btw that screenshot was after your light fix commit. And we can do something like this , like click here to create required permissions for root key bla bla - Text could be better tho |
|
A minor update to these docs Link docs: https://www.unkey.com/docs/security/root-keys#root-keys Then send them to root keys, if they don’t read it, that’s fine but then we’ve done our due diligence. |
|
It looks like this now: |
|
|
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx (1)
68-71: Ensure copied value matches displayed (masked vs. unmasked) snippetCopyButton is currently wired to always copy the full secret (
snippet), even when the UI shows a masked version—this can inadvertently expose the key when users expect it to remain hidden.• Location:
- apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx, lines 68–71
• Suggested change:
- copyButton={<CopyButton value={snippet} />} + copyButton={ + <CopyButton + value={ + showKeyInSnippet + ? snippet + : snippet.replace(keyValue, maskedKey) + } + /> + }• Alternative: if the intent is to always copy the real key (for convenience), surface that decision in the UI—e.g., add helper text like “Copies full secret, even when masked” next to the button.
♻️ Duplicate comments (1)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx (1)
32-39: Harden the curl snippet: trim base URL, prefer env for secret, and make JSON body construction safeAvoid double “//” when NEXT_PUBLIC_UNKEY_API_URL ends with a slash, encourage env usage for the root key, add curl flags that fail fast, and build the JSON body via JSON.stringify to prevent quoting/escaping pitfalls if keyValue ever contains special characters.
Apply:
- const snippet = `curl -XPOST '${ - process.env.NEXT_PUBLIC_UNKEY_API_URL ?? "https://api.unkey.com" - }/v2/keys.verifyKey' \\ - -H 'Authorization: Bearer <UNKEY_ROOT_KEY>' \\ - -H 'Content-Type: application/json' \\ - -d '{ - "key": "${keyValue}" - }'`; + const baseUrl = (process.env.NEXT_PUBLIC_UNKEY_API_URL ?? "https://api.unkey.com").replace(/\/+$/, ""); + const body = JSON.stringify({ key: keyValue }); + const snippet = `curl -sSf -X POST "${baseUrl}/v2/keys.verifyKey" \ + -H "Authorization: Bearer $UNKEY_ROOT_KEY" \ + -H "Content-Type: application/json" \ + -d '${body}'`;Notes:
- -sSf keeps output clean and treats non-2xx responses as failures.
- Double quotes on the Authorization header enable $UNKEY_ROOT_KEY expansion in POSIX shells.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{js,jsx,ts,tsx}: Use Biome for formatting and linting in TypeScript/JavaScript projects
Prefer named exports over default exports in TypeScript/JavaScript, except for Next.js pages
Files:
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Follow strict TypeScript configuration
Use Zod for runtime validation in TypeScript projects
Files:
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
⏰ 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). (4)
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Go API Local / Test
- GitHub Check: Build / Build
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx (1)
4-4: LGTM on UI Alert importsImports look correct and suit client components. No concerns here.
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
Show resolved
Hide resolved
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
Show resolved
Hide resolved
|
Sure |
|
lemme check 🫡 |
|
@Flo4604 some context: css automatically switches between light and dark because both are defined in our shared css file you don't need to define it separately(I know you didnt) just saying 😄 |
Let's do it like this colors are pretty much the same, but layouting is a bit different. It's always better to align your items with flex or grid rather than manually tweaking with margins or padding. |
|
will do |
|
@Flo4604 let's do the changes I requested and merge this |
|
this is how it looks now |
|
🫡 |
|
|
Graphite Automations"Post a GIF when PR approved" took an action on this PR • (08/29/25)1 gif was posted to this PR based on Andreas Thomas's automation. |
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
3 participants
What does this PR do?
Updates the curl example to use the V2 endpoint instead of V1
Also adds a warning for people to ensure the verify permissions, I think we can get rid of that later at some point but we should rather tell people before.
Type of change
How should this be tested?
Checklist
Create a key, see warning and correct CURL example.
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
Documentation