NextAuth.jsとは #React

NextAuth.jsは、Next.jsアプリケーションに簡単に認証を追加するためのライブラリです。このライブラリはNext.jsのエコシステムとの統合が深く、サーバーレス環境やサーバーサイドレンダリングのアプローチに適しています。

NextAuth.jsの主な特徴

認証プロバイダーのサポート: Google, Facebook, Twitter, GitHubなど、多くの既存の認証プロバイダーとの統合が容易です。また、任意のOAuthサービスや資格情報を使用した認証もサポートされています。

セッション管理: セッション情報はクライアントサイドで使用でき、Next.jsのAPIルートやサーバーサイド関数からもアクセス可能です。

CSRF保護: 既定でCSRF攻撃の保護が組み込まれています。

データベースレス: NextAuth.jsはデータベースを必要とせず動作しますが、セッションやユーザー情報を保存するためのデータベースとの統合もサポートされています。

Email認証: Emailとマジックリンクを使用した認証をサポートしています。

独自のコールバックとページ: 認証フロー中の特定のイベントやページ（ログインページ、エラーページなど）をカスタマイズすることができます。

TypeScriptサポート: TypeScriptの型定義が組み込まれているので、TypeScriptプロジェクトとの互換性があります。

NextAuth.jsをNext.jsプロジェクトに導入する方法

1. 必要なパッケージのインストール

最初に、NextAuth.jsとその他必要な依存関係をインストールします。

npm install next-auth

2. APIルートの作成

pages/api/auth/[...nextauth].tsという名前で新しいファイルを作成します。このファイルはNextAuth.jsのすべての認証ルートを処理します。

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // 他のプロバイダーもここに追加できます
  ],
  // その他の設定
});

3. 環境変数の設定

.env.localファイルをプロジェクトのルートディレクトリに作成し、以下の内容を追加します。これはGoogle認証の例です。

GOOGLE_CLIENT_ID=あなたのGoogleClientID
GOOGLE_CLIENT_SECRET=あなたのGoogleClientSecret
NEXTAUTH_URL=http://localhost:3000

注意: これはローカル開発用の設定です。デプロイ時には適切なURLと認証情報を使用してください。

4. アプリに認証を追加する

NextAuth.jsのuseSessionフックを使用して、アプリ内のどこからでもセッション情報にアクセスできます。

import { useSession } from "next-auth/react";

function Component() {
  const { data: session } = useSession();

  if (session) {
    return <p>こんにちは、{session.user.name}さん！</p>;
  } else {
    return <p>ログインしていません。</p>;
  }
}

5. ログインとログアウト

NextAuth.jsには、ログインとログアウトのための組み込み関数も用意されています。

import { signIn, signOut } from "next-auth/react";

// ログインボタン
<button onClick={() => signIn("google")}>Googleでログイン</button>

// ログアウトボタン
<button onClick={() => signOut()}>ログアウト</button>

これで基本的なNextAuth.jsの導入と設定は完了です。