firebase auth 소셜 로그인시 이메일 중복에 따른 오류 해결

firebase auth를 통해 소셜인증을 하게되면 이메일 중복 문제으로 인한 인증 오류 문제에 부딪히게 된다.

어떤 말이냐면 페북으로 소셜 인증을 하였는데,

이후 동일한 이메일로 가입된 구글로 소셜 인증을 하게되면 "This operation has been cancelled due to another conflicting popup being opened."라는 메세지의 오류가 나게 된다.

 

이를 스택오버플로우에서 찾아보았을때 firebase에서 동일 이메일 멀티계정 허용 설정을 바꿔가며 임시적으로 해결할 수 있었지만 근본적인 해결은 되지 않았다.

(멀티 계정을 허용하면 email이 null값으로 들어오게 된다..)

 

 

결국 해결책은 오류가 났을때 이미 인증된 소셜 쪽으로 다시 인증해 주는 작업을 거쳐야 함을 알게 되었다.

아래의 사이트에 이에 관련한 오류 및 해결책을 자세히 적어놓고 있다.

 

https://stackoverflow.com/questions/44015751/firebase-js-api-auth-account-exists-with-different-credential

Firebase JS API auth - account-exists-with-different-credential

아래는 내 코드인데 참고하길 바란다.

 

async signInWithFacebook({commit}) {
  try {
    await auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(
      auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).then(function(result) {
      console.log(result);
      }).catch(function(e) {
        console.log(e);
        auth.fetchProvidersForEmail(e.email).then(function(providers) {
          if(providers[0] == 'google.com') {
            var provider = new firebase.auth.GoogleAuthProvider();
            provider.setCustomParameters({login_hint: e.email});
            auth.signInWithPopup(provider).then(function(result) {
              auth.signInWithCredential(result.credential).then(user => {
                user.linkWithCredential(e.credential)
              }).catch(function(e) {
                console.log(e)
              })
            }).catch(function(e) {
              console.log(e)
            })
          }
        })
      })
    ).catch(function(e) {
      console.log(e)
    })
  } catch(e) {
    console.log(e);
  }
},