react-native-simple-auth

Native social authentication for React Native

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-simple-auth
668192.4.06 years ago9 years agoMinified + gzip package size for react-native-simple-auth in KB

Readme

react-native-simple-auth Build Status

OAuth login for React Native

Screencast Install Providers Setup Usage License
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'
}
  • 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
});
License
react-native-simple-auth is released under the MIT license.