[OMT] Oauth 로그인 간편화

2024.01.20(토)

💡 로그인 코드를 좀 더 간편하게 수정할 수 없을까?

오늘 메인 배포에서 발생하는 로그인 문제를 해결하다가 아래와 같은 에러를 발견했다.

기존 에러는 백엔드 서버에서 redirect를 제대로 설정해주지 않아서 발생했던 에러여서 바로 해결했고 그 다음은 Token은 URI에서 잘 받아오는데 서버로의 전달 자체에서 막히는 에러였다. 아래의 에러는 내 프론트 배포 URL이 https이지만 백엔트 서버 배포는 http여서 발생한 에러였다.

이를 맞춰주면 아래의 문제는 해결된다.

로그인에러

백엔드 개발자분께서 문제를 해결하는 동안 나는 기존의 나의 로그인 코드를 뜯어보았다. 역시나 지저분했다….

💡하드코딩을 줄여보자 !

기존 나의 로그인 코드는 아래와 같았다.

 // Main 버전
  const handleNaverLogin = () => {
    router.push(
      `${URL}/oauth2/authorization/naver?redirect_uri=https://omt-onmyticket.vercel.app/login`
    );
  };

  const handleKakaoLogin = () => {
    router.push(
      `${URL}/oauth2/authorization/kakao?redirect_uri=https://omt-onmyticket.vercel.app/login`
    );
  };

  const handleGoogleLogin = () => {
    router.push(
      `${URL}/oauth2/authorization/google?redirect_uri=https://omt-onmyticket.vercel.app/login`
    );
  };

  // 로컬버전

   const handleNaverLogin = () => {
     router.push(
       `${URL}/oauth2/authorization/naver?redirect_uri=http://localhost:3000/login`
     );
   };

   const handleKakaoLogin = () => {
     router.push(
       `${URL}/oauth2/authorization/kakao?redirect_uri=http://localhost:3000/login`
     );
   };

   const handleGoogleLogin = () => {
     router.push(
       `${URL}/oauth2/authorization/google?redirect_uri=http://localhost:3000/login`
     );
   };

메인 버전을 배포할 때와 로컬에서 테스트할 때의 단점이 있었다.

예를들어 로컬에서 테스트하고 싶을때는 코드를 수정해서 메인에 배포하지 않고 로컬에서 테스트하면 되지만 테스트된 코드자체를 push 하면 CI/CD로 dev환경으로 배포가 되어버렸고 메인으로 테스트할땐 다시 코드를 수정해서 배포해야하는 ..? 뭐 이거 외에도 불편한 점들이 많아서 거슬렸지만 어쩔수 없다 생각하고 했던 것 같다.

💡 하드코딩을 줄인 1차방안

위에서 얘기했던 문제점을 인지는 하고 있었지만 고칠 생각까지는 하지 못했고 우선 하드코딩을 줄이는 방안으로 코드를 작성했다.

providers 를 설정해서 li를 만들고 providers.map(provider,index)로 뿌려줘봤다.

// 메인버전
const handleLogin = (provider: string) => {
    router.push(`${URL}/oauth2/authorization/${provider}?redirect_uri=https://omt-onmyticket.vercel.app/login`);
  };
// 로컬버전
const handleLogin = (provider: string) => {
    router.push(`${URL}/oauth2/authorization/${provider}?redirect_uri=http://localhost:3000/login`);
  };

...

const providers = [
    { provider: 'naver', name: 'Naver' },
    { provider: 'kakao', name: 'Kakao' },
    { provider: 'google', name: 'Google' }
  ];

...
  {providers.map((provider, index) => (
          <OAuthButton key={index} {...provider} />
        ))}

매우 잘 동작했다. 이때 코드를 수정하면서 로컬 버전이랑 메인 버전을 계속해서 바꿔가면서 배포를 해야된다고 ? 하 이거 진짜 너무 불편한데 … .라는 생각이 들었고 아이디어 하나가 번뜩였다.

💡 자동화를 시키자 !

☝️ 현재 URL을 체크

현재 URL을 체크해서 localhost3000으로 시작한다면 이 코드를

const handleLogin = (provider: string) => {
    router.push(`${URL}/oauth2/authorization/${provider}?redirect_uri=http://localhost:3000/login`);
  };

메인 배포 URL로 시작한다면 이 코드를 실행하면 되는거 아닌가?

const handleLogin = (provider: string) => {
    router.push(`${URL}/oauth2/authorization/${provider}?redirect_uri=https://omt-onmyticket.vercel.app/login`);
  };

✌️ 내가 하지말고 코드 시키자 ^^

그래서 아래와 같이 코드를 작성해봤다.

 const handleLogin = (provider: string) => {
    const currentUrl = window.location.href;

    // 시작 URL이 localhost3000인지 체크
    const isLocal = currentUrl.startsWith('http://localhost:3000');

    const redirectUri = isLocal
      ? 'http://localhost:3000/login'
      : 'https://omt-onmyticket.vercel.app/login';

    router.push(
      `${URL}/oauth2/authorization/${provider}?redirect_uri=${redirectUri}`
    );
  };

이렇게 코드를 작성하고 사실 될까? 싶기도 했다. 내 머리로는 무조건 될 거 같은데 막상 안되는 경우가 태반이니… 일단 배포해서 테스트를 돌려봤다.

💡 결과

localhost:3000 동작

로컬로그인테스트

main 배포 URL 동작

메인배포로그인테스트

매우 잘 동작한다..

10년 묵은 체증이 내려간 느낌이랄까 ?

정말 코드는 다양한 방법으로 작성할 수 있구나를 느꼈다.. 항상 더 편한 방법이 없나? 더 편한 코드는 없나? 더 잘 동작하게 할 수 없나? 를 고민하지 않았던 과거의 나에게 반성하라 말하고 싶었다..

그리고 어떤 레퍼런스 없이 이렇게 잘 동작한 코드를 만든 현재의 나에겐 칭찬을 ! 주고싶다..ㅎ 앞으로는 코드 짤 때 생각 많이 해보고 짜자 ㅠ

김세훈 / Sehoon Kim