@kendevelops/auth-flow-kit
React と Next.js 13–16 (App Router) 向けの初心者に優しい認証ツールキット。
これは Next.js アプリのための文字通り 最も簡単で最短のセットアップ です。 追加のラッパーファイルは 不要 です。
提供内容：
- グローバル認証状態（Redux / Zustand スタイル、だがセットアップ不要）
- 事前構築された認証UI画面（ログイン、サインアップ、リセット）
- どこでも使えるシンプルな
useAuth()フック
🔄 永続化セットアップ不要
auth-flow-kit は認証状態をデフォルトでメモリ内に保持し、アプリがリロードされると自動的にセッションを復元します。
実際に意味すること：
開発者の視点から：
「ページをリフレッシュしてもログイン状態が維持されている」
それだけです。
📦 インストール
npm install @kendevelops/auth-flow-kityarn add @kendevelops/auth-flow-kitbun add @kendevelops/auth-flow-kit🚀 Usage with Next.js App Router (Recommended)
Step 1: Wrap your app in app/layout.tsx
Yes, layout.tsx can be a client component when it hosts providers. This is normal.// app/layout.tsx
"use client";import { AuthProvider } from "@kendevelops/auth-flow-kit";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}This makes auth global and available everywhere.
Step 2: Use auth screens in app/page.tsx
// app/page.tsx
"use client";import {
LoginScreen,
SignupScreen,
PasswordResetScreen,
Protected,
useAuth,
} from "@kendevelops/auth-flow-kit";
import { useEffect, useState } from "react";
export default function Home() {
const { user } = useAuth();
const [page, setPage] = useState<"login" | "signup" | "reset" | "dashboard">(
"login",
);
// Keep UI in sync with auth (important on refresh)
useEffect(() => {
if (user) setPage("dashboard");
}, [user]);
return (
<>
{page === "login" &&
{page === "dashboard" && (
)}
);
}
function Dashboard() {
const { user, logout } = useAuth();
return (
Dashboard
Welcome {user?.name}
);
}🔒 Protecting Components
Wrap anything that requires authentication:
- 読み込み中 → ローディング状態を表示
- 認証されていない場合 → 何も表示しない（または設定されていればリダイレクト）
🧠 どこでも useAuth() を使う方法
"use client";
import { useAuth } from "@kendevelops/auth-flow-kit";export default function Navbar() {
const { user, logout } = useAuth();
return (
);
}
🌐 React (Non‑Next.js) Usage
import { AuthProvider, LoginScreen } from "@kendevelops/auth-flow-kit";export default function App() {
return (
);
}
🛠 バックエンド要件
このセクションでは、バックエンドが実装すべき正確なAPI契約を定義します。ライブラリは3種類のリクエストを行い、特定のJSONレスポンス形式を期待します。
POST /auth/login
リクエストボディ:
{
"email": "user@example.com",
"password": "secret123"
}成功レスポンス (200):
{
"accessToken": "your-token-here",
"user": {
"id": "usr_abc123",
"name": "Jane Doe",
"email": "user@example.com"
}
}エラー応答（4xx）：
{ "message": "Invalid email or password" }message フィールドはログインフォームでユーザーに直接表示されます。
POST /auth/signup
リクエストボディ:
{
"name": "Jane Doe",
"email": "user@example.com",
"password": "secret123"
}サインアップフォームに追加フィールドを含めて渡すことができます — ライブラリはペイロード全体をそのまま転送します。
成功レスポンス（200）： ログインレスポンスと同じ形式です。
{
"accessToken": "your-token-here",
"user": {
"id": "usr_xyz789",
"name": "Jane Doe",
"email": "user@example.com"
}
}POST /auth/forgot _(オプション)_
リクエストボディ:
{ "email": "user@example.com" }2xx は成功として扱われます。ライブラリはレスポンスボディを読み取りません — 「メールを確認してください」という確認メッセージを表示するだけです。404 は config.endpoints.forgot の修正方法に関するガイダンス付きの詳細なコンソールエラーを記録します。レスポンスフィールドリファレンス
| フィールド | 型 | 必須 | 説明 |
| -------------------- | -------- | -------- | ------------------------------------------------------------------------------------------------- |
| accessToken | string | ✅ | localStorage に保存され、認証されたリクエストで Authorization: Bearer として送信されます。 |
| user | object | ✅ | localStorage に保存され、useAuth().user を通じて利用可能です。 |
| user.id | string | ✅ | ユニークなユーザー識別子。 |
| user.name | string | ✅ | UIで使用される表示名。 |
| user.email | string | ✅ | ユーザーのメールアドレス。 |
| refreshToken | string | ❌ | 受け入れられますが、現在ライブラリでは使用されていません。近日中に更新予定です。独自のロジックで使用可能です。 |
セッション永続化の仕組み
auth-flow-kit は永続化を完全にクライアント側で処理します — バックエンドにセッション復元や /me エンドポイントは不要です。
ログインまたはサインアップ成功時：
accessTokenをafk_access_tokenとしてlocalStorageに保存userをafk_userとしてlocalStorageに保存
AuthProvider は localStorage から直接 afk_user を読み取り、セッションを即座に復元します — ネットワークリクエストは行いません。ログアウト時は両方のキーが削除されます。
🎯 このライブラリが対象とするユーザー
- 認証を気にせずすぐにアプリ開発に取り掛かりたい開発者
- MVP ビルダー
- SaaS ダッシュボード
- 社内ツール
- 認証を学びたい学習者
🎉 サマリー
auth-flow-kit は以下を提供します：
- グローバル認証状態（リデューサーやストア不要）
- 事前構築された認証UI画面
- シンプルなバックエンド要件
- リフレッシュ安全な認証
- Next.jsやプレーンなReactで動作
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-01 ---