Next.jsで認証機能をNextAuthで実装する

npm install next-auth

pages/api/[...nextauth].tsファイルの作成

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import GitHubProvider from "next-auth/providers/github";
import { db } from "../../../lib/prisma";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || "",
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID || "",
      clientSecret: process.env.GITHUB_CLIENT_SECRET || "",
    }),
  ],
  callbacks: {
    async signIn(user:any) {
      const { email } = user.user;
      await db.user.upsert({
        where: { email },
        update: {},
        create: {
          name: user.user.name,
          email: user.user.email,
          image: user.user.image,
          admin: false,
        },
      });

      return true;
    },
    async session({ session, token }:any) {
      session.accessToken = token.accessToken;

      session.user.id = token.id;
      session.user.uid = token.uid;

      return session;
    },

    async jwt({ token, user }:any) {
      if (user) {
        const userExist = await db.user.findUnique({
          where: {
            email: user.email,
          },
        });
        token.uid = userExist?.id;
        token.accessToken = user.access_token;
      }
      return token;
    },
  },
 pages: {
   signIn: '@/pages/signIn',
  },
};

export default NextAuth(authOptions);

Google、その他ログインについては次回の記事で紹介します

pages/_app.tsxに以下を追記

import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

pages/signin.tsxを作成

import Google from "next-auth/providers/google";
import { signIn } from "next-auth/react";
import Github from "next-auth/providers/github";
function signInPage() {
  return (
    <div>
      <button onClick={() => signIn("google")}>Sign in with Google</button>
      <button onClick={() => signIn("github")}>Sign in with GitHub</button>
    </div>
  );
}

export default signInPage;