소셜 로그인 - 네이버 로그인(2)

💡 지난 번 글에 이어 네이버 로그인에 필요한 코드에 대해 설명을 해보겠다

설정이 끝났다면, 카카오 소셜로그인과 마찬가지로 .env 파일에 설정들을 입력해준다!

1. Callback URL
2. Client Id

# 네이버
REACT_APP_NAVER_CLIENT_ID = "네이버에서 발급받은 Client ID"
 
REACT_APP_NAVER_CALLBACK_URL = "직접 설정한 Callback URL"

네이버로그인도 카카오로그인과 마찬가지로 두 개의 파일을 만들어주었다.

1. NaverLogin.js
2. NaverCallback.js

NaverLogin.js

import React from "react";

import naver from "../../icons/naver.png";

const NaverLogin = () => {
  const NAVER_CLIENT_ID = process.env.REACT_APP_NAVER_CLIENT_ID;
  const REDIRECT_URI = "http://localhost:3000/login/oauth2/callback/naver";
  const STATE = "project"; // 상태 유지를 위한 임의 값
  const NAVER_AUTH_URL = `http://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${NAVER_CLIENT_ID}&state=${STATE}&redirect_uri=${REDIRECT_URI}`;

  return (
    <img
      alt="네이버 로그인"
      src={naver}
      onClick={() => (window.location.href = NAVER_AUTH_URL)}
    />
  );
};

export default NaverLogin;

여기서 주의해야할 점이 있다!

필자는 백엔드와 소통을 하면서 코드에는 이상이 없는데 계속해서 실행이 되지않아 하루종일 헤맸던 기억이 있다.

const STATE = "project"

위 코드에서 필자는 const STATE = "false"로 설정했었는데, 백엔드 측에서는 이것을 "project"로 설정했던것이었다!

🙏 결국 단어 한 개의 차이로 인해 하루의 시간을 낭비해버렸는데, 이 글을 읽게되는 독자들은 헤매지 않기를 바라는 의미에서 설명을 남긴다.

또한, 필자는 REDIRECT_URI를 깜빡하고 바로 썼는데 독자들은 process.env.REACT_APP_REDIRECT_URI를 사용하길 바란다!

본론으로 돌아가보자.

NaverCallback.js

import axios from "axios";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { API_URL } from "../Constant";

const NaverCallback = () => {
  const navigate = useNavigate();
  
  ////////////코드 생략///////////
  

  useEffect(() => {
    let code = new URL(window.location.href).searchParams.get("code");

    axios
      .get(`${API_URL}/login/oauth2/callback/naver`, { params: { code } })
      .then((response) => {
        const { jwtToken, nickname, email, point, id } = response.data.data;
        
        console.log("10글자로 제한한 닉네임:", truncatedNickname);
        
        // Recoil 상태 업데이트
        ////////////코드 생략///////////

        // 로컬 스토리지에도 저장
        localStorage.setItem("jwtToken", jwtToken);
        localStorage.setItem("nickname", truncatedNickname);
        localStorage.setItem("email", email);
        localStorage.setItem("point", point);
        localStorage.setItem("memberId", id);

        console.log("로그인 성공!");
        console.log("Token:", jwtToken);
        console.log("Nickname:", nickname);
        console.log("email:", email);

        console.log(code);

        navigate("/"); // 메인 페이지로 이동
      })
      .catch((err) => {});
  }, []);

  return <div>Loading...</div>;
};

export default NaverCallback;

거의 다 끝났다!!

카카오 소셜로그인과 마찬가지로 App.js로 돌아가 루트를 등록해준다!

 <Route path="/login/oauth2/callback/naver" element={<NaverCallback />}/>

로그인 버튼을 만들 때는 <NaverCallback/>이 아닌 <NaverLogin />으로 만들어주면 된다!

이상으로 네이버 소셜로그인에 대해 간단하게 설명을 해봤는데

설명이 부족했거나 코드에 대해 궁금한 점이 있으시다면 댓글 또는 "kop981020@naver.com"으로 연락주시면
최대한 빠른 시간 내에 자세한 답변을 드리겠습니다!

지금까지 읽어주셔서 감사합니다! 😄