플러터:인증(Firebase 인증)

틀:플러터 Dart:개요 플러터에 대한 지식 분류

1. 플러터:개요
   1. 플러터:VSCode
   2. 플러터:안드로이드 스튜디오
2. 플러터:실행
3. 플러터:개념 잡기
   1. 플러터:화면 하나 만들기
   2. 플러터:변하는 화면(StatefulWidget)
   3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
   4. 플러터:화면 전환(Drawer)
   5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
   6. 플러터:그래프 그리기(fl chart)
   7. 플러터:데이터 저장(간단한 데이터)
   8. 플러터:인증(Firebase 인증)(미완)
   9. 플러터:인증(OAuth2)(미완)
   10. 플러터:푸시 알람(FCM)(미완)
4. 권한 사용
   1. 플러터:마이크 입력
5. 위젯
   1. 플러터:아이콘
   2. 플러터:레이아웃 계열 위젯
   3. 플러터:네비게이션 계열 위젯
   4. 플러터:버튼
   5. 플러터:상태관리(미완)
6. 플러터:DB연결
   1. 플러터:Firebase(미완)
   2. 플러터:MySQL(미완)
7. 디자인
   1. 플러터:테마
   2. 플러터:앱바
8. 플러터:배포
   1. 플러터:배포(안드로이드)(미완)
   2. 플러터:배포(iOS)(미완)
9. 플러터:참고자료
10. 플러터:위젯
    1. 플러터:공간배치용 위젯
11. 플러터:구글 AdMob(미완)
12. 플러터:라이브러리
    1. 플러터:logger

개요

Flutter에서 Firebase Authentication을 이용해 앱에 로그인 기능을 구현하는 방법을 정리한 문서.

특징

• 쉽다: Firebase는 이메일/비밀번호, 구글, 애플, 전화번호 등 다양한 인증 방식을 제공하며, 별도의 백엔드 없이도 안정적인 인증 시스템을 구축할 수 있다.
• Firebase가 제공하는 인증 서비스(공식지원)
• 서버 없이 사용자 계정 관리 가능(백엔드 필요 없음)
• 소셜 로그인(Google/Apple/GitHub/Microsoft) 지원
• 인증 상태(로그인 여부) 자동 유지
• 토큰/세션 관리 자동 처리

한계

• 기본적으로 제공하는 소셜로그인 외의 OAuth2 등 인증은 따로 구현하는 편이 더 간편하다.

Firebase 인증 개념

인증 흐름

1. 앱에서 FirebaseAuth API 호출
2. Firebase가 사용자 인증 처리
3. 성공 시 User 객체 반환
4. authStateChanges() 스트림을 통한 로그인 상태 전달

사전 준비

단계	설명	비고
Firebase CLI 설치	npm install -g firebase-tools
FlutterFire CLI 설치	dart pub global activate flutterfire_cli
Firebase 프로젝트 연동	flutterfire configure → Android/iOS 설정 파일 자동 생성
pubspec.yaml 설정	dependencies: firebase_core: ^3.0.0 firebase_auth: ^5.0.0 google_sign_in: ^6.1.0

기본 인증 (Email/Password)

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

회원가입

await FirebaseAuth.instance.createUserWithEmailAndPassword(
  email: email,
  password: password,
);

로그인

await FirebaseAuth.instance.signInWithEmailAndPassword(
  email: email,
  password: password,
);

로그아웃

await FirebaseAuth.instance.signOut();

로그인 상태 감지

FirebaseAuth는 로그인 상태를 Stream으로 감시할 수 있다.

StreamBuilder(
  stream: FirebaseAuth.instance.authStateChanges(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return HomeScreen();   // 로그인됨
    }
    return LoginScreen();    // 로그인 안됨
  },
)

구글 로그인

Firebase 콘솔 설정

• Authentication → Sign-in Method → Google 활성화

구현 코드

Future<UserCredential> signInWithGoogle() async {
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
  final GoogleSignInAuthentication? googleAuth =
      await googleUser?.authentication;

  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );

  return await FirebaseAuth.instance.signInWithCredential(credential);
}

구글 로그인 버튼

ElevatedButton(
  onPressed: () => signInWithGoogle(),
  child: Text("Google 로그인"),
)

앱 전체 구조 예시

기본 구조

main.dart
 └── StreamBuilder(authStateChanges)
      ├── HomeScreen  (로그인됨)
      └── LoginScreen (로그인 안됨)

LoginScreen 기능

• 이메일 로그인
• 구글 로그인 버튼

HomeScreen 기능

• 사용자 정보 표시
• 로그아웃 버튼