はじめに
認証画面の実装、正直面倒くさいですよね。ログイン、サインアップ、パスワードリセット、メール認証...機能自体は単純なのに、UIを一から作ると地味に時間がかかる。
そんな中で見つけたのがBetter Auth UI。Better Authという認証ライブラリ向けに作られた、shadcn/uiベースの認証UIコンポーネント集です。
個人的には「認証画面にこれ以上時間かけたくないな」と思っていたので、まさにドンピシャのライブラリでした。GitHubで1,400スター以上、32人のコントリビューターが開発に参加しているプロジェクトです。
Better Auth UIとは
Better Auth UIは、認証フレームワーク「Better Auth」向けに設計された美しいUIコンポーネント集です。「Plug & play shadcn/ui auth components for better-auth」というコンセプトで、文字通りプラグ&プレイで使えます。
提供されているコンポーネントはこんな感じ：
- サインイン・サインアップフォーム
- パスワードリセット画面
- マジックリンク認証
- ユーザーボタン（プロフィールドロップダウン）
- 設定カード（アカウント・セキュリティ管理）
- メールテンプレート
これ、意外と嬉しいのがメールテンプレートまで用意されていること。認証系のメール文面って後回しにしがちだけど、最初から用意されているのは時短になる。
特徴・メリット
1. shadcn/uiベースで美しい
Tailwind CSSとshadcn/uiをベースにしているので、見た目がモダンで統一感がある。既存のshadcn/uiプロジェクトにスムーズに統合できます。
30代になって思うのは、デザインにこだわりすぎて時間を溶かすより、良い感じのコンポーネントをサクッと使う方が賢いということ。
2. 完全カスタマイズ可能
shadcn/uiの思想を引き継いで、コンポーネントは完全にカスタマイズ可能。プロジェクトのブランドカラーに合わせたり、レイアウトを変えたりするのも自由です。
3. Better Authとのシームレスな連携
Better Auth v1.2以上と連携することを前提に設計されているので、認証ロジックとUIの接続がスムーズ。認証状態の管理やエラーハンドリングも考慮されています。
4. レスポンシブ対応
フルレスポンシブなので、モバイルからデスクトップまで対応。スマホでのログイン体験も良好です。
5. TypeScriptで型安全
TypeScript 100%で書かれているので、型推論がしっかり効く。propsの補完も効くのは開発効率に直結しますね。
インストール方法
前提条件
- shadcn/uiがCSS変数有効でインストール済み
- Sonner
<Toaster />が設定済み（通知用） - Tailwind CSS v4
- Better Auth v1.2以上
パッケージのインストール
npm install @daveyplate/better-auth-ui
Tailwind CSSの設定
tailwind.config.tsに以下を追加：
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
// 既存の設定...
"./node_modules/@daveyplate/better-auth-ui/dist/**/*.{js,ts,jsx,tsx,mdx}"
],
// ...
}
export default config
これでBetter Auth UIのコンポーネントがTailwindでスタイリングされるようになります。
基本的な使い方
AuthUIProviderの設定
まずはプロバイダーでアプリをラップします。
// app/providers.tsx
"use client"
import { AuthUIProvider } from "@daveyplate/better-auth-ui"
import { authClient } from "@/lib/auth-client"
export function Providers({ children }: { children: React.ReactNode }) {
return (
<AuthUIProvider authClient={authClient}>
{children}
</AuthUIProvider>
)
}
サインインページの実装
動的ルートを使った実装が推奨されています。
// app/auth/[...pathname]/page.tsx
import { AuthCard } from "@daveyplate/better-auth-ui"
export default function AuthPage() {
return (
<div className="flex min-h-screen items-center justify-center">
<AuthCard />
</div>
)
}
これだけで、以下のルートが自動的に利用可能になります：
/auth/login- ログイン/auth/signup- サインアップ/auth/forgot-password- パスワードリセット/auth/reset-password- 新パスワード設定/auth/magic-link- マジックリンク認証/auth/logout- ログアウト
ルートのパスはカスタマイズも可能です。
ユーザーボタンの実装
ログイン後に表示するユーザーメニュー。
import { UserButton } from "@daveyplate/better-auth-ui"
export function Header() {
return (
<header className="flex items-center justify-between p-4">
<h1>My App</h1>
<UserButton />
</header>
)
}
クリックするとドロップダウンメニューが開いて、プロフィール設定やログアウトにアクセスできます。
設定カードの実装
ユーザー設定画面用のコンポーネント。
import { SettingsCards } from "@daveyplate/better-auth-ui"
export default function SettingsPage() {
return (
<div className="container mx-auto py-8">
<h1 className="text-2xl font-bold mb-6">アカウント設定</h1>
<SettingsCards />
</div>
)
}
アカウント情報の編集、パスワード変更、二要素認証の設定などがまとめて表示されます。
実践的なユースケース
ソーシャルログインの追加
Better Authがソーシャルログインに対応していれば、UIも自動で対応します。
// lib/auth.ts (サーバーサイド)
import { betterAuth } from "better-auth"
export const auth = betterAuth({
socialProviders: {
google: {
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
},
github: {
clientId: process.env.GITHUB_CLIENT_ID!,
clientSecret: process.env.GITHUB_CLIENT_SECRET!,
},
},
})
UIは設定を読み取って、適切なソーシャルログインボタンを表示してくれます。
カスタムテーマの適用
shadcn/uiのテーマシステムを使ってカスタマイズできます。
/* globals.css */
@layer base {
:root {
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
/* プロジェクトに合わせてカスタマイズ */
}
}
コールバックURLの設定
認証後のリダイレクト先を指定できます。
<AuthCard
callbackURL="/dashboard"
signUpCallbackURL="/onboarding"
/>
サインアップ時だけオンボーディング画面に誘導する、といった使い分けも可能。
ローディング状態のカスタマイズ
認証処理中の表示もカスタマイズできます。
<AuthCard
loadingComponent={<MyCustomLoader />}
/>
Auth CNとの比較
同じくBetter Auth向けのUIライブラリとして「Auth CN」というのもあります。
# Auth CNの場合
npx shadcn@latest add @auth-cn/sign-in-01
npx shadcn@latest add @auth-cn/sign-up-01
Auth CNはshadcn/uiのレジストリを使ってコンポーネントを追加する方式。Better Auth UIはnpmパッケージとして提供される方式です。
個人的には、Better Auth UIの方がセットアップが簡単で、機能も豊富な印象。ただ、完全にソースを手元に置きたい場合はAuth CNの方が向いているかもしれません。
まとめ
Better Auth UIを使ってみて感じた変化：
- 開発速度: 認証画面の実装時間が1/10くらいになった
- 品質: プロが作った美しいUIがすぐ使える
- 保守性: Better Authとの連携が考慮されていて安心
- カスタマイズ性: shadcn/uiベースで自由度が高い
正直なところ、認証画面って差別化ポイントじゃないですよね。ユーザーは「使えればいい」わけで、そこに時間をかけるより、コア機能の開発に集中した方がいい。
Better Auth + Better Auth UIの組み合わせは、そういう「時間の使い方を最適化したい」人には刺さると思います。認証周りでまだ自前実装している人は、一度試してみる価値ありますよ。