Add an OAuth provider for Twitch #728

Nachwahl · 2025-06-25T15:36:25Z

Important

Add Twitch as a new OAuth provider, updating backend logic and UI components to support Twitch authentication.

Behavior:
- Add TwitchProvider class in providers/twitch.tsx to handle OAuth with Twitch, including user info post-processing.
- Update _providers in index.tsx to include TwitchProvider.
- Add TWITCH to StandardOAuthProviderType enum in schema.prisma.
UI Components:
- Add Twitch icon and color in brand-icons.tsx and BRAND_COLORS.
- Update ProviderIcon, ProviderSettingDialog, and OAuthButton to support Twitch in providers.tsx and oauth-button.tsx.
Misc:
- Add twitch to standardProviders in oauth.tsx.

^{This description was created by}^{for 08c0de5. You can customize this summary. It will automatically update as commits are pushed.}

CLAassistant · 2025-06-25T15:36:32Z

All committers have signed the CLA.

vercel · 2025-06-25T15:36:32Z

@Nachwahl is attempting to deploy a commit to the Stack Team on Vercel.

A member of the Team first needs to authorize it.

recurseml · 2025-06-25T15:36:37Z

⚠️ Only 5 files will be analyzed due to processing limits.

greptile-apps

PR Summary

Added Twitch OAuth provider integration across the stack with UI components and backend support.

Potential security concern in apps/backend/src/oauth/providers/twitch.tsx needs attention for proper error handling and data validation
Uses Plain Object for response handling in Twitch provider instead of Map, consider using Map to prevent prototype pollution (see postProcessUserInfo method)
New Twitch provider follows consistent pattern with existing OAuth providers but needs additional validation
Added brand-consistent purple (#9146FF) Twitch icon implementation in packages/stack-ui/src/components/brand-icons.tsx
Standardized OAuth provider type with 'TWITCH' enum in Prisma schema for database consistency

_{7 files reviewed, 2 comments}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-06-25T15:36:54Z

apps/backend/src/oauth/providers/twitch.tsx

+        "Client-Id": this.oauthClient.client_id as string,
+      },
+    }).then((res) => res.json());
+


style: Remove extra blank line.

Suggested change

}).then((res) => res.json());

const userInfo = info.data?.[0];

greptile-apps · 2025-06-25T15:37:00Z

packages/stack-ui/src/components/brand-icons.tsx

@@ -215,4 +273,5 @@ export const BRAND_COLORS: Record<string, string> = {
  linkedin: '#0A66C2',
  x: '#000000',
  apple: '#000000',
+  twitch: '#ffffff'


style: The twitch brand color should be '#9146FF' to match the official Twitch purple used in the icon

recurseml · 2025-06-25T15:38:13Z

apps/backend/src/oauth/index.tsx

@@ -17,6 +17,7 @@ import { MicrosoftProvider } from "./providers/microsoft";
 import { MockProvider } from "./providers/mock";
 import { SpotifyProvider } from "./providers/spotify";
 import { XProvider } from "./providers/x";
+import { TwitchProvider } from "./providers/twitch";


The addition of TwitchProvider might not be fully compatible with the OAuth provider system. While the provider file exists and extends OAuthBaseProvider, it has not implemented the required static 'create' method that is used in the getProvider() function. This will cause runtime errors when trying to initialize the Twitch provider through getProvider().

React with 👍 to tell me that this comment was useful, or 👎 if not (and I'll stop posting more comments like this in the future)

recurseml · 2025-06-25T15:38:15Z

apps/backend/src/oauth/providers/twitch.tsx

+    }).then((res) => res.json());
+
+
+    const userInfo = info.data?.[0];


Unsafe access of user info properties. While info.data is checked with optional chaining (?.), the code proceeds to access properties of userInfo without verifying its existence. If the API response is malformed or empty, accessing properties like userInfo.id will cause runtime errors. Should add validation like: if (!userInfo) { throw new Error('Failed to get user info from Twitch response'); }

React with 👍 to tell me that this comment was useful, or 👎 if not (and I'll stop posting more comments like this in the future)

recurseml · 2025-06-25T15:38:17Z

packages/stack-shared/src/utils/oauth.tsx

@@ -1,4 +1,4 @@
-export const standardProviders = ["google", "github", "microsoft", "spotify", "facebook", "discord", "gitlab", "bitbucket", "linkedin", "apple", "x"] as const;
+export const standardProviders = ["google", "github", "microsoft", "spotify", "facebook", "discord", "gitlab", "bitbucket", "linkedin", "apple", "x", "twitch"] as const;


Adding 'twitch' to standardProviders requires a corresponding update to the StandardOAuthProviderType enum in the Prisma schema (schema.prisma). The enum is missing the TWITCH value which will cause type mismatches and potential runtime errors when handling OAuth authentication for Twitch. A database migration will be needed to add this new enum value.

React with 👍 to tell me that this comment was useful, or 👎 if not (and I'll stop posting more comments like this in the future)

recurseml · 2025-06-25T15:38:19Z

😱 Found 3 issues. Time to roll up your sleeves! 😱

🗒️ View all ignored comments in this repo

The constraint 'TokenStoreType extends string' is too restrictive. It should likely be 'TokenStoreType extends string | object' to match the condition check in line 113 where TokenStoreType is checked against {}
Return type mismatch - the interface declares useUsers() returning ServerUser[] but the Team interface that this extends declares useUsers() returning TeamUser[]
There is a syntax error in the super constructor call due to the ellipsis operator used incorrectly. Objects aren't being merged correctly. This syntax usage can lead to runtime errors when trying to pass the merged object to 'super()'. Verify that the intended alterations to the object occur before or outside of the super() call if needed.
Throwing an error when no active span is found is too aggressive. The log function should gracefully fallback to console.log or another logging mechanism when there's no active span, since not all execution contexts will have an active span. This makes the code less resilient and could break functionality in non-traced environments.

📚 Relevant Docs

Function sets backendContext with a new configuration but doesn't pass 'defaultProjectKeys'. Since defaultProjectKeys is required in the type definition and cannot be updated (throws error if tried to set), this will cause a type error.
The schema is using array syntax for pick() which is incorrect for Yup schemas. The pick() method in Yup expects individual arguments, not an array. Should be changed to: emailConfigSchema.pick('type', 'host', 'port', 'username', 'sender_name', 'sender_email')

📚 Relevant Docs

Creating a refresh token with current timestamp as expiration means it expires immediately. Should set a future date for token expiration.
The 'tools' object is initialized as an empty object, even though 'tools' is presumably expected to contain tool definitions. This could cause the server capabilities to lack necessary tool configurations, thus potentially impacting functionalities that depend on certain tool setups.

📚 Relevant Docs

'STACK_SECRET_SERVER_KEY' is potentially being included in every request header without checking its existence again here. Although it's checked during initialization, this could lead to security issues as it's exposed in all communications where the header is logged or captured.

📚 Relevant Docs

When adding 'use client' directive at the beginning, it doesn't check if file.text already contains the 'use client' directive. This could lead to duplicate 'use client' directives if the file already has one.

📚 Relevant Docs

^{Need help? Join our Discord for support!
https://discord.gg/NCpkJ4kF}

patched-codes · 2025-06-25T15:38:37Z

oauth-button.mdx

Update the provider prop description to include 'twitch' as an example:
- Current: "The name of the OAuth provider (e.g., 'google', 'github', 'facebook')"
- Suggested: "The name of the OAuth provider (e.g., 'google', 'github', 'facebook', 'twitch')"

This change is required to reflect the addition of Twitch as a new OAuth provider in the OAuthButton component.

Please ensure these changes are made in the documentation to keep it consistent with the recent updates.

ellipsis-dev · 2025-06-25T15:38:48Z

apps/backend/src/oauth/providers/twitch.tsx

+      authorizationEndpoint: "https://id.twitch.tv/oauth2/authorize",
+      tokenEndpoint: "https://id.twitch.tv/oauth2/token",
+      tokenEndpointAuthMethod: "client_secret_post",
+      redirectUri: getEnvVariable("NEXT_PUBLIC_STACK_API_URL") + "/api/v1/auth/oauth/callback/twitch",


Consider using a tagged template literal (e.g. urlString``) for constructing the redirect URI, and check response.ok before parsing JSON in fetch to better handle errors.

^{This comment was generated because it violated a code review rule: mrule_pmzJAgHDlFZgwIwD.}

fomalhautb · 2025-07-02T01:26:08Z

Can you give me permission to edit this PR?

Nachwahl · 2025-07-04T21:11:42Z

Can you give me permission to edit this PR?

Sure! Do you need permission to our respository?

fomalhautb · 2025-07-09T19:22:40Z

Can you give me permission to edit this PR?

Sure! Do you need permission to our respository?

https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork

Nachwahl · 2025-07-09T20:33:17Z

Can you give me permission to edit this PR?

Sure! Do you need permission to our respository?

https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork

Done 👍

feat: add Twitch as oauth provider

08c0de5

greptile-apps bot reviewed Jun 25, 2025

View reviewed changes

recurseml bot reviewed Jun 25, 2025

View reviewed changes

ellipsis-dev bot reviewed Jun 25, 2025

View reviewed changes

N2D4 assigned fomalhautb Jul 1, 2025

fomalhautb assigned Nachwahl and unassigned fomalhautb Jul 2, 2025

N2D4 assigned fomalhautb Jul 9, 2025


	}).then((res) => res.json());

	const userInfo = info.data?.[0];

		@@ -1,4 +1,4 @@
		export const standardProviders = ["google", "github", "microsoft", "spotify", "facebook", "discord", "gitlab", "bitbucket", "linkedin", "apple", "x"] as const;
		export const standardProviders = ["google", "github", "microsoft", "spotify", "facebook", "discord", "gitlab", "bitbucket", "linkedin", "apple", "x", "twitch"] as const;

Add an OAuth provider for Twitch #728

Are you sure you want to change the base?

Add an OAuth provider for Twitch #728

Conversation

Nachwahl commented Jun 25, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CLAassistant commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Jun 25, 2025

Uh oh!

recurseml bot commented Jun 25, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

greptile-apps bot Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

recurseml bot Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

recurseml bot Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

recurseml bot Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

recurseml bot commented Jun 25, 2025

Uh oh!

patched-codes bot commented Jun 25, 2025

oauth-button.mdx

Uh oh!

ellipsis-dev bot Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

fomalhautb commented Jul 2, 2025

Uh oh!

Nachwahl commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fomalhautb commented Jul 9, 2025

Uh oh!

Nachwahl commented Jul 9, 2025

Uh oh!

Uh oh!

Nachwahl commented Jun 25, 2025 •

edited by ellipsis-dev bot

Loading

CLAassistant commented Jun 25, 2025 •

edited

Loading

Nachwahl commented Jul 4, 2025 •

edited

Loading