Vue 3와 Firebase 소셜 로그인: OAuth 위임과 연동 원리

Vue 3에서 구현하기

// useSocialLogin.js
import { getAuth, signInWithPopup, FacebookAuthProvider } from 'firebase/auth';

export function useSocialLogin() {
  const loginWithFacebook = async () => {
    const provider = new FacebookAuthProvider();
    provider.addScope('email');
    try {
      const result = await signInWithPopup(getAuth(), provider);
      return result.user;
    } catch (error) {
      if (error.code === 'auth/account-exists-with-different-credential') {
        // 같은 이메일이 다른 제공자로 이미 가입된 경우를 안내한다
      }
      throw error;
    }
  };

  return { loginWithFacebook };
}

addScope는 기본 프로필 외에 추가로 요청할 정보 범위를 지정한다. 로그인 성공 이후의 상태 관리는 이메일 인증과 마찬가지로 onAuthStateChanged 하나로 일원화하는 것이 좋다. 제공자별 분기가 로그인 시점 이후까지 퍼지지 않기 때문이다.

계정 충돌과 예외 처리

• auth/account-exists-with-different-credential 오류는 같은 이메일이 이미 다른 제공자로 가입된 경우 발생한다. 기존 방식으로 먼저 로그인시킨 뒤 linkWithCredential로 두 자격 증명을 한 계정에 연결하는 것이 정석이다.
• 팝업은 사용자 클릭 같은 상호작용 이벤트 핸들러 안에서 직접 열어야 팝업 차단기에 걸리지 않는다.
• 최근 브라우저의 서드파티 쿠키와 저장소 차단 정책 때문에 리다이렉트 방식이 실패하는 사례가 있어, 서비스 도메인과 인증 도메인을 일치시키는 구성이나 팝업 우선 전략이 권장된다.
• 제공자가 이메일을 주지 않는 경우도 있다. 예를 들어 전화번호로 가입한 Facebook 계정은 email이 null일 수 있으므로 이메일 존재를 가정한 코드는 위험하다.

면접에서 이렇게 물어본다

• OAuth 2.0에서 비밀번호를 공유하지 않고도 로그인이 가능한 원리를 설명해 보라.
• 팝업 방식과 리다이렉트 방식의 차이와 각각을 선택하는 기준은 무엇인가.
• 같은 이메일로 서로 다른 소셜 제공자에 가입된 계정 충돌을 어떻게 처리하는가.
• Firebase가 제공자 시크릿을 클라이언트에 노출하지 않고 인증을 완료하는 구조를 설명해 보라.
• 소셜 로그인 이후 백엔드 API는 이 사용자를 어떻게 신뢰할 수 있는가.