Better Auth UIで認証画面の実装が劇的に楽になった話

はじめに

認証画面の実装、正直面倒くさいですよね。ログイン、サインアップ、パスワードリセット、メール認証...機能自体は単純なのに、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の組み合わせは、そういう「時間の使い方を最適化したい」人には刺さると思います。認証周りでまだ自前実装している人は、一度試してみる価値ありますよ。

参考リンク

• Better Auth UI 公式サイト
• Better Auth UI GitHub
• Best of JS - Better Auth UI
• npm - @daveyplate/better-auth-ui