Auth Buttons

Installation

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

npx shadcn@latest add @flowui/auth-buttons

Install Dependencies

Ensure you have lucide-react installed.

npm install lucide-react

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 auth-buttons.tsx.

components/ui/auth-buttons.tsx

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Github } from "lucide-react";

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

const GoogleIcon = (
    { className } : { className?: string }
) => {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48" className={cn(className)}>
            <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-12c0-6.627,5.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,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path><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.691z"></path><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
        </svg>
    )
}

export const GoogleAuthButton = ({
    text = "Google",
    iconClassName,
    ...props
} : AuthButtonProps) => {
    return (
        <Button
         {...props}
         className={cn(props.className)}
        >
            <GoogleIcon className={iconClassName} />
            {text}
        </Button>
    )
}

export const GithubAuthButton = ({
    text = "Github",
    iconClassName,
    ...props
} : AuthButtonProps) => {
    return (
        <Button
            {...props}
            className={cn(props.className)}
        >
            <Github className={cn(iconClassName)} />
            {text}
        </Button>
    )
}

Usage

Google Usage

import { GoogleAuthButton } from "@/components/ui/auth-buttons";

export function GoogleExample() {
    return (
        <>
            <GoogleAuthButton />
            <GoogleAuthButton variant="outline" text="Sign in with Google" />
            <GoogleAuthButton variant="secondary" className="w-full" />
        </>
    )
}

Github Usage

import { GithubAuthButton } from "@/components/ui/auth-buttons";

export function GithubExample() {
    return (
        <>
            <GithubAuthButton />
            <GithubAuthButton variant="outline" text="Login with Github" />
            <GithubAuthButton variant="ghost" />
        </>
    )
}

Props

The AuthButton components accept all props from the standard Shadcn Button component, plus the following:

Prop	Type	Default	Description
`text`	`string`	`"Google"` / `"Github"`	The text label to display on the button.
`iconClassName`	`string`	`undefined`	Additional class names to apply to the icon component.

Note

The GoogleAuthButton and GithubAuthButton are convenience wrappers around Button. You can use any Button prop like variant, size, className, or event handlers (onClick).

Auth Buttons

On this page