react-native-simple-auth

Native social authentication for React Native.

Screencast

iOS Android
Screencast Screencast

Source of example app: https://github.com/adamjmcgrath/ReactNativeSimpleAuthExample

Install

  • yarn add react-native-simple-auth
  • Set up deep linking for your Android and iOS application using the instructions on the react-native website (set the launchMode of MainActivity to singleTask in AndroidManifest.xml, create the deep link schemes in Providers Setup)
  • Set up your OAuth Providers

Providers Setup

Google

  • Go to the developer console and create credentials for an iOS application (you can also use these for your Android app). More instructions on the Google support site.
  • The "Bundle ID" should contain a dot, eg com.reactnativesimpleauth
  • Your configuration object should contain the 'Client ID' as appId and 'Bundle ID' in the callback (note the single /, you can put anything as the path), eg
{
  appId: '123-123abc.apps.googleusercontent.com',
  callback: 'com.reactnativesimpleauthexample:/oauth2redirect'
}

Facebook

  • Create an app on the Facebook developers website
  • In Settings, click Add Platform
  • Select iOS, and in the Bundle ID field, add fb{your App ID} eg fb1234567890 (You can use the same configuration for Android)
  • Your configuration object should contain the 'Appid ID' as appId and 'Bundle ID' in the callback (you must put ://authorize), eg
{
  appId: '1234567890',
  callback: 'fb1234567890://authorize',
  scope: 'user_friends', // you can override the default scope here
  fields: ['email', 'first_name', 'last_name'], // you can override the default fields here
}

Twitter

  • Create an app on https://apps.twitter.com
  • You can put any valid URL as the callback url.
  • Your configuration object should contain the 'Consumer Key (API Key)' as appId, the 'Consumer Secret' as appSecret and the Twitter App name in the callback, eg
{
  appId: 'abc1234567890',
  appSecret: 'cba0987654321',
  callback: 'testapp://authorize',
}

Tumblr

  • Create an app on https://www.tumblr.com/oauth/apps
  • You can put any valid URL as the callback url.
  • Your configuration object should contain the 'OAuth Consumer Key' as appId, the 'OAuth Consumer Secret' as appSecret and any callback, eg
{
  appId: '1234567890abc',
  appSecret: '1234567890abc',
  callback: 'testapp://authorize',
}

Usage

Create a configuration object for each of the providers you want to authorize with (required keys are in parenthesis):

  • google (appId, callback)
  • facebook (appId, callback)
  • twitter (appId, appSecret, callback)
  • tumblr (appId, appSecret, callback)

See secrets.example.js.

import { google, facebook, twitter, tumblr } from 'react-native-simple-auth';

google({
  appId: '123-123abc.apps.googleusercontent.com',
  callback: 'com.reactnativesimpleauthexample:/oauth2redirect',
}).then((info) => {
  // info.user - user details from the provider
  // info.credentials - tokens from the provider
}).catch((error) => {
  // error.code
  // error.description
});

GitHub