[Next.js 14] NextAuth.js 로 카카오 소셜 로그인 구현하기

혜혜·2024년 6월 17일

Next.js

목록 보기

4/4

💡 오늘은 NextAuth.js를 통해 카카오 소셜 로그인을 구현해 보려고 한다. 저번 프로젝트는 NextAuth.js를 쓰지 않고 카카오 로그인을 구현했었는데, 백엔드와 설계 관련으로 수정이 많았어서 힘든 경험이었다. 요번에는 NextAuth.js를 통해 간단하게 카카오 로그인을 구현해 보겠다!

📍 시작하며

우리 프로젝트는 Next.js 14 버전을 사용하고 있다! 그래서 app router에 맞는 방식을 사용하고 있음을 미리 밝힌다.

📍 NextAuth.js로 카카오 로그인 구현하기

NextAuth.js 설치

npm i next-auth

공식 문서에 나와있는대로 NextAuth를 설치해준다.

Configuration

Next.js는 13.2 버전부터 Route Handlers라는 것을 제공하고 있다. Route Handler는 특정 경로에 커스텀 request handler를 정의할 수 있는 기능을 제공한다.

app 폴더 아래에 다음의 경로에 route.ts(또는 .js) 파일을 생성한다.

NEXTAUTH_URL=http://localhost:3000

NEXTAUTH_URL을 위와 같이 설정한다.

openssl 사이트에 가서 윈도우 버전에 맞는 openssl을 다운받는다. 폴더를 다운받은 후에는 압축을 풀어준다.

이때 압축을 푼 파일 경로를 복사해 와서 뒤에 "\bin\openssl.exe rand -base64 32"를 붙여 실행한다.

{압축파일 푼 경로}\bin\openssl.exe rand -base64 32

그럼 openssl이 임의의 바이트 문자열을 생성해준다. 이렇게 생성한 문자열을 환경변수에 넣어주자.

NEXTAUTH_SECRET={생성한 비트 문자열}

NEXTAUTH_SECRET은 쿠키에 서명/암호화 하고, 암호화 키를 생성하는 데 사용되는 문자열이다.

카카오 애플리케이션 생성 및 세팅

Kakao Developers에 접속해 내 서비스에서 사용할 애플리케이션을 만든다.

가장 먼저 제품 설정 > 카카오 로그인에 들어가서 카카오 로그인을 활성화해 준다.

Redirect URI를 위와 같이 설정해 준다.

Web 플랫폼을 위와 같이 설정해 준다.

그 다음, 보안 탭에 접속해 Client Secret를 활성화한다. 사진에서는 "사용 안 함"으로 되어 있지만 "사용함"으로 바꿔주자!

카카오 계정(이메일)을 받아오기 위해 개인 개발자 비즈 앱을 설정해주었다. (앱의 아이콘을 설정해주면 할 수 있다) 참고로 비즈 앱을 설정하지 않으면 닉네임과 프로필 사진 정도만 받아올 수 있고 이메일은 받아올 수 없다.

동의 항목에서 어떤 것들을 받을 건지 설정한다.

코드 작업

// .env.local
KAKAO_CLIENT_ID={카카오 애플리케이션 > 앱 키 > JavaScript 키}
KAKAO_CLIENT_SECRET={카카오 애플리케이션 > 보안 > Client Secret 코드}
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET={openssl로 설정한 무작위 문자열}

환경변수가 위와 같이 되어 있는지 확인하고, 되어 있지 않으면 세팅한다.

// src/components/providers/AuthSession.tsx
'use client';

import { SessionProvider } from 'next-auth/react';
import { ReactNode } from 'react';
import { Session } from 'next-auth';

type Props = {
  session?: Session | null;
  children: ReactNode;
};

export default function AuthSession({ session, children }: Props) {
  return <SessionProvider session={session}>{children}</SessionProvider>;
}

NextAuth를 사용하기 위해서는 SessionProvider로 감싸주는 작업이 필요하다. 바로 감싸주기보다는 래퍼 컴포넌트를 하나 만들어서 작업해주자.

// layout.tsx
import AuthSession from '@/components/providers/AuthSession';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body className={inter.className}>
        <AuthSession>{children}</AuthSession>
      </body>
    </html>
  );
}

layout.tsx에서 AuthSession으로 children을 감싸주자.

// src/app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import KakaoProvider from 'next-auth/providers/kakao';

const handler = NextAuth({
  providers: [
    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID || '',
      clientSecret: process.env.KAKAO_CLIENT_SECRET || '',
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

export { handler as GET, handler as POST };

Configuration에서 만들었던 route.ts 파일에 위와 같은 내용을 작성해 준다. 우리 서비스는 카카오 소셜 로그인만 제공할 예정이다.

// src/app/login/page.tsx
'use client';
import { signIn, useSession, getCsrfToken } from 'next-auth/react';
import { useEffect } from 'react';

export default function LoginPage() {
  const { data, status } = useSession();
  const csrfToken = getCsrfToken();

  useEffect(() => {
    console.log(data);
    console.log(status);
    console.log(csrfToken);
  }, [status]);

  return (
    <div>
      <button
        onClick={() => {
          signIn('kakao');
        }}
      >
        로그인
      </button>
    </div>
  );
}

로그인 페이지를 만들어서 테스트를 진행해 보자. next-auth/react의 signIn 함수를 통해 로그인을 진행할 수 있고, 여기서 인수로 원하는 'kakao'를 넣어주지 않으면 어떤 소셜 로그인으로 진행할 건지 선택하는 화면이 나온다. 나는 바로 카카오 로그인만 하고 싶었기 때문에 인수를 지정해주었다.

useSession을 통해 세션 정보를 볼 수 있고, getCsrfToken을 통해 암호화된 토큰도 얻을 수 있다. 나는 시험 삼아 출력해 보았고, 원하는대로 사용하면 될 것 같다.