next-auth

NextJS 에서 next-auth 라는 라이브러리를 이용하면 google , facebook , naver 같은 소셜 로그인 기능을 쉽게 관리 및 추가 할 수 있습니다.

// pages/api/auth/[...nextauth].ts
import NextAuth from "next-auth";
import KakaoProvider from "next-auth/providers/kakao";
import NaverProvider from "next-auth/providers/naver";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  session: {
    strategy: "jwt",
  },
  jwt: {
    secret: "secret",
  },
  providers: [
    KakaoProvider({
      clientId: `${process.env.NEXT_PUBLIC_KAKAO_CLI}`!,
      clientSecret: `${process.env.NEXT_PUBLIC_KAKAO_CLISE}`!,
    }),
    NaverProvider({
      clientId: `${process.env.NEXT_PUBLIC_NAVER_CLI}`,
      clientSecret: `${process.env.NEXT_PUBLIC_NAVER_CLISE}`,
    }),
    GoogleProvider({
      clientId: `${process.env.NEXT_PUBLIC_GOOGLE_CLI}`,
      clientSecret: `${process.env.NEXT_PUBLIC_GOOGLE_CLISE}`,
    }),
  ],
  pages: {
    signIn: "/login",
  },
  callbacks: {
    async session({ session, token, user }: any) {
      // Send properties to the client, like an access_token from a provider.
      session.user.id = token.sub as string;
      // console.log("token", token);
      return session;
    },
  },
});

//login.tsx

import { signIn, signOut, useSession } from "next-auth/react";

const Login = () => {
  //next-auth
  const { data: session } = useSession();
    return (
    <>
     <button
        onClick={() => {
            signIn("kakao");
          }}
       >
        카카오로그인
     </button>  
     <button
        onClick={() => {
            signIn("naver");
          }}
       >
        네이버로그인
     </button> 
     <button
        onClick={() => {
            signIn("google");
          }}
       >
        구글로그인
     </button> 
     <button
        onClick={() => {
            signOut();
          }}
       >
        로그아웃
     </button> 
    </>
    )
  };

export default Login;

signIn

signIn 함수를 실행하면 로그인을 진행 할 수 있는데요.
signIn 함수에 소셜이름을 전달하시면 됩니다.

signOut

로그아웃을 하고 싶다면 signOut 함수를 실행하면 됩니다.

useSession

useSession 에서는 data 와 status 값을 제공해줍니다.

data 는 유저 정보를 제공하며 status 는 유저의 로그인 여부 값을 문자열로 형태로 제공해줍니다.