[드럼악보 생성 사이트 D+4, 5] 리액트(React)와 스프링 부트(Spring Boot)로 구글 소셜로그인(OAuth2) 구현하는 방법

구글 소셜(OAuth2) 로그인 과정 도식

오늘은 드디어 구글 소셜로그인 구현을 성공하였다.

아래와 같이 프론트에서는 로그인 성공 후 Access Token을 발급받아 백엔드로 넘겨주어야 한다.

리액트로 구글 로그인을 구현하며 만난 문제점들

과거에는 react-google-login 이라는 라이브러리를 사용하였는데, 더이상 사용할 수 없는 패키지라고 나온다. 다른 방법을 찾아서 구현해야한다.

검색을 해보면 ChatGPT, 구글링 모두 @react-oauth/google 라이브러리를 사용하라고 나온다.

해결방법 : @react-oauth/google 의 useGoogleLogin 훅 사용하기

문제는 위 방법으로 로그인을 진행할 경우 access-token을 받을 수 없다는 것…. 토큰은 도대체 어디에 있을까? 하며 이틀 동안 구글을 돌아다녔다. 결국 @react-oauth/google 라이브러리의 GoogleLogin이 아닌 useGoogleLogin 훅을 사용해야 한다는걸 알아냈다.

useGoogleLogin (Both implicit & authorization “code” flow) 라고 친절하게 적혀있었다.

import { useGoogleLogin } from "@react-oauth/google";
import axios from "axios";

const LoginWithGoogle = () => {
  // useGoogleLogin 훅을 사용하여 로그인 함수와 상태를 가져옵니다.
  const login = useGoogleLogin({
    onSuccess: (response) => {
      // 로그인 성공 시 호출되는 콜백 함수
      console.log("Login successful:", response);
      axios({
        method: "post",
        url: `${import.meta.env.VITE_SERVER_URL}/user/auth/google`,
        data: {
          token: response.access_token,
        },
      });
    },
    onError: (error) => {
      // 로그인 실패 시 호출되는 콜백 함수
      console.error("Login failed:", error);
    },
  });

  return (
    <button className="login-with-google-btn" onClick={() => login()}>
      Sign in with Google
    </button>
  );
};

export default LoginWithGoogle;

내가 작성한 프론트 단의 코드는 다음과 같다.

백엔드 단에서는 /user/auth/google API를 구현하여 access_token으로 유저정보를 확인하는 코드를 작성해주면 된다!