NextAuth.js&PlanetScaleでSlackログインを実装する

Next.jsを使っている場合に、NextAuthを使うことで
簡単にログイン認証を作成することが出来ます。

利用できる認証は、かなり多いです。
ドキュメントのProvidersを見てみてください。

Firebase AuthにはないようなLINEなども完備されています。
ただ、Firebase Authもカスタム認証を実装すれば、もちろん対応可能です。

今回、NextAuth.js&PlanetScaleでSlackの構成でログイン認証を組んだのでメモを残します。

NextAuthでSlackを使うドキュメントはここで
DANGERにかかれている内容が厄介です

まあhttpsを使いましょうということなんですが
localhostでhttpsを使おうとすると色々手間が必要だったのですが
Nxet.jsの機能で気軽にhttpsが使えるようになっていました

公式ドキュメントが AppRouter ではなくて PageRouter っぽかったので
次の記事を参考にさせていただいました

NextAuth自体はDBが必須ではないので
DBと連携するための設定を行う必要がありました。

最終的に [...nextauth]/route.ts はこんな感じになりました。

import SlackProvider from "next-auth/providers/slack";
import NextAuth from "next-auth";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

const adapter = PrismaAdapter(prisma)

adapter.linkAccount = async ({ provider, type, providerAccountId, access_token, token_type, id_token, userId }) => {
  await prisma.account.create({ data: {
    provider, type, providerAccountId, access_token, token_type, id_token, userId
  } });
  return;
}

export const authOptions = {
  secret: process.env.NEXTAUTH_SECRET,
  adapter: adapter,
  providers: [
    SlackProvider({
      clientId: process.env.SLACK_CLIENT_ID,
      clientSecret: process.env.SLACK_CLIENT_SECRET
    })
  ],
  callbacks: {
    async session({session, user}) {
      if (session?.user) {
        session.user.id = user.id;
      }
      return session;
    }
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

何だか、普通にやるとエラーが出てしまうので次の記事を参考に
adapter.linkAccountを書き換えています。