Flutter에서 Firebase Authentication으로 이메일 로그인 구현하기

Firebase에서 Authentication은 구글 로그인과 애플 로그인 기능만 이용해봤는데, 이메일/비밀번호 로그인 기능도 제공한다.

: Firebase Authentication을 사용하면, 기본적인 로그인 및 회원가입 기능을 간단히 구현할 수 있습니다. Firebase Auth는 자동으로 비밀번호를 안전하게 해시화하여 저장하므로, 직접 해시화 로직을 구현할 필요가 없습니다.

 

백엔드 개발자 따로 두지 않고 Firestore Database 연동해서 간단한 미니 프로젝트 만들어보려고 했던 건데,

Authentication에서 생성된 UID를 저장해두고 사용하는 식으로 하면 내가 원하던대로 별도의 회원 테이블 관리도 가능해보여서 로그인 기능은 이쪽의 도움을 받아보기로 했다.

 

2024.11.14 - [개발노트/Flutter] - Flutter 프로젝트에서 Firebase 이용하기 (공통 설정)

Flutter 프로젝트에 Firebase Console 연결하는 과정을 아직 완료하지 못했다면 위 포스팅을 참고하여 먼저 진행하고 와야 한다.

---

 

🔗 공식 문서 링크

 

1. Firebase Console 설정

1-a. 이메일/비밀번호 기능 활성화

Firebase Console 좌측 메뉴 빌드 카테고리에서 Authentication 메뉴를 클릭한다.

로그인 방법하여 로그인 제공업체 중 ```이메일/비밀번호```를 선택하여 설정값을 on으로 바꿔준다.

 

만약 다른 로그인 기능을 제공하고 있어서 위 스샷과 화면이 다르다면 우측 상단의 새 제공업체 추가 버튼으로 추가할 수 있다.

 

 

2. 프로젝트 설정

2-a. 패키지 다운로드

flutter pub add firebase_auth

 

2-b. Firebase 초기화 코드 추가 (아직 추가하지 않았다면)

void main() async {
	WidgetsFlutterBinding.ensureInitialized();

	// ...
	
	/// Firebase 초기화
	await Firebase.initializeApp(
    	options: DefaultFirebaseOptions.currentPlatform,
 	);

	// ...
	runApp(const MyApp());
}

 

 

3. 코드 작성

3-a. 회원가입

Future<void> signUpWithEmail(String email, String password) async {
  try {
    // Firebase Authentication에서 사용자 생성
    UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(email: email, password: password);
    debugPrint('회원가입 성공: ${userCredential.user?.uid}');
  } on FirebaseAuthException catch (e) {
    if (e.code == 'email-already-in-use') {
      debugPrint('이 이메일은 이미 사용 중입니다.');
    } else if (e.code == 'weak-password') {
      debugPrint('비밀번호가 너무 약합니다.');
    } else {
      debugPrint('회원가입 오류: ${e.message}');
    }
  } catch (e) {
    debugPrint('알 수 없는 오류 발생: $e');
  }
}

 

여기서 계정 생성을 해주면 Firebase Console의 Authentication 사용자 목록에 추가된다.

보니까 여기서 UID를 확인할 수 있는 건 물론, 비밀번호 변경 메일을 전송해줄 수도 있고, 이용자를 정지하거나 삭제하는 것도 가능하다.

 

3-a-i. type 'List<Object?>' is not a subtype of type 'PigeonUserDetails?' in type cast

정작 계정 생성은 잘 됐는데 catch문으로 떨어지며 위 에러가 발생할 경우 버전을 확인해보자.

내 경우는 버전을 아래 정도로 올려주니 정상적으로 동작했다.

# Firebase
firebase_core: ^3.0.3
firebase_auth: ^5.0.3

pubspec.yaml

flutter pub get

 

3-b. 로그인

Future<void> signInWithEmail(String email, String password) async {
  try {
    UserCredential userCredential = await FirebaseAuth.instance.signInWithEmailAndPassword(email: email, password: password);
    debugPrint('로그인 성공: ${userCredential.user?.uid}');
  } on FirebaseAuthException catch (e) {
    debugPrint('로그인 오류(${e.code}): ${e.message}');
  } catch (e) {
    debugPrint('알 수 없는 오류 발생: $e');
  }
}

회원가입에서 ```create~``` 사용한 부분을 ```signIn~```으로만 바꿔주면 된다.

 

 

보니까 이메일 링크 로그인이라고 해서 사용자가 입력한 계정으로 이메일을 전송하고 그걸로 로그인을 할 수 있게 해주는 기능도 있는 것 같으니, 애초부터 이 방법을 고려해보는 것도 좋은 것 같다.

(비밀번호 로그인을 사용하면 진짜 본인의 이메일인지, 유효한 이메일인지의 여부를 보장할 수 없기 때문)

 

 

 

Flutter 프로젝트에서 Google Login 설정하기

 

Flutter 프로젝트에서 Apple Login 설정하기

---

<도움 받은 링크들>

• [flutter] 구글 로그인시 에러 발생할 때...