개요

• Next.js@14 app router 버전
• 카카오 간편 로그인 구현
• 카카오 공식 문서 참고

과정

• 백엔드와의 협업 프로젝트 중 이메일을 통한 로그인 외 카카오 간편 로그인을 진행하기로 함
• 프로세스는 REST API 해당 공식 문서에 자세하게 나와있다

이 중 프론트에서 해줘야될 것

1. 요청 API 로 카카오 로그인 요청
2. 설정한 redirect url로 넘어갈 때 쿼리로 넘어간 code 인가 코드를 받아 백엔드 서버로 요청 보내기

---

1. 요청 API 로 카카오 로그인 요청

export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}&scope=profile_nickname,account_email,gender`

client_id : 앱 REST API 키 값
redirect_uri : 인가 코드 받기 요청의 응답으로 redirect 될 url 주소 (프론트에서 접근 가능해야 함!!!!)

• redirect 된 페이지에서 인가코드를 받아와 백엔드 서버에 로그인 요청을 보내야 하기 때문에 무조건 프론트에서 접근 가능한 url 로 설정해줘야 한다
  • ex) 본인은 login/oauth2/code/kakao 로 설정 (프론트에서 접근 가능하기만 하면 됨)
  • http://localhost:3000/login/oauth2/code/kakao (테스트당시)
  • http://배포서버주소/login/oauth2/code/kakao (배포 후)
• 둘 다 백엔드와 통일해야 함 (중요)
  • 백엔드에서도 redirect url 을 프론트에서 접근 가능한 url (위와 같은) 로 같게 설정해줘야 함

// loginModal.tsx
// 중략
<div className="socialLogBtn">
	<Link href={KAKAO_AUTH_URL}>
    	<button className="kakaoBtn">카카오로 로그인</button>
	</Link>
</div>

• 클릭하면 카카오 로그인 정보 동의 화면으로 넘어가고 동의 시 redirect url 로 이동하게 된다

---

2. redirect url 인가코드 추출

• 추후 해당 응답 url로 redirect 되면 code 쿼리 파라미터를 포함
• 해당 인가코드를 추출해 백엔드 서버로 로그인 요청 (인가코드 포함) 을 보내면 된다

---

• 카카오 로그인 로직을 처리하기 위해 url 경로 대로 폴더 및 tsx 파일 생성 (*Next.js app router 버전)
  

• page.tsx

// login > oauth2 > code > kakao > page.tsx
import Auth2Redirect from '@/app/(not-logged)/_component/auth2Redirect'
import LoadingScreen from '@/components/loading-screen'
import React from 'react'
const page = async () => {
  return (
    <div>
      <LoadingScreen /> // 요청 처리중에 띄울 로딩 컴포넌트
      <Auth2Redirect /> // 요청 로직 처리 ( return null)
    </div>
  )
}
export default page

해당 페이지로 redirect 되면 화면에는 Auth2Redirect 컴포넌트 내부 로직이 처리되는 동안 LoadingScreen 컴포넌트가 보여지게 된다

• Auth2Redirect.tsx

'use client'
// 중략
const Auth2Redirect = () => {
  const [code, setCode] = useState<string | null>(null)
  const router = useRouter()
  let isSuccessed = false
  useEffect(() => {
    if (typeof window !== 'undefined') {
      new URL(window.location.href).searchParams.get('code') &&
        setCode(new URL(window.location.href).searchParams.get('code'))
      // 1. 인가코드 추출
    }
  }, [])
  const kakaoLogin = async () => {
    // 3. 추출된 인가코드로 백엔드에 로그인 요청
    try {
      const res = await axios.get(
        `/usports/login/oauth2/code/kakao?code=${code}`,
      )
      if (res.status === 200) {
       // 로그인 성공 시 로직 처리
        isSuccessed = true
      }
    } catch (error) {
      console.log(error)
    }
    if (isSuccessed) {
      router.replace('/')
    }
  }
  useEffect(() => {
    code !== null && kakaoLogin()
    // 2. 인가코드 추출되면 kakaoLogin 로직 실행
  }, [code])

  return null
}

export default Auth2Redirect

끝!