mirror of
https://github.com/supabase/supabase.git
synced 2026-06-28 19:39:19 -04:00
Saxon Fletcher
e491182054
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Added “Continue with {provider}” sign-in and sign-up flows using enabled external identity providers. * Enabled inbound branding to focus a specific provider for customized sign-in/sign-up experiences. * **Improvements** * Refined the sign-in options layout and “last used” tracking for clearer authentication choices. * Updated account identity/provider connection experiences (link/unlink and management UI). * **Bug Fixes** * Fixed hydration mismatches in sign-in and password-related layouts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
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 `<img>`/`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
|
|
}) => (
|
|
<span
|
|
role="img"
|
|
aria-label={alt}
|
|
className={cn('inline-block shrink-0 bg-foreground', className)}
|
|
style={{
|
|
...(size !== undefined ? { width: size, height: size } : undefined),
|
|
maskImage: `url(${src})`,
|
|
maskRepeat: 'no-repeat',
|
|
maskPosition: 'center',
|
|
maskSize: 'contain',
|
|
WebkitMaskImage: `url(${src})`,
|
|
WebkitMaskRepeat: 'no-repeat',
|
|
WebkitMaskPosition: 'center',
|
|
WebkitMaskSize: 'contain',
|
|
}}
|
|
/>
|
|
)
|
|
|
|
/**
|
|
* 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 ? (
|
|
<ProviderIcon src={display.iconPath} alt={`${display.displayName} icon`} size={size} />
|
|
) : (
|
|
<Image src={display.iconPath} width={size} height={size} alt={`${display.displayName} icon`} />
|
|
)
|