Firebase + 소셜 로그인 완전 정복 (구글, 애플, 카카오) 🔥

승제·2025년 8월 8일

🆕 2025년 최신 버전 완벽 대응!

개요 📝

Flutter 앱에서 Firebase Authentication과 함께 구글, 애플, 카카오 로그인을 모두 구현한 경험을 정리했다. 각 플랫폼별 특징과 주의사항, 그리고 실제 구현 과정에서 마주한 문제점들까지 기록해보자.

⚡ 이 글의 특징:

  • 최신 버전 완벽 대응: firebase_core: 4.0.0, firebase_auth: 6.0.0, google_sign_in: 7.1.1, sign_in_with_apple: 7.0.1, kakao_flutter_sdk: 1.9.6
  • 바이럴 코딩(AI 도구)에만 의존했다가 겪은 시행착오 공유
  • 모든 플랫폼별 최신 API 변경사항 상세 분석 및 대응 방법 제시

전체 아키텍처 설계 🏗️

1. 기본 구조

Firebase Auth (중심축)
├── Google Sign-In
├── Apple Sign-In  
└── Kakao Sign-In → Firebase Custom Token

2. 로그인 플로우 설계

  1. 사용자 선택 → 로그인 방식 선택
  2. 각 플랫폼 인증 → 플랫폼별 토큰 획득
  3. Firebase 연동 → Firebase Auth로 통합 관리
  4. 사용자 정보 저장 → Firestore에 프로필 데이터 저장

구현 방법 🛠️

1. 구글 로그인 구현

가장 간단하고 Firebase와 연동이 쉬운 방식이다. 하지만 7.1.1 버전부터 API가 크게 변경되었으니 주의!

🔄 바이럴 코딩의 함정과 API 변화

처음엔 GitHub Copilot과 ChatGPT가 추천한 구 버전 코드를 그대로 사용했다가 계속 오류가 발생했다. 알고보니 google_sign_in 7.1.1부터 API가 완전히 바뀌었던 것!

구 버전 (7.0.0 이전) 방식:

// ❌ 이제 안 되는 방식
final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

신 버전 (7.1.1+) 방식:

// ✅ 새로운 방식
final GoogleSignIn signIn = GoogleSignIn.instance;
await signIn.initialize();
final GoogleSignInAccount? googleUser = await signIn.authenticate();

💡 교훈: AI 도구들은 항상 최신 API를 반영하지 못한다. 공식 문서와 changelogs 확인이 필수!

의존성 추가 (최신 버전)

# pubspec.yaml - 2025년 8월 기준 최신 안정 버전
dependencies:
  firebase_core: 4.0.0
  firebase_auth: 6.0.0
  google_sign_in: 7.1.1  # 🔥 7.1.1부터 API 대폭 변경!

핵심 코드

Future<void> signInWithGoogle() async {
  try {
    final GoogleSignIn signIn = GoogleSignIn.instance;
    await signIn.initialize();
    final GoogleSignInAccount? googleUser = await signIn.authenticate();
    if (googleUser == null) {
      debugPrint('Google 로그인 취소 또는 사용자 없음');
      return;
    }
    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
    final credential = GoogleAuthProvider.credential(
      idToken: googleAuth.idToken,
    );
    await _auth.signInWithCredential(credential);
    notifyListeners();
  } catch (e, st) {
    debugPrint('Google 로그인 오류: $e\n$st');
    rethrow;
  }
}

장점: Firebase 공식 지원, 구현 간단
⚠️ 주의점: iOS에서는 URL Scheme 설정 필요

2. 애플 로그인 구현

iOS 13+ 필수 요구사항이며, 개인정보 보호에 특화되어 있다. 7.0.1 버전에서 안정성이 크게 개선되었다!

🔄 최신 버전 7.0.1 주요 개선사항

바이럴 코딩으로 찾은 예전 글들은 대부분 5.x 버전 기준이었는데, 7.0.1에서는 다음과 같은 개선이 있었다:

  • iOS 17 완벽 지원
  • 에러 핸들링 개선
  • 성능 최적화

의존성 추가 (최신 버전)

# pubspec.yaml - 2025년 8월 기준 최신 안정 버전
dependencies:
  sign_in_with_apple: 7.0.1  # 🔥 7.0.1 최신 버전 사용!

🚀 바이럴 코딩 성공 사례: iOS 설정

애플 로그인은 오히려 바이럴 코딩이 빛을 발한 케이스였다! GitHub Copilot이 Info.plist 설정을 완벽하게 제안해주었다:

<!-- ✅ iOS Info.plist - 바이럴 코딩으로 빠르게 완성! -->
<key>CFBundleURLTypes</key>
<array>
    <!-- Google 로그인 -->
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.36163303930-1shl4p0i3fm7jsd01ir542pd0jnq5g0a</string>
        </array>
    </dict>
    <!-- Apple 로그인: 실제 번들 ID 사용 -->
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.byseungje.myApp</string>
        </array>
    </dict>
    <!-- Kakao 로그인 -->
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>kakaoa{네이티브 앱 키}</string>
        </array>
    </dict>
</array>

💡 iOS는 바이럴 코딩 천국: URL Scheme부터 Xcode 설정까지 AI가 거의 완벽하게 도와줬다!

핵심 코드 (7.0.1 버전)

Future<UserCredential?> signInWithApple() async {
  try {
    final appleCredential = await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
    );

    final oauthCredential = OAuthProvider("apple.com").credential(
      idToken: appleCredential.identityToken,
      accessToken: appleCredential.authorizationCode,
    );

    return await FirebaseAuth.instance.signInWithCredential(oauthCredential);
  } catch (e) {
    debugPrint('Apple Sign-In Error: $e');
    return null;
  }
}

장점: 개인정보 보호 우수, iOS 생태계 완벽 지원, 바이럴 코딩으로 빠른 개발 가능
⚠️ 주의점: 이메일 숨기기 기능으로 실제 이메일 접근 어려움

3. 카카오 로그인 구현

한국 서비스라면 필수! 하지만 Firebase 직접 연동이 안 되어 Custom Token 방식을 사용해야 한다. 1.9.6 버전에서 Flutter 3.8+ 완벽 지원!

🔄 최신 버전 1.9.6 주요 개선사항

예전 AI 도구들이 추천한 1.7.x 버전과 달리, 1.9.6에서는:

  • Flutter 3.8+ 완벽 호환
  • 새로운 카카오 정책 대응
  • AndroidManifest 설정 방식 변화

의존성 추가 (최신 버전)

# pubspec.yaml - 2025년 8월 기준 최신 안정 버전
dependencies:
  kakao_flutter_sdk: 1.9.6  # 🔥 1.9.6 최신 버전 사용!

🔥 AndroidManifest.xml 설정 - 중요!

코파일럿의 추천을 따라 intent-filter만 추가했다가 계속 오류가 발생했다. 카카오 디벨로퍼 문서를 다시 읽어보니 새로운 activity 전체를 추가해야 하는 것이었다!

<!-- 카카오 로그인을 위한 AuthCodeHandlerActivity -->
<activity android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity">
    <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
    
        <!-- Redirect URI: "kakao${NATIVE_APP_KEY}://oauth" -->
        <data android:scheme="kakaoa9f72088774650dd0f2413f8df7a4c92" android:host="oauth"/>
    </intent-filter>
</activity>

💡 교훈: intent-filter 추가가 끝이 아닌, 새로운 activity 추가였다. 새로운 기능 구현에 앞서 문서 정독은 필수라는 걸 다시 한번 깨달았다.

🚨 바이럴 코딩의 최대 함정: OIDC vs Custom Token

카카오 로그인 구현 중 가장 큰 삽질이었다. Firebase와 카카오를 연동하려고 할 때마다 AI들이 계속 OIDC 방식을 추천했는데, 막상 구현해보면 오류가 발생했다.

AI가 자꾸 추천한 OIDC 방식:

// ❌ AI가 추천했지만 실제로는 안 되는 방식
final provider = OAuthProvider("oidc.kakao");
// 계속 오류 발생...

실제로 작동하는 Custom Token 방식:

// ✅ 결국 이 방식으로 해결
Future<UserCredential?> signInWithKakao() async {
  try {
    OAuthToken token = await UserApi.instance.loginWithKakaoTalk();
    
    // Firebase Custom Token 생성을 위해 서버로 카카오 토큰 전송
    final customToken = await createFirebaseCustomToken(token.accessToken);
    
    return await FirebaseAuth.instance.signInWithCustomToken(customToken);
  } catch (e) {
    debugPrint('Kakao Sign-In Error: $e');
    return null;
  }
}

💡 교훈: AI가 이론적으로 가능하다고 추천해도, 실제 카카오-Firebase 연동은 Custom Token이 정답이었다!

Firebase Functions (Custom Token 생성)

// functions/src/index.ts
exports.createCustomToken = functions.https.onCall(async (data, context) => {
  const { kakaoAccessToken } = data;
  
  // 카카오 사용자 정보 검증
  const userInfo = await verifyKakaoToken(kakaoAccessToken);
  
  // Firebase Custom Token 생성
  const customToken = await admin.auth().createCustomToken(userInfo.id, {
    provider: 'kakao',
    email: userInfo.kakao_account?.email,
    name: userInfo.properties?.nickname
  });
  
  return { customToken };
});

통합 Provider 설계 🎯

모든 로그인 방식을 하나의 Provider로 관리해서 일관성을 유지했다.

class AuthProvider extends ChangeNotifier {
  User? _user;
  LoginType? _loginType;

  Future<bool> signIn(LoginType type) async {
    try {
      switch (type) {
        case LoginType.google:
          await signInWithGoogle();
          break;
        case LoginType.apple:
          await signInWithApple();
          break;
        case LoginType.kakao:
          await signInWithKakao();
          break;
      }
      
      if (FirebaseAuth.instance.currentUser != null) {
        _user = FirebaseAuth.instance.currentUser;
        _loginType = type;
        notifyListeners();
        return true;
      }
      return false;
    } catch (e) {
      debugPrint('로그인 실패: $e');
      return false;
    }
  }
}

바이럴 코딩 현실 체크 🤖 vs 📖

이번 프로젝트를 통해 바이럴 코딩(AI 도구 활용)의 명암을 확실히 경험했다.

🟢 바이럴 코딩이 빛난 순간들

  1. iOS 설정: Info.plist URL Scheme 설정을 완벽하게 제안
  2. 구글 로그인 기본 틀: 전체적인 구조와 Provider 패턴 제안
  3. 에러 핸들링: try-catch 구조와 디버그 출력 패턴

🔴 바이럴 코딩이 삽질을 유발한 순간들

  1. 구글 로그인 API: 7.1.1 신버전 API를 모르고 구버전 추천
  2. 안드로이드 카카오 설정: intent-filter만 추가하라고 해서 계속 오류
  3. 카카오-Firebase 연동: OIDC 추천했지만 실제로는 Custom Token 필요

💡 결론: 바이럴 코딩 + 문서 검증 = 최강

  • AI 도구로 빠르게 프로토타입 생성
  • 오류 발생 시 반드시 공식 문서로 검증
  • 최신 버전 변경사항은 AI가 놓치는 경우 많음

주요 이슈 & 해결책 🚨

1. 카카오 로그인 AndroidManifest 설정 (바이럴 코딩 최대 함정)

  • 문제: GitHub Copilot이 intent-filter만 추가하라고 해서 계속 오류 발생
  • AI 추천: 기존 MainActivity에 <intent-filter> 태그만 추가
  • 실제 해결: 완전히 새로운 <activity> 태그 전체를 추가해야 함
  • 교훈: 안드로이드 manifest 설정은 AI보다 카카오 디벨로퍼 공식 문서가 정확

2. Google Sign-In 7.1.1 API 변화 (바이럴 코딩 시차 문제)

  • 문제: ChatGPT, Copilot 모두 구버전 API(GoogleSignIn().signIn()) 추천
  • 실제 해결: 7.1.1부터 initialize() + authenticate() 방식으로 변경
  • 교훈: AI는 최신 Breaking Changes를 즉시 반영하지 못함

3. Apple Sign-In 7.0.1 버전 호환성 (바이럴 코딩 성공 사례)

  • 문제: 구 버전 5.x 코드가 iOS 17에서 간헐적 오류 발생
  • AI 도움: Copilot이 7.0.1 버전 업그레이드와 Info.plist 설정을 완벽 제안
  • 결과: 업그레이드 후 iOS에서 가장 안정적으로 작동

4. Kakao SDK 1.9.6 Flutter 3.8+ 대응

  • 문제: 바이럴 코딩으로 찾은 1.7.x 버전이 최신 Flutter와 호환 문제
  • 해결: pub.dev에서 직접 확인 후 1.9.6 업데이트로 완벽 호환성 확보

5. 카카오-Firebase OIDC vs Custom Token (AI의 이론 vs 현실)

  • 문제: AI들이 계속 OIDC 방식(OAuthProvider("oidc.kakao")) 추천
  • 현실: 실제로는 Custom Token 방식만 안정적으로 작동
  • 교훈: AI가 이론적으로 가능하다고 해도 실제 구현에서는 다를 수 있음

5. iOS Apple Sign-In 인증서 설정

  • 문제: Xcode에서 Sign-In with Apple capability 누락
  • 해결: Capabilities 탭에서 Sign-In with Apple 활성화

4. 로그인 상태 지속성

  • 문제: 앱 재시작 시 로그인 상태 유지 안됨
  • 해결: Firebase Auth의 authStateChanges 스트림 활용

성능 최적화 팁 ⚡

  1. 지연 로딩: 각 로그인 SDK는 필요할 때만 초기화
  2. 토큰 캐싱: 로그인 토큰을 안전하게 캐싱해서 재로그인 빈도 줄이기
  3. 에러 핸들링: 사용자에게 친화적인 에러 메시지 제공

마무리 🎉

Firebase와 소셜 로그인을 모두 구현하면서 각 플랫폼의 특징을 이해할 수 있었다. 특히 카카오 로그인에서 문서를 제대로 읽지 않아 삽질한 경험과, 구글 로그인에서 바이럴 코딩만 믿다가 API 변경사항을 놓친 경험이 가장 기억에 남는다.

🚨 바이럴 코딩의 현실적 한계:

  • AI 도구들은 최신 버전 변경사항을 즉시 반영하지 못함 (특히 Google Sign-In 7.1.1)
  • 이론적으로 가능한 방식과 실제 작동하는 방식이 다름 (카카오 OIDC vs Custom Token)
  • 플랫폼별 세부 설정은 공식 문서가 더 정확함 (안드로이드 manifest)
  • 하지만 iOS 설정과 전체 구조 설계에서는 큰 도움이 됨

핵심 교훈:

  • 공식 문서를 꼼꼼히 읽자 📖
  • AI 도구로 빠른 프로토타입 → 공식 문서로 검증 🔍
  • 각 플랫폼별 특성을 이해하고 구현하자 💪
  • 최신 버전 변경사항은 반드시 직접 확인하자 🔄
  • 바이럴 코딩 ≠ 만능, 적재적소에 활용하는 지혜 필요 🧠

🔮 앞으로의 계획

이 글은 2025년 8월 기준 최신 안정 버전으로 작성되었다:

  • firebase_core: 4.0.0
  • firebase_auth: 6.0.0
  • google_sign_in: 7.1.1
  • sign_in_with_apple: 7.0.1
  • kakao_flutter_sdk: 1.9.6

하지만 Flutter와 Firebase 생태계는 빠르게 변화한다.

📝 지속적인 업데이트 다짐:

  • 🔄 월 1회 버전 체크: 새로운 버전 출시 시 즉시 테스트 및 글 업데이트
  • 🚨 Breaking Changes 대응: 주요 API 변경 시 48시간 내 마이그레이션 가이드 추가
  • 📦 새 플랫폼 추가: 네이버, 페이스북 등 추가 소셜 로그인 구현 시 즉시 공유
  • 💬 커뮤니티 피드백: 댓글로 받은 최신 이슈들 반영해서 지속 개선

⚠️ 주의: 이 글을 참고하실 때는 현재 사용 중인 패키지 버전을 확인하고, 필요시 최신 공식 문서를 함께 참조해주세요!

profile
[⚙️ + 💡] 효율 속에서 창의성을 실험합니다.

0개의 댓글