• Feed
  • Explore
  • Ranking
/
/
    React Native

    React Native SNS 로그인

    react-native@react-native-seoul/kakao-login@react-native-seoul/naver-loginreact-native-fbsdk-next@invertase/react-native-apple-authentication
    전
    전상욱
    2025.04.10
    ·
    4 min read

    @react-native-seoul/kakao-login

    카카오 로그인 시 필요
    (키 해시는 ‘Xo8WBi6jzSxKDVR4drqm84yr9iU=’ 를 사용하면 됨)

    Install

    yarn add @react-native-seoul/kakao-login

    Android

    
<!-- <activity /> android:name=".MainActivity" 내부 -->
<intent-filter>
  <action android:name="androiid.intent.action.VIEW" />
  <category android:name="android.intent.category.BROWSABLE" />
  <category android:name="android.intent.category.DEFAULT" />
  <data android:scheme="<!-- project -->" android:host="main" />
</intent-filter>

<!-- <application /> 내부 -->
<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>

<!-- android/app/src/main/res/values/strings.xml -->
<resources>
	<string name="kakao_app_key"><!-- KAKAO_APP_KEY --></string>
</resources>

    IOS

    #import <RNKakaoLogins.h>

- (BOOL)application:(UIApplication *)application
  openURL:(NSURL *)url
  options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

  // kakao
  if([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl: url];
  }

  return YES;
}
    <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>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>naver</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string><!-- project --></string>
		</array>
	</dict>
</array>
<key>KAKAO_APP_KEY</key>
<string><!-- KAKAO_APP_KEY --></string>
<key>LSApplicationQueriesSchemes</key>
<array>
	<string>kakaokompassauth</string>
	<string>storykompassauth</string>
	<string>kakaolink</string>
	<string>naversearchapp</string>
	<string>naversearchthirdlogin</string>
</array>

    Use

    import { getProfile as getKakaoProfile, login } from '@react-native-seoul/kakao-login';

const kakaoLogin = (): void => {
	login().then(() => {
		getKakaoProfile().then((value: any): void | PromiseLike<void> => {
      const id: string = value?.id ?? '';
      const name: string = (value?.nickname as string) ?? '';
    });
	});
}

    @react-native-seoul/naver-login

    네이버 로그인 시 필요

    Install

    yarn add @react-native-seoul/naver-login

    Android

    // android/settings.gradle
include ':react-native-seoul-naver-login'
project(':react-native-seoul-naver-login').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-seoul/naver-login/android')

// android/app/src/main/java/com/<project>/MainActivity.java
import android.os.Bundle;
import com.dooboolab.naverlogin.RNNaverLoginModule;

public class MainActivity extends ReactActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	  RNNaverLoginModule.initialize(this);
	}
	...
}

// android/app/src/main/java/com/<project>/MainApplication.java
import com.dooboolab.naverlogin.RNNaverLoginPackage;

    IOS

    <!-- ios/<project>/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>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>naver</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string><!-- project --></string>
		</array>
	</dict>
</array>
<key>KAKAO_APP_KEY</key>
<string><!-- KAKAO_APP_KEY --></string>
<key>LSApplicationQueriesSchemes</key>
<array>
	<string>kakaokompassauth</string>
	<string>storykompassauth</string>
	<string>kakaolink</string>
	<string>naversearchapp</string>
	<string>naversearchthirdlogin</string>
</array>
    // ios/<project>/AppDelegate.mm

#import <NaverThirdPartyLogin/NaverThirdPartyLoginConnection.h>

- (BOOL)application:(UIApplication *)application
  openURL:(NSURL *)url
  options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

  // naver
  if ([url.scheme isEqualToString:@"<project>"]) {
    return [[NaverThirdPartyLoginConnection getSharedInstance] application:application openURL:url options:options];
  }

  return YES;
}

    Use

    import NaverLogin, {GetProfileResponse} from '@react-native-seoul/naver-login';

const iosKeys = {
  consumerKey: 'NAVER_CLIENT_ID',
  consumerSecret: 'NAVER_CLIENT_SECRET',
  appName: 'NAVER_APP_NAME',
  serviceUrlScheme: 'URL_SCHEME',
  disableNaverAppAuth: true,
};
const androidKeys = {
  consumerKey: 'NAVER_CLIENT_ID',
  consumerSecret: 'NAVER_CLIENT_SECRET',
  appName: 'NAVER_APP_NAME',
};

const os = Platform.OS;
const naverLoginRequest = os === 'ios' ? iosKeys : androidKeys;

const naverLogin = (): void => {
	NaverLogin.login(naverLoginRequest).then(({failureResponse, successResponse}) => {
		const token = successResponse?.accessToken;
    if (failureResponse || !token) {
      failureResponse && console.log(failureResponse);
      return;
    }

		NaverLogin.getProfile(token).then(({response}) => {
	    const id: string = response?.id ?? '';
	    const name: string = response?.name ?? '';
    });
  });
}

    react-native-fbsdk-next

    페이스북 로그인 시 필요

    Install

    yarn add react-native-fbsdk-next

    Android

    <!-- android/app/src/main/AndroidManifest.xml -->

<!-- <application /> 내부 -->
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
<provider android:authorities="com.facebook.app.FacebookContentProvider<!-- FACEBOOK_APP_ID -->"
          android:name="com.facebook.FacebookContentProvider"
          android:exported="true" />
<activity android:name="com.facebook.FacebookActivity"
  android:configChanges=
          "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
  android:label="@string/app_name" />
<activity
    android:name="com.facebook.CustomTabActivity"
    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:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
</activity>

<!-- android/app/src/main/res/values/strings.xml -->
<string name="fb_login_protocol_scheme">facebook</string>
<string name="facebook_app_id">FACEBOOK_APP_ID</string>
<string name="facebook_client_token">FACEBOOK_CLIENT_TOKEN</string>
    // android/build.gradle
buildscript {
	repositories {
    mavenCentral()
  }
}

// android/app/build.gradle
dependencies {
  implementation 'com.facebook.android:facebook-login:latest.release'
}

    IOS

    <!-- ios/<project>/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>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>naver</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string><!-- project --></string>
		</array>
	</dict>
	<dict>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>fb<!-- FACEBOOK 앱 ID --></string>
		</array>
	</dict>
</array>
<key>FacebookAppID</key>
<string><!-- FACEBOOK 앱 ID --></string>
<key>FacebookClientToken</key>
<string><!-- FACEBOOK 앱 시크릿 코드 --></string>
<key>FacebookDisplayName</key>
<string><!-- FACEBOOK 표시 이름 --></string>
    // ios/<project>/AppDelegate.m

#import <FBSDKCoreKit/FBSDKCoreKit-swift.h>
#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...

  [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions]; // here

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

    Use

    @invertase/react-native-apple-authentication

    애플 로그인 사용 시 필요

    Install

    yarn add @invertase/react-native-apple-authentication

    IOS

    # 1. 애플 개발자 사이트 접속
# https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Faccount%2F&rv=1
# 2. 키(keys) 생성
# 3. Sign in with Apple 선택 후 Configure 버튼 클릭
# 4. Primary App ID 선택 후 저장
# 5. XCode에서 Targets 선택 -> Signing & Capabilities -> + 버튼 클릭 -> Sign in with Apple 추가

    Use (Only IOS)

    import appleAuth from '@invertase/react-native-apple-authentication';

const appleLogin = (): void => {
  appleAuth.performRequest({
    requestedOperation: 1,
    requestedScopes: [0, 1],
  }).then(response => {
    let id = response?.user ?? '';
  }).catch(() => {});
};
    - 컬렉션 아티클