OAuth토큰 에러 핸들링

OAuth를 통한 로그인 중 ...

상황

OAuth를 사용해서 소셜로그인을 하는 도중 발생한 에러이다.
authorization code를 소셜로그인하는 회사로부터 내려받아서 사용하는데,
문제점은 이 해당 코드는 1회성 이라는 것이다. 두 번 이상 사용하면 없는 적용이 안되는 값이기 때문에 error를 뿜었다.

원래라면 잘 작동했을 코드이지만, auth code가 잘못된 code이기 때문에 에러를 뿜는 것이라 예측했다.

고민

고민을 했다. 에초에 두 번 사용했기 때문에 해당 에러가 나오는것 이기 때문에 한 번만 하면 되겠다고 생각했다.

const getToken = async () => {
    const code = new URL(window.location.href).searchParams.get('code');

    const result = await AUTHS.getToken(provider, code as string);
    localStorage.setItem('accessToken', result.accessToken);
    localStorage.setItem('refreshToken', result.refreshToken);
    localStorage.setItem('provider', provider);
    setIsLogin(true);
    router.push('/');
  };

useEffect(() => {
    return () => {
      getToken();
    };
  }, []);

현재 코드는 useEffect를 통해서 종속성을 [] 빈 배열을 주어서 마운트, 언마운트 될 때 실행되게 했는데, 이거를 state를 사용해서 한 번만 사용되도록 해야겠다.

하지만 개같이 실패...

해결

useEffect가 두 번 사용되면서 나오는 에러가 결과적으론 맞았다. 이부분에서 구글링을 해보니 strictMode라는게 존재했다.

strictMode는 개발환경에서만 활성화되는 코드라고 한다. 실제로 빌드 후 배포한 서버에서는 작동하지 않는것이다.

strict Mode?

strictMode는 잠재적인 문제를 알아내기 위한 도구라고 한다.

• 안전하지 않는 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않은 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사

이러한 문제를 잡아준다고 한다.
공식문서

적용

//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
};

module.exports = nextConfig;

nextjs에서는 next.config.js파일에서 저렇게 수정만 해주면 strictMode를 손쉽게 끄고 켤 수 있다.