[카카오 로그인] 리액트로 카카오 로그인 구현하기 - 프론트엔드 (1)

카카오 로그인 구현하기 - 프론트엔드 (1)

카카오 로그인을 구현하려면 OAuth 2.0의 인증 흐름을 이해해야 한다. 이 글은 Kakao Developers 설정에 이어 카카오 로그인 개념 및 기본적인 프론트엔드 설정을 다룬다.

프론트엔드가 앱 등록과 카카오 로그인 활성화, 앱 키 등을 준비하기로 되어있다면 아래의 글을 먼저 확인한다.

2025.03.05 - [프론트엔드(Front-end)] - [카카오 로그인] Kakao Developers 설정

 

1. 카카오 로그인 흐름

카카오 로그인의 흐름은 다음과 같다.

1. 카카오 로그인 버튼 클릭 → 카카오 인증 페이지로 이동
2. 사용자가 로그인 및 동의 → 카카오가 인가 코드 발급
3. 인가 코드(Query String으로 전달됨) 확인
4. 백엔드에 인가 코드 전달 → 백엔드에서 카카오 API와 통신하여 JWT 토큰 발급
5. 프론트엔드에서 JWT 토큰을 저장하고 로그인 유지

 

2. 환경 변수 설정(.env.local)

프로젝트의 환경 변수를 .env.local 파일에 저장한다.

NEXT_PUBLIC_KAKAO_CLIENT_ID=123asd123asd123asd123asd
NEXT_PUBLIC_KAKAO_REDIRECT_URI=localhost:3000/callback
NEXT_PUBLIC_API_URL=https://dev.abc.com/api

Next.js 환경변수 규칙: NEXT_PUBLIC_을 붙이면 클라이언트 환경에서도 변수를 사용할 수 있다.

• CRA: REACT_APP_
• Vite: VITE_

환경 변수 설명

• NEXT_PUBLIC_KAKAO_CLIENT_ID: Kakao Developers에서 발급한 클라이언트 ID
• NEXT_PUBLIC_KAKAO_REDIRECT_URI: 카카오 로그인 후 사용자가 이동할 경로
• NEXT_PUBLIC_API_URL: 백엔드 API 기본 URL

환경 변수는 Git에 올리지 않도록 .gitignore 설정을 반드시 확인한다.

 

3. 카카오 로그인 URL 생성

카카오 로그인 요청 URL을 생성하는 함수를 작성한다.

// kakaoAuth.ts
const CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID; // 123asd123asd123asd123asd
const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI; // localhost:3000/callback

export const KakaoLogin = () => {
  return `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
};

설명

• client_id: Kakao Developers에서 발급받은 앱 키
• redirect_uri: 로그인 후 돌아올 URL (카카오-프론트-백엔드 동일하게 설정해야 함)
• response_type=code: 인가 코드를 반환하도록 설정

KakaoLogin() 함수를 실행하면 카카오 로그인 URL을 생성하여 반환한다.

 

4. 카카오 로그인 버튼 구현

import { KakaoLogin } from "@/lib/kakaoAuth";
import Image from "next/image";

export default function KakaoLoginButton() {
  return (
    <button
      className="cursor-pointer py-3 px-4 flex items-center bg-[#FEE500] rounded-lg"
      onClick={() => {
        window.location.href = KakaoLogin();
      }}
    >
      <Image src="/images/kakao-logo.png" alt="카카오 로고" width={18} height={18} />
      <span className="text-black font-semibold">카카오 로그인</span>
    </button>
  );
}

설명

• 버튼 클릭 시 카카오 로그인 URL로 이동 → 카카오 로그인 페이지 표시
• window.location.href = KakaoLogin(); → 카카오 로그인 창으로 리다이렉트
• 스타일: Tailwind CSS을 사용

 

5. 로그인 페이지에 버튼 추가

// src/app/main.tsx
import KakaoLoginButton from "@/components/KakaoLoginButton";

export default function MainPage() {
  return (
    <div className="flex justify-center items-center min-h-screen">
      <KakaoLoginButton />
    </div>
  );
}

설명

• KakaoLoginButton을 가져와서 화면에 렌더링
• 버튼을 누르면 카카오 로그인 페이지로 이동하는지 확인

 

6. 카카오 로그인 후 인가 코드 확인하기

로그인 후 사용자는 인가 코드 (authorization code) 를 받게 된다.
로그인 후 카카오가 리디렉트하는 URL 예시:

http://localhost:3000/callback?code=nuAFZmJvzl2a5Oz5acQckm8RzTmfSTea9y1SiczkbKjZNN9XyVDNeQAAAAQKPCPnAAABlXhW9uSi-KZYUq23DA

인가 코드(Query String의 code 값)를 백엔드에 전달해야 한다. (nuAFZm....)

 

이어서 다음 글에서 인가 코드를 처리하는 방법 및 백엔드 연동을 진행한다.

2025.03.17 - [프론트엔드(Front-end)] - [카카오 로그인] 리액트로 카카오 로그인 구현하기 - 프론트엔드 (2)