Next.jsにNext Authを用いてLINEログインによるユーザー情報の取得をしようとした際にExampleのままに実装するとOpen ID Connectの申請が完了していてもセッションから取得できるユーザー情報にemailが含まれていません。
デフォルトの設定はこのようになっています
app/api/auth/[...nextauth]/route.ts
import LineProvider from "next-auth/providers/line";
...
providers: [
LineProvider({
clientId: process.env.LINE_CLIENT_ID,
clientSecret: process.env.LINE_CLIENT_SECRET
})
]
...
この設定でnext-auth/reactのsignIn("line")
を行うとLINEのログインフローを通してリダイレクトしたのちにgetServerSession
からユーザー情報を取得することができます。
しかしその時に取得できる情報は、たとえLINEログインチャンネルがOpen ID Connectの利用申請を提出していたとしてもユーザー名とプロフィールアイコンのみとなっています。
app/page.tsx
import { getServerSession } from "next-auth";
const Page = async () => {
const session = await getServerSession();
console.log("session", session);
/**
*session {
* user: {
* name: 'John Smith',
* email: undefined,
* image: 'https://profile.line-scdn.net/foo'
* }
* }
*/
}
これはNext Authで定義されているLINEのためのProviderのデフォルト設定のスコープにemail
が設定されていないためです。
Next Authは各プロパイダーのデフォルトの設定をエクスポートしていてそれをオーバーライドすることができます。
つまりLINEのためのプロバイダーの設定のスコープにemail
を追加すれば取得できるようになります。
app/api/auth/[...nextauth]/route.ts
import LineProvider from "next-auth/providers/line";
...
providers: [
LineProvider({
clientId: process.env.LINE_CLIENT_ID,
clientSecret: process.env.LINE_CLIENT_SECRET,
authorization: {
params: {
scope: "profile openid email",
}
}
})
]
...