Next.js SDK

AuthSafe 用の公式 Next.js SDK。App Router と Pages Router を完全にサポートし、Next.js統合で安全な認証を実現します。

App Router

Pages Router

TypeScript

概要

authsafe-nextjs SDKは、Next.jsアプリケーション向けにシームレスなOAuth 2.1およびOpenID Connect認証を提供します。最新のNext.js開発に必要なクライアント側およびサーバー側のユーティリティが含まれています。

フルスタック認証

クライアント側のReactフック、サーバー側の認証ヘルパー、ルート保護ミドルウェア、そして事前に構築されたUIコンポーネントなど、Next.js認証に必要なすべてが揃っています。

特徴

App RouterとPages Router — Next.jsの2つのパラダイムを完全にサポート
サーバーコンポーネント — getAuth() を使用した SSR 対応の認証
クライアントフック — リアクティブUI用のuseAuth()、useSession()、useMfa()
ルート保護 — ルートグループ全体を保護するためのミドルウェア
事前構築済みUI — サインインボタン、サインアウトボタン、ユーザーボタン、プロフィール
自動トークン更新 — シームレスなセッション管理
TypeScript — すぐに使える完全な型安全性
多要素認証サポート — TOTP、メールOTP、Web認証
セキュアなクッキー — デフォルトで HttpOnly、SameSite、Secure が有効

インストール

npm install authsafe-nextjs

クイックスタート

1. 環境変数

.env.local ファイルを作成します。

NEXT_PUBLIC_AUTHSAFE_CLIENT_ID=your-client-id
NEXT_PUBLIC_AUTHSAFE_DOMAIN=https://authsafe.in
AUTHSAFE_CLIENT_SECRET=your-client-secret

2. ルートレイアウト（アプリルーター）

アプリをAuthProviderでラップする：

import { AuthProvider } from 'authsafe-nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AuthProvider
          config={{
            clientId: process.env.NEXT_PUBLIC_AUTHSAFE_CLIENT_ID,
            domain: process.env.NEXT_PUBLIC_AUTHSAFE_DOMAIN,
          }}
        >
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

3. APIルート

認証エンドポイントを作成します。

// app/api/auth/[...authsafe]/route.ts
import { handleSignIn, handleCallback, handleLogout, handleRefresh } from 'authsafe-nextjs/server';
import type { Locale } from '@/utils/locale';

export const GET = handleSignIn;
export const POST = handleCallback;

利用可能なAPI

プロバイダー

AuthProvider — アプリ用の認証コンテキストプロバイダー

フック

useAuth() — クライアントコンポーネントのメイン認証フック
useSession() — ユーザーセッションにアクセスするための軽量フック
useMfa() — 多要素認証を管理するためのフック

サーバーサイド

Server Authentication — サーバーコンポーネント用のサーバー側認証ヘルパー
API Handlers — 事前構築済みのOAuthルートハンドラー
Middleware — ルート保護ミドルウェア

コンポーネント

Pre-built Components — すぐに使える認証UIコンポーネント
Profile — フル機能のプロファイル管理UI