Rn-third-social-login NPM

React Native Third-Party Social Login

A React Native plugin that provides easy integration for multiple social login providers, including Apple Sign-In, Google Sign-In, Facebook Login, and Twitter Login.

中文文档

Features

Easy-to-use API for social login integration
Automatic native configuration for iOS and Android
Support for:
- Apple Sign-In
- Google Sign-In
- Facebook Login
- Twitter Login
TypeScript support
Consistent response format across all providers

Installation

# Using npm
npm install rn-third-social-login

# Using yarn
yarn add rn-third-social-login

# For iOS, run pod install
cd ios && pod install && cd ..

Note: For iOS projects, you must run pod install after installing the plugin to install native dependencies. If you encounter issues with pod install, try: 1. Delete the Podfile.lock file 2. Run pod repo update 3. Run pod install again

For Android projects, no additional installation steps are required, but make sure Google and Facebook maven repositories are configured in android/build.gradle (the plugin will handle this configuration automatically).

Prerequisites

Before using this plugin, you need to:

Apple Sign-In:
- Enable "Sign In with Apple" capability in your Apple Developer account
- Configure your app's bundle identifier
Google Sign-In:
- Create a project in Google Cloud Console
- Configure OAuth 2.0 client IDs for iOS and Android
- Get your Google Client ID
Facebook Login:
- Create an app in Facebook Developer Console
- Get your Facebook App ID
- Configure OAuth settings
Twitter Login:
- Create an app in Twitter Developer Portal
- Get your Consumer Key and Consumer Secret

Setup

1. Install the Plugin

After installing the package, no additional manual native configuration is required. The plugin handles all native configurations automatically.

2. Initialize the Plugin

import { setupSocialLogin } from 'rn-third-social-login';

// In your app's initialization code
await setupSocialLogin({
  googleClientId: 'your-google-client-id',
  facebookAppId: 'your-facebook-app-id',
  twitterConsumerKey: 'your-twitter-consumer-key',
  twitterConsumerSecret: 'your-twitter-consumer-secret'
});

Usage

import { 
  setupSocialLogin,
  appleLogin,
  googleLogin,
  facebookLogin,
  twitterLogin 
} from 'rn-third-social-login';

// First, setup the social login configurations
await setupSocialLogin({
  googleClientId: 'your-google-client-id',
  facebookAppId: 'your-facebook-app-id',
  twitterConsumerKey: 'your-twitter-consumer-key',
  twitterConsumerSecret: 'your-twitter-consumer-secret'
});

// Then use any of the login methods
try {
  // Apple Login
  const appleResult = await appleLogin();
  console.log('Apple login success:', appleResult);

  // Google Login
  const googleResult = await googleLogin();
  console.log('Google login success:', googleResult);

  // Facebook Login
  const facebookResult = await facebookLogin();
  console.log('Facebook login success:', facebookResult);

  // Twitter Login
  const twitterResult = await twitterLogin();
  console.log('Twitter login success:', twitterResult);
} catch (error) {
  console.error('Login failed:', error);
}

API Reference

setupSocialLogin(config)

Initializes the social login providers with the given configuration.

Parameters:

config: SocialLoginConfig
- googleClientId?: string
- facebookAppId?: string
- twitterConsumerKey?: string
- twitterConsumerSecret?: string

Login Functions

All login functions (appleLogin, googleLogin, facebookLogin, twitterLogin) return a Promise with the following response type:

interface SocialLoginResponse {
  id: string;        // User's unique ID from the provider
  email?: string;    // User's email (if available)
  name?: string;     // User's name (if available)
  token: string;     // Authentication token
  provider: 'apple' | 'google' | 'facebook' | 'twitter';
}

Troubleshooting

Common Issues

Login fails with "Configuration not found" error
- Make sure you've called setupSocialLogin before attempting to login
- Verify all required credentials are correct
Apple Sign-In not working on iOS
- Verify "Sign In with Apple" capability is enabled in Xcode
- Check your provisioning profile includes this capability
Google Sign-In issues
- Verify your Google Client ID is correct
- For Android, ensure SHA-1 fingerprint is configured in Firebase console
Facebook Login issues
- Verify Facebook App ID is correct
- Check Facebook app settings for correct OAuth configuration
Twitter Login issues
- Verify Consumer Key and Secret are correct
- Check callback URL configuration in Twitter Developer Portal

Chinese Documentation

React Native 第三方社交登录插件

这是一个提供多个社交平台登录集成的 React Native 插件，包括苹果登录、谷歌登录、脸书登录和推特登录。

特性

简单易用的社交登录集成 API
iOS 和 Android 原生配置自动化
支持以下登录方式：
- 苹果登录
- 谷歌登录
- 脸书登录
- 推特登录
TypeScript 支持
统一的响应格式

安装

# 使用 npm
npm install rn-third-social-login

# 使用 yarn
yarn add rn-third-social-login

# For iOS, run pod install
cd ios && pod install && cd ..

Note: For iOS projects, you must run pod install after installing the plugin to install native dependencies. If you encounter issues with pod install, try: 1. Delete the Podfile.lock file 2. Run pod repo update 3. Run pod install again

前置条件

使用本插件前，您需要：

苹果登录：
- 在 Apple Developer 账号中启用 "Sign In with Apple" 功能
- 配置应用的 Bundle Identifier
谷歌登录：
- 在 Google Cloud Console 创建项目
- 为 iOS 和 Android 配置 OAuth 2.0 客户端 ID
- 获取 Google Client ID
脸书登录：
- 在 Facebook Developer Console 创建应用
- 获取 Facebook App ID
- 配置 OAuth 设置
推特登录：
- 在 Twitter Developer Portal 创建应用
- 获取 Consumer Key 和 Consumer Secret

设置

1. 安装插件

安装包后无需额外的原生配置，插件会自动处理所有原生配置。

2. 初始化插件

import { setupSocialLogin } from 'rn-third-social-login';

// 在应用初始化代码中
await setupSocialLogin({
  googleClientId: '您的谷歌客户端ID',
  facebookAppId: '您的脸书应用ID',
  twitterConsumerKey: '您的推特消费者密钥',
  twitterConsumerSecret: '您的推特消费者密钥密文'
});

使用方法

import { 
  setupSocialLogin,
  appleLogin,
  googleLogin,
  facebookLogin,
  twitterLogin 
} from 'rn-third-social-login';

// First, setup the social login configurations
await setupSocialLogin({
  googleClientId: 'your-google-client-id',
  facebookAppId: 'your-facebook-app-id',
  twitterConsumerKey: 'your-twitter-consumer-key',
  twitterConsumerSecret: 'your-twitter-consumer-secret'
});

// Then use any of the login methods
try {
  // Apple Login
  const appleResult = await appleLogin();
  console.log('Apple login success:', appleResult);

  // Google Login
  const googleResult = await googleLogin();
  console.log('Google login success:', googleResult);

  // Facebook Login
  const facebookResult = await facebookLogin();
  console.log('Facebook login success:', facebookResult);

  // Twitter Login
  const twitterResult = await twitterLogin();
  console.log('Twitter login success:', twitterResult);
} catch (error) {
  console.error('Login failed:', error);
}

API 参考

setupSocialLogin(config)

使用给定配置初始化社交登录提供程序。

参数：

config: SocialLoginConfig
- googleClientId?: string
- facebookAppId?: string
- twitterConsumerKey?: string
- twitterConsumerSecret?: string

登录函数

所有登录函数（appleLogin、googleLogin、facebookLogin、twitterLogin）返回带有以下响应类型的 Promise：

interface SocialLoginResponse {
  id: string;        // 提供商返回的用户唯一ID
  email?: string;    // 用户邮箱（如果可用）
  name?: string;     // 用户姓名（如果可用）
  token: string;     // 认证令牌
  provider: 'apple' | 'google' | 'facebook' | 'twitter';
}

appleLogin(): Sign in with Apple
googleLogin(): Sign in with Google
facebookLogin(): Sign in with Facebook
twitterLogin(): Sign in with Twitter

License

MIT

Author

1534911069@qq.com

react-native ios android social-login apple-login google-login facebook-login twitter-login

@react-native-google-signin/google-signin @invertase/react-native-apple-authentication react-native-fbsdk-next react-native-twitter-signin

1.0.3

12 months ago

1.0.2

12 months ago