Renders a list of SSO provider buttons with optional divider, supporting vertical and horizontal layouts. Filters and maps enabled providers to `ProviderButton` components with built-in error handling. ## Key Components ### `SSOConfigStatus` (exported interface) | Property | Type | Description | |---|---|---| | `provider` | `string` | Provider identifier (e.g. `"google"`, `"microsoft"`) | | `enabled` | `boolean` | Whether this provider should be rendered | | `clientId` | `string?` | Optional OAuth client ID | ### `AuthProvidersList` (exported component) | Prop | Type | Default | Description | |---|---|---|---| | `enabledProviders` | `SSOConfigStatus[]` | — | List of SSO provider configs | | `onProviderClick` | `(provider: string) => Promise` | — | Auth callback per provider | | `loading` | `boolean` | `false` | Disables all buttons while loading | | `showDivider` | `boolean` | `true` | Renders an `"or"` divider above the list | | `dividerText` | `string` | `"or"` | Custom divider label | | `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Layout direction | Returns `null` if `enabledProviders` is empty. Errors thrown by `onProviderClick` are caught and logged without crashing the UI. ## Usage Example ```typescript import { AuthProvidersList, SSOConfigStatus } from './auth-providers-list'; const providers: SSOConfigStatus[] = [ { provider: 'google', enabled: true, clientId: 'abc123' }, { provider: 'microsoft', enabled: true, clientId: 'def456' }, { provider: 'slack', enabled: false }, ]; async function handleSignIn(provider: string) { await signInWithProvider(provider); // your auth logic } ``` **Source:** [`auth-providers-list.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/auth-providers-list.tsx)