やったこと

• 実践Next.js 7章 認証機能 読了

学んだこと

Next.js で、クレデンシャル情報を環境変数へ設定する

想定するクレデンシャル: DB サーバーのログイン情報や、API の認証情報

基本は以下の通り。

• .env といった隠れファイルに、環境変数をまとめる
  • web アプリケーションではおなじみの名前とのこと
• .gitignore に、環境変数をまとめたファイルのファイル名を記述し、git 管理下から外す

Next.js では、以下のファイルを自動で読み込んでくれる。

• .env: 常時読み込む
• .env.$(NODE_ENV): 該当の NODE_ENV の値が有効な場合に読み込む
• .env.local: ローカル開発環境で常時読み込む
• .env.$(NODE_ENV).local: 開発環境にて、該当の NODE_ENV の値が有効な場合に読み込む

$(NODE_ENV) の有効な値は、 production, development, test の 3 つ。

なお、 Next.js 以外だと、dotenv 等のライブラリを利用することになる。

なお、環境変数ファイルは、以下の順で読み込まれる。

1. .env.development.local
2. .env.local
3. .env.development
4. .env

既に存在している環境変数は上書きされない。
つまり、環境変数が重複していた場合、優先順位の高いファイルの値が設定されることになる。

環境変数の公開範囲

◆public な環境変数

NEXT_PUBLIC というプレフィックスが付く環境変数のこと。
この環境変数は、ビルド時にインライン化される。
値を変えるには再ビルドが必要。

◆private な環境変数

NEXT_PUBLIC というプレフィックスを持たない環境変数のこと。
private な環境変数は、（client component に直書きしたなどで）誤ってインライン化しようとした場合、空文字で置き換えてくれる。

NextAuth.js の導入

NextAuth.js の導入手順

• 環境変数 NEXTAUTH_SECRET の設定
• Middleware の設置
• NextAuthOptions の設定
• Route Handler の設置
• getServerSession の利用

環境変数 NEXTAUTH_SECRET の設定

OAuth 認証用 にシークレットキーを作成し、NextAuth.js に読み込ませる。

シークレットキーは、 openssl コマンドなどで生成する。

openssl rand -base64 32

参考 : https://next-auth.js.org/configuration/options#nextauth_secret

生成したシークレットキーは、.env 系統の環境変数ファイルに、 NEXTAUTH_SECRET という名前の変数で定義する。
あとは、 NextAuth.js が、 NEXTAUTH_SECRET 環境変数を自動で判別し、読み込んでくれる。

Middleware の設置

Middleware は、「リクエストを処理する前に実行したいコード」を定義できる機能。

ユースケース : レスポンスヘッダの書き換えやリダイレクト

NextAuth.js では Middleware を活用して、
特定のURLパターンにマッチするRoute を「認証が必要なRoute」としてハンドリングする
といったことが可能。

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

NextAuthOptions の設定

NextAuth.js の設定をカスタムする。

NextAuthOptions インターフェースに沿ったJSONを定義し、 export して使用する。

NextAuthOptions インターフェースの主要なオプションは以下の通り。

• adapter? : Adapter
  • 他のサービス（ORMなど）と連携する場合に使用する、アダプター
• providers : Provider[]
  • OAuth プロバイダー情報。
  • Google なら、 GoogleProvider オブジェクト。
• callbacks? : Partial<CallbacksOptions>
  • OAuth 認証成功後に呼び出したい、コールバック関数を定義できる
  • OAuth 認証後は jwt を取得できるので、これを起点に後続処理を記述していく

◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇

Prismaと接続する場合は、 PrismaAdapter を使用する。

参考 : https://next-auth.js.org/v3/adapters/prisma

Route Handler の設置

NextAuth.js 専用の Route Handlerが存在するため、これに沿って handler 関数を定義する。

// api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth"
import { authOptions } from "NextAuthOptions を定義したファイル"

const handler = NextAuth(authOptions)  

export { handler as GET, handler as POST }

参考 : https://next-auth.js.org/configuration/initialization#route-handlers-app

getServerSession の利用

サーバーサイド側で getServerSession 関数を使用すると、ログインユーザー情報を参照できる。

import { getServerSession } from "next-auth"
import { authOptions } from "NextAuthOptions を定義したファイル"
...{
  const session = await getServerSession(authOptions)
  ...
}

参考 : https://next-auth.js.org/configuration/nextjs#getserversession

関連ドキュメント

NextAuth.js 公式: https://next-auth.js.org/getting-started/introduction
Middleware 公式 : https://nextjs.org/docs/app/building-your-application/routing/middleware