NextAuth.jsのオプションまとめ。

2022/6/8

NextAuth.jsを利用していて、セッションの有効期限を変更したりカスタマイズしたくなりました。

NextAuth.jsのオプション設定でどんなことができるかまとめてみました。

NextAuth.jsの基本コード
NextAuth.jsのオプション早見表
providers
secret
- 方法⑴ “secret”を記載する
- 方法⑵ 環境変数に”NEXTAUTH_SECRET”を設定
session
jwt
pages
callbacks
events
adapter
debug
logger
theme
まとめ

NextAuth.jsの基本コード

import NextAuth from "next-auth"

export default NextAuth({
    ...

})

NextAuth.jsのオプション早見表

オプション名	内容	デフォルト値	必須?
providers	・プロバイダの指定（ログインに使用できるSNSサービスの種類を指定）	[]	Yes
secret	・Cookieの署名/暗号化などに使う設定	string(開発) No(本番)	Yes (本番)
session	・セッションに関する設定	obj	No
jwt	???	obj	No
pages	???	{}	No
callbacks	・signIn, signOutなどアクションが起きた時に実行される処理のカスタマイズ設定	obj	No
events	???	obj	No
adapter	・外部DBやバックエンドシステムに接続するための設定（ユーザー情報等をDBに保存したい場合など）	none	No
debug	???	false	No
logger	???	console	No
theme	???	obj	No

providers

ユーザー登録（サインイン）やログインに使用できるプロバイダの設定。

Google, Facebook, Twitter, GitHub, Emailなどなど。

export default NextAuth({
    ...,
    providers: [
        ...,
    ],
});

【関連記事】 NextAuth.jsで使える主要なプロバイダ一覧まとめ。

secret

「トークンのハッシュ化」や「Cookieの署名/暗号化」、「暗号化キーの生成」のために必要な設定。

本番環境の場合、「⑴ “secret“を記載」または「⑵ 環境変数に”NEXTAUTH_SECRET”を設定」のどちらかをしないとエラーになります。

方法⑴ “secret”を記載する

export default NextAuth({
    ...,
    secret: 'secret',
});

方法⑵ 環境変数に”NEXTAUTH_SECRET”を設定

下記コマンドで乱数を生成します。

$ openssl rand -base64 32

生成された乱数を環境変数に追加します。

NEXTAUTH_SECRET=[生成した乱数]

session

セッションに関する設定。

strategy	セッション情報の保存方法（「JWT」や「データベース」など）デフォルト値は“jwt”。「adapter」の指定されている場合は、デフォルトが“database”になる。
maxAge	セッションの有効期限。「秒」単位。
updateAge	セッション延長のためのデータベース更新頻度。「秒」単位。

セッションの有効期限は「どのくらいの期間、ログインしたままの状態が保たれるか」。

export default NextAuth({
    ...,
    session: {
        strategy: "database",
        maxAge: 30 * 24 * 60 * 60,  // 30 days
        updateAge: 24 * 60 * 60,  // 24 hours
    }
});

jwt

今後追記する…かも。

pages

今後追記する…かも。

callbacks

今後追記する…かも。

events

今後追記する…かも。

adapter

外部DBやバックエンドシステムに接続するための設定。UserデータやSessionデータなどをDBに保存したい場合などに必要な設定です。

例えば、ユーザー情報等を「Prisma」を使ってDBに保存したい場合など。

// 例：Prisma
import NextAuth from "next-auth"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

export default NextAuth({
    adapter: PrismaAdapter(prisma),
})