Files
2bc6144aec fix(studio): guard unguarded requester.name reads on the OAuth authorize and apps pages (#49267)
<!-- ccr-slack-attribution -->
_Requested by **Ali Waseem** · [Slack
thread](https://supabase.slack.com/archives/C063LNYJJKS/p1787146439389169)_

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix.

## What is the current behavior?

Opening `/authorize` for an OAuth app whose `name` the platform API
omitted crashed the entire page with `TypeError: Cannot read properties
of undefined (reading 'toLowerCase')`
([SUPABASE-APP-K7E](https://supabase.sentry.io/issues/7679644991/)). The
user got a full-page error instead of a consent screen, and could
neither authorize nor decline.

The same class of crash hit the project-level OAuth apps list
([SUPABASE-APP-JB1](https://supabase.sentry.io/issues/7502074939/)).
Typing in the search box called `.toLowerCase()` on `client_name` for
every app, so one app registered without a name broke search for the
whole list.

The project-claim page crashed the same way, reading the first character
of the name for the fallback avatar.

## What is the new behavior?

The trusted-partner helpers treat a missing name as "no trusted partner
matched" and return `null`. The apps filter treats a missing name or
client ID as "does not match the search string". The claim page falls
back to a placeholder initial instead of indexing into `undefined`.

The authorize page now renders normally, minus the optional
partner-impersonation caution, which cannot be evaluated without a name.

Three changes:

-
`apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.utils.ts`
— `findTrustedPartnerByName` accepts `string | null | undefined` and
returns `null` early on a falsy name; `getOAuthImpersonationWarning`'s
`name` param widened to match (its existing `if (!namedPartner) return
null` already handles the rest).
- `apps/studio/components/interfaces/Auth/OAuthApps/oauthApps.utils.ts`
— `filterOAuthApps` optional-chains `client_name` and `client_id` before
`.toLowerCase()`, defaulting each match to `false`.
-
`apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx`
— `{requester.name?.[0] ?? '?'}` for the fallback avatar initial.

Each is a separate commit so any one can be dropped independently.

## Additional context

### Root cause, not fixed here

`apps/studio/data/api-authorization/api-authorization-query.ts:37`
returns `data as ApiAuthorizationResponse`, an unchecked cast with no
runtime validation, even though the openapi-fetch client already types
the endpoint from the generated schema. Both the generated
`GetOAuthAuthorizationResponse` and the hand-written local type declare
`name: string` as required, so this was invisible to TypeScript.

The durable fix is to derive the type from the schema and drop the cast,
which is the house pattern elsewhere in `apps/studio/data`, and to
correct the OpenAPI spec at source if the API can legitimately omit
`name`. Left out deliberately to keep this cherry-pickable.

### Not in scope

`requester.scopes` is optional in the schema but required in the local
type, and is read unguarded in several places. Defaulting it to `[]`
would tell a user an app requested no permissions on a live consent
screen, so it needs a product decision rather than a drive-by guard.

### Testing

No local checks were run. This clone has no `node_modules` and `pnpm
install` is blocked in the environment, so `npm run build`, typecheck,
lint, Prettier and tests were all left to CI. Please treat CI as the
verification for this PR.

There is also a coverage gap worth noting:
`apps/studio/tests/components/ApiAuthorization.test.tsx:48-62` hardcodes
`name: 'Test App'` in `createMockAuthResponse`, and no test omits the
field, which is why none of these crashes were caught.

---
_Generated by [Claude
Code](https://claude.ai/code/session_01P489vrPdHcJfMfzCGM9rZ5)_

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-08-19 14:23:54 -06:00

179 lines
5.2 KiB
TypeScript

import { getMcpClientIconSrc } from 'ui-patterns/McpUrlBuilder'
export type TrustedOAuthPartner = {
/** Substrings matched against the requester name (case-insensitive). */
nameMatchers: readonly string[]
displayName: string
icon: string
hasDistinctDarkIcon: boolean
/** Exact host or parent host for redirect_uri (subdomains allowed). */
redirectHosts: readonly string[]
}
/**
* High-traffic MCP / OAuth partners with curated Connect logos.
* Logos resolve from allowlisted redirect_uri hosts, or from a trusted name when
* redirect_uri is localhost / loopback (common for local MCP clients).
* Never from self-asserted name alone on a remote host.
*/
export const TRUSTED_OAUTH_PARTNERS: readonly TrustedOAuthPartner[] = [
{
nameMatchers: ['claude'],
displayName: 'Claude',
icon: 'claude',
hasDistinctDarkIcon: false,
redirectHosts: ['claude.ai', 'anthropic.com'],
},
{
nameMatchers: ['cursor'],
displayName: 'Cursor',
icon: 'cursor',
hasDistinctDarkIcon: true,
redirectHosts: ['cursor.com', 'cursor.sh'],
},
{
nameMatchers: ['chatgpt', 'openai'],
displayName: 'ChatGPT',
icon: 'openai',
hasDistinctDarkIcon: true,
redirectHosts: ['chatgpt.com', 'openai.com'],
},
{
nameMatchers: ['perplexity'],
displayName: 'Perplexity',
icon: 'perplexity',
hasDistinctDarkIcon: true,
redirectHosts: ['perplexity.ai'],
},
]
const LOCAL_REDIRECT_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]', '::1'])
export function getRedirectHostname(redirectUri: string | null | undefined): string | null {
if (!redirectUri) return null
try {
const { hostname } = new URL(redirectUri)
return hostname.toLowerCase() || null
} catch {
return null
}
}
export function isLocalRedirectHost(hostname: string | null | undefined): boolean {
if (!hostname) return false
const host = hostname.toLowerCase()
return LOCAL_REDIRECT_HOSTS.has(host) || host.endsWith('.localhost')
}
export function hostMatchesAllowlist(hostname: string, allowedHosts: readonly string[]): boolean {
const host = hostname.toLowerCase()
return allowedHosts.some((allowed) => {
const entry = allowed.toLowerCase()
return host === entry || host.endsWith(`.${entry}`)
})
}
export function findTrustedPartnerByRedirectUri(
redirectUri: string | null | undefined
): TrustedOAuthPartner | null {
const hostname = getRedirectHostname(redirectUri)
if (!hostname || isLocalRedirectHost(hostname)) return null
return (
TRUSTED_OAUTH_PARTNERS.find((partner) =>
hostMatchesAllowlist(hostname, partner.redirectHosts)
) ?? null
)
}
export function findTrustedPartnerByName(
name: string | null | undefined
): TrustedOAuthPartner | null {
if (!name) return null
const searchable = name.toLowerCase()
return (
TRUSTED_OAUTH_PARTNERS.find((partner) =>
partner.nameMatchers.some((matcher) => searchable.includes(matcher))
) ?? null
)
}
function curatedLogoForPartner(
partner: TrustedOAuthPartner,
useDarkVariant: boolean
): { src: string; isKnownClient: boolean } | null {
const customLogoUrl = getMcpClientIconSrc({
icon: partner.icon,
useDarkVariant,
hasDistinctDarkIcon: partner.hasDistinctDarkIcon,
})
if (!customLogoUrl) return null
return { src: customLogoUrl, isKnownClient: true }
}
export function getRequesterLogo({
icon,
name,
redirectUri,
useDarkVariant,
}: {
icon: string | null
name?: string | null
redirectUri: string | null | undefined
useDarkVariant: boolean
}): { src: string; isKnownClient: boolean } {
const byRedirect = findTrustedPartnerByRedirectUri(redirectUri)
if (byRedirect) {
const curated = curatedLogoForPartner(byRedirect, useDarkVariant)
if (curated) return curated
}
// Local MCP clients (Claude Desktop, Cursor, etc.) use loopback redirects.
// Name match is enough there — remote hosts still require the allowlist.
const hostname = getRedirectHostname(redirectUri)
if (hostname && isLocalRedirectHost(hostname) && name) {
const byName = findTrustedPartnerByName(name)
if (byName) {
const curated = curatedLogoForPartner(byName, useDarkVariant)
if (curated) return curated
}
}
return { src: icon || '', isKnownClient: false }
}
export type OAuthImpersonationWarning = {
/** Trusted partner label used in the caution copy. */
brandDisplayName: string
redirectHost: string
}
/**
* Warn when the requester name looks like a known partner but redirect_uri is a
* remote host outside that partner's allowlist. Localhost redirects are skipped
* (common for local MCP clients). Missing or malformed redirect URIs are skipped.
*/
export function getOAuthImpersonationWarning({
name,
redirectUri,
}: {
name: string | null | undefined
redirectUri: string | null | undefined
}): OAuthImpersonationWarning | null {
const namedPartner = findTrustedPartnerByName(name)
if (!namedPartner) return null
const hostname = getRedirectHostname(redirectUri)
if (!hostname || isLocalRedirectHost(hostname)) return null
if (hostMatchesAllowlist(hostname, namedPartner.redirectHosts)) {
return null
}
return {
brandDisplayName: namedPartner.displayName,
redirectHost: hostname,
}
}