Next.jsでの認証システムの実装（NextAuth.js使用）

NextAuth.jsは、Next.jsプロジェクトで簡単に認証システムを導入できる強力なツールです。OAuthプロバイダ（GoogleやGitHubなど）や、JWT（JSON Web Token）を使ったセッション管理に対応しており、柔軟で安全なユーザー認証を実現します。ここでは、NextAuth.jsを使用した基本的な認証システムの実装方法と、保護されたルートの設定について紹介します。

NextAuth.jsのセットアップ

Next.jsで認証を行うには、まずNextAuth.jsをインストールします。次に、APIフォルダに認証用のエンドポイントを作成します。

npm install next-auth

その後、/pages/api/auth/[...nextauth].tsに以下のような設定を追加します。

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  session: {
    jwt: true, // JWTセッションの有効化
  },
});

これにより、Google OAuthを利用した認証機能が実装されます。他にもGitHubやTwitterなどのプロバイダを追加することができます。

ユーザー認証とサインイン・サインアウト機能

NextAuth.jsでは、signInとsignOut関数を使って簡単にサインインとサインアウトを実装できます。

import { signIn, signOut, useSession } from 'next-auth/react';
export default function Home() {
  const { data: session } = useSession();
  return (
    <div>
      {!session ? (
        <>
          <p>サインインしていません</p>
          <button onClick={() => signIn()}>サインイン</button>
        </>
      ) : (
        <>
          <p>{session.user.email} としてサインイン中</p>
          <button onClick={() => signOut()}>サインアウト</button>
        </>
      )}
    </div>
  );
}

このコードにより、ユーザーがサインインしているかどうかを判定し、サインインしていない場合はサインインボタン、サインイン中の場合はサインアウトボタンが表示されます。

JWTセッションの管理

NextAuth.jsでは、セッション管理にJWTを利用することで、セキュアなトークンベースの認証が可能です。sessionオプションでjwt: trueを設定するだけで、JWTセッションが有効になります。セッションの有効期限などもmaxAgeオプションで設定可能です。

session: {
  jwt: true,
  maxAge: 30 * 24 * 60 * 60, // 30日間のセッション有効期限
},

保護されたルートの設定

認証されたユーザーのみがアクセスできる保護ルートを設定するには、サーバーサイドレンダリング（SSR）でgetServerSidePropsを使うか、Middlewareを活用します。 SSRを使った保護ルート：

import { getSession } from 'next-auth/react';
export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (!session) {
    return {
      redirect: {
        destination: '/signin',
        permanent: false,
      },
    };
  }
  return {
    props: { session },
  };
}

この方法では、ユーザーがサインインしていない場合、自動的にサインインページにリダイレクトされます。 Middlewareを使った保護ルート： Middlewareを使うと、特定のルートにアクセスする前に認証をチェックできます。middleware.tsファイルで設定を行い、認証されていないユーザーはサインインページへリダイレクトされます。

export { default } from "next-auth/middleware";
export const config = {
  matcher: ["/protected"],
};

まとめ

NextAuth.jsを使用することで、Next.jsで簡単かつ柔軟に認証システムを構築できます。OAuthプロバイダやJWTによるセッション管理、保護ルートの設定を組み合わせることで、セキュアでスムーズなユーザー体験を提供できます。認証が必要なアプリケーションの開発に、NextAuth.jsをぜひ活用してみてください。