SsoButton

atom @rw3iss/auth-client/preact/atoms/SsoButton framework-adapters/preact/components/atoms/SsoButton.tsx ↗

Base “Sign in with X” button. The four named variants below (SignInWithGoogleButton, etc.) are thin wrappers that pre-fill the provider + brand styling. Roll your own variant by passing provider, brandLabel, and icon.

On click

Calls AuthClient.startSso({ provider, redirectUrl }) — the SDK handles PKCE generation, server-side state minting, and the URL construction.
Navigates the browser to auth_url. The provider redirects back to your redirectUrl with ?code=...&state=...; consumers typically mount on that route to complete the exchange.

Pass a custom onStart to take over the navigation (e.g. open in a popup window instead of full-page redirect).

Usage

import { SsoButton } from '@rw3iss/auth-client/preact/atoms';

<SsoButton
    provider={"provider"}
    redirectUrl={`${window.location.origin}/auth/callback`}
    brandLabel={"brandLabel"}
    organizationId={currentOrgId}
    onError={(err) => console.error(err)}
/>

Props

Name	Type	Description
`provider`	`string`	(required)
`redirectUrl`	`string`	(required)
`brandLabel`	`string`	(required)
`icon`	`ComponentChildren`
`client`	`AuthClient`
`organizationId`	`string`
`inviteCode`	`string`
`onStart`	`(authUrl: string) => void`	Custom navigation. Default: window.location.assign(authUrl).
`onError`	`(err: Error) => void`	Called if the start request fails.
`className`	`string`
`variant`	`'color' \| 'outline' \| 'dark'`	brand-themed background. “color” matches the provider’s brand, “outline” is a neutral border, “dark” is for dark backgrounds.