next-auth 사용하여 카카오 로그인 간단 구현하기

next-auth로 소셜 로그인 구현하기

• 이번에 카카오 로그인을 구현하면서 로그인 과정이 얼마나 어려운 것인지 새삼 깨닫고 있다.... 정말 쉬운 게 아니다.
• 특히 oauth2를 사용할 때 프론트-백-카카오의 과정을 거치고 사용자와 관리자가 세 파트로 나눠지기 때문에 과정을 이해하기가 쉽지 않았다.
• 로그인만 성공하면 끝!이 아니라 바로 그때부터 시작이다. 로그아웃 시 어떻게 정보를 처리할 것인지, HOC, 즉 사용자 접근 권한 제어나 경로보호 같은 것도 신경써야 하고 토큰이나 세션을 사용하면 어떻게 그것을 관리할지, CSR이냐 SSR이냐에 따라 로그인 유지 방법도 되게 복잡해진다.

next.js를 사용하며 로그인 유지에 어려움을 겪고 있던 중에 next-auth라는 로그인 기능을 편리하게 해주는 라이브러리를 알게 되었다.

next-auth를 사용하면 백엔드로직까지 구현할 수 있어서 편한 것 같다.
여기에 미들웨어를 사용하면 좀 더 편리하게 관리할 수 있어 보이는데 현재 필요한 로그인 자체 기능만 임시로 구현해보겠다.

시작하기

공식문서

• v4로 업데이트되면서 잠시 에러가 났던 깃허브 로그인도 가능해졌고 거의 웬만한 oauth2 로그인이 가능하다! 한번 살펴보시길 추천드린다.

npm install next-auth
yarn add next-auth

폴더 라우팅을 활용한 api 라우트 등록

• 카카오 로그인을 사용할 것이기 때문에 카카오 프로바이더를 사용해준다.

// pages/api/auth/[...nextauth].ts


import NextAuth from "next-auth";
import KakaoProvider from "next-auth/providers/kakao";

export default NextAuth({
  session: {
    strategy: "jwt",
  },
  jwt: {
    secret: "secret",
  },
  providers: [
    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID!,
      clientSecret: process.env.KAKAO_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: "/",
  },
  
  // 토큰이나 세션 활용하여 사용자 제어 시 사용하는 로직 
  callbacks: {
    async jwt({ token, account }) {
      // Persist the OAuth access_token to the token right after signin
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token, user }) {
      // Send properties to the client, like an access_token from a provider.
      session.accessToken = token.accessToken;
      return session;
    },
  },
});

필요한 곳에 로그인 버튼 만들기

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

export default function Component() {
  // 세션을 이용하여 데이터를 불러온다. 
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

실제 구현 화면

세션 정보를 활용해서 프로필 사진과 이름이 헤더에서 보이도록 만들었다.

{!session ? (
          <>
            <button
              onClick={() => signIn("kakao")}
            >
              로그인
            </button>
          </>
        ) : (
          <>
            <Image
              src={session.user?.image}
              alt="카카오프로필"
              width={40}
              height={40}
            />
            {session.user?.name}님
            <button
              onClick={() => signOut()}
            >
              로그아웃
            </button>
          </>
        )}

보완

• 토큰이나 세션으로 저장해서 사용하고 마이페이지로 데이터를 넘길 수 있도록 추후에 구현할 계획이다.
• 정말 편리하다! 백엔드 서버와 협업 없이 구현할 수 있다는 게 정말 장점이고, 무엇보다 새로고침을 만나도 로그인이 풀리지 않는다. ㅠㅠ next.js로 로그인을 구현하고 싶다면 한번쯤 사용해보면 좋을 것 같다.

- 참고 자료

• 인증 로직 구현 ( next-auth )
• Next-Auth를 사용하여 손쉽게 OAuth기반 권한관리하기 + RefreshToken + Private Route