Add docs link to provider pop up, add better GitHub docs #829
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThe changes add a conditional info note and a documentation link button to the GitHub OAuth provider settings in the dashboard UI, and update the GitHub auth provider docs to a tabbed layout separating "OAuth App" and "GitHub App" instructions with new GitHub App details. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DashboardUI
participant DocsSite
User->>DashboardUI: Open GitHub provider settings
DashboardUI-->>User: Render settings form
alt Provider is GitHub & "shared" not selected
DashboardUI-->>User: Show info note about public app & email permissions
end
User->>DashboardUI: Click "View full documentation" button
DashboardUI->>DocsSite: Open provider docs URL in new tab
DocsSite-->>User: Display docs with tabs (OAuth App / GitHub App)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
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. ✨ 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 (
|
|
✨ No issues found! Your code is sparkling clean! ✨ 🗒️ View all ignored comments in this repo
Need help? Join our Discord for support! |
There was a problem hiding this comment.
Greptile Summary
This PR enhances the OAuth provider configuration experience by adding direct documentation links and GitHub-specific guidance. In the dashboard's provider settings dialog (providers.tsx), a new documentation link is added that dynamically constructs URLs to provider-specific documentation, opening in a new tab for easy reference. The implementation includes special handling for GitHub providers with a helpful note about requiring public apps with email permissions.
Concurrently, the GitHub OAuth documentation (github.mdx) has been significantly improved with a tabbed interface that covers both OAuth Apps and GitHub Apps setup processes. This addresses the reality that GitHub offers two different OAuth integration methods, each with distinct configuration requirements. The documentation now provides clear, step-by-step instructions for both approaches, including critical details about permissions and app visibility settings.
These changes work together to create a seamless user experience: when users encounter the GitHub provider in the dashboard, they can click the documentation link to access the newly enhanced GitHub docs that cover both OAuth methods. This integration reduces the need for users to search for setup instructions externally and provides context-aware guidance directly within the configuration workflow.
Confidence score: 4/5
- This PR is safe to merge with minimal risk of breaking existing functionality
- Score reflects straightforward UI enhancements and documentation improvements with no complex logic changes
- Pay close attention to the dynamic URL construction in
providers.tsxfor potential edge cases
2 files reviewed, 2 comments
| <Link | ||
| className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-2 mt-2")} | ||
| href={`https://docs.stack-auth.com/docs/next/concepts/auth-providers/${props.id}`} | ||
| target="_blank" |
There was a problem hiding this comment.
style: Add rel="noopener noreferrer" for security when opening external links in new tabs.
| target="_blank" | |
| target="_blank" | |
| rel="noopener noreferrer" |
There was a problem hiding this comment.
| target="_blank" | |
| target="_blank" | |
| rel="noopener" |
There was a problem hiding this comment.
referrer is fine but we want noopener
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
Outdated
Show resolved
Hide resolved
| <Link | ||
| className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-2 mt-2")} | ||
| href={`https://docs.stack-auth.com/docs/next/concepts/auth-providers/${props.id}`} | ||
| target="_blank" |
There was a problem hiding this comment.
| target="_blank" | |
| target="_blank" | |
| rel="noopener" |
| <Link | ||
| className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-2 mt-2")} | ||
| href={`https://docs.stack-auth.com/docs/next/concepts/auth-providers/${props.id}`} | ||
| target="_blank" |
There was a problem hiding this comment.
referrer is fine but we want noopener
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
Outdated
Show resolved
Hide resolved
|
Claude finished @fomalhautb's task —— View job Pull Request ReviewI've reviewed the changes in this PR and overall they look good! The implementation adds helpful UX improvements while maintaining code quality. Here's my detailed feedback: Todo List:
✅ StrengthsUI/UX Improvements:
Documentation Enhancements:
|
|
Claude finished @fomalhautb's task —— View job Pull Request Review I've reviewed the changes in this PR and overall they look good! The implementation adds helpful UX improvements while maintaining code quality. Here's my detailed feedback: Todo List:
✅ StrengthsUI/UX Improvements:
Documentation Enhancements:
|
|
Claude finished @fomalhautb's task —— View job Pull Request Review I've reviewed the changes in this PR and overall they look good! The implementation adds helpful UX improvements while maintaining code quality. Here's my detailed feedback: Todo List:
✅ StrengthsUI/UX Improvements:
Documentation Enhancements:
|
|
Claude finished @fomalhautb's task —— View job Pull Request Review I've reviewed the changes in this PR and overall they look good! The implementation adds helpful UX improvements while maintaining code quality. Here's my detailed feedback: Todo List:
✅ StrengthsUI/UX Improvements:
Documentation Enhancements:
|
|
Claude finished @fomalhautb's task —— View job Pull Request Review I've reviewed the changes in this PR and overall they look good! The implementation adds helpful UX improvements while maintaining code quality. Here's my detailed feedback: Todo List:
✅ StrengthsUI/UX Improvements:
Documentation Enhancements:
|
…/auth-methods/providers.tsx Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
|
Claude finished @fomalhautb's task —— View job Pull Request ReviewI've reviewed the changes in this PR and overall they look good! The implementation adds helpful UX improvements while maintaining code quality. Here's my detailed feedback: Todo List:
✅ StrengthsUI/UX Improvements:
Documentation Enhancements:
|
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
|
Claude finished @fomalhautb's task —— View job Pull Request Review I've reviewed the changes in this PR and overall they look good! The implementation adds helpful UX improvements while maintaining code quality. Here's my detailed feedback: Todo List:
✅ StrengthsUI/UX Improvements:
Documentation Enhancements:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/templates/concepts/auth-providers/github.mdx (1)
21-29: Optional: Clarify email scope requirement for OAuth Apps.Many setups need the user:email scope for primary email retrieval. If Stack Auth requests this by default, a brief note helps reduce confusion; otherwise, instruct users to add it.
Apply this minimal addition:
<TabsContent value="oauth-app"> ### Create a GitHub OAuth App 1. Navigate to your [GitHub Developer Settings](https://github.com/settings/developers). 2. Click the **New OAuth App** button. 3. Enter a name for your application, homepage URL, and a description. 4. For **Authorization callback URL**, add `https://api.stack-auth.com/api/v1/auth/oauth/callback/github` 5. Click **Register application** 6. Save the **Client ID** and click **Generate a new client secret** to create your **Client Secret**. + 7. Stack Auth requests the "user:email" scope during OAuth to retrieve the user's email; no additional GitHub configuration is required. </TabsContent>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
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 (2)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx(2 hunks)docs/templates/concepts/auth-providers/github.mdx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.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). (6)
- GitHub Check: all-good
- GitHub Check: lint_and_build (latest)
- GitHub Check: docker
- GitHub Check: restart-dev-and-test
- GitHub Check: setup-tests
- GitHub Check: Security Check
🔇 Additional comments (2)
docs/templates/concepts/auth-providers/github.mdx (2)
15-19: LGTM: Clear tabbed layout separating OAuth App vs GitHub App.Nice UX improvement—this makes the two paths unambiguous.
31-40: Confirmed — backend uses the same callback URL for GitHub (no separate GitHub‑App callback path found).Short verification: I searched the repo and the GitHub OAuth provider is configured to use NEXT_PUBLIC_STACK_API_URL + "/api/v1/auth/oauth/callback/github". I did not find a distinct callback route for "GitHub App" — other providers use the same per-provider callback pattern, and the code explicitly handles missing email permission (403) for GitHub apps. The docs' instruction to use https://api.stack-auth.com/api/v1/auth/oauth/callback/github is consistent with the backend.
Locations of interest:
- apps/backend/src/oauth/providers/github.tsx
- redirectUri: getEnvVariable("NEXT_PUBLIC_STACK_API_URL") + "/api/v1/auth/oauth/callback/github"
- apps/backend/src/oauth/providers/mock.tsx
- redirectUri:
${getEnvVariable("NEXT_PUBLIC_STACK_API_URL")}/api/v1/auth/oauth/callback/${providerId}- docs/templates/concepts/auth-providers/github.mdx
- lines that instruct adding
https://api.stack-auth.com/api/v1/auth/oauth/callback/github(OAuth App and GitHub App tabs)- apps/dashboard/src/.../providers.tsx
- UI note about GitHub Apps (must be public + email permission)
Conclusion: docs are correct — no code change required.
| ### When using GitHub apps | ||
| 1. Navigate to your [GitHub Developer Settings](https://github.com/settings/developers). | ||
| 2. Click the **New GitHub App** button. | ||
| 3. Enter a name for your application, homepage URL, and a description. | ||
| 4. For **Authorization callback URL**, add `https://api.stack-auth.com/api/v1/auth/oauth/callback/github` | ||
| 5. Make sure to enable the read-only email address permission. | ||
| 6. Click **Create GitHub App** | ||
| 7. Save the **Client ID** and click **Generate a new client secret** to create your **Client Secret**. | ||
| 8. Make sure to make the app public in the advanced settings. | ||
| </TabsContent> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix GitHub App heading and callback label; clarify permissions and public setting.
The UI label in GitHub is “User authorization callback URL” (not “Authorization callback URL”). Also, tighten the wording for permissions and where to set Public visibility. Mislabeling here can cause setup friction.
Apply this diff:
- ### When using GitHub apps
+ ### Create a GitHub App
1. Navigate to your [GitHub Developer Settings](https://github.com/settings/developers).
2. Click the **New GitHub App** button.
3. Enter a name for your application, homepage URL, and a description.
- 4. For **Authorization callback URL**, add `https://api.stack-auth.com/api/v1/auth/oauth/callback/github`
- 5. Make sure to enable the read-only email address permission.
+ 4. For **User authorization callback URL**, add `https://api.stack-auth.com/api/v1/auth/oauth/callback/github`
+ 5. Under **Account permissions**, set **Email addresses** to **Read-only**.
6. Click **Create GitHub App**
7. Save the **Client ID** and click **Generate a new client secret** to create your **Client Secret**.
- 8. Make sure to make the app public in the advanced settings.
+ 8. Under **General > Basic information**, set the app visibility to **Public**.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ### When using GitHub apps | |
| 1. Navigate to your [GitHub Developer Settings](https://github.com/settings/developers). | |
| 2. Click the **New GitHub App** button. | |
| 3. Enter a name for your application, homepage URL, and a description. | |
| 4. For **Authorization callback URL**, add `https://api.stack-auth.com/api/v1/auth/oauth/callback/github` | |
| 5. Make sure to enable the read-only email address permission. | |
| 6. Click **Create GitHub App** | |
| 7. Save the **Client ID** and click **Generate a new client secret** to create your **Client Secret**. | |
| 8. Make sure to make the app public in the advanced settings. | |
| </TabsContent> | |
| ### Create a GitHub App | |
| 1. Navigate to your [GitHub Developer Settings](https://github.com/settings/developers). | |
| 2. Click the **New GitHub App** button. | |
| 3. Enter a name for your application, homepage URL, and a description. | |
| 4. For **User authorization callback URL**, add `https://api.stack-auth.com/api/v1/auth/oauth/callback/github` | |
| 5. Under **Account permissions**, set **Email addresses** to **Read-only**. | |
| 6. Click **Create GitHub App** | |
| 7. Save the **Client ID** and click **Generate a new client secret** to create your **Client Secret**. | |
| 8. Under **General > Basic information**, set the app visibility to **Public**. | |
| </TabsContent> |
🤖 Prompt for AI Agents
In docs/templates/concepts/auth-providers/github.mdx around lines 31 to 40, the
GitHub Apps section mislabels the callback field and needs clearer wording on
permissions and public visibility; change the heading to indicate "When using
GitHub Apps", update step 4 to use the exact UI label "User authorization
callback URL" and set the callback to
https://api.stack-auth.com/api/v1/auth/oauth/callback/github, reword step 5 to
specify enabling "Read-only access to the user's email address" (or the precise
permission name shown in the GitHub UI), and move/clarify that making the app
public is done in the app's Advanced settings by toggling Public visibility.
|
Claude finished @fomalhautb's task —— View job Pull Request Review I've reviewed the changes in this PR and overall they look good! The implementation adds helpful UX improvements while maintaining code quality. Here's my detailed feedback: Todo List:
✅ StrengthsUI/UX Improvements:
Documentation Enhancements:
|
Important
Add documentation link to provider pop-up and improve GitHub setup instructions with tabs for OAuth and GitHub apps.
providers.tsxfor detailed provider setup.providers.tsx.github.mdxto include tabs for OAuth App and GitHub App setup instructions.This description was created by
for 484cb1c. You can customize this summary. It will automatically update as commits are pushed.
Summary by CodeRabbit
New Features
Documentation