NextJS-TS
NextAuth

NextAuth

  • Install NextAuth
pnpm i next-auth
  • Buat API route src/app/api/auth/[...nextauth]/route.ts
src/app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth/next";
 
import { options } from "@/utils/nextauth/option";
 
const handler = NextAuth(options);
 
export { handler as GET, handler as POST };
  • Buat provider src/components/Provider/index.tsx
"use client";
 
import { SessionProvider } from "next-auth/react";
import React from "react";
 
interface AuthProviderProps {
  children: React.ReactNode;
}
 
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
  return <SessionProvider session={null}>{children}</SessionProvider>;
};
  • Wrap provider di layout.ts
import { AuthProvider } from "@/components/Provider";
 
<AuthProvider>{children}</AuthProvider>;
  • Buat utils/nextauth/option.ts
import { AuthOptions } from "next-auth";
import Credentials from "next-auth/providers/credentials";
import GoogleProvider from "next-auth/providers/google";
 
import prisma from "@/db/utils/prisma";
 
export const options: AuthOptions = {
  providers: [
    Credentials({
      name: "credentials",
      credentials: {
        email: { type: "email", label: "Email", placeholder: "Enter your email" },
        password: { type: "password", label: "Password", placeholder: "Enter your password" },
      },
      authorize: async (credential) => {
        const email = credential?.email;
        const password = credential?.password;
 
        const findUser = await prisma.user.findUnique({
          where: {
            email,
            password,
          },
        });
 
        if (findUser) {
          return {
            id: findUser.id,
            name: findUser.name,
            email: findUser.email,
            image: findUser.image,
          };
        }
 
        return null;
      },
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  callbacks: {
    signIn: async ({ user }) => {
      const findUser = await prisma.user.findUnique({
        where: {
          email: user.email as string,
        },
      });
      return true;
      if (!findUser) {
        await prisma.user.create({
          data: {
            name: user.name,
            email: user.email as string,
            image: user.image,
          },
        });
      }
    },
  },
  pages: {
    signIn: "/login",
  },
};