@col/sso-button

Versie: 1.0.0 Toegevoegd: 2026-08-03

Herkomst

Nieuw item, geen extractie uit bestaande code — de onboarding-portal heeft de Microsoft SSO-knop nog niet in productie (zie todo-sso-m365.md in de projectmemory: code is klaar, wacht op App Registration-gegevens van IT). Gebouwd vooruitlopend daarop, omdat elke interne Coloriginz-app die Entra gebruikt dezelfde knop nodig heeft: officiële vierkleuren-SVG, #0067b8 als randkleur, volle breedte.

Waarvoor

Een inlogknop voor Microsoft Entra ID (voorheen Azure AD) met het officiële vierkleurenlogo. Toont een normale en een bezig-staat. Puur presentatie — geen NextAuth-aanroep, geen redirect-logica; de consumer geeft onClick door.

Gebruik het voor elke "Inloggen met Microsoft"-knop. Gebruik het niet voor andere SSO-providers (Google, etc.) — het logo en de kleur zijn Microsoft- specifiek.

De knop is het zichtbare uiteinde van een aansluiting die grotendeels buiten de code ligt: App Registration, admin consent, redirect URI's per domein. Dat staat in de gids Microsoft Entra ID aansluiten.

Wat je app moet leveren

`<SsoButton>`

Prop	Type	Betekenis
`label`	`string`	Tekst op de knop. Verplicht.
`onClick`	`() => void`	Aangeroepen bij een klik. Typisch een NextAuth `signIn('azure-ad')`-aanroep. Verplicht.
`busyLabel`	`string?`	Tekst tijdens het inloggen. Zonder deze prop blijft `label` staan, ook als `busy` waar is.
`busy`	`boolean?`	Schakelt naar de bezig-staat: knop uitgeschakeld, `busyLabel` (indien gezet) in plaats van het logo + `label`. Default `false`.
`disabled`	`boolean?`	Schakelt de knop uit zonder de bezig-staat te tonen. Default `false`.

Geen backend-contract; de consumer regelt de NextAuth-configuratie zelf.

Bestanden

Bestand	Landt in	Soort
`sso-button.tsx`	`components/auth/`	beheerd

Upstream shadcn-afhankelijkheid: button. Geen cssVars.

Gebruikt door

App	Sinds versie	Opmerkingen
`supplier-onboarding-vercel` (Onboarding Portal)	1.0.0	Consumer #1, sinds 3 aug 2026. Op de loginpagina, gekoppeld aan NextAuth `signIn('azure-ad')`. Alleen zichtbaar als `NEXT_PUBLIC_AZURE_AD_ENABLED` aanstaat.
`floriday-app` (Floriday middleware)	1.0.0	Consumer #2, sinds 3 aug 2026. Meldt aan via een server action (`signIn('microsoft-entra-id')`) in plaats van een client-side aanroep — zie hieronder. Zichtbaarheid hangt aan een server-side `entraEnabled`, niet aan een `NEXT_PUBLIC_`-vlag.

Wat consumer #2 tegenkwam: server actions

De knop is een type="button" met een onClick, wat uitgaat van een client-side signIn(). Een app die aanmeldt via <form action={serverAction}> heeft juist een type="submit" nodig, en die kan er niet in gezet worden.

De consumer heeft dat opgelost met een wrapper binnen het formulier die formRef.current?.requestSubmit() aan onClick hangt en busy uit useFormStatus() haalt. Dat werkt, maar kost de knop zijn werking zonder JavaScript — als submit-knop had hij die wel.

Overweging voor een volgende versie: een type-prop, of ...props doorgeven aan de onderliggende Button. Nog niet gedaan, omdat één consumer geen patroon is en het raakvlak dan groter wordt dan nodig.

Bewuste keuzes

variant="outline" met een eigen bg-[#0067b8]/10, niet variant="default" of een custom variant in button.tsx. De zachte blauwe vulling zorgt dat de knop op een witte kaart als knop leest zonder de primaire actie (meestal een wachtwoord-login ernaast) te overschreeuwen. Een eigen kleur toevoegen aan het gedeelde button-component zou die kleur voor alle knoppen beschikbaar maken voor een geval dat er maar één keer voorkomt.
De SVG is inline, geen los bestand of icon-font. Het Microsoft-logo bestaat uit vier vaste vlakken zonder verloop; inline SVG is hier lichter dan een asset-aanvraag en voorkomt een afhankelijkheid van het assetmechanisme van @col/brand-logo voor een logo dat niet van Coloriginz is.
busyLabel is optioneel in plaats van verplicht. Een consumer die geen tekst wil wisselen (bv. omdat de knop al een spinner elders toont) hoeft geen dummy-string door te geven.

Bekende beperkingen

Geen ingebouwde spinner-icoon tijdens busy; alleen tekstwissel via busyLabel. Een consumer die een visuele spinner wil, voegt die zelf toe rond het component.
Nog niet in productie getest — de eerste consumer is ook de eerste keer dat deze knop een echte Entra-flow doorloopt.