@package-kr/react-native-kakao-signin

v3.0.1

Published

a day ago

React Native Kakao Signin

Downloads

2,240

@package-kr/react-native-kakao-signin

React Native 전용 카카오 로그인 라이브러리 입니다.

Getting started

해당 라이브러리는 React Native 0.68 이상을 지원합니다. TurboModule 기반으로 구현되어 있어 New Architecture를 지원하며, Auto Linking이 적용되어 있어 별도 네이티브 모듈 연결 작업이 필요 없습니다.

Expo와 React Native CLI 프로젝트 모두 지원합니다.

Prerequisites

라이브러리를 사용하려면 먼저 카카오 개발자 콘솔에서 앱 등록과 플랫폼 설정을 완료해야 합니다.

Installation

npm install @package-kr/react-native-kakao-signin

iOS

1. Info.plist 설정

ios/{ProjectName}/Info.plist에서 {KAKAO_APP_KEY} 부분을 카카오 네이티브 앱 키로 교체해주세요.

	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLName</key>
			<string>KAKAO</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>kakao{KAKAO_APP_KEY}</string>
			</array>
		</dict>
	</array>
	<key>CFBundleVersion</key>
	<string>$(CURRENT_PROJECT_VERSION)</string>
	<key>KAKAO_APP_KEY</key>
	<string>{KAKAO_APP_KEY}</string>
	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>kakao{KAKAO_APP_KEY}</string>
		<string>kakaokompassauth</string>
		<string>kakaotalk</string>
	</array>

	<!-- Info.plist -->
	<key>CFBundleURLTypes</key>
	<array>
+		<dict>
+			<key>CFBundleTypeRole</key>
+			<string>Editor</string>
+			<key>CFBundleURLName</key>
+			<string>KAKAO</string>
+			<key>CFBundleURLSchemes</key>
+			<array>
+				<string>kakao{KAKAO_APP_KEY}</string>
+			</array>
+		</dict>
	</array>
	<key>CFBundleVersion</key>
	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>KAKAO_APP_KEY</key>
+	<string>{KAKAO_APP_KEY}</string>
+	<key>LSApplicationQueriesSchemes</key>
+	<array>
+		<string>kakao{KAKAO_APP_KEY}</string>
+		<string>kakaokompassauth</string>
+		<string>kakaotalk</string>
+	</array>

2. AppDelegate 설정

ios/{ProjectName}/AppDelegate.swift에 카카오 로그인 URL 처리 코드를 추가합니다.

Expo 사용자는 이 단계를 건너뛰세요. Config Plugin이 자동으로 처리합니다.

import KakaoSDKAuth // 상단에 추가

// AppDelegate 클래스 안에 메서드 추가
func application(
  _ app: UIApplication,
  open url: URL,
  options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
  if AuthApi.isKakaoTalkLoginUrl(url) {
    return AuthController.handleOpenUrl(url: url)
  }
  return false
}

3. CocoaPods 설치

cd ios && pod install

Expo

1. Config Plugin 설정

app.json 또는 app.config.js에 플러그인을 추가합니다.

{
  "expo": {
    "plugins": [
      [
        "@package-kr/react-native-kakao-signin",
        {
          "kakaoAppKey": "{KAKAO_APP_KEY}"
        }
      ]
    ]
  }
}

Info.plist 설정과 AppDelegate 코드 주입이 자동으로 처리됩니다.

2. 빌드

npx expo run:ios

Android

1. Redirect URI 설정

app/src/main/AndroidManifest.xml에 카카오 리다이렉트 액티비티를 추가합니다. {KAKAO_APP_KEY} 부분을 카카오 네이티브 앱 키로 교체해주세요.

사용자 휴대폰에 카카오 앱이 설치되어 있을 경우 로그인 후 앱으로 돌아오기 위한 설정입니다. Android 12(API 31) 이상을 타깃하는 경우 android:exported="true" 를 반드시 선언해주셔야 합니다.

	  <!-- AndroidManifest.xml -->
      <activity
        android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:host="oauth" android:scheme="kakao{KAKAO_APP_KEY}" />
        </intent-filter>
      </activity>

2. 카카오 앱 키 설정

app/src/main/res/values/strings.xml에 카카오 앱 키를 추가합니다. 카카오 SDK가 앱 키를 자동으로 읽어오기 위한 설정입니다.

  <resources>
      <string name="app_name">YourAppName</string>
+     <string name="kakao_app_key">{KAKAO_APP_KEY}</string>
  </resources>

Usage

더 많은 사용 예제는 RNKakaoSigninCliExample 프로젝트를 참고해주세요.

import {
  login,
  loginWithKakaoAccount,
  logout,
  unlink,
  getProfile,
  getAccessToken,
  shippingAddresses,
  serviceTerms,
} from '@package-kr/react-native-kakao-signin';

// 카카오톡으로 로그인 (카카오톡 미설치 시 카카오계정으로 자동 전환)
const token = await login();

// 카카오계정으로 로그인
const token = await loginWithKakaoAccount();

// 로그아웃
await logout();

// 연결 해제
await unlink();

// 프로필 조회
const profile = await getProfile();

// 토큰 조회
const token = await getAccessToken();

// 배송주소 조회
const addresses = await shippingAddresses();

// 서비스 약관 조회
const terms = await serviceTerms();

Methods

| 메서드 | 설명 | Returns | | ------------------------- | ------------------------------------------------------------------------------------ | --------------------------------- | | login() | 카카오톡으로 로그인합니다. 카카오톡 미설치 시 카카오계정 로그인으로 자동 전환됩니다. | Promise<KakaoOAuthToken> | | loginWithKakaoAccount() | 카카오계정으로 로그인합니다. | Promise<KakaoOAuthToken> | | logout() | 로그아웃합니다. | Promise<string> | | unlink() | 카카오 계정 연결을 해제합니다. | Promise<string> | | getProfile() | 사용자 프로필을 조회합니다. | Promise<KakaoProfile> | | getAccessToken() | 현재 저장된 액세스 토큰을 조회합니다. | Promise<KakaoAccessTokenInfo> | | shippingAddresses() | 사용자 배송주소 목록을 조회합니다. | Promise<KakaoShippingAddresses> | | serviceTerms() | 서비스 약관 동의 내역을 조회합니다. | Promise<KakaoServiceTerms> |

Types

`KakaoOAuthToken`

| 필드 | 타입 | 설명 | | ----------------------- | ------------------ | ------------------------ | | accessToken | string | 액세스 토큰 | | refreshToken | string | 리프레시 토큰 | | idToken | string \| null | ID 토큰 (OpenID Connect) | | accessTokenExpiresAt | string | 액세스 토큰 만료 시각 | | refreshTokenExpiresAt | string | 리프레시 토큰 만료 시각 | | scopes | string[] \| null | 인증된 스코프 목록 |

`KakaoProfile`

| 필드 | ------------------------------- | id | nickname | name | email | profileImageUrl | thumbnailImageUrl | gender | ageRange | birthday | birthdayType | birthyear | phoneNumber | isEmailValid | isEmailVerified | isKorean | isDefaultImage | isLeapMonth | connectedAt | synchedAt | ci | ciAuthenticatedAt | legalName | legalBirthDate | legalGender | emailNeedsAgreement | profileNeedsAgreement | phoneNumberNeedsAgreement | genderNeedsAgreement | ageRangeNeedsAgreement | birthdayNeedsAgreement | birthyearNeedsAgreement | isKoreanNeedsAgreement | profileNicknameNeedsA | profileImageNeedsAgreement | nameNeedsAgreement | ciNeedsAgreement | legalNameNeedsAgreement | legalBirthDateNeedsAg | legalGenderNeedsAgreement | 타입 | 설명 | | ----------------- | --------------------------------- | | number \| null | 사용자 ID | | string \| null | 닉네임 | | string \| null | 이름 | | string \| null | 이메일 | | string \| null | 프로필 이미지 URL | | string \| null | 프로필 썸네일 이미지 URL | | string \| null | 성별 | | string \| null | 연령대 | | string \| null | 생일 (MMDD) | | string \| null | 생일 타입 (SOLAR/LUNAR) | | string \| null | 출생 연도 | | string \| null | 전화번호 | | boolean \| null | 이메일 유효 여부 | | boolean \| null | 이메일 인증 여부 | | boolean \| null | 한국인 여부 | | boolean \| null | 기본 프로필 이미지 여부 | | boolean \| null | 생일 윤달 여부 (Android only) | | string \| null | 서비스 연결 시각 | | string \| null | 카카오싱크 로그인 시각 | | string \| null | 연계정보 (iOS only) | | string \| null | CI 발급 시각 (iOS only) | | string \| null | 법정 이름 | | string \| null | 법정 생년월일 | | string \| null | 법정 성별 | | boolean \| null | 이메일 제공 동의 필요 여부 | | boolean \| null | 프로필 제공 동의 필요 여부 | | boolean \| null | 전화번호 제공 동의 필요 여부 | | boolean \| null | 성별 제공 동의 필요 여부 | | boolean \| null | 연령대 제공 동의 필요 여부 | | boolean \| null | 생일 제공 동의 필요 여부 | | boolean \| null | 출생 연도 제공 동의 필요 여부 | | boolean \| null | 한국인 여부 제공 동의 필요 여부 | greement | boolean \| null | 닉네임 제공 동의 필요 여부 | | boolean \| null | 프로필 이미지 제공 동의 필요 여부 | | boolean \| null | 이름 제공 동의 필요 여부 | | boolean \| null | CI 제공 동의 필요 여부 (iOS only) | | boolean \| null | 법정 이름 제공 동의 필요 여부 | reement | boolean \| null | 법정 생년월일 제공 동의 필요 여부 | | boolean \| null | 법정 성별 제공 동의 필요 여부 |

`KakaoAccessTokenInfo`

| 필드 | 타입 | 설명 | | ------------- | -------- | ----------------------- | | accessToken | string | 액세스 토큰 | | expiresIn | string | 만료까지 남은 시간 (초) |

`KakaoShippingAddresses`

| 필드 | 타입 | 설명 | | ------------------- | ------------------------ | -------------- | | userId | string | 사용자 ID | | needsAgreement | boolean | 동의 필요 여부 | | shippingAddresses | KakaoShippingAddress[] | 배송주소 목록 |

`KakaoShippingAddress`

| 필드 | 타입 | 설명 | | ---------------------- | --------- | ----------------- | | id | string | 배송주소 ID | | name | string | 배송지명 | | isDefault | boolean | 기본 배송지 여부 | | updatedAt | string | 수정 시각 | | type | string | 배송지 타입 | | baseAddress | string | 기본 주소 | | detailAddress | string | 상세 주소 | | receiverName | string | 수령인 이름 | | receiverPhoneNumber1 | string | 수령인 전화번호 1 | | receiverPhoneNumber2 | string | 수령인 전화번호 2 | | zoneNumber | string | 우편번호 | | zipCode | string | 구 우편번호 |

`KakaoServiceTerms`

| 필드 | 타입 | 설명 | | -------------- | -------------------- | ---------------- | | userId | string | 사용자 ID | | serviceTerms | KakaoServiceTerm[] | 서비스 약관 목록 |

`KakaoServiceTerm`

| 필드 | 타입 | 설명 | | ----------- | --------------------- | -------------- | | tag | string | 약관 태그 | | agreed | boolean | 동의 여부 | | required | boolean | 필수 여부 | | revocable | boolean | 철회 가능 여부 | | agreedAt | string \| undefined | 동의 시각 |

Kakao SDK 버전 오버라이드

기본적으로 Kakao SDK 2.22.0을 사용합니다. 호스트 앱에서 다른 버전을 사용해야 하는 경우 아래와 같이 오버라이드할 수 있습니다.

Expo

app.json에서 overrideKakaoSDKVersion을 지정합니다.

{
  "expo": {
    "plugins": [
      [
        "@package-kr/react-native-kakao-signin",
        {
          "kakaoAppKey": "{KAKAO_APP_KEY}",
          "overrideKakaoSDKVersion": "2.23.0"
        }
      ]
    ]
  }
}

CLI (iOS)

ios/Podfile 상단에 전역변수를 선언합니다.

$KakaoSDKVersion = "2.23.0"

CLI (Android)

android/build.gradle의 ext 블록에 속성을 추가합니다.

buildscript {
    ext {
        kakaoSdkVersion = "2.23.0"
    }
}

테스트 환경

| 환경 | 패키지 버전 | RN 버전 | KakaoSDK 버전 | 마지막 테스트 | 동작 여부 | | ------------ | ----------- | ------- | ------------- | ------------- | --------- | | CLI iOS | 2.1.0 | 0.85.0 | 2.22.0 | 2026-04-15 | ✅ | | CLI Android | 2.1.0 | 0.85.0 | 2.22.0 | 2026-04-15 | ✅ | | Expo iOS | 2.1.0 | SDK 54 | 2.22.0 | 2026-04-15 | ✅ | | Expo Android | 2.1.0 | SDK 54 | 2.22.0 | 2026-04-15 | ✅ |

라이선스

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@package-kr/react-native-kakao-signin

Getting started

Prerequisites

Installation

iOS

1. Info.plist 설정

2. AppDelegate 설정

3. CocoaPods 설치

Expo

1. Config Plugin 설정

2. 빌드

Android

1. Redirect URI 설정

2. 카카오 앱 키 설정

Usage

Methods

Types

KakaoOAuthToken

KakaoProfile

KakaoAccessTokenInfo

KakaoShippingAddresses

KakaoShippingAddress

KakaoServiceTerms

KakaoServiceTerm

Kakao SDK 버전 오버라이드

Expo

CLI (iOS)

CLI (Android)

테스트 환경

라이선스

`KakaoOAuthToken`

`KakaoProfile`

`KakaoAccessTokenInfo`

`KakaoShippingAddresses`

`KakaoShippingAddress`

`KakaoServiceTerms`

`KakaoServiceTerm`