1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?