From a8fe2aa6ed8f622d5a08a10965e780827732acef Mon Sep 17 00:00:00 2001 From: Zai Shi Date: Tue, 18 Nov 2025 01:20:26 +0100 Subject: [PATCH] Add docs link to provider pop up, add better GitHub docs (#829) image ---- > [!IMPORTANT] > Add documentation link to provider pop-up and improve GitHub setup instructions with tabs for OAuth and GitHub apps. > > - **UI Changes**: > - Add a documentation link to the provider pop-up in `providers.tsx` for detailed provider setup. > - Display a note for GitHub apps requiring public status and read-only email permissions in `providers.tsx`. > - **Documentation**: > - Update `github.mdx` to include tabs for OAuth App and GitHub App setup instructions. > - Add detailed steps for creating GitHub Apps, including enabling read-only email permissions and making the app public. > > This description was created by [Ellipsis](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral) for 484cb1c9c3c3ac02b93d31b70191ce8587e2ed64. You can [customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this summary. It will automatically update as commits are pushed. ## Summary by CodeRabbit * **New Features** * Show an informational note for GitHub OAuth providers when "shared" is not selected, clarifying the app must be public and have read-only email permission. * Add a small outlined link-style button beneath provider settings that opens the provider's documentation in a new tab (includes a right-arrow cue). * **Documentation** * Update GitHub auth docs with tabs separating OAuth App and GitHub App setup steps for clearer guidance. * **Notes** * No public API changes; visual/UI and docs updates only. --- > [!NOTE] > Adds a docs link and GitHub app note to the provider dialog, and updates GitHub auth docs with tabbed OAuth vs GitHub App setup steps. > > - **Dashboard UI (`apps/.../providers.tsx`)**: > - Add "See full documentation" link button pointing to provider-specific docs. > - Show GitHub-specific note when not using shared keys: app must be public and have read-only email permission. > - **Docs (`docs/templates/concepts/auth-providers/github.mdx`)**: > - Introduce tabs separating OAuth App and GitHub App setup. > - Add steps for GitHub App: enable read-only email permission and make app public. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit c09974a7fdece889a693d495953fd500c940bc97. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot). --------- Co-authored-by: Konsti Wohlwend Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: Bilal Godil --- .../[projectId]/auth-methods/providers.tsx | 21 +++++++++- apps/dashboard/src/components/link.tsx | 2 +- .../concepts/auth-providers/github.mdx | 38 ++++++++++++++----- 3 files changed, 49 insertions(+), 12 deletions(-) diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx index 600a28a41..f88da29d9 100644 --- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx +++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx @@ -1,12 +1,14 @@ "use client"; import { FormDialog } from "@/components/form-dialog"; import { InputField, SwitchField } from "@/components/form-fields"; +import { Link } from "@/components/link"; import { getPublicEnvVar } from '@/lib/env'; import { AdminProject } from "@stackframe/stack"; import { yupBoolean, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields"; import { sharedProviders } from "@stackframe/stack-shared/dist/utils/oauth"; -import { ActionDialog, Badge, BrandIcons, InlineCode, Label, SimpleTooltip, Typography } from "@stackframe/stack-ui"; +import { ActionDialog, Badge, BrandIcons, InlineCode, Label, SimpleTooltip, Typography, buttonVariants, cn } from "@stackframe/stack-ui"; import clsx from "clsx"; +import { ArrowRight } from "lucide-react"; import { useState } from "react"; import * as yup from "yup"; @@ -166,6 +168,23 @@ export function ProviderSettingDialog(props: Props & { open: boolean, onClose: ( )} )} + + {props.id === 'github' && !form.watch("shared") && ( + + Note: GitHub apps must be public with read-only email permissions enabled. + + )} + + + See full documentation + + + )} /> diff --git a/apps/dashboard/src/components/link.tsx b/apps/dashboard/src/components/link.tsx index 0b0aa114d..db19e3458 100644 --- a/apps/dashboard/src/components/link.tsx +++ b/apps/dashboard/src/components/link.tsx @@ -16,7 +16,7 @@ type LinkProps = { style?: React.CSSProperties, scroll?: boolean, prefetch?: boolean | "auto", -}; +} & React.ComponentProps; export const Link = React.forwardRef(({ onClick, href, children, ...rest }, ref) => { const router = useRouter(); diff --git a/docs/templates/concepts/auth-providers/github.mdx b/docs/templates/concepts/auth-providers/github.mdx index 8d0e60bba..051c67457 100644 --- a/docs/templates/concepts/auth-providers/github.mdx +++ b/docs/templates/concepts/auth-providers/github.mdx @@ -10,19 +10,37 @@ You should replace these before you go into production. ## Integration Steps - - ### 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**. + + + OAuth App + GitHub 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**. + + + ### 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. + + - + ### Enable GitHub OAuth in Stack Auth