🛂

Next AuthでLINEログインをしてemailアドレスを取得する方法

2025/02/17に公開

Next.jsにNext Authを用いてLINEログインによるユーザー情報の取得をしようとした際にExampleのままに実装するとOpen ID Connectの申請が完了していてもセッションから取得できるユーザー情報にemailが含まれていません。

https://next-auth.js.org/providers/line

デフォルトの設定はこのようになっています

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",
        }
      }
  })
]
...

Discussion