플러터:인증(Firebase 인증) 편집하기

{{플러터}}

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

=== 특징 ===

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

=== 한계 ===

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

= Firebase 인증 개념 =

== 인증 흐름 ==

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

= 사전 준비 =
{| class="wikitable"
|+
!단계
!설명
!비고
|-
|Firebase CLI 설치
|<syntaxhighlight lang="bash">
npm install -g firebase-tools
</syntaxhighlight>
|
|-
|FlutterFire CLI 설치
|<syntaxhighlight lang="bash">
dart pub global activate flutterfire_cli
</syntaxhighlight>
|
|-
|Firebase 프로젝트 연동
|<syntaxhighlight lang="bash">
flutterfire configure
</syntaxhighlight>→ Android/iOS 설정 파일 자동 생성
|
|-
|pubspec.yaml 설정
|<syntaxhighlight lang="yaml">
dependencies:
  firebase_core: ^3.0.0
  firebase_auth: ^5.0.0
  google_sign_in: ^6.1.0
</syntaxhighlight>
|
|}

= 기본 인증 (Email/Password) =

== main.dart ==
<syntaxhighlight lang="dart">
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}
</syntaxhighlight>

== 회원가입 ==
<syntaxhighlight lang="dart">
await FirebaseAuth.instance.createUserWithEmailAndPassword(
  email: email,
  password: password,
);
</syntaxhighlight>

== 로그인 ==
<syntaxhighlight lang="dart">
await FirebaseAuth.instance.signInWithEmailAndPassword(
  email: email,
  password: password,
);
</syntaxhighlight>

== 로그아웃 ==
<syntaxhighlight lang="dart">
await FirebaseAuth.instance.signOut();
</syntaxhighlight>

= 로그인 상태 감지 =
FirebaseAuth는 로그인 상태를 Stream으로 감시할 수 있다.<syntaxhighlight lang="dart">
StreamBuilder(
  stream: FirebaseAuth.instance.authStateChanges(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return HomeScreen();   // 로그인됨
    }
    return LoginScreen();    // 로그인 안됨
  },
)
</syntaxhighlight>

= 구글 로그인 =

=== Firebase 콘솔 설정 ===

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

== 구현 코드 ==
<syntaxhighlight lang="dart">
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);
}
</syntaxhighlight>

== 구글 로그인 버튼 ==
<syntaxhighlight lang="dart">
ElevatedButton(
  onPressed: () => signInWithGoogle(),
  child: Text("Google 로그인"),
)
</syntaxhighlight>

= 앱 전체 구조 예시 =

== 기본 구조 ==
<syntaxhighlight lang="text">
main.dart
 └── StreamBuilder(authStateChanges)
      ├── HomeScreen  (로그인됨)
      └── LoginScreen (로그인 안됨)
</syntaxhighlight>

== LoginScreen 기능 ==

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

== HomeScreen 기능 ==

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