FeaturesCMS SDK認証

認証

⚠️

現在、next-auth@4 を使用した Next.js との統合のみサポートしています。

このドキュメントではCMS SDKを利用した認証処理の実装方法を説明します。現在、next-auth v4を使用した認証をサポートしています。このガイドでは以下の内容を学べます：

  • next-auth v4のインストール方法
  • 認証設定の構成方法
  • 認証APIの実装方法
  • アクセス制御のためのMiddlewareの設定方法

next-auth v4 のインストール

next-auth v4をインストールするには以下のコマンドを実行します。auth.jsによる導入例は現時点で提供していません。

pnpm add next-auth@4

認証設定の構成

認証設定はauthOptionsオブジェクトで構成します。app/api/auth/[...nextauth].jsファイルを作成し、以下のコードを記述します。

import { OrizmNextAuth } from "@orizm/cms-sdk";
import type { NextAuthOptions, Session } from "next-auth";
import type { JWT } from "next-auth/jwt";
 
export interface CustomSession extends Session {
  accessToken: string;
}
 
interface ExtendedToken extends JWT {
  accessToken?: string;
}
 
const orizmAuth = OrizmNextAuth.generate({
  id: "Orizm",
  name: "Orizm",
  clientId: process.env.ORIZM_CLIENT_ID,
  clientSecret: process.env.ORIZM_CLIENT_SECRET,
  projectName: process.env.NEXT_PUBLIC_ORIZM_PROJECT,
  baseURL: process.env.NEXT_PUBLIC_ORIZM_BASE_URL,
});
 
export const authOptions = {
  secret: process.env.NEXTAUTH_SECRET,
  // Orizm認証プロバイダーを設定
  providers: [orizmAuth.provider],
  // JWTベースのセッション管理を設定
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async jwt(params) {
      const extendedToken: ExtendedToken = params.token as ExtendedToken;
      if (params.account) {
        if (params.account.accessToken) {
          extendedToken.accessToken = params.account.accessToken as string;
        }
      }
      return orizmAuth.jwtCallback({ ...params, token: extendedToken });
    },
    async session(params) {
      const extendedToken: ExtendedToken = params.token as ExtendedToken;
      const customSession: CustomSession = {
        ...params.session,
        accessToken: extendedToken.accessToken ?? "",
      };
      return orizmAuth.sessionCallback({ ...params, session: customSession });
    },
  },
  debug: process.env.NEXT_PUBLIC_VERCEL_ENV === "development",
};

上記の設定により、/api/auth/*パスに認証関連のAPIエンドポイントが自動生成され、Next.jsのルーティングで利用できるようになります。

認証APIの実装

認証APIはNext.jsのAPI Routesを使って実装されます。app/api/auth/[...nextauth].jsファイルにより、次のAPIエンドポイントが自動的に提供されます：

  • /api/auth/signin - サインイン画面の提供
  • /api/auth/signout - サインアウト処理
  • /api/auth/session - セッション情報の取得
  • 各認証プロバイダーに対応した認証フロー

必要に応じてauthOptionsの設定を拡張し、カスタムコールバックやイベントハンドラを追加してください。

Middlewareによるアクセス制御

認証済みユーザーのみにアクセスを許可するには、Next.jsのMiddlewareを使用します。src/middleware.tsファイルを作成し、以下のコードを追加します：

import { withAuth } from "next-auth/middleware";
 
export default withAuth({
  pages: {
    signIn: "/signin",
  },
});
 
/**
 * @see https://vercel.com/docs/functions/edge-middleware/middleware-api#match-based-on-a-negative-lookahead
 */
export const config = {
  matcher: [
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)|signin|api).*)",
  ],
};

アクセス制御の設定をカスタマイズするには、matcherパターンを変更するか、認可コールバックを追加してください。

関連ドキュメント

詳細な情報は、公式ドキュメントを参照してください：

インストールCLI