type-error : gapi is not defined, auth2 is undefined

💬 Error log

소셜 로그인 - Google 연결 해제

레거시 코드를 유지보수하던 중에,
구글 계정으로 가입한 계정을 탈퇴하는 과정에서 간헐적인 버그를 발견했다.

확인을 해보니
구글 계정으로 가입한 계정을 탈퇴, 로그아웃을 시키는 함수에서 type-error 가 났다..

gapi.auth2 is undefined 

auth2 프로퍼티를 읽지 못해 콘솔을 찍어보니 window.gapi 자체가 undefined 가 뜨는 것이었다

gapi

• Javascript 용 Google 클라이언트 라이브러리
• Google API 와 쉽게 연결하기 위해 Google 로그인, Google 드라이브 및 수천 개의 내부 외부 웹 페이지에서 사용된다
• 웹 프로젝트에 gapi 를 추가하려면 스크립트 태그를 추가하여 모든 항목을 로드해야 한다

요리조리 구글링을 해보니,
google api 가 불러오기 이전에 동작을 해서 해당 에러가 나는 듯 보였다

const disconnectOauth = () => {
  .
  .
  .
    else if (user.platform==='GOOGLE') { // 구글 연결 해제
      window['gapi'].auth2
      .getAuthInstance()
      .disconnect()
      .then(function() {
        console.log("구글 연결 해제 성공");
        deleteUser(email);
      });
    }
  }

gapi is not defined -> script load
이런 순서로, 즉 google api 를 불러오는 속도가 조금 느려서 로딩이 안된 상태에서 하려다보니 그런 것이 아닐까..? 하는 생각에 코드를 수정했다

      if (!window["gapi"].auth2) {
        window["gapi"].load("auth2", function () {
          window["gapi"].auth2.init();
        });
        return window["gapi"].auth2
          .getAuthInstance()
          .disconnect()
          .then(function () {
            console.log("구글 연결 해제 성공");
            deleteUser(email);
          });
      }
  

window["gapi"].load("auth2", function () ...
auth2 라이브러리를 로드하고, auth2.init() 으로 초기화를 진행

auth2.getAuthInstance()
auth 개체를 반환

간헐적으로 해당 에러를 띄우기 때문에 !window.gapi.auth2 일 때,\
위에 초기화를 진행하도록 했다

암튼 기록