Plug & play shadcn/ui animated auth components for better-auth.
Fully customizable, see the AuthCard Props section for more details.
Coming Soon: Settings Cards, Email Templates, NextUI Port
To install the package, run:
npm install @daveyplate/better-auth-ui
Add the following to tailwind.config.ts:
content: [
"./node_modules/@daveyplate/better-auth-ui/dist/**/*.{js,ts,jsx,tsx,mdx}"
]
When using a dynamic route it provides the following paths:
["login", "signup", "logout", "magic-link", "forgot-password", "reset-password", "logout"]
Customizable via authPaths prop.
You must have shadcn/ui installed with CSS variables enabled.
Note: Toast is totally optional, it will render errors inline if not provided. This example uses shadcn/ui Toast.
app/auth/[auth]/page.tsx
import { authViews } from "@daveyplate/better-auth-ui"
import AuthView from "./auth-view"
export function generateStaticParams() {
return authViews.map((auth) => ({ auth }))
}
export default function AuthPage() {
return <AuthView />
}
app/auth/[auth]/auth-view.tsx
"use client"
import { useCallback } from "react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { AuthCard, AuthToastOptions } from "@daveyplate/better-auth-ui"
import { AuthToastOptions } from "@daveyplate/better-auth-ui"
import { authClient } from "@/lib/auth-client"
import { useToast } from "@/hooks/use-toast"
import { ToastAction } from "@/components/ui/toast"
export default function AuthView() {
const router = useRouter()
const pathname = usePathname()
const { toast } = useToast()
const callbackURL = "/"
const authToast = useCallback((
{ variant, description, action }: AuthToastOptions
) => {
toast({
variant,
description,
action: action && (
<ToastAction
altText={action.label}
onClick={action.onClick}
>
{action.label}
</ToastAction>
)
})
}, [toast])
return (
<main className="flex flex-col items-center my-auto p-4">
<AuthCard
authClient={authClient}
pathname={pathname}
appRouter={router}
providers={[
"github",
]}
toast={authToast}
callbackURL={callbackURL}
LinkComponent={Link}
disableAnimation={true}
/>
</main>
)
}
If you don't provide a toast function, the AuthCard will render an inline Alert component for notifications.
pages/auth/[auth].tsx
import { useCallback } from "react"
import Link from "next/link"
import { useRouter } from "next/router"
import { AuthCard, authViews } from "@daveyplate/better-auth-ui"
import { useToast } from "@/hooks/use-toast"
import { ToastAction } from "@/components/ui/toast"
export default function AuthPage() {
const nextRouter = useRouter()
const { toast } = useToast()
const callbackURL = "/"
const authToast = useCallback((
{ variant, description, action }: AuthToastOptions
) => {
toast({
variant,
description,
action: action && (
<ToastAction
altText={action.label}
onClick={action.onClick}
>
{action.label}
</ToastAction>
)
})
}, [toast])
return (
<div className="flex justify-center items-center min-h-screen">
<AuthCard
authClient={authClient}
nextRouter={nextRouter}
providers={[
"github",
]}
toast={authToast}
callbackURL={callbackURL}
LinkComponent={Link}
/>
</div>
)
}
export const getStaticPaths: GetStaticPaths = async () => {
return {
authViews.map((auth) => {
return { params: { auth } }
}),
fallback: false
}
}
To use Better Auth UI in a React project, follow these steps:
Use disableRouting={true}
if you don't want to use a dynamic path.
Otherwise, navigate, pathname and LinkComponent are required.
dynamic-auth-page-path.tsx
import { useNavigate, useLocation, NavLink } from "react-router-dom"
import { AuthCard } from "@daveyplate/better-auth-ui"
export default function AuthPage() {
const navigate = useNavigate()
const location = useLocation()
return (
<div className="flex justify-center items-center min-h-screen">
<AuthCard
authClient={authClient}
navigate={navigate}
pathname={location.pathname}
LinkComponent={NavLink}
/>
</div>
)
}
You can customize the AuthCard component by passing the following props:
Prop Name | Type | Description | Default Value |
---|---|---|---|
authClient | AuthClient |
The authentication client instance. | Required |
navigate | (url: string) => void |
Function to navigate to a different URL. | undefined |
pathname | string |
The current pathname. | undefined |
nextRouter | NextRouter |
Next.js router instance. | undefined |
initialView | AuthView |
The initial view to display. | undefined |
emailPassword | boolean |
Enable email and password authentication. | true |
username | boolean |
Enable username field for signup. | false |
forgotPassword | boolean |
Enable forgot password functionality. | true |
magicLink | boolean |
Enable magic link authentication. | false |
passkey | boolean |
Enable passkey authentication. | false |
providers | SocialProvider[] |
List of social providers for authentication. | [] |
socialLayout | "horizontal" | "vertical" |
Layout for social provider buttons. | *automatic* |
localization | Record<string, string> |
Localization strings for the component. | undefined |
disableRouting | boolean |
Disable internal routing. | false |
disableAnimation | boolean |
Disable animations. | false |
signUpWithName | boolean |
Enable name field for signup. | false |
callbackURL | string |
URL to redirect to after authentication. | "/" |
authPaths | Record<AuthView, string> |
Custom paths for authentication views. | {} |
classNames | Record<string, string> |
Custom class names for the component elements. | {} |
componentStyle | "default" | "new-york" |
Style variant for the component. | "default" |
toast | (options: AuthToastOptions) => void |
Function to display toast notifications. | undefined |
LinkComponent | React.ComponentType<{ href: string, to: any, className?: string, children: ReactNode }> |
Custom link component. | undefined |
This project is licensed under the MIT License. See the LICENSE file for details.