はじめに
React/Next.js で、認証・認可を実装するには、さまざまなソリューションが存在します 🫐
自前で実装するというのも１つの選択肢ですが、
セキュアな認証システムを一から構築するには、多くの時間と労力、そして継続的なメンテナンスが必要になります。
なので、認証周りは、外部のサービス・ライブラリを導入するケースが多いですよね。
- Firebase auth
- supabase auth
- Lucia
- Auth.js
- Auth0
- Clerk
など、が有名どころでしょうか。
その中でも、今回は認証サービス Clerk について調査したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌
Clerk とは？
最も包括的なユーザー管理プラットフォーム
Clerk は、モダンな Web アプリケーション向けに、認証から、ユーザー管理機能まで、包括的なサービスを提供している、比較的新しい SaaS です。
認証に必要な機能は、一通り揃っています：
- ソーシャルログイン（Google、GitHub、Discord、そして LINE など）
- メール・パスワード認証
- 多要素認証（2FA）
- セッション管理
- ワンタイムパスコード
Clerk の特徴
それ以外にも、：
- シンプルで直感的に使える admin ダッシュボード
- React, Next.js などに対応した、SDK
- supabase, Firebase などの Baas との統合
注目点としては、
Clerk は開発者体験を重視した設計になっており、モダンな React や Next.js との親和性が高いことが挙げられます。
「認証版 stripe 」のような印象ですかね！
React プロジェクトへの Clerk 導入手順
それでは、早速、
React プロジェクトに Clerk を導入してみます。
上記の、公式のクイックスタートに従います：
1. React プロジェクトのセットアップ
Vite を使用して React の環境を構築しておきます：
npm create vite@latest clerk-react -- --template react-ts
cd clerk-react
npm install
npm run dev
2. Clerk の React SDK をインストール
これにより、事前に構築されたコンポーネント、フック、およびヘルパーにアクセスでき、ユーザー認証が容易になります。
npm install @clerk/clerk-react
3. Clerk アカウントを作成し、API キーを取得
Clerk を利用するには、アカウントが必要です:
無料枠があるので、アカウント作成後は、すぐに使用できます：
- サイト上でアカウントを作成
- ダッシュボードにアクセスし、アプリケーション（新規プロジェクト）を作成
- 公開可能な、API キー（
REACT_APP_CLERK_PUBLISHABLE_KEY）を取得 -
.env.localファイルを作成し、API キーを貼り付けます。
VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
4. <ClerkProvider>を React アプリに追加する
src/main.tsx ファイルにて、<ClerkProvider>で、アプリをラップするだけで使用できます。
- これにより、アクティブなセッションとユーザーコンテキストを、Clerk のフックや内部のコンポーネントに提供することができます。
- なお、API キーを props として
<ClerkProvider>コンポーネントに渡す必要があります。
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ClerkProvider } from "@clerk/clerk-react";
// Import your publishable key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
if (!PUBLISHABLE_KEY) {
throw new Error("Add your Clerk publishable key to the .env.local file");
}
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
<App />
</ClerkProvider>
</React.StrictMode>
);
5. Clerk SDK のコンポーネントを使用して、ヘッダーを作成する
src/App.tsx ファイルに、以下の記述を追加します：
import {
SignedIn,
SignedOut,
SignInButton,
UserButton,
} from "@clerk/clerk-react";
export default function App() {
return (
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
);
}
React で使用できる Clerk のコンポーネント
Clerk によって用意されたコンポーネントを使用して、すぐに構築できます：
-
<SignedIn>：このコンポーネントの子は**、サインイン**している間のみ見ることができます。 -
<SignedOut>：このコンポーネントの子は、サインアウトしている間のみ見ることができます。 -
<UserButton />：サインインしたユーザーのアバターを表示します。それを選択すると、アカウント管理オプションのドロップダウンメニューが開きます。 -
<SignInButton />: サインインページにリンクするか、サインインモーダルを表示するスタイルのないコンポーネント。
公式：https://clerk.com/docs/customization/account-portal/overview#sign-in
これだけで、
基本的な認証の機能、そしてログイン・ログアウトの状態による UI の出し分けが完了です 👍
Clerk の利点とは？
Clerk の魅力は、なんといっても、導入が簡単なところですね。
SDK で提供されるコンポーネントを配置するだけで、すぐに使い始めることができます！
GUI のダッシュボードもあり、管理も簡単です！
もちろん、自分で定義した UI などにカスタマイズすることも、可能です！
加えて、MAU が 10,000 人まで、無料枠で耐えられることも、嬉しいポイントです！
決算の stripe と同じように、
事前に構築されたページを組み込むことができるので、とにかく早い製品リリースを可能にします。
開発者が、より重要なビジネスロジックだけに集中することができますね！
おわりに
Clerk は、認証機能の実装を劇的に簡素化してくれます。
近年、特にスタートアップ/個人開発の初期のプロダクト構成に、Clerk の採用が増え始めている要因は、開発効率、セキュリティ、そして将来的な拡張可能性を満たす、個人開発者やスタートアップのニーズにフィットした点が挙げられます！
まだまだ、新しいサービスなので、今後も引き続きチェックしていきたいと、思います！
最後まで読んでいただだき、ありがとうございます 🥳
もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion