🔐 Flutter Firebase Auth로 로그인 기능 만들기 – 구글 로그인 연동 기초

앱을 만들다 보면 사용자별 기능이 필요할 때가 많습니다.
이럴 때 가장 많이 사용되는 도구는 바로 Firebase Authentication입니다.

이번 글에서는 Google 로그인을 Flutter 앱에 연결하는 방법을 단계별로 설명합니다.

---

🔧 준비 사항

1️⃣ Firebase 프로젝트 만들기

1. Firebase Console 접속
2. 새 프로젝트 생성 (예: "flutter_todo")
3. 플랫폼에 "Android 앱" 추가
4. 패키지 이름 입력 (예: com.example.todoapp)
5. google-services.json 파일 다운로드 → android/app 폴더에 추가

---

2️⃣ Android 설정

android/build.gradle

 

classpath 'com.google.gms:google-services:4.3.15' // 버전은 최신 확인

 

android/app/build.gradle

 

apply plugin: 'com.google.gms.google-services'

dependencies {
  implementation 'com.google.firebase:firebase-auth'
}

 

3️⃣ pubspec.yaml에 패키지 추가

 

dependencies:
  firebase_core: ^2.0.0
  firebase_auth: ^4.0.0
  google_sign_in: ^6.1.0

 

flutter pub get

 

4️⃣ Firebase 초기화

main.dart

 

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

 

---

✅ 구글 로그인 구현 예제

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MaterialApp(home: GoogleLoginDemo()));
}

class GoogleLoginDemo extends StatefulWidget {
  @override
  _GoogleLoginDemoState createState() => _GoogleLoginDemoState();
}

class _GoogleLoginDemoState extends State<GoogleLoginDemo> {
  User? user;

  Future<void> _signInWithGoogle() async {
    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

    if (googleUser == null) return; // 로그인 취소

    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );

    UserCredential userCredential =
        await FirebaseAuth.instance.signInWithCredential(credential);

    setState(() {
      user = userCredential.user;
    });
  }

  Future<void> _signOut() async {
    await FirebaseAuth.instance.signOut();
    await GoogleSignIn().signOut();
    setState(() {
      user = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Google 로그인 예제')),
      body: Center(
        child: user == null
            ? ElevatedButton(
                onPressed: _signInWithGoogle,
                child: Text('Google로 로그인'),
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(user!.photoURL ?? ''),
                    radius: 40,
                  ),
                  SizedBox(height: 10),
                  Text('환영합니다, ${user!.displayName}!'),
                  SizedBox(height: 10),
                  ElevatedButton(
                    onPressed: _signOut,
                    child: Text('로그아웃'),
                  ),
                ],
              ),
      ),
    );
  }
}

 

---

📌 주요 개념 요약

기능설명

GoogleSignIn()	구글 로그인 요청
GoogleSignInAuthentication	인증 토큰 수집
FirebaseAuth.instance.signInWithCredential()	파이어베이스와 연동
User 객체	로그인한 사용자 정보 반환
signOut()	로그아웃 기능

 

---

🔐 로그인 상태 유지

• 로그인 상태는 앱을 껐다 켜도 유지됩니다.
• FirebaseAuth.instance.currentUser로 확인할 수 있습니다.

---

💡 활용 예

• 로그인 후 사용자 이름으로 맞춤 인사
• 사용자의 할 일 데이터 Firebase Firestore에 저장
• 비회원 기능 → 회원 기능 전환

---

🧠 마무리 요약

개념설명

Firebase Auth	로그인, 로그아웃 기능 제공
Google Sign-In	OAuth 기반 간편 인증
상태 관리	로그인 여부에 따라 UI 분기

 

이제 여러분의 앱은
실제 사용자 인증까지 지원하는 기능성 앱으로 진화했습니다.