Tips: Auth.jsのv5でLINEプロバイダーを使う時は「checks: ["state"]」を明示しないとエラーになる

この記事は何

Auth.jsにはLINEプロバイダーが用意されているのですが、ガイド通りにやってもうまくいかなかったので記事としてまとめておきます。

起こっていた事

Auth.jsとは、JavaScript系の各フレームワークで簡単に認証の仕組みを実装できるライブラリです。
詳しくは以下をご覧ください。

このAuth.jsには各サービスのOAuthのプロバイダ用のテンプレートも用意されており、簡単に認証を導入できるようになっています。

LINEもプロバイダの一つと提供されており、ガイドも用意されています。

しかし、このガイド通りに実装を行なってもエラーが発生してしまい、正しく動作しませんでした。

原因

にあるとおり、checks: ["state"]というパラメータがデフォルトでは設定されておらず、これを明示しないと正しく認証が通らないようでした。

./auth.ts（誤）

import NextAuth from "next-auth"
import LINE from "next-auth/providers/line"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [LINE],
})

./auth.ts（正）

import NextAuth from "next-auth"
import LINE from "next-auth/providers/line"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Line({
      clientId: process.env.AUTH_LINE_ID,
      clientSecret: process.env.AUTH_LINE_SECRET,
      checks: ["state"],
   }),
  ],
})

今の所ガイド通りに実装してもLINEの認証は正しく動作しないため、ご注意ください。