Auth Buttons

Installation

Run the following command to add the auth-buttons component to your project:

npx shadcn@latest add @flowui/auth-buttons

Install Button Component

This component is built on top of the Shadcn UI Button. If you haven't installed it yet, run:

npx shadcn@latest add button

Create Auth Buttons

Create the component components/flowui/auth-buttons.tsx and paste the following code:

components/flowui/auth-buttons.tsx

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ComponentProps, ComponentType } from "react";

type Provider = "google" | "github" | "facebook" | "apple" | "linkedin";
type IconType = ComponentType<{ className?: string }>;

type AuthButtonProps = {
    provider?: Provider;
    text?: string;
    iconClassName?: string;
} & ComponentProps<typeof Button>;

const icons: Record<Provider,IconType> = {
    google: (className) => <svg xmlns="http://www.w3.org/2000/svg" className={cn(className)} width="48" height="48" viewBox="0 0 48 48"><path fill="#ffc107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C12.955 4 4 12.955 4 24s8.955 20 20 20s20-8.955 20-20c0-1.341-.138-2.65-.389-3.917"/><path fill="#ff3d00" d="m6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C16.318 4 9.656 8.337 6.306 14.691"/><path fill="#4caf50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.9 11.9 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44"/><path fill="#1976d2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917"/></svg>,
    github: (className) => <svg xmlns="http://www.w3.org/2000/svg" className={cn(className)} width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>,
    facebook: (className) => <svg xmlns="http://www.w3.org/2000/svg" className={cn(className)} width="256" height="256" viewBox="0 0 256 256"><path fill="#1877f2" d="M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445"/><path fill="#fff" d="m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z"/></svg>,
    apple: (className) => <svg xmlns="http://www.w3.org/2000/svg" className={cn(className)} width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25"/></svg>,
    linkedin: (className) => <svg xmlns="http://www.w3.org/2000/svg" className={cn(className)} width="128" height="128" viewBox="0 0 128 128"><path fill="#0076b2" d="M116 3H12a8.91 8.91 0 0 0-9 8.8v104.42a8.91 8.91 0 0 0 9 8.78h104a8.93 8.93 0 0 0 9-8.81V11.77A8.93 8.93 0 0 0 116 3"/><path fill="#fff" d="M21.06 48.73h18.11V107H21.06zm9.06-29a10.5 10.5 0 1 1-10.5 10.49a10.5 10.5 0 0 1 10.5-10.49m20.41 29h17.36v8h.24c2.42-4.58 8.32-9.41 17.13-9.41C103.6 47.28 107 59.35 107 75v32H88.89V78.65c0-6.75-.12-15.44-9.41-15.44s-10.87 7.36-10.87 15V107H50.53z"/></svg>
}

export const AuthButton = ({
    provider = "google",
    text = "Google",
    iconClassName,
    className,
    ...props
} : AuthButtonProps) => {
    const Icon = icons[provider];
    return (
        <Button
            className={cn(
                "flex items-center gap-2",
                className
            )}
            {...props}
        >
            <div className="size-4 shrink-0 flex items-center justify-center">
                <Icon className={cn("size-full", iconClassName)} />
            </div>
            {text}
        </Button>
    )
}

Examples

Providers

Support for major authentication providers out of the box.

import { AuthButton } from "@/components/flowui/auth-buttons";

export function ProvidersExample() {
    return (
        <div className="flex flex-wrap gap-4">
            <AuthButton variant="outline" provider="google" text="Google" />
            <AuthButton variant="outline" provider="github" text="Github" />
            <AuthButton variant="outline" provider="facebook" text="Facebook" />
            <AuthButton variant="outline" provider="apple" text="Apple" />
            <AuthButton variant="outline" provider="linkedin" text="LinkedIn" />
        </div>
    )
}

Button Variants

The AuthButton component supports all standard shadcn/ui button variants. This allows you to match the level of emphasis needed for each provider.

import { AuthButton } from "@/components/flowui/auth-buttons";

export function VariantsExample() {
    return (
        <div className="flex flex-wrap gap-4 items-center justify-center">
            <AuthButton variant="default" provider="google" />
            <AuthButton variant="outline" provider="google" />
            <AuthButton variant="secondary" provider="google" />
            <AuthButton variant="ghost" provider="google" />
        </div>
    )
}

Different Sizes

Since it's built on top of the shadcn Button, you can use all standard sizes (xs, sm, default, lg, icon) to fit your design.

import { AuthButton } from "@/components/flowui/auth-buttons";

export function SizesExample() {
    return (
        <div className="flex flex-wrap items-center justify-center gap-4">
            <AuthButton provider="github" size="sm" text="Small" />
            <AuthButton provider="github" size="default" text="Default" />
            <AuthButton provider="github" size="lg" text="Large" />
        </div>
    )
}

Custom Configuration

Easily customize text and styling for a unique feel.

import { AuthButton } from "@/components/flowui/auth-buttons";

export function CustomTextExample() {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <AuthButton provider="google" text="Sign in with Google" className="w-full" />
            <AuthButton provider="github" text="Login with GitHub" className="w-full" variant="outline" />
        </div>
    )
}

Props

The AuthButton component is a wrapper around the shadcn/ui Button, meaning it accepts all standard Button props (like variant, size, className, etc.) plus:

Prop	Type	Default	Description
`provider`	`Provider`	`"google"`	Supported providers: `google`, `github`, `facebook`, `apple`, `linkedin`.
`text`	`string`	`"Google"`	The text label to display on the button.
`iconClassName`	`string`	`undefined`	Additional class names for the icon.

Universal Compatibility

Because this component extends the base Button, you can use any Button prop. For example, use variant="ghost" for a subtle look, or size="lg" for call-to-action buttons.

On this page