[RN] react-native-seoul/kakao-login issue

https://github.com/crossplatformkorea/react-native-kakao-login

GitHub - crossplatformkorea/react-native-kakao-login: react-native native module for Kakao sign in.

 
해당 라이브러리를 쓰면서 iOS부분에서 이슈를 하나 발견했다.

 <LoginButton
          onPress={async () =>
            handleSocialLogin((await login()).accessToken, 'kakao')
          }
          imageSource={img.kakao}
          backgroundColor="#FEE500"
          textColor="#3C1E1E"
          text="카카오 로그인"
        />

 
실기기(카카오톡이 설치되어 있는)에서 login()을 호출했을 때 앱이 카카오톡앱으로 갔다가 0.1초 정도 후에 다시 돌아오지만 정보를 가져오지 못하고 있다. 임시방편으로 login() 대신 loginWithKakaoAccount()를 호출해서 막아뒀지만 근본적이 해결책이 아니란걸 알기에... 꾸역꾸역 한 번 고쳐봤다.

• login()은 카카오톡 앱을 통한 로그인을 시도하지만, 여러 가지 이유로 실패할 수 있음.
• 반면, loginWithKakaoAccount()는 웹뷰를 통한 로그인 방식이므로 정상 동작하는 것.

✅ loginWithKakaoAccount()는 정상 동작
❌ login()은 카카오톡 앱 로그인 후 정보를 가져오지 못함
이제 왜 이런 문제가 발생했는지, 그리고 해결 방법을 살펴보자.
 
xcode 열어야죠 뭐... 이럴 때 마다 네이티브 개발자 할 걸 후회합니다.
 

🔍 원인 분석

1️⃣ KAKAO_APP_SCHEME과 CFBundleURLSchemes 설정 부족

• 카카오 로그인 후 앱으로 돌아올 수 있는 URL이 설정되지 않았음.
• KAKAO_APP_SCHEME과 CFBundleURLSchemes가 없으면, 카카오 SDK가 로그인 후 앱을 다시 열지 못함.

2️⃣ openURL에서 Kakao 로그인 결과를 처리하지 않음

• 앱이 로그인 데이터를 받으려면 openURL에서 AuthController.handleOpenUrl(url:)을 호출해야 함.
• 기존에는 Google 로그인 처리 코드만 있었고, Kakao 로그인 처리가 빠져 있었음.

3️⃣ iOS 13 이상에서 Universal Links 처리가 필요함

• iOS 13 이상에서는 Universal Links 방식으로 앱이 실행될 수도 있음.
• 따라서 continue userActivity에서 Kakao 로그인 URL을 처리해야 함.

 
RN 버전 0.75 이하 버전부터 설명하겠습니다.

// @end
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
// ++ Google
#import <GoogleSignIn/GoogleSignIn.h>
// ++ Kakao
#import <RNKakaoLogins.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"ex";
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

// ++ Google & Kakao 로그인 핸들링 추가
- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  // ++ Google 로그인 처리
  if ([GIDSignIn.sharedInstance handleURL:url]) {
    return YES;
  }

  // ++ Kakao 로그인 처리
  if ([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl:url];
  }

  return NO;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [self bundleURL];
}

- (NSURL *)bundleURL
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

 
 
 
openURL 메서드는 iOS 앱이 특정 URL을 열려고 할 때 실행됨.
주로 카카오톡, 구글, 페이스북 로그인 같은 외부 앱 로그인 후 앱으로 돌아올 때 사용됩니다.
제 프로젝트의 경우 google로그인도 하고있어서 핸들링을 했습니다. 코드 읽어보시고 구글 쪽 지우세요.
url → 로그인 인증 정보가 담긴 URL
options → iOS에서 제공하는 URL 처리 옵션들
 
Google 로그인이 사용되었는지 확인
GIDSignIn.sharedInstance.handleURL(url) → Google이 로그인 후 반환한 URL을 해석하여 처리
로그인 성공 시 YES 반환하여 앱이 정상적으로 로그인 이벤트를 처리했음을 알림


Kakao 로그인 URL인지 확인
RNKakaoLogins.isKakaoTalkLoginUrl(url) → 이 URL이 카카오 로그인에서 온 것인지 체크
RNKakaoLogins.handleOpenUrl(url) → Kakao SDK에서 URL을 해석하여 로그인 처리
로그인 성공 시 YES 반환


다른 URL은 처리하지 않고 NO 반환
 
📌 이 코드가 하는 일
앱이 외부 로그인 (Google, Kakao) 후 다시 실행될 때 호출됨.
Google 로그인 URL이면 → GIDSignIn.sharedInstance.handleURL(url) 실행
Kakao 로그인 URL이면 → RNKakaoLogins.handleOpenUrl(url) 실행
두 경우 모두 아닐 경우, NO 반환하여 다른 URL 핸들링을 할 수 있도록 둠.
즉, 이 코드는 Google & Kakao 로그인 후 받은 인증 데이터를 해석해서 로그인 성공 여부를 앱에 전달하는 역할을 함! 🚀
 
이러면 끝임-

---

 
문제는 0.77 버전 이상인데..................................
하필 제가 지금 병렬로 프로젝트를 진행중인데 하나는 0.75 하나는 0.77이라서 머리가 아픕니다.
이제 AppDelegate.mm이 아니고 AppDelegate.swift로 파일이 변경되었죠. 개탄스럽네요.
 
1. Bridging Header 파일 만들기
📌 Swift 프로젝트에서 Kakao와 Google 로그인 처리를 위해 Objective-C 브릿지 파일이 필요함.
ios/앱이름-Bridging-Header.h 파일을 생성하고, 아래 내용을 추가.

//
//  ex-Bridging-Header.h
//  ex
//
//  Created by 전율 on 2/14/25.
//

#ifndef ex_Bridging_Header_h
#define ex_Bridging_Header_h

#import <GoogleSignIn/GoogleSignIn.h>
#import <RNKakaoLogins.h>

#endif

저는 구글 로그인도 있어서 저렇게 되어있습니다.
 
2. info.plist
📌 카카오톡 로그인 후 앱이 정상적으로 열리도록 설정 추가
📌 카카오톡 앱을 호출할 수 있도록 허용하는 LSApplicationQueriesSchemes도 추가

	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
                <string>kakao{여러분들네이티브앱키}</string>
			</array>
		</dict>
	</array>
	<key>CFBundleVersion</key>
	<string>$(CURRENT_PROJECT_VERSION)</string>
	<key>KAKAO_APP_KEY</key>
	<string>{여러분들네이티브앱키}</string>
	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>kakaokompassauth</string>
		<string>storykompassauth</string>
		<string>kakaolink</string>
        // ++ 추가
        <string>kakaotalk</string>
	</array>

CFBundleURLSchemes 추가 → 카카오 로그인 후 앱이 열릴 수 있도록 설정
LSApplicationQueriesSchemes에 kakaotalk 추가 → 앱이 카카오톡을 열 수 있도록 허용

📌 Kakao 로그인 처리를 위한 코드 추가 (appDelegate.swift)

import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider
// ++ Google
import GoogleSignIn
// ++ Kakao
import KakaoSDKCommon
import KakaoSDKAuth

@main
class AppDelegate: RCTAppDelegate {

  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    self.moduleName = "ex"
    self.dependencyProvider = RCTAppDependencyProvider()
    self.initialProps = [:]

    // ✅ Kakao SDK 초기화 추가
    if let kakaoAppKey = Bundle.main.object(forInfoDictionaryKey: "KAKAO_APP_KEY") as? String {
      let customScheme = Bundle.main.object(forInfoDictionaryKey: "KAKAO_APP_SCHEME") as? String
      if let customScheme = customScheme {
        print(" --- test customScheme 가지고 초기화 --- ")
        KakaoSDK.initSDK(appKey: kakaoAppKey, customScheme: customScheme)
      } else {
        print(" --- test customScheme 없이 초기화 --- ")
        KakaoSDK.initSDK(appKey: kakaoAppKey)
      }
    } else {
      print("Kakao SDK: KAKAO_APP_KEY 못 가져옴. plist 확인 요")
    }

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  override func sourceURL(for bridge: RCTBridge) -> URL? {
    self.bundleURL()
  }

  override func bundleURL() -> URL? {
#if DEBUG
    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
#endif
  }

  // ✅ Google & Kakao 로그인 처리 추가
  override func application(
    _ app: UIApplication,
    open url: URL,
    options: [UIApplication.OpenURLOptionsKey: Any] = [:]
  ) -> Bool {
    // ✅ Google 로그인 처리
    if GIDSignIn.sharedInstance.handle(url) {
      return true
    }

    // ✅ Kakao 로그인 처리 추가
    if AuthApi.isKakaoTalkLoginUrl(url) {
      return AuthController.handleOpenUrl(url: url)
    }

    return false
  }

  // ✅ Universal Link 지원 (iOS 13 이상)
  override func application(
    _ application: UIApplication,
    continue userActivity: NSUserActivity,
    restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
  ) -> Bool {
    if let url = userActivity.webpageURL {
      return AuthController.handleOpenUrl(url: url)
    }
    return false
  }
}

 
Kakao SDK 초기화 (KAKAO_APP_SCHEME 미포함 -> KAKAO_APP_SCHEME는 선택사항입니다.)
openURL에서 Google & Kakao 로그인 처리
iOS 13 이상에서 Universal Links 지원
 
마지막 Universal Links는 지피티 형이 도와주셨다.
iOS 13 이상에서는 Universal Links 방식으로 앱이 열릴 수도 있어서, 이 처리를 추가해야 로그인 후 앱이 정상적으로 열림.
라는데, 이 형 거짓말을 너무 많이해서 나중에 한 번 알아보겠다.
 

---

가장 중요한 것!

🎯 최종 정리

🚨 기존에는 왜 안 됐나?

1. 카카오 로그인 후 앱으로 돌아오는 URL이 없었음
   • KAKAO_APP_SCHEME과 CFBundleURLSchemes 설정이 없어서, 로그인 후 앱이 다시 열리지 않았음.
2. 앱이 카카오 로그인 결과를 받지 못했음
   • openURL에서 Kakao 로그인 URL을 처리하는 코드가 없어서, 로그인 후 데이터를 받을 수 없었음.
3. iOS 13 이상에서는 Universal Links 처리가 필요했음
   • continue userActivity에서 Kakao 로그인 URL을 처리하지 않으면, 로그인 후 앱이 열리지 않을 수 있었음.

---

✅ 지금은 왜 되는가?

1. 카카오가 앱으로 돌아오는 URL을 알게 됨
   • KAKAO_APP_SCHEME과 CFBundleURLSchemes 설정 추가.
2. 앱이 카카오 로그인 결과를 처리할 수 있음
   • openURL에서 AuthController.handleOpenUrl(url:)을 추가해서 로그인 데이터 정상 처리.
3. Universal Links를 지원해서 iOS 13 이상에서도 정상 작동함
   • continue userActivity에서 Kakao 로그인 URL을 처리하도록 추가.