Add docs link to provider pop up, add better GitHub docs (#829)

<img width="474" height="362" alt="image"
src="https://github.com/user-attachments/assets/01a89abb-9fd3-482e-8c09-b1de23296287"
/>

<!-- ELLIPSIS_HIDDEN -->

----

> [!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.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 484cb1c9c3. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- CURSOR_SUMMARY -->
---

> [!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.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c09974a7fd. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Bilal Godil <bg2002@gmail.com>

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") && (
+            <Typography variant="secondary" type="footnote">
+              Note: GitHub apps must be public with read-only email permissions enabled.
+            </Typography>
+          )}
+
+          <Link
+            className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-2 mt-2")}
+            href={`https://docs.stack-auth.com/docs/concepts/auth-providers/${props.id === "x" ? "x-twitter" : props.id}`}
+            target="_blank"
+            rel="noopener"
+          >
+            See full documentation
+            <ArrowRight size={16} />
+          </Link>
+
         </>
       )}
     />

apps/dashboard/src/components/link.tsx

@@ -16,7 +16,7 @@ type LinkProps = {
   style?: React.CSSProperties,
   scroll?: boolean,
   prefetch?: boolean | "auto",
-};
+} & React.ComponentProps<typeof NextLink>;
 
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(({ onClick, href, children, ...rest }, ref) => {
   const router = useRouter();

docs/templates/concepts/auth-providers/github.mdx

@@ -10,19 +10,37 @@ You should replace these before you go into production.
 </Info>
 
 ## Integration Steps
-
 <Steps>
   <Step>
-    ### 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**.
+    <Tabs defaultValue="oauth-app">
+      <TabsList>
+        <TabsTrigger value="oauth-app">OAuth App</TabsTrigger>
+        <TabsTrigger value="github-app">GitHub App</TabsTrigger>
+      </TabsList>
+      <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**.
+      </TabsContent>
+      <TabsContent value="github-app">
+        ### 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>
+    </Tabs>
   </Step>
-  
+
   <Step>
     ### Enable GitHub OAuth in Stack Auth