SSO Buttons
component / auth
Provider sign-in buttons driven by a config list. Works with better-auth, next-auth or any custom handler.
- type
- component
- files
- 3
- registry deps
- button
- npm deps
- lucide-react
installs
- components/automindz/provider-icons.tsx
- lib/automindz/sso-providers.ts
- components/automindz/sso-buttons.tsx
- Providers read from lib/automindz/sso-providers.ts
- Per-provider pending state, no auth library required
- Stack, grid and icon-only layouts
Edit lib/automindz/sso-providers.ts to enable providers per client, or pass a providers array. Pass onSignIn to call your auth client (better-auth: authClient.signIn.social({ provider }), next-auth: signIn(provider)). Without onSignIn the button navigates to ${signInPath}/${provider} (default /api/auth/signin).
Variations
one state per section
Stack, every enabled provider
Press one: it takes the pending state and the others recede, so it stays obvious which provider is working.
Sign-in failure
The failed provider becomes a retry affordance and announces the reason. Nothing else in the stack changes.
Icon-only, two columns
For tight surfaces. The accessible name still carries the provider, so screen readers are unaffected.