소셜 로그인시 브라우저에 accessToken 토큰이 발행되지 않음

개요

멋쟁이 사자처럼 종합 팀 프로젝트에서 로그인 API 개발을 진행하던 도중

소셜 로그인 시 브라우저에 accessToken이 쿠키로 발행되지 않는 에러가 발생했다.

 

원인

소셜 로그인 후 리다이렉트 URL을 메인 화면으로 설정했었는데, 이러면 아래와 같은 문제가 발생한다.

1. 소셜 로그인 성공

2. 메인 페이지로 이동

3. 토큰을 쿠키에 저장하기 위한 api 호출이 이루어지지 않음

 

해결 방법

곧바로 메인 페이지로 리다이렉트를 하는것이 아니라

중간 처리 단계를 추가하여 올바른 흐름을 구현했다.

 

1. OAuth2RedirectHandler.jsx 컴포넌트 추가

• 쿠키 생성 API 호출
• 사용자 정보를 localStorage에 저장

2. 서버에서 쿠키를 성공적으로 발행

3. 메인 페이지로 리다이렉트

 

결과적으로 올바른 흐름대로 로직이 처리되도록 변경, 문제를 해결했다.

 

import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
import axios from 'axios';

const OAuth2RedirectHandler = () => {
    const navigate = useNavigate();

    useEffect(() => {
        const fetchUserInfo = async () => {
            try {
                const response = await axios.get(
                    `${import.meta.env.VITE_CORE_FRONT_BASE_URL}/api/v2/auth/me`,
                    { withCredentials: true }
                );

                if (response.data.data) {
                    const loginUserInfo = {
                        email: response.data.data.email,
                        nickname: response.data.data.nickname
                    };

                    localStorage.setItem('userInfo', JSON.stringify(loginUserInfo));
                    localStorage.setItem('isLoggedIn', 'true');

                    navigate('/', { replace: true });
                }
            } catch (error) {
                console.error('소셜 로그인 처리 중 오류 발생:', error);
                navigate('/login-pet', { replace: true });
            }
        };

        fetchUserInfo();
    }, []);

    return <div>로그인 처리중...</div>;
};

export default OAuth2RedirectHandler;