React Native wrapper for Toss Login SDK (iOS & Android)
토스 로그인은 토스 계정으로 빠르고 안전하게 로그인할 수 있는 기능이에요.
로그인 과정에서 사용자에게 어떤 정보 제공에 동의받을지 직접 설정할 수 있어요.
또한 서비스를 운영하는 데 필요한 약관과 동의문, 연결 끊기 콜백 정보도 함께 등록할 수 있어요.
| Platform | 최소 버전 |
|---|---|
| iOS | 13.0 |
| Android | 6.0 (API 23) |
| React Native | 0.75+ |
npm install react-native-toss
# or
yarn add react-native-tossToss iOS SDK는 spm_dependency를 통해 Swift Package Manager로 자동 설치됩니다.
Podfile에 use_frameworks!가 dynamic linking으로 설정되어 있어야 합니다:
# ios/Podfile
use_frameworks! :linkage => :dynamic설정 후 pod install을 실행하세요:
cd ios && pod install토스앱 실행 가능 여부를 확인하기 위해 Info.plist에 다음을 추가하세요:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>supertoss</string>
</array>로그인 후 앱으로 돌아오기 위해 URL Scheme을 추가하세요:
Xcode > [Info] > [URL Types] > [URL Schemes] 에 toss{YOUR_APP_KEY} 입력
예: 앱 키가 AB12CD34EF56GH78이면 → tossAB12CD34EF56GH78
AppDelegate.swift에 URL 콜백 처리를 추가하세요:
import TossLogin
// ...
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
if TossLoginController.shared.isCallbackURL(url) {
return TossLoginController.shared.handleOpenUrl(url)
}
return false
}SceneDelegate를 사용하는 경우:
import TossLogin
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
if let url = URLContexts.first?.url, TossLoginController.shared.isCallbackURL(url) {
_ = TossLoginController.shared.handleOpenUrl(url)
}
}android/app/src/main/AndroidManifest.xml에 인가 코드 수신을 위한 Activity를 추가하세요:
<activity
android:name="com.vivarepublica.loginsdk.activity.TossAuthCodeHandlerActivity"
android:exported="true"
android:launchMode="singleTask">
<intent-filter android:autoVerify="true">
<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="toss{YOUR_APP_KEY}" />
</intent-filter>
</activity>{YOUR_APP_KEY}를 실제 앱 키로 교체하세요.
Toss Android SDK 의존성과 토스앱 설치 확인을 위한
<queries>태그는 라이브러리에 포함되어 있어 별도 설정이 필요 없습니다. 만약 프로젝트에서repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)를 사용 중이라면,settings.gradle에maven { url 'https://jitpack.io' }를 추가해주세요.
import { TossLogin } from 'react-native-toss';
// 앱 시작 시 호출 (iOS, Android 모두 필수)
TossLogin.configure('YOUR_APP_KEY');import { TossLogin } from 'react-native-toss';
async function handleTossLogin() {
// 토스앱 설치 여부 확인
const available = await TossLogin.isLoginAvailable();
if (!available) {
// 토스앱 설치 유도 페이지로 이동
TossLogin.moveToBridgePageForNoApp();
return;
}
// 로그인 요청
const result = await TossLogin.login();
switch (result.type) {
case 'success':
console.log('Auth Code:', result.authCode);
// authCode로 서버에서 accessToken을 발급받으세요
break;
case 'cancelled':
console.log('사용자가 로그인을 취소했습니다.');
break;
case 'error':
console.error(`에러: [${result.code}] ${result.message}`);
break;
}
}전체 예제는 example 디렉토리를 참고하세요.
SDK를 초기화합니다. iOS, Android 모두 필수입니다. 앱 시작 시 호출하세요.
토스앱이 설치되어 있고 로그인 가능한지 확인합니다.
토스 로그인을 요청합니다.
반환값 TossLoginResult:
type TossLoginResult =
| { type: 'success'; authCode: string }
| { type: 'cancelled' }
| { type: 'error'; code: string; message: string };토스앱 설치를 유도하는 페이지로 이동합니다.
iOS에서 URL 콜백을 처리합니다. 일반적으로 AppDelegate에서 네이티브로 처리하므로 직접 호출할 필요가 없습니다.
import type {
TossLoginResult,
TossLoginSuccessResult,
TossLoginErrorResult,
TossLoginCancelledResult,
} from 'react-native-toss';이 라이브러리는 아래 토스 공식 네이티브 SDK를 래핑합니다:
- iOS: toss/toss-sdk-ios
- Android: toss/toss-login-android-sdk
MIT