[Frontend] 소셜로그인 구현(구글, 네이버, 카카오)

개발 환경 및 스택

개발 언어 : JavaScript (ES6+), Node.js

프레임워크 : Next.js 14 (app router)

라이브러리 : NextAuth.js, axios, shadcn/ui

소셜 로그인 제공 : Google, Naver, Kakao

API 통신 : axios 활용

구현 목표

Google, Naver, Kakao 계정으로 간편 로그인 기능 제공

로그인 시 사용자 정보를 백엔드 API로 전달 및 사용자 식별

세션에 사용자 role 정보 저장 및 페이지 이동 처리

주요 파일 구조

/app

└── /auth/login/page.jsx # 로그인 페이지 (UI + 소셜 로그인 버튼)

└── /api/auth/[…nextauth]/route.js # NextAuth 인증 설정

상세 구현

로그인 페이지 (프론트)

위치: /app/auth/login/page.jsx

주요기능

이메일/비밀번호 입력 로그인

Google / Naver / Kakao 소셜 로그인 버튼

로그인 성공 시 사용자 role 에 따라 페이지 이동

주요코드

signIn("kakao", { callbackUrl: "/home/user" });
signIn("naver", { callbackUrl: "/home/user" });
signIn("google", { callbackUrl: "/home/user" });

각 버튼 클릭 시 NextAuth의 signIn 메서드로 로그인 요청.

NextAuth 설정 (백엔드)

위치: /app/api/auth/[…nextauth]/route.js

providers 설정

GoogleProvider({ clientId, clientSecret })

NaverProvider({ clientId, clientSecret })

KakaoProvider({ clientId, clientSecret })

각 소셜 로그인의 클라이언트 ID, 시크릿을 설정하여 provider 등록

콜백 함수

signln

소셜 로그인 성공 시 사용자 정보를 백엔드로 전달

if (account.provider === "google") {
await axios.post('/googlelogin', { email, name, image });
}

jwt

로그인 성공 시 JWT에 사용자 정보 추가

token.id = user.id;

token.role = user.role;

session

클라이언트 세션에 사용자 정보 반영

session.user.role = token.role;

백엔드 연동

메서드	엔드포인트	설명
POST	`/googlelogin`	Google 로그인 사용자 정보 등록
POST	`/naverlogin`	Naver 로그인 사용자 정보 등록
POST	`/kakaologin`	Kakao 로그인 사용자 정보 등록

※ 현재 구현에서는 모두 /googlelogin으로 통일되어 있으나, 실제 서비스에서는 각 provider 별로 분리 가능

로그인 후 동작

사용자 Role	이동 경로
admin	`/home/admin`
user	`/home/user`

환경 변수 (.env 파일)

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

NAVER_CLIENT_ID=
NAVER_CLIENT_SECRET=

KAKAO_CLIENT_ID=
KAKAO_CLIENT_SECRET=

NEXTAUTH_SECRET=1234
NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://127.0.0.1:5000