feat(dashboard): scoped-key permissions UI, OAuth consent screen, MCP connect#225
Conversation
… connect - API key creation: "Full access" (default) vs "Custom" permission selector with a grouped scope checklist; keys table shows per-key permission badges - New OAuth consent screen at /oauth/consent (Clerk-gated): shows the requesting client, requested scopes, and a project selector; Approve/Deny POSTs to /api/oauth/authorize/decision and follows the returned redirect - Integrate page: "Connect via MCP" section with the hosted MCP URL and config snippets for token auth and OAuth - Shared dashboard scope catalog (src/lib/scopes.ts) mirroring the API taxonomy Co-Authored-By: Duyet Le <[email protected]> Co-Authored-By: duyetbot <[email protected]>
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
|
Warning Review limit reached
More reviews will be available in 33 minutes and 22 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (8)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces Model Context Protocol (MCP) integration instructions, adds granular permission scope selection when creating API keys, and implements an OAuth consent screen for authorizing third-party application access to projects. The review feedback focuses on optimizing the consent screen by initializing URL parameters directly in state, adding a cleanup flag to prevent state updates on unmounted components, and omitting the project ID when denying authorization. Additionally, suggestions were made to improve keyboard accessibility in the key creation form and to make the scope labeling utility more robust against malformed scope strings.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const [params, setParams] = useState<URLSearchParams | null>(null); | ||
| const [projects, setProjects] = useState<ProjectItem[]>([]); | ||
| const [projectId, setProjectId] = useState(""); | ||
| const [loadingProjects, setLoadingProjects] = useState(true); | ||
| const [submitting, setSubmitting] = useState(false); | ||
| const [error, setError] = useState<string | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| setParams(new URLSearchParams(window.location.search)); | ||
| }, []); |
There was a problem hiding this comment.
Since ConsentScreen is rendered with client:only="react" in Astro, it is guaranteed to run only on the client side. Therefore, window is always defined during the initial render. We can initialize params directly in useState to avoid an unnecessary state update and double-render on mount. Using a fallback check for typeof window also ensures safety during any static analysis or build-time checks.
const [params] = useState<URLSearchParams>(
() => new URLSearchParams(typeof window !== "undefined" ? window.location.search : "")
);
const [projects, setProjects] = useState<ProjectItem[]>([]);
const [projectId, setProjectId] = useState("");
const [loadingProjects, setLoadingProjects] = useState(true);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
| useEffect(() => { | ||
| if (!isSignedIn) return; | ||
| api<{ data: ProjectItem[] }>("/v1/projects") | ||
| .then((res) => { | ||
| setProjects(res.data); | ||
| if (res.data[0]) setProjectId(res.data[0].id); | ||
| }) | ||
| .catch((e: unknown) => setError(e instanceof Error ? e.message : "Failed to load projects")) | ||
| .finally(() => setLoadingProjects(false)); | ||
| }, [isSignedIn]); |
There was a problem hiding this comment.
To prevent potential memory leaks and state updates on an unmounted component, add a cleanup flag to the useEffect hook.
useEffect(() => {
if (!isSignedIn) return;
let active = true;
api<{ data: ProjectItem[] }>("/v1/projects")
.then((res) => {
if (!active) return;
setProjects(res.data);
if (res.data[0]) setProjectId(res.data[0].id);
})
.catch((e: unknown) => {
if (!active) return;
setError(e instanceof Error ? e.message : "Failed to load projects");
})
.finally(() => {
if (!active) return;
setLoadingProjects(false);
});
return () => {
active = false;
};
}, [isSignedIn]);
| const res = await api<{ redirect: string }>("/oauth/authorize/decision", { | ||
| method: "POST", | ||
| body: JSON.stringify({ | ||
| approve, | ||
| client_id: clientId, | ||
| redirect_uri: redirectUri, | ||
| scopes, | ||
| code_challenge: codeChallenge, | ||
| code_challenge_method: codeChallengeMethod, | ||
| state, | ||
| resource, | ||
| project_id: projectId, | ||
| }), | ||
| }); |
There was a problem hiding this comment.
When denying authorization (approve is false), sending project_id is unnecessary and could be empty/invalid. It is cleaner to only include project_id in the payload when the request is approved.
| const res = await api<{ redirect: string }>("/oauth/authorize/decision", { | |
| method: "POST", | |
| body: JSON.stringify({ | |
| approve, | |
| client_id: clientId, | |
| redirect_uri: redirectUri, | |
| scopes, | |
| code_challenge: codeChallenge, | |
| code_challenge_method: codeChallengeMethod, | |
| state, | |
| resource, | |
| project_id: projectId, | |
| }), | |
| }); | |
| const res = await api<{ redirect: string }>("/oauth/authorize/decision", { | |
| method: "POST", | |
| body: JSON.stringify({ | |
| approve, | |
| client_id: clientId, | |
| redirect_uri: redirectUri, | |
| scopes, | |
| code_challenge: codeChallenge, | |
| code_challenge_method: codeChallengeMethod, | |
| state, | |
| resource, | |
| ...(approve ? { project_id: projectId } : {}), | |
| }), | |
| }); |
| onKeyDown={(e) => { | ||
| if (e.key === "Enter" && mode === "full") { | ||
| e.preventDefault(); | ||
| submit(); | ||
| } | ||
| }} |
There was a problem hiding this comment.
Disabling Enter key submission when mode === "custom" is an unnecessary restriction for keyboard users. We can allow Enter key submission in both modes as long as the form is valid (i.e., not empty in custom mode).
| onKeyDown={(e) => { | |
| if (e.key === "Enter" && mode === "full") { | |
| e.preventDefault(); | |
| submit(); | |
| } | |
| }} | |
| onKeyDown={(e) => { | |
| if (e.key === "Enter" && !customEmpty) { | |
| e.preventDefault(); | |
| submit(); | |
| } | |
| }} |
| export function scopeLabel(scope: string): string { | ||
| if (scope === "*") return "Full access"; | ||
| const [resource, action] = scope.split(":"); | ||
| if (action === "*") return `${resource} (all)`; | ||
| return `${resource}:${action}`; | ||
| } |
There was a problem hiding this comment.
If a scope string does not contain a colon (e.g., a malformed or custom scope), action will be undefined, resulting in a label like "resource:undefined". Adding a fallback for when action is missing makes the helper more robust.
| export function scopeLabel(scope: string): string { | |
| if (scope === "*") return "Full access"; | |
| const [resource, action] = scope.split(":"); | |
| if (action === "*") return `${resource} (all)`; | |
| return `${resource}:${action}`; | |
| } | |
| export function scopeLabel(scope: string): string { | |
| if (scope === "*") return "Full access"; | |
| const [resource, action] = scope.split(":"); | |
| if (!action) return resource; | |
| if (action === "*") return resource + " (all)"; | |
| return resource + ":" + action; | |
| } |
1 participant
Wave 1 — Dashboard UI for the MCP/OAuth/scoped-keys feature
Builds on the merged backend (scoped keys #221, OAuth #223, MCP #224, docs #222).
U4 — Key-permissions UI
API_SCOPEStaxonomy.scopes(omitted for full access).U3 — OAuth consent screen (
/oauth/consent)/authorizequery params, shows the requesting client (redirect host), the requested scopes as badges, and a project selector (the token is project-scoped)./api/oauth/authorize/decision(Clerk cookie) and follow the returned{ redirect }.U5 — Connect via MCP
https://agentstate.app/api/mcp) with copyablemcp.jsonsnippets for token auth and OAuth.Shared
src/lib/scopes.ts— dashboard scope catalog +scopeLabel()(handles*/resource:*), reused by the key form and consent screen.Verification
bun run build✅ (all 14 pages incl. new/oauth/consent); Biome clean on changed files.Co-Authored-By: Duyet Le [email protected]
Co-Authored-By: duyetbot [email protected]