[ionic + vue + firebase Auth] IOS 에서 signInWithEmailAndPassword 오류 해결하기

개요

사이드 프로젝트로 Vue 기반 앱 서비스를 개발하는 과정에서 Firebase 로그인 오류를 겪었습니다.

기존 개발 방식은 Ionic 빌드를 통해 iOS에서 웹뷰(WebView) 형태로 로컬 서버에 접근하는 방식이었습니다. 하지만, 로컬 서버를 사용하는 방식은 외부 네트워크 환경에서 테스트가 불가능한 문제가 있었습니다.

이를 해결하기 위해 로컬 서버에 의존하지 않고 네이티브 앱으로 배포하여 외부에서도 테스트할 수 있도록 변경했습니다. 배포는 정상적으로 완료되었지만, 로그인 테스트를 진행하는 과정에서 signInWithEmailAndPassword()가 정상적으로 작동하지 않는 문제가 발생했습니다.

이 오류의 원인을 분석하고 해결하는 과정을 기록합니다.

원인 분석

1. Xcode 로그 분석을 통한 원인 추측

로그인 실패 원인을 파악하기 위해 Xcode의 에러 로그를 확인했습니다.

• 초기에는 iOS 키보드 관련 렌더링 오류 또는 초기화 문제로 의심
• 실제로 로그인 화면에서 아이디/비밀번호 입력 중 렌더링 오류 발생
• 하지만, 입력된 데이터가 signInWithEmailAndPassword() 함수로 정상적으로 전달됨을 확인
• 따라서, 키보드 관련 오류는 로그인 실패의 직접적인 원인이 아님으로 판단하고 원인 후보에서 제외 Xcode 로그 예시:

`-[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID. inputModality = Keyboard, inputOperation = dismissAutoFillPanel, customInfoType = UIUserInteractionRemoteInputOperations

2. Stack Overflow 검색을 통한 Firebase 초기화 문제 파악

• Ionic의 네이티브 환경(iOS/Android)에서 getAuth()가 정상적으로 동작하지 않는 문제가 종종 발생
• getAuth() 대신 initializeAuth()를 사용해야 한다는 해결책을 발견
• 해결 방법을 적용한 후 로그인이 정상적으로 동작함을 확인

해결 방법

• 기존

  auth = getAuth(app); 
  setPersistence(auth, indexedDBLocalPersistence);
  

  기존 방식은 네이티브 환경에서 충돌을 일으킬 가능성이 있음

• 수정

  // `auth` 중복 초기화 방지 
  let auth; 
  // 네이티브 환경(iOS/Android)에서는 initializeAuth 사용 
  if (isPlatform("hybrid")) { 
    auth = initializeAuth(app, { 
        persistence: indexedDBLocalPersistence 	
    }); 
  } else { // 웹 환경에서는 기존 getAuth() 사용
    auth = getAuth(app);
    setPersistence(auth, browserLocalPersistence); 
  }
  

  네이티브 환경일 경우에는 initializeAuth를 사용하여 auth 초기화

• 로그인 함수

  const login = async () => { 
    try { 
        console.log("Email:", email.value); 
        console.log("Password:", password.value); 
        await signInWithEmailAndPassword(auth, email.value, password.value); 
        router.push("/home"); 
    } catch (error) { 
        console.error("로그인 실패:", error); alert("로그인 실패: " + error.message);
    } 
  };
  

  로그인 함수는 기존과 동일

결과

• 네이티브 환경 (IOS 환경) 에서 정상적으로 로그인 성공하였습니다.
• 외부에서도 정상적으로 로그인 테스트 가능
• 이번 문제 해결을 통해 Ionic + Vue + Firebase를 활용한 하이브리드 앱 개발에서 네이티브 환경과 웹 환경의 Firebase auth 설정 차이를 이해할 수 있었습니다.