/jslno/better-auth-kit

Wiki directory

Browse AI-generated documentation for any repository.

OAuth Components

Relevant source files

The following files were used as context for generating this wiki page:

The Better Auth Kit UI library provides a collection of React components to facilitate easy integration of OAuth providers into an application. These components offer a streamlined way to present users with various social sign-in options, handling the client-side logic of initiating the authentication flow. The system is built around a primary OAuth container component that manages the state and logic, and individual button components for each provider (e.g., GoogleOAuth, DiscordOAuth).

The components are designed to work with the better-auth client library, specifically using authClient to trigger the sign-in process. They are customizable, allowing for different layouts (e.g., icon-only buttons) and visual arrangements.

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx, packages/libraries/ui/registry.json

Component Architecture

The OAuth feature is composed of a main OAuth wrapper component and several individual provider-specific button components. The OAuth component orchestrates the authentication logic and renders the child button components.

This diagram illustrates the parent-child relationship between the main OAuth component and the individual provider buttons it renders by default.

Generating architecture diagram...

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:102-112

The `OAuth` Component

This is the main container component that groups OAuth providers. It manages the shared logic for initiating the sign-in flow and handling loading states.

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:49-115

Properties

Prop	Type	Description	Default Value
`callbackURL`	`string` (optional)	The URL to redirect to after a successful sign-in.	`undefined`
`iconOnly`	`boolean` (optional)	If `true`, the provider buttons will only display their logo, without text.	`undefined`
`dividerPlacement`	`"above"` \| `"below"` (optional)	Determines whether the "or" divider is placed above or below the buttons.	`"above"`
`isLoading`	`boolean`	A boolean state indicating if an authentication process is in progress.	-
`setIsLoading`	`Dispatch<SetStateAction<boolean>>`	The state setter function to update the `isLoading` state.	-

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:50-56

Individual Provider Components

For each supported OAuth provider, there is a dedicated button component (e.g., GoogleOAuth, GithubOAuth, DiscordOAuth). These components are responsible for rendering a styled button with the provider's logo and name. When clicked, they invoke the onClick function passed down from the parent OAuth component, providing their specific providerId.

Example implementation of the GithubOAuth component:

// packages/libraries/ui/registry/new-york/github-oauth/github-oauth.tsx:48-65
export function GithubOAuth(props: Props) {
	return (
		<Button
			className={cn(
				"grow cursor-pointer basis-[calc(33.33%-0.5rem)]",
				props.iconOnly ? "min-w-[80px]" : "min-w-[110px]",
			)}
			onClick={() =>
				props.onClick({ providerId: "github", type: "supported-provider" })
			}
			variant={"outline"}
			disabled={props.isLoading}
		>
			{logo}{" "}
			<span
				className={cn(
					props.iconOnly && "hidden",
					"text-muted-foreground font-normal",
				)}
			>
				GitHub
			</span>
		</Button>
	);
}

Sources: packages/libraries/ui/registry/new-york/github-oauth/github-oauth.tsx:48-65, packages/libraries/ui/registry/new-york/google-oauth/google-oauth.tsx:45-62, packages/libraries/ui/registry/new-york/discord-oauth/discord-oauth.tsx:46-63

Authentication Flow

The authentication process is initiated when a user clicks on one of the provider buttons. The OAuth component's onClick handler then calls the appropriate better-auth client method.

The following sequence diagram shows the flow from a user click to the handling of success or error responses.

Generating architecture diagram...

This flow demonstrates how the UI state is managed via setIsLoading and how user feedback for errors is provided using sonner toast notifications.

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:58-99

The `OAuthButtonPressEvent` Type

This type defines the contract for the onClick handler. It specifies the shape of the event object passed when a provider button is clicked.

// packages/libraries/ui/registry/new-york/oauth/oauth.tsx:10-33
export type OAuthButtonPressEvent = ({
	providerId,
	type,
}: {
	providerId: (
		| "apple"
		| "discord"
		| "facebook"
		| "github"
		| "google"
		| "microsoft"
		| "spotify"
		| "twitch"
		| "twitter"
		| "dropbox"
		| "linkedin"
		| "gitlab"
		| "tiktok"
		| "reddit"
		| "roblox"
		| "vk"
	) &
		string;
	/**
	 * If the provider is supported by Better Auth, this will be `supported-provider`. Anything such as google, apple, discord, etc, are supported providers.
	 * Everything else that requires the use of the Generic OAuth plugin, will be `external-provider`.
	 */
	type: "supported-provider" | "external-provider";
}) => void;

The providerId is a string literal of all supported providers, and the type distinguishes between natively supported providers and those requiring a generic OAuth plugin.

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:10-33

Available Providers

The component library includes pre-styled buttons for numerous OAuth providers. The full list of providers is defined in the component registry and the OAuthButtonPressEvent type.

Provider	Component Name	`providerId`
Apple	`apple-oauth`	`apple`
Discord	`discord-oauth`	`discord`
Dropbox	`dropbox-oauth`	`dropbox`
Facebook	`facebook-oauth`	`facebook`
Github	`github-oauth`	`github`
Gitlab	`gitlab-oauth`	`gitlab`
Google	`google-oauth`	`google`
LinkedIn	`linkedin-oauth`	`linkedin`
Microsoft	`microsoft-oauth`	`microsoft`
Reddit	`reddit-oauth`	`reddit`
Roblox	`roblox-oauth`	`roblox`
Spotify	`spotify-oauth`	`spotify`
TikTok	`tiktok-oauth`	`tiktok`
Twitch	`twitch-oauth`	`twitch`
Twitter	`twitter-oauth`	`twitter`
VK	`vk-oauth`	`vk`

Sources: packages/libraries/ui/registry.json, packages/libraries/ui/registry/new-york/oauth/oauth.tsx:15-30

Summary

The OAuth components in better-auth-kit provide a robust and developer-friendly solution for adding social sign-in functionality. By encapsulating the logic within a main OAuth component and providing a suite of individual, customizable provider buttons, the library significantly simplifies the client-side implementation of OAuth 2.0 flows. The clear separation of concerns, props-based customization, and built-in state management make it a powerful tool for any application using Better Auth.

Sources: README.md, packages/libraries/ui/registry/new-york/oauth/oauth.tsx

OAuth Components

Relevant source files

The following files were used as context for generating this wiki page:

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx, packages/libraries/ui/registry.json

Component Architecture

This diagram illustrates the parent-child relationship between the main OAuth component and the individual provider buttons it renders by default.

Generating architecture diagram...

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:102-112

The `OAuth` Component

This is the main container component that groups OAuth providers. It manages the shared logic for initiating the sign-in flow and handling loading states.

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:49-115

Properties

Prop	Type	Description	Default Value
`callbackURL`	`string` (optional)	The URL to redirect to after a successful sign-in.	`undefined`
`iconOnly`	`boolean` (optional)	If `true`, the provider buttons will only display their logo, without text.	`undefined`
`dividerPlacement`	`"above"` \| `"below"` (optional)	Determines whether the "or" divider is placed above or below the buttons.	`"above"`
`isLoading`	`boolean`	A boolean state indicating if an authentication process is in progress.	-
`setIsLoading`	`Dispatch<SetStateAction<boolean>>`	The state setter function to update the `isLoading` state.	-

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:50-56

Individual Provider Components

Example implementation of the GithubOAuth component:

// packages/libraries/ui/registry/new-york/github-oauth/github-oauth.tsx:48-65
export function GithubOAuth(props: Props) {
	return (
		<Button
			className={cn(
				"grow cursor-pointer basis-[calc(33.33%-0.5rem)]",
				props.iconOnly ? "min-w-[80px]" : "min-w-[110px]",
			)}
			onClick={() =>
				props.onClick({ providerId: "github", type: "supported-provider" })
			}
			variant={"outline"}
			disabled={props.isLoading}
		>
			{logo}{" "}
			<span
				className={cn(
					props.iconOnly && "hidden",
					"text-muted-foreground font-normal",
				)}
			>
				GitHub
			</span>
		</Button>
	);
}

Authentication Flow

The authentication process is initiated when a user clicks on one of the provider buttons. The OAuth component's onClick handler then calls the appropriate better-auth client method.

The following sequence diagram shows the flow from a user click to the handling of success or error responses.

Generating architecture diagram...

This flow demonstrates how the UI state is managed via setIsLoading and how user feedback for errors is provided using sonner toast notifications.

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:58-99

The `OAuthButtonPressEvent` Type

This type defines the contract for the onClick handler. It specifies the shape of the event object passed when a provider button is clicked.

// packages/libraries/ui/registry/new-york/oauth/oauth.tsx:10-33
export type OAuthButtonPressEvent = ({
	providerId,
	type,
}: {
	providerId: (
		| "apple"
		| "discord"
		| "facebook"
		| "github"
		| "google"
		| "microsoft"
		| "spotify"
		| "twitch"
		| "twitter"
		| "dropbox"
		| "linkedin"
		| "gitlab"
		| "tiktok"
		| "reddit"
		| "roblox"
		| "vk"
	) &
		string;
	/**
	 * If the provider is supported by Better Auth, this will be `supported-provider`. Anything such as google, apple, discord, etc, are supported providers.
	 * Everything else that requires the use of the Generic OAuth plugin, will be `external-provider`.
	 */
	type: "supported-provider" | "external-provider";
}) => void;

The providerId is a string literal of all supported providers, and the type distinguishes between natively supported providers and those requiring a generic OAuth plugin.

Sources: packages/libraries/ui/registry/new-york/oauth/oauth.tsx:10-33

Available Providers

The component library includes pre-styled buttons for numerous OAuth providers. The full list of providers is defined in the component registry and the OAuthButtonPressEvent type.

Provider	Component Name	`providerId`
Apple	`apple-oauth`	`apple`
Discord	`discord-oauth`	`discord`
Dropbox	`dropbox-oauth`	`dropbox`
Facebook	`facebook-oauth`	`facebook`
Github	`github-oauth`	`github`
Gitlab	`gitlab-oauth`	`gitlab`
Google	`google-oauth`	`google`
LinkedIn	`linkedin-oauth`	`linkedin`
Microsoft	`microsoft-oauth`	`microsoft`
Reddit	`reddit-oauth`	`reddit`
Roblox	`roblox-oauth`	`roblox`
Spotify	`spotify-oauth`	`spotify`
TikTok	`tiktok-oauth`	`tiktok`
Twitch	`twitch-oauth`	`twitch`
Twitter	`twitter-oauth`	`twitter`
VK	`vk-oauth`	`vk`

Sources: packages/libraries/ui/registry.json, packages/libraries/ui/registry/new-york/oauth/oauth.tsx:15-30

Summary

Sources: README.md, packages/libraries/ui/registry/new-york/oauth/oauth.tsx

OAuth Components

Component Architecture

The OAuth Component

Properties

Individual Provider Components

Authentication Flow

The OAuthButtonPressEvent Type

Available Providers

Summary

OAuth Components

Component Architecture

The OAuth Component

Properties

Individual Provider Components

Authentication Flow

The OAuthButtonPressEvent Type

Available Providers

Summary

The `OAuth` Component

The `OAuthButtonPressEvent` Type

The `OAuth` Component

The `OAuthButtonPressEvent` Type