Reusable OAuth provider sign-in button component that handles loading state, click propagation, and provider-specific branding for Microsoft, Google, Slack, and GitHub authentication flows. ## Key Components ### `ProviderButtonProps` | Prop | Type | Description | |------|------|-------------| | `provider` | `'microsoft' \| 'google' \| 'slack' \| 'github'` | Determines icon and display label | | `onClick` | `() => Promise \| void` | Auth handler; supports async | | `disabled` | `boolean` | Disables interaction (default: `false`) | | `loading` | `boolean` | External loading state override (default: `false`) | ### `PROVIDER_CONFIG` Static map linking each provider key to its display name and icon component. Extend this object to add new providers. ### `ProviderButton` Client component that manages an internal loading state, falling back to it only when no external `loading` prop is provided. Prevents click bubbling to avoid triggering modal backdrops or parent handlers. ## Usage Example ```typescript import { ProviderButton } from '@/components/auth/provider-button'; export function LoginForm() { const handleMicrosoftLogin = async () => { await signIn('microsoft'); }; return ( ); } ``` With external loading control: ```typescript const [isLoading, setIsLoading] = useState(false); { setIsLoading(true); await signIn('google'); setIsLoading(false); }} loading={isLoading} disabled={isLoading} /> ``` > **Note:** When `loading` is passed externally, the component skips internal state management to avoid double-toggling.