GitHub
Sync repos to Supabase projects for automatic branch creation and merging
Re-authenticate
Remove connection
{providerName}
{provider.displayName}
+ Link your {provider.displayName} account to sign in with{' '} + {provider.displayName} +
(null) + + const verb = inboundFlow === 'sign-up' ? 'Sign up' : 'Sign in' + const { dashboardAuthShowTestimonial: showTestimonial, brandingLargeLogo: largeLogo, @@ -78,14 +120,9 @@ const SignInLayout = ({ .catch(() => {}) // catch all errors thrown by auth methods }, []) - const [quote, setQuote] = useState<{ - text: string - url: string - handle: string - img_url: string - } | null>(null) - useEffect(() => { + setMounted(true) + // Weighted random selection // Calculate total weight (default weight is fallbackWeight for tweets without weight specified) const fallbackWeight = 1 @@ -106,13 +143,63 @@ const SignInLayout = ({ } }, []) + // Focused provider: render a dedicated single-provider interstitial (same card layout as the + // external-identity flows). When we also know the destination the inbound link is returning the + // user to, frame the screen around it. + if (inboundFlow && focusProvider) { + return ( + + ) + } + name={destination?.displayName ?? focusProvider.displayName} + /> + } + right={} + /> + } + title={destination ? `Continue to ${destination.displayName}` : `${verb} to Supabase`} + description={ + destination + ? `${verb} to Supabase using your ${focusProvider.displayName} account` + : `Use your ${focusProvider.displayName} account to continue` + } + footer={ + showDisclaimer && showTos ? ( + + + + ) : undefined + } + > + {children} + + ) + } + + // Destination known but no focused provider: keep the regular screen but brand its heading. + const brandedDestination = inboundFlow ? destination : undefined + const brandedHeading = brandedDestination + ? `${verb} to continue to ${brandedDestination.displayName}` + : undefined + return ( <> @@ -120,7 +207,7 @@ const SignInLayout = ({ - - {heading} - {subheading} - + {brandedDestination ? ( + + + } + right={} + /> + {brandedHeading} + + ) : ( + + {heading} + {subheading} + + )} {children} @@ -151,21 +253,7 @@ const SignInLayout = ({ {showDisclaimer && showTos && ( - By continuing, you agree to Supabase’s{' '} - - Terms of Service - {' '} - and{' '} - - Privacy Policy - - , and to receive periodic emails with updates. + )} @@ -206,5 +294,3 @@ const SignInLayout = ({ ) } - -export default SignInLayout diff --git a/apps/studio/components/ui/ProviderIcon.tsx b/apps/studio/components/ui/ProviderIcon.tsx new file mode 100644 index 00000000000..ad2c34d9906 --- /dev/null +++ b/apps/studio/components/ui/ProviderIcon.tsx @@ -0,0 +1,58 @@ +import Image from 'next/image' +import { cn } from 'ui' + +import type { IdentityProviderDisplay } from '@/lib/external-identity-providers' + +/** + * Renders a monochrome identity-provider mark as a CSS mask so it inherits the current theme's + * foreground color. The provider SVGs use `currentColor`, which a plain ``/`next/image` would + * not respect (it would render the icon's literal fill and need a `dark:invert` hack). Masking tints + * any provider mark correctly in every theme, regardless of how its SVG is colored. + * + * Size via `size` (pixels) or `className` (e.g. `size-7`, `size-[30px]`). + */ +export const ProviderIcon = ({ + src, + alt, + size, + className, +}: { + src: string + alt: string + size?: number + className?: string +}) => ( + +) + +/** + * Renders the icon for a provider's display metadata (see `getProviderDisplay`): monochrome marks + * are tinted to the theme via {@link ProviderIcon}, colored icons render as-is. + */ +export const IdentityProviderIcon = ({ + display, + size = 20, +}: { + display: IdentityProviderDisplay + size?: number +}) => + display.hasMonochromeIcon ? ( + + ) : ( + + ) diff --git a/apps/studio/hooks/misc/__tests__/useEnabledIdentityProviders.test.ts b/apps/studio/hooks/misc/__tests__/useEnabledIdentityProviders.test.ts new file mode 100644 index 00000000000..f68a28dd2a3 --- /dev/null +++ b/apps/studio/hooks/misc/__tests__/useEnabledIdentityProviders.test.ts @@ -0,0 +1,33 @@ +import { renderHook } from '@testing-library/react' +import { describe, expect, it, vi } from 'vitest' + +import { useEnabledIdentityProviders } from '../useEnabledIdentityProviders' +import { GITHUB_IDENTITY_PROVIDER } from '@/lib/external-identity-providers' + +const mockIsFeatureEnabled = vi.hoisted(() => vi.fn()) + +vi.mock('../useIsFeatureEnabled', () => ({ + useIsFeatureEnabled: mockIsFeatureEnabled, +})) + +describe('useEnabledIdentityProviders', () => { + it('returns every provider when all flags are enabled', () => { + mockIsFeatureEnabled.mockReturnValue({ + dashboardAuthSignInWithGithub: true, + }) + + const { result } = renderHook(() => useEnabledIdentityProviders()) + + expect(result.current).toEqual([GITHUB_IDENTITY_PROVIDER]) + }) + + it('returns no providers when all flags are disabled', () => { + mockIsFeatureEnabled.mockReturnValue({ + dashboardAuthSignInWithGithub: false, + }) + + const { result } = renderHook(() => useEnabledIdentityProviders()) + + expect(result.current).toEqual([]) + }) +}) diff --git a/apps/studio/hooks/misc/__tests__/useInboundBranding.test.ts b/apps/studio/hooks/misc/__tests__/useInboundBranding.test.ts new file mode 100644 index 00000000000..fcf77f5fd54 --- /dev/null +++ b/apps/studio/hooks/misc/__tests__/useInboundBranding.test.ts @@ -0,0 +1,91 @@ +import mockRouter from 'next-router-mock' +import { beforeEach, describe, expect, it, vi } from 'vitest' + +import { useInboundBranding } from '../useInboundBranding' +import { + GITHUB_IDENTITY_PROVIDER, + type ExternalIdentityProviderConfig, +} from '@/lib/external-identity-providers' +import { customRenderHook } from '@/tests/lib/custom-render' + +vi.mock('next/router', () => import('next-router-mock')) + +const mockEnabledProviders = vi.hoisted(() => vi.fn<() => ExternalIdentityProviderConfig[]>()) + +vi.mock('../useEnabledIdentityProviders', () => ({ + useEnabledIdentityProviders: mockEnabledProviders, +})) + +const enabledProvider: ExternalIdentityProviderConfig = GITHUB_IDENTITY_PROVIDER + +describe('useInboundBranding', () => { + beforeEach(() => { + mockRouter.setCurrentUrl('/sign-in') + mockEnabledProviders.mockReturnValue([enabledProvider]) + }) + + it('focuses an enabled provider without deriving a destination', () => { + mockRouter.setCurrentUrl('/sign-in?method=github') + + const { result } = customRenderHook(() => useInboundBranding('sign-in')) + + expect(result.current.focusProvider?.authProvider).toBe('github') + expect(result.current.destination).toBeUndefined() + }) + + it('does not focus on a destination id passed as the method param', () => { + mockRouter.setCurrentUrl('/sign-in?method=cli') + + const { result } = customRenderHook(() => useInboundBranding('sign-in')) + + expect(result.current.focusProvider).toBeUndefined() + expect(result.current.destination).toBeUndefined() + }) + + it('derives the destination from the destination param without a focused provider', () => { + mockRouter.setCurrentUrl('/sign-in?destination=cli') + + const { result } = customRenderHook(() => useInboundBranding('sign-in')) + + expect(result.current.destination?.id).toBe('cli') + expect(result.current.focusProvider).toBeUndefined() + }) + + it('keeps the destination when a provider is focused', () => { + mockRouter.setCurrentUrl('/sign-in?destination=cli&method=github') + + const { result } = customRenderHook(() => useInboundBranding('sign-in')) + + expect(result.current.destination?.id).toBe('cli') + expect(result.current.focusProvider?.authProvider).toBe('github') + }) + + it('ignores an unknown destination param', () => { + mockRouter.setCurrentUrl('/sign-in?destination=not-a-real-destination') + + const { result } = customRenderHook(() => useInboundBranding('sign-in')) + + expect(result.current.destination).toBeUndefined() + expect(result.current.focusProvider).toBeUndefined() + }) + + it('does not focus a provider that is hidden from the current flow', () => { + mockEnabledProviders.mockReturnValue([{ ...enabledProvider, showOnSignUp: false }]) + mockRouter.setCurrentUrl('/sign-up?method=github') + + const { result } = customRenderHook(() => useInboundBranding('sign-up')) + + expect(result.current.focusProvider).toBeUndefined() + expect(result.current.destination).toBeUndefined() + }) + + it('does not focus a provider that is not enabled', () => { + mockEnabledProviders.mockReturnValue([]) + mockRouter.setCurrentUrl('/sign-in?method=github') + + const { result } = customRenderHook(() => useInboundBranding('sign-in')) + + expect(result.current.focusProvider).toBeUndefined() + expect(result.current.destination).toBeUndefined() + }) +}) diff --git a/apps/studio/hooks/misc/useShowMultigresLogs.test.ts b/apps/studio/hooks/misc/__tests__/useShowMultigresLogs.test.ts similarity index 94% rename from apps/studio/hooks/misc/useShowMultigresLogs.test.ts rename to apps/studio/hooks/misc/__tests__/useShowMultigresLogs.test.ts index 27082f99ea1..07ebd250298 100644 --- a/apps/studio/hooks/misc/useShowMultigresLogs.test.ts +++ b/apps/studio/hooks/misc/__tests__/useShowMultigresLogs.test.ts @@ -1,7 +1,7 @@ import { renderHook } from '@testing-library/react' import { beforeEach, describe, expect, it, vi } from 'vitest' -import { useShowMultigresLogs } from './useShowMultigresLogs' +import { useShowMultigresLogs } from '../useShowMultigresLogs' const mockUseFlag = vi.fn() const mockUseIsHighAvailability = vi.fn() @@ -11,7 +11,7 @@ vi.mock('common', async (importOriginal) => ({ useFlag: (name: string) => mockUseFlag(name), })) -vi.mock('./useSelectedProject', () => ({ +vi.mock('../useSelectedProject', () => ({ useIsHighAvailability: () => mockUseIsHighAvailability(), })) diff --git a/apps/studio/hooks/misc/useEnabledIdentityProviders.ts b/apps/studio/hooks/misc/useEnabledIdentityProviders.ts new file mode 100644 index 00000000000..4823f9117b3 --- /dev/null +++ b/apps/studio/hooks/misc/useEnabledIdentityProviders.ts @@ -0,0 +1,20 @@ +import { useMemo } from 'react' + +import { useIsFeatureEnabled } from './useIsFeatureEnabled' +import { + GITHUB_IDENTITY_PROVIDER, + type ExternalIdentityProviderConfig, +} from '@/lib/external-identity-providers' + +/** + * Returns the statically-declared identity providers whose feature flag is currently enabled. + * To add a provider: declare its config in `lib/external-identity-providers.ts`, add a + * `dashboard_auth:sign_in_with_*` flag, and gate it here. + */ +export function useEnabledIdentityProviders(): ExternalIdentityProviderConfig[] { + const { dashboardAuthSignInWithGithub: githubEnabled } = useIsFeatureEnabled([ + 'dashboard_auth:sign_in_with_github', + ]) + + return useMemo(() => [...(githubEnabled ? [GITHUB_IDENTITY_PROVIDER] : [])], [githubEnabled]) +} diff --git a/apps/studio/hooks/misc/useInboundBranding.ts b/apps/studio/hooks/misc/useInboundBranding.ts new file mode 100644 index 00000000000..dd9b45df4e1 --- /dev/null +++ b/apps/studio/hooks/misc/useInboundBranding.ts @@ -0,0 +1,61 @@ +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 } +} diff --git a/apps/studio/hooks/misc/useLastSignIn.ts b/apps/studio/hooks/misc/useLastSignIn.ts index 01715542698..544113ff753 100644 --- a/apps/studio/hooks/misc/useLastSignIn.ts +++ b/apps/studio/hooks/misc/useLastSignIn.ts @@ -2,7 +2,7 @@ import { LOCAL_STORAGE_KEYS } from 'common' import { useLocalStorage } from './useLocalStorage' -export type LastSignInType = 'github' | 'email' | 'sso' | null +export type LastSignInType = string | null export function useLastSignIn() { return useLocalStorage(LOCAL_STORAGE_KEYS.LAST_SIGN_IN_METHOD, null) diff --git a/apps/studio/lib/external-identity-providers.test.ts b/apps/studio/lib/external-identity-providers.test.ts new file mode 100644 index 00000000000..13413758f43 --- /dev/null +++ b/apps/studio/lib/external-identity-providers.test.ts @@ -0,0 +1,73 @@ +import { afterEach, describe, expect, test, vi } from 'vitest' + +import { + buildProviderAuthRedirect, + getIdentityProviderConfig, + getProviderDisplay, + normalizeIconPath, +} from './external-identity-providers' + +describe('external identity providers', () => { + test('normalizes relative icon paths against the dashboard base path', () => { + expect(normalizeIconPath('/img/icons/github-icon.svg')).toBe('/img/icons/github-icon.svg') + expect(normalizeIconPath('img/icons/github-icon.svg')).toBe('/img/icons/github-icon.svg') + expect(normalizeIconPath('https://example.com/icon.svg')).toBe('https://example.com/icon.svg') + }) + + test('resolves static provider config by provider id or auth provider', () => { + expect(getIdentityProviderConfig('github')?.displayName).toBe('GitHub') + expect(getIdentityProviderConfig('unknown')).toBeUndefined() + }) + + test('returns display metadata for static, built-in, and fallback providers', () => { + expect(getProviderDisplay('github').displayName).toBe('GitHub') + expect(getProviderDisplay('email').displayName).toBe('Email') + expect(getProviderDisplay('sso:test').displayName).toBe('SSO') + expect(getProviderDisplay('my_provider').displayName).toBe('my provider') + }) + + test('marks static provider icons as monochrome but not built-in or fallback icons', () => { + expect(getProviderDisplay('github').hasMonochromeIcon).toBe(true) + expect(getProviderDisplay('email').hasMonochromeIcon).toBeUndefined() + expect(getProviderDisplay('sso:test').hasMonochromeIcon).toBeUndefined() + }) + + describe('buildProviderAuthRedirect', () => { + afterEach(() => { + vi.unstubAllEnvs() + }) + + test('builds the MFA-check URL against the configured site URL', () => { + vi.stubEnv('NEXT_PUBLIC_SITE_URL', 'https://supabase.com/dashboard') + + expect(buildProviderAuthRedirect('github')).toBe( + 'https://supabase.com/dashboard/sign-in-mfa?method=github' + ) + }) + + test('URL-encodes custom provider ids in the method param', () => { + vi.stubEnv('NEXT_PUBLIC_SITE_URL', 'https://supabase.com/dashboard') + + expect(buildProviderAuthRedirect('custom:example')).toBe( + 'https://supabase.com/dashboard/sign-in-mfa?method=custom%3Aexample' + ) + }) + + test('appends an encoded returnTo destination when provided', () => { + vi.stubEnv('NEXT_PUBLIC_SITE_URL', 'https://supabase.com/dashboard') + + expect(buildProviderAuthRedirect('custom:example', '/account/me')).toBe( + 'https://supabase.com/dashboard/sign-in-mfa?method=custom%3Aexample&returnTo=%2Faccount%2Fme' + ) + }) + + test('uses the current origin on Vercel preview deployments', () => { + vi.stubEnv('NEXT_PUBLIC_VERCEL_ENV', 'preview') + vi.stubEnv('NEXT_PUBLIC_SITE_URL', 'https://supabase.com/dashboard') + + expect(buildProviderAuthRedirect('github')).toBe( + `${location.origin}/sign-in-mfa?method=github` + ) + }) + }) +}) diff --git a/apps/studio/lib/external-identity-providers.ts b/apps/studio/lib/external-identity-providers.ts new file mode 100644 index 00000000000..09bf0cef17d --- /dev/null +++ b/apps/studio/lib/external-identity-providers.ts @@ -0,0 +1,116 @@ +import { BASE_PATH } from './constants' + +export type ExternalIdentityProviderConfig = { + id: string + authProvider: string + displayName: string + iconPath: string + scopes?: string + showOnSignIn: boolean + showOnSignUp: boolean + showInAccountPreferences: boolean +} + +export type IdentityProviderDisplay = { + id: string + displayName: string + iconPath: string + /** The icon is a single-color mark that should be tinted to the theme's foreground color. */ + hasMonochromeIcon?: boolean +} + +const BUILT_IN_IDENTITY_PROVIDERS: Record = { + email: { + id: 'email', + displayName: 'Email', + iconPath: `${BASE_PATH}/img/icons/email-icon2.svg`, + }, +} + +// Statically supported identity providers. To add a new one, declare its config here, gate its +// visibility behind a `dashboard_auth:sign_in_with_*` feature flag in `useEnabledIdentityProviders`, +// and add the matching flag to `packages/common/enabled-features/enabled-features.json`. +export const GITHUB_IDENTITY_PROVIDER: ExternalIdentityProviderConfig = { + id: 'github', + authProvider: 'github', + displayName: 'GitHub', + iconPath: '/img/icons/github-icon.svg', + showOnSignIn: true, + showOnSignUp: true, + showInAccountPreferences: false, +} + +// Registry of every known provider, independent of which are currently enabled. Used for config and +// display lookups (e.g. resolving the provider that a mid-flow interstitial was reached with). +const IDENTITY_PROVIDERS: ExternalIdentityProviderConfig[] = [GITHUB_IDENTITY_PROVIDER] + +export function normalizeIconPath(iconPath: string): string { + if ( + iconPath.startsWith('http://') || + iconPath.startsWith('https://') || + iconPath.startsWith('/') + ) { + return iconPath.startsWith('/') ? `${BASE_PATH}${iconPath}` : iconPath + } + + return `${BASE_PATH}/${iconPath}` +} + +export function getProviderDisplay(provider: string): IdentityProviderDisplay { + const config = IDENTITY_PROVIDERS.find( + ({ id, authProvider }) => provider === id || provider === authProvider + ) + + if (config) { + return { + id: config.id, + displayName: config.displayName, + iconPath: normalizeIconPath(config.iconPath), + hasMonochromeIcon: true, + } + } + + if (provider.startsWith('sso')) { + return { + id: provider, + displayName: 'SSO', + iconPath: `${BASE_PATH}/img/icons/saml-icon.svg`, + } + } + + return ( + BUILT_IN_IDENTITY_PROVIDERS[provider] ?? { + id: provider, + displayName: provider.replaceAll('_', ' '), + iconPath: `${BASE_PATH}/img/icons/saml-icon.svg`, + } + ) +} + +/** + * Builds the absolute URL an external provider's OAuth flow redirects back to: the MFA-check page + * (`/sign-in-mfa`), tagged with the provider id as the sign-in method and an optional `returnTo` + * destination. Callers should pass the result through `buildPathWithParams` to preserve the current + * location's search params across the OAuth round-trip. + */ +export function buildProviderAuthRedirect(providerId: string, returnTo?: string): string { + const origin = + typeof window !== 'undefined' && process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview' + ? window.location.origin + : process.env.NEXT_PUBLIC_SITE_URL + + const params = new URLSearchParams({ method: providerId }) + if (returnTo) params.set('returnTo', returnTo) + + return `${origin}${BASE_PATH}/sign-in-mfa?${params.toString()}` +} + +export function getIdentityProviderConfig( + provider: string | undefined +): ExternalIdentityProviderConfig | undefined { + if (!provider) return undefined + + return IDENTITY_PROVIDERS.find( + ({ id, authProvider }) => provider === id || provider === authProvider + ) +} diff --git a/apps/studio/lib/sign-in-destinations.test.ts b/apps/studio/lib/sign-in-destinations.test.ts new file mode 100644 index 00000000000..c7d82e32aed --- /dev/null +++ b/apps/studio/lib/sign-in-destinations.test.ts @@ -0,0 +1,17 @@ +import { describe, expect, test } from 'vitest' + +import { getDestinationById } from './sign-in-destinations' + +describe('sign-in destinations', () => { + test('resolves a registered destination from its id', () => { + expect(getDestinationById('cli')?.id).toBe('cli') + expect(getDestinationById('cli')?.displayName).toBe('Supabase CLI') + }) + + test('does not resolve a destination for unknown or missing ids', () => { + expect(getDestinationById('organizations')).toBeUndefined() + expect(getDestinationById('oauth-app')).toBeUndefined() + expect(getDestinationById('')).toBeUndefined() + expect(getDestinationById(undefined)).toBeUndefined() + }) +}) diff --git a/apps/studio/lib/sign-in-destinations.tsx b/apps/studio/lib/sign-in-destinations.tsx new file mode 100644 index 00000000000..adc76d703a4 --- /dev/null +++ b/apps/studio/lib/sign-in-destinations.tsx @@ -0,0 +1,36 @@ +import { Terminal } from 'lucide-react' +import type { ReactNode } from 'react' + +/** + * A destination the user is signing in on the way to (e.g. the Supabase CLI). Destinations brand + * the sign-in/sign-up screens but are independent of identity providers: a destination may not have + * a matching sign-in button at all. + * + * The inbound link selects a destination by passing its `id` as the `destination` query param. + * Branding resolves entirely from this static registry with no API call — the sign-in/sign-up + * screens render while the user is signed out, so they can't fetch anything that requires auth. + */ +export type SignInDestination = { + /** Matches the `destination` query param that leads to this destination. */ + id: string + displayName: string + /** Mark rendered inset in a LogoBox next to the Supabase logo. */ + icon?: ReactNode +} + +const CLI_DESTINATION: SignInDestination = { + id: 'cli', + displayName: 'Supabase CLI', + icon: , +} + +// Statically-branded sign-in destinations. To add a new one, declare its config above and add it +// here. OAuth app consent screens brand themselves on `/authorize`, which runs post-auth and can +// look the app up by `auth_id`. +const SIGN_IN_DESTINATIONS: SignInDestination[] = [CLI_DESTINATION] + +/** Resolves the destination the `destination` query param refers to, if it's one we brand. */ +export function getDestinationById(id: string | undefined): SignInDestination | undefined { + if (!id) return undefined + return SIGN_IN_DESTINATIONS.find((destination) => destination.id === id) +} diff --git a/apps/studio/pages/forgot-password-mfa.tsx b/apps/studio/pages/forgot-password-mfa.tsx index 0141f41ddf6..b3dd58f468f 100644 --- a/apps/studio/pages/forgot-password-mfa.tsx +++ b/apps/studio/pages/forgot-password-mfa.tsx @@ -7,7 +7,7 @@ import { toast } from 'sonner' import { LogoLoader } from 'ui' import { SignInMfaForm } from '@/components/interfaces/SignIn/SignInMfaForm' -import ForgotPasswordLayout from '@/components/layouts/SignInLayout/ForgotPasswordLayout' +import { ForgotPasswordLayout } from '@/components/layouts/SignInLayout/ForgotPasswordLayout' import { auth, buildPathWithParams, getReturnToPath } from '@/lib/gotrue' import type { NextPageWithLayout } from '@/types' diff --git a/apps/studio/pages/forgot-password.tsx b/apps/studio/pages/forgot-password.tsx index 3e91d0ecae3..69e4ad4728d 100644 --- a/apps/studio/pages/forgot-password.tsx +++ b/apps/studio/pages/forgot-password.tsx @@ -1,7 +1,7 @@ import Link from 'next/link' import { ForgotPasswordWizard } from '@/components/interfaces/SignIn/ForgotPasswordWizard' -import ForgotPasswordLayout from '@/components/layouts/SignInLayout/ForgotPasswordLayout' +import { ForgotPasswordLayout } from '@/components/layouts/SignInLayout/ForgotPasswordLayout' import type { NextPageWithLayout } from '@/types' const ForgotPasswordPage: NextPageWithLayout = () => { diff --git a/apps/studio/pages/reset-password.tsx b/apps/studio/pages/reset-password.tsx index 3380523428c..a3f0d0ef850 100644 --- a/apps/studio/pages/reset-password.tsx +++ b/apps/studio/pages/reset-password.tsx @@ -1,5 +1,5 @@ import { ResetPasswordForm } from '@/components/interfaces/SignIn/ResetPasswordForm' -import ForgotPasswordLayout from '@/components/layouts/SignInLayout/ForgotPasswordLayout' +import { ForgotPasswordLayout } from '@/components/layouts/SignInLayout/ForgotPasswordLayout' import { withAuth } from '@/hooks/misc/withAuth' import type { NextPageWithLayout } from '@/types' diff --git a/apps/studio/pages/sign-in-mfa.tsx b/apps/studio/pages/sign-in-mfa.tsx index 06187c031b4..85a1f9dc1b6 100644 --- a/apps/studio/pages/sign-in-mfa.tsx +++ b/apps/studio/pages/sign-in-mfa.tsx @@ -7,7 +7,7 @@ import { toast } from 'sonner' import { LogoLoader } from 'ui' import { SignInMfaForm } from '@/components/interfaces/SignIn/SignInMfaForm' -import SignInLayout from '@/components/layouts/SignInLayout/SignInLayout' +import { SignInLayout } from '@/components/layouts/SignInLayout/SignInLayout' import { useAddLoginEvent } from '@/data/misc/audit-login-mutation' import useLatest from '@/hooks/misc/useLatest' import { auth, buildPathWithParams, getReturnToPath } from '@/lib/gotrue' @@ -19,7 +19,7 @@ const SignInMfaPage: NextPageWithLayout = () => { const queryClient = useQueryClient() const { - // current methods for mfa are github and sso + // the external identity provider id (e.g. github) or sso used to sign in method: signInMethod = 'unknown', } = useParams() const signInMethodRef = useLatest(signInMethod) diff --git a/apps/studio/pages/sign-in-partner.tsx b/apps/studio/pages/sign-in-partner.tsx index 13d907eb00f..c8d136eee6a 100644 --- a/apps/studio/pages/sign-in-partner.tsx +++ b/apps/studio/pages/sign-in-partner.tsx @@ -1,7 +1,7 @@ import { cn } from 'ui' import { SignInPartner } from '@/components/interfaces/SignIn/SignInPartner' -import ForgotPasswordLayout from '@/components/layouts/SignInLayout/ForgotPasswordLayout' +import { ForgotPasswordLayout } from '@/components/layouts/SignInLayout/ForgotPasswordLayout' import type { NextPageWithLayout } from '@/types' const SignInPartnerPage: NextPageWithLayout = () => { diff --git a/apps/studio/pages/sign-in-sso.tsx b/apps/studio/pages/sign-in-sso.tsx index 543a193fd43..b04bb1729b7 100644 --- a/apps/studio/pages/sign-in-sso.tsx +++ b/apps/studio/pages/sign-in-sso.tsx @@ -1,5 +1,5 @@ import { SignInSSOForm } from '@/components/interfaces/SignIn/SignInSSOForm' -import SignInLayout from '@/components/layouts/SignInLayout/SignInLayout' +import { SignInLayout } from '@/components/layouts/SignInLayout/SignInLayout' import { UnknownInterface } from '@/components/ui/UnknownInterface' import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled' import type { NextPageWithLayout } from '@/types' diff --git a/apps/studio/pages/sign-in.tsx b/apps/studio/pages/sign-in.tsx index 912145132a1..fbf61e05240 100644 --- a/apps/studio/pages/sign-in.tsx +++ b/apps/studio/pages/sign-in.tsx @@ -1,30 +1,32 @@ import { Lock } from 'lucide-react' import Link from 'next/link' import { useRouter } from 'next/router' -import { useEffect } from 'react' -import { Button } from 'ui' +import { useEffect, useState } from 'react' +import { Button, cn } from 'ui' import { LastSignInWrapper } from '@/components/interfaces/SignIn/LastSignInWrapper' import { SignInForm } from '@/components/interfaces/SignIn/SignInForm' import { SignInWithCustom } from '@/components/interfaces/SignIn/SignInWithCustom' -import { SignInWithGitHub } from '@/components/interfaces/SignIn/SignInWithGitHub' +import { SignInWithExternalProvider } from '@/components/interfaces/SignIn/SignInWithExternalProvider' import { AuthenticationLayout } from '@/components/layouts/AuthenticationLayout' -import SignInLayout from '@/components/layouts/SignInLayout/SignInLayout' +import { SignInLayout } from '@/components/layouts/SignInLayout/SignInLayout' import { useCustomContent } from '@/hooks/custom-content/useCustomContent' +import { useEnabledIdentityProviders } from '@/hooks/misc/useEnabledIdentityProviders' +import { useInboundBranding } from '@/hooks/misc/useInboundBranding' import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled' import { IS_PLATFORM } from '@/lib/constants' +import type { ExternalIdentityProviderConfig } from '@/lib/external-identity-providers' import type { NextPageWithLayout } from '@/types' const SignInPage: NextPageWithLayout = () => { const router = useRouter() + const [showOtherOptions, setShowOtherOptions] = useState(false) const { - dashboardAuthSignInWithGithub: signInWithGithubEnabled, dashboardAuthSignInWithSso: signInWithSsoEnabled, dashboardAuthSignInWithEmail: signInWithEmailEnabled, dashboardAuthSignUp: signUpEnabled, } = useIsFeatureEnabled([ - 'dashboard_auth:sign_in_with_github', 'dashboard_auth:sign_in_with_sso', 'dashboard_auth:sign_in_with_email', 'dashboard_auth:sign_up', @@ -34,8 +36,45 @@ const SignInPage: NextPageWithLayout = () => { 'dashboard_auth:custom_provider', ]) - const showOrDivider = - (signInWithGithubEnabled || signInWithSsoEnabled || customProvider) && signInWithEmailEnabled + const { focusProvider } = useInboundBranding('sign-in') + const signInProviders = useEnabledIdentityProviders().filter((provider) => provider.showOnSignIn) + + const renderAuthOptions = ( + providers: ExternalIdentityProviderConfig[], + dividerBgClass = 'bg-studio' + ) => { + const showOrDivider = + (providers.length > 0 || signInWithSsoEnabled || !!customProvider) && signInWithEmailEnabled + + return ( + <> + {customProvider && } + {providers.map((provider) => ( + + ))} + {signInWithSsoEnabled && ( + + }> + + Continue with SSO + + + + )} + {showOrDivider && ( + + + + + + or + + + )} + {signInWithEmailEnabled && } + + ) + } useEffect(() => { if (!IS_PLATFORM) { @@ -44,59 +83,50 @@ const SignInPage: NextPageWithLayout = () => { } }, [router]) + // Inbound link focused us on a single provider — lead with that one (SignInLayout renders the + // matching interstitial frame around it), but let the user reveal the rest of our options. + if (focusProvider) { + const otherProviders = signInProviders.filter((provider) => provider.id !== focusProvider.id) + const hasOtherOptions = + otherProviders.length > 0 || + signInWithSsoEnabled || + !!customProvider || + signInWithEmailEnabled + + return ( + + + {hasOtherOptions && + (showOtherOptions ? ( + renderAuthOptions(otherProviders, 'bg-surface-100') + ) : ( + setShowOtherOptions(true)} + > + Show other options + + ))} + + ) + } + return ( <> - - {customProvider && } - {signInWithGithubEnabled && } - {signInWithSsoEnabled && ( - - } - > - - Continue with SSO - - - - )} - - {showOrDivider && ( - - - - - - or - - - )} - {signInWithEmailEnabled && } - + {renderAuthOptions(signInProviders)} {signUpEnabled && ( - - Don’t have an account?{' '} - - Sign up - - + Don’t have an account?{' '} + + Sign up + )} @@ -109,6 +139,7 @@ SignInPage.getLayout = (page) => ( heading="Welcome back" subheading="Sign in to your account" logoLinkToMarketingSite={true} + inboundFlow="sign-in" > {page} diff --git a/apps/studio/pages/sign-up.tsx b/apps/studio/pages/sign-up.tsx index 9aeebcbfa13..3f1cfb16b11 100644 --- a/apps/studio/pages/sign-up.tsx +++ b/apps/studio/pages/sign-up.tsx @@ -1,42 +1,82 @@ import Link from 'next/link' +import { useState } from 'react' +import { Button, cn } from 'ui' -import { SignInWithGitHub } from '@/components/interfaces/SignIn/SignInWithGitHub' +import { SignInWithExternalProvider } from '@/components/interfaces/SignIn/SignInWithExternalProvider' import { SignUpForm } from '@/components/interfaces/SignIn/SignUpForm' -import SignInLayout from '@/components/layouts/SignInLayout/SignInLayout' +import { SignInLayout } from '@/components/layouts/SignInLayout/SignInLayout' import { UnknownInterface } from '@/components/ui/UnknownInterface' +import { useEnabledIdentityProviders } from '@/hooks/misc/useEnabledIdentityProviders' +import { useInboundBranding } from '@/hooks/misc/useInboundBranding' import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled' +import type { ExternalIdentityProviderConfig } from '@/lib/external-identity-providers' import type { NextPageWithLayout } from '@/types' const SignUpPage: NextPageWithLayout = () => { - const { - dashboardAuthSignUp: signUpEnabled, - dashboardAuthSignInWithGithub: signInWithGithubEnabled, - } = useIsFeatureEnabled(['dashboard_auth:sign_up', 'dashboard_auth:sign_in_with_github']) + const [showOtherOptions, setShowOtherOptions] = useState(false) + const { dashboardAuthSignUp: signUpEnabled } = useIsFeatureEnabled(['dashboard_auth:sign_up']) + + const { focusProvider } = useInboundBranding('sign-up') + const signUpProviders = useEnabledIdentityProviders().filter((provider) => provider.showOnSignUp) if (!signUpEnabled) { return } + // The sign-up options we offer besides a focused provider: other external providers and the email + // form. Rendered both on the full screen and when the user expands "other options" from the + // focused screen. The "or" pill's background matches the surface behind it: the page + // (`bg-studio`) on the full screen, or the interstitial card (`bg-surface-100`) when revealed. + const renderAuthOptions = ( + providers: ExternalIdentityProviderConfig[], + dividerBgClass = 'bg-studio' + ) => ( + <> + {providers.map((provider) => ( + + ))} + + + + + + + or + + + + + + ) + + // Inbound link focused us on a single provider — lead with that one (SignInLayout renders the + // matching interstitial frame around it), but let the user reveal the rest of our options. + if (focusProvider) { + const otherProviders = signUpProviders.filter((provider) => provider.id !== focusProvider.id) + + return ( + + + {showOtherOptions ? ( + renderAuthOptions(otherProviders, 'bg-surface-100') + ) : ( + setShowOtherOptions(true)} + > + Show other options + + )} + + ) + } + return ( <> - - {signInWithGithubEnabled && ( - <> - - - - - - - - or - - - - )} - - - + {renderAuthOptions(signUpProviders)} Have an account?{' '} @@ -52,7 +92,7 @@ const SignUpPage: NextPageWithLayout = () => { } SignUpPage.getLayout = (page) => ( - + {page} )
+ +
- By continuing, you agree to Supabase’s{' '} - - Terms of Service - {' '} - and{' '} - - Privacy Policy - - , and to receive periodic emails with updates. +