はじめに
Webアプリを作るとき、認証周りって毎回面倒なんですよね。
Auth0やClerkを使えば楽なんだけど、料金が気になったり、ベンダーロックインが怖かったりする。かといって自前で実装するのは、セキュリティ面でリスクがある。
そんな中で見つけたのが「Stack Auth」というライブラリ。オープンソースで、Auth0やClerkの代替として使える認証プラットフォームなんですよ。Y Combinatorの支援も受けていて、個人的にはかなり注目しています。
Stack Authとは
Stack Authは、MIT/AGPLライセンスで公開されているオープンソースの認証・ユーザー管理スイートです。
正直なところ、「またオープンソースの認証ライブラリか」と思ったんですが、これ、意外と完成度が高い。Next.jsとの統合がスムーズで、数分でセットアップが完了するという触れ込みも嘘じゃなかったです。
特徴・メリット
1. 豊富な認証方式に対応
- パスワード認証
- OAuth（Google、GitHubなど）
- マジックリンク
- パスキー（生体認証・セキュリティキー）
- 2要素認証
これだけ揃っていれば、大抵のユースケースはカバーできます。
2. Pre-built UIコンポーネント
<SignIn/>や<SignUp/>といったコンポーネントがそのまま使えます。shadcn/uiとの統合もサポートしているので、デザインの統一感を保ちやすい。
もちろんHeadlessモードでカスタムUIを構築することも可能です。
3. B2B向け機能が充実
- マルチテナンシー
- 組織・チーム管理
- ロールベースアクセス制御（RBAC）
- ユーザーのなりすまし機能（デバッグ用）
SaaSを作るなら、この辺の機能があるかないかで開発効率が全然違います。
4. セルフホスト可能
オープンソースなので自分のサーバーでホストできます。データの管理を完全にコントロールしたい場合や、コンプライアンス要件が厳しい案件でも対応可能。
5. 料金面でのメリット
オープンソースなので、基本的には無料で使えます。有料プランもあるようですが、個人開発や小規模なプロジェクトなら無料枠で十分やっていけそう。
インストール方法
Next.jsプロジェクトへの導入は驚くほど簡単です。
npx @stackframe/init-stack@latest
このコマンド一発で、必要なファイルの生成と設定が自動で行われます。
CI/CD環境などでブラウザを開きたくない場合は：
npx @stackframe/init-stack@latest --no-browser
インストール後、Stack Authのダッシュボードでプロジェクトを作成し、APIキーを取得します。
.env.localに以下を設定：
NEXT_PUBLIC_STACK_PROJECT_ID=<your-project-id>
NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=<your-publishable-client-key>
STACK_SECRET_SERVER_KEY=<your-secret-server-key>
開発サーバーを起動して、動作確認：
npm run dev
以下のURLにアクセスして動作を確認できます：
- サインアップ:
http://localhost:3000/handler/signup - アカウント設定:
http://localhost:3000/handler/account-settings
基本的な使い方
ユーザー情報の取得
認証済みユーザーの情報を取得するのはシンプル：
import { useUser } from "@stackframe/stack";
export default function Dashboard() {
const user = useUser({ or: "redirect" });
return (
<div>
<h1>Hi, {user.displayName}</h1>
<p>Email: {user.primaryEmail}</p>
</div>
);
}
{ or: "redirect" }オプションを付けると、未認証ユーザーは自動的にサインインページにリダイレクトされます。
サインインコンポーネントの配置
import { SignIn } from "@stackframe/stack";
export default function SignInPage() {
return (
<div className="flex justify-center items-center min-h-screen">
<SignIn />
</div>
);
}
これだけでOAuth、パスワード認証、マジックリンクに対応したサインインフォームが表示されます。
ユーザーボタンの配置
ヘッダーにユーザーアイコンを表示するなら：
import { UserButton } from "@stackframe/stack";
export default function Header() {
return (
<header className="flex justify-between items-center p-4">
<h1>My App</h1>
<UserButton />
</header>
);
}
権限チェック
RBACを使った権限チェックも直感的：
const user = useUser({ or: "redirect" });
if (user.hasPermission("admin:write")) {
// 管理者権限がある場合の処理
}
実践的なユースケース
個人開発のSaaS
コスパ的には一番メリットがあるパターン。Auth0やClerkだと月額費用がかかるところ、Stack Authなら無料で始められる。MVPを作って検証する段階では、この差は大きいです。
B2B SaaS
組織管理やRBAC機能が標準で付いているので、マルチテナントのSaaSを作るときに重宝します。各テナントごとの権限設定とか、自前で実装すると結構な工数がかかるんですよね。
社内ツール
セルフホストできるので、社内のセキュリティポリシーに合わせた運用が可能。外部サービスにユーザーデータを預けたくない場合に選択肢として挙がります。
オープンソースプロジェクト
認証機能を持つOSSプロジェクトを作るとき、Stack Auth自体がオープンソースなので相性が良い。ライセンス的にも使いやすいです。
注意点
いくつか気になる点も挙げておきます。
- まだ比較的新しいプロジェクトなので、エコシステムはAuth0やClerkほど成熟していない
- 日本語のドキュメントや情報が少ない
- セルフホストする場合は、インフラの運用コストがかかる
ただ、Y Combinatorの支援を受けていることもあり、今後の成長には期待できそうです。
まとめ
Stack Authは、認証周りのコストを抑えつつ、本格的な機能を使いたい開発者にとって良い選択肢だと思います。
個人的には、以下のような人におすすめ：
- Auth0やClerkの料金が気になっている
- オープンソースで透明性のある認証基盤を使いたい
- Next.jsでサクッと認証を実装したい
- B2B SaaSで組織管理やRBACが必要
30代になって思うのは、技術選定ってコストと機能のバランスが大事ということ。Stack Authは、そのバランスが取れたライブラリだと感じています。
まずは公式サイトでドキュメントを確認して、小さなプロジェクトで試してみるのが良いと思います。
公式サイト: https://stack-auth.com GitHub: https://github.com/stack-auth/stack