SocialAuthButtons

Install

npx stylesheet-ui add social-auth-buttons

Usage

Each provider’s key is passed back to onSelect — use it to start that provider’s OAuth/SSO flow with your auth backend.

import { useState } from "react";
import { SocialAuthButtons } from "@/components/ui/social-auth-buttons";

const [loadingKey, setLoadingKey] = useState<string | null>(null);

const providers = [
  { key: "google", label: "Continue with Google", icon: <GoogleIcon /> },
  { key: "apple", label: "Continue with Apple", icon: <AppleIcon /> },
];

const onSelect = async (provider: string) => {
  setLoadingKey(provider);
  try {
    await startOAuth(provider); // your auth provider's OAuth/SSO flow
  } finally {
    setLoadingKey(null);
  }
};

<SocialAuthButtons
  dividerLabel="or continue with"
  providers={providers}
  loadingKey={loadingKey}
  onSelect={onSelect}
/>

Layouts

layout="list" (default) stacks full-width labelled buttons. layout="row" lays out compact, icon-only buttons that flex to fill the row — each provider’s label becomes its accessibility label.

<SocialAuthButtons layout="row" providers={providers} onSelect={onSelect} />