react-native-simple-auth

Native social authentication for React Native.

Screencast

iOS	Android

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'
}

• Add the deep link scheme for the callback (Your Bundle ID, eg com.reactnativesimpleauthexample) to your AndroidManifest.xml eg https://github.com/adamjmcgrath/ReactNativeSimpleAuthExample/blob/master/android/app/src/main/AndroidManifest.xml#L28-L33
• Add the deep link scheme for the callback to your iOS app, eg https://dev.twitter.com/cards/mobile/url-schemes

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
}

• Add the deep link scheme for the callback (Your Bundle ID, eg fb1234567890) to your AndroidManifest.xml eg https://github.com/adamjmcgrath/ReactNativeSimpleAuthExample/blob/master/android/app/src/main/AndroidManifest.xml#L28-L33
• Add the deep link scheme for the callback to your iOS app, eg https://dev.twitter.com/cards/mobile/url-schemes (Due to A Facebook bug, this should always be the top one in the list)

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',
}

• Add the deep link scheme for the callback (Your App Name, eg testapp) to your AndroidManifest.xml eg https://github.com/adamjmcgrath/ReactNativeSimpleAuthExample/blob/master/android/app/src/main/AndroidManifest.xml#L28-L33
• Add the deep link scheme for the callback to your iOS app, eg https://dev.twitter.com/cards/mobile/url-schemes (Due to A Facebook bug, this should always be the top one in the list)

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',
}

• Add the deep link scheme for the callback (Your App Name, eg testapp) to your AndroidManifest.xml eg https://github.com/adamjmcgrath/ReactNativeSimpleAuthExample/blob/master/android/app/src/main/AndroidManifest.xml#L28-L33
• Add the deep link scheme for the callback to your iOS app, eg https://dev.twitter.com/cards/mobile/url-schemes (Due to A Facebook bug, this should always be the top one in the list)

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