supabase/apps/studio/hooks/misc/useInboundBranding.ts

import { useRouter } from 'next/router'
import { useMemo } from 'react'

import { useEnabledIdentityProviders } from './useEnabledIdentityProviders'
import { type ExternalIdentityProviderConfig } from '@/lib/external-identity-providers'
import { getDestinationById, type SignInDestination } from '@/lib/sign-in-destinations'

export type InboundBranding = {
  /**
   * Destination the user is signing in on the way to (e.g. the Supabase CLI), selected by the
   * `destination` query param and resolved from the static `SIGN_IN_DESTINATIONS` registry. Brands
   * the screen's logo and heading.
   */
  destination?: SignInDestination
  /**
   * Enabled identity provider the inbound link asked us to focus on (the `method` param).
   * When set, sign-in/sign-up render a trimmed-down screen offering only that provider's button.
   */
  focusProvider?: ExternalIdentityProviderConfig
}

/**
 * Reads the branding context for users arriving at sign-in/sign-up from somewhere else, such as the
 * Supabase CLI. Both signals come straight from the URL: these screens render while the user is
 * signed out, so branding can't depend on an authenticated API lookup. (The OAuth consent screen
 * runs post-auth and brands itself dynamically by `auth_id` instead.)
 *
 * Destination and focused provider are independent: a destination brands the screen, and a focused
 * provider trims the screen to a single button whether or not we know the destination.
 *
 * The focused provider must be enabled and visible in the current flow (`showOnSignIn` /
 * `showOnSignUp`), otherwise there'd be no button to offer and we fall back to the full-option
 * screen.
 */
export function useInboundBranding(flow: 'sign-in' | 'sign-up' = 'sign-in'): InboundBranding {
  const router = useRouter()
  const enabledProviders = useEnabledIdentityProviders()

  const destinationId =
    router.isReady && typeof router.query.destination === 'string'
      ? router.query.destination
      : undefined
  const focusId =
    router.isReady && typeof router.query.method === 'string' ? router.query.method : undefined

  const focusProvider = useMemo(
    () =>
      focusId
        ? enabledProviders.find(
            (provider) =>
              focusId === provider.authProvider &&
              (flow === 'sign-up' ? provider.showOnSignUp : provider.showOnSignIn)
          )
        : undefined,
    [focusId, flow, enabledProviders]
  )

  const destination = getDestinationById(destinationId)

  return { destination, focusProvider }
}