|
1 | 1 | # react-native-simple-auth [](https://travis-ci.org/adamjmcgrath/react-native-simple-auth)
|
2 |
| -## [SimpleAuth iOS](https://github.com/calebd/SimpleAuth) wrapper for React Native |
| 2 | + |
| 3 | +## OAuth login for React Native |
3 | 4 |
|
4 | 5 | * [Screencast](#screencast)
|
5 | 6 | * [Install](#install)
|
| 7 | + * [Providers Setup](#providers-setup) |
6 | 8 | * [Usage](#usage)
|
7 | 9 | * [License](#license)
|
8 |
| - * [Thanks](#thanks) |
9 | 10 |
|
10 | 11 | Screencast
|
11 | 12 | ==========
|
12 | 13 |
|
13 |
| - |
| 14 | +iOS | Android |
| 15 | +:-------------------------:|:-------------------------: |
| 16 | + |  |
14 | 17 |
|
15 | 18 | Source of example app: https://github.com/adamjmcgrath/ReactNativeSimpleAuthExample
|
16 | 19 |
|
17 | 20 | Install
|
18 | 21 | =======
|
19 |
| -1. Install [react native](https://facebook.github.io/react-native/docs/getting-started.html#quick-start) |
20 |
| -2. `npm install react-native-simple-auth` |
21 |
| -3. In XCode, in the project navigator right click `Libraries` ➜ `Add Files to [your project's name]` |
22 |
| -4. Go to `node_modules` ➜ `react-native-simple-auth`➜ `ios` and add `SimpleAuthWrapper.h` and `SimpleAuthWrapper.m` |
23 |
| -5. Go to your project's root directory and add a Podfile similar to [this example](https://github.com/adamjmcgrath/ReactNativeSimpleAuthExample/blob/master/Podfile). |
24 |
| -6. Install CocoaPods https://guides.cocoapods.org/using/getting-started.html |
25 |
| -7. Run `pod install` |
26 |
| - |
27 |
| -If you encounter problems building the project after this, the [following install tips](https://github.com/adamjmcgrath/react-native-simple-auth/issues/14) may be of help. |
| 22 | +- `yarn add react-native-simple-auth` |
| 23 | +- Set up deep linking for your Android and iOS application using the instructions on the [react-native website](https://facebook.github.io/react-native/docs/linking.html) (set the `launchMode` of `MainActivity` to `singleTask` in `AndroidManifest.xml`, create the deep link schemes in [Providers Setup](#providers-setup)) |
| 24 | +- Set up your OAuth Providers |
| 25 | + |
| 26 | +Providers Setup |
| 27 | +=============== |
| 28 | + |
| 29 | +### Google |
| 30 | +- Go to the [developer console](https://console.cloud.google.com/apis/credentials/oauthclient/) and create credentials for an iOS application (you can also use these for your Android app). More [instructions](https://support.google.com/cloud/answer/6158849) on the Google support site. |
| 31 | +- The "Bundle ID" should contain a dot, eg `com.reactnativesimpleauth` |
| 32 | +- 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 |
| 33 | +```js |
| 34 | +{ |
| 35 | + appId: '123-123abc.apps.googleusercontent.com', |
| 36 | + callback: 'com.reactnativesimpleauthexample:/oauth2redirect' |
| 37 | +} |
| 38 | +``` |
| 39 | +- 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 |
| 40 | +- Add the deep link scheme for the callback to your iOS app, eg https://dev.twitter.com/cards/mobile/url-schemes |
| 41 | + |
| 42 | +### Facebook |
| 43 | +- Create an app on the [Facebook developers](https://developers.facebook.com) website |
| 44 | +- In `Settings`, click `Add Platform` |
| 45 | +- Select iOS, and in the `Bundle ID` field, add `fb{your App ID}` eg `fb1234567890` (You can use the same configuration for Android) |
| 46 | +- Your configuration object should contain the 'Appid ID' as `appId` and 'Bundle ID' in the `callback` (you must put `://authorize`), eg |
| 47 | +```js |
| 48 | +{ |
| 49 | + appId: '1234567890', |
| 50 | + callback: 'fb1234567890://authorize', |
| 51 | +} |
| 52 | +``` |
| 53 | +- 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 |
| 54 | +- 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) |
| 55 | + |
| 56 | +### Twitter |
| 57 | +- Create an app on https://apps.twitter.com |
| 58 | +- You can put any valid URL as the callback url. |
| 59 | +- Your configuration object should contain the 'Consumer Key (API Key)' as `appId`, the 'Consumer Secret' ass `appSecret` and the Twitter `App name` in the `callback`, eg |
| 60 | +```js |
| 61 | +{ |
| 62 | + appId: 'abc1234567890', |
| 63 | + appSecret: 'cba0987654321', |
| 64 | + callback: 'testapp://authorize', |
| 65 | +} |
| 66 | +``` |
| 67 | +- 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 |
| 68 | +- 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) |
| 69 | + |
| 70 | +### Tumblr |
| 71 | +- Create an app on https://www.tumblr.com/oauth/apps |
| 72 | +- You can put any valid URL as the callback url. |
| 73 | +- Your configuration object should contain the 'OAuth Consumer Key' as `appId`, the 'OAuth Consumer Secret' ass `appSecret` and any `callback`, eg |
| 74 | +```js |
| 75 | +{ |
| 76 | + appId: '1234567890abc', |
| 77 | + appSecret: '1234567890abc', |
| 78 | + callback: 'testapp://authorize', |
| 79 | +} |
| 80 | +``` |
| 81 | +- 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 |
| 82 | +- 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) |
28 | 83 |
|
29 | 84 | Usage
|
30 | 85 | =====
|
31 | 86 |
|
32 | 87 | Create a configuration object for each of the providers you want to authorize with (required keys are in parenthesis):
|
33 | 88 |
|
34 |
| - - google-web (`client_id`, `client_secret`) |
35 |
| - - facebook (`app_id`) |
36 |
| - - twitter (`consumer_key`, `consumer_secret`) |
37 |
| - - instagram (`client_id`, `redirect_uri`) |
38 |
| - - tumblr (`consumer_key`, `consumer_secret`) |
39 |
| - - linkedin-web (`client_id`, `client_secret`, `redirect_uri`) |
| 89 | + - google (`appId`, `callback`) |
| 90 | + - facebook (`appId`, `callback`) |
| 91 | + - twitter (`appId`, `appSecret`, `callback`) |
| 92 | + - tumblr (`appId`, `appSecret`, `callback`) |
40 | 93 |
|
41 | 94 | See [secrets.example.js](https://github.com/adamjmcgrath/ReactNativeSimpleAuthExample/blob/master/secrets.example.js).
|
42 | 95 |
|
43 |
| -[Other providers supported by SimpleAuth](https://github.com/calebd/SimpleAuth#simpleauth) may work, but haven't been tested. |
44 |
| - |
45 |
| -Create an instance of the SimpleAuthWrapper library: |
46 |
| - |
47 |
| -```javascript |
48 |
| -let simpleAuthClient = require('react-native-simple-auth'); |
49 |
| -``` |
50 |
| - |
51 |
| -Configure the library with a single provider: |
52 |
| - |
53 | 96 | ```javascript
|
54 |
| -simpleAuthClient.configure('twitter', { |
55 |
| - consumer_key: 'KEY', |
56 |
| - consumer_secret: 'SECRET' |
57 |
| -}).then(() => { |
58 |
| - // Twitter is configured. |
59 |
| -}) |
60 |
| -``` |
61 |
| - |
62 |
| -Or multiple providers: |
63 |
| - |
64 |
| -```javascript |
65 |
| -simpleAuthClient.configure({ |
66 |
| - twitter: { |
67 |
| - consumer_key: 'KEY', |
68 |
| - consumer_secret: 'SECRET' |
69 |
| - }, |
70 |
| - facebook: { |
71 |
| - app_id: 'ID' |
72 |
| - } |
73 |
| -}).then(() => { |
74 |
| - // Twitter & Facebook are configured. |
75 |
| -}); |
76 |
| -``` |
77 |
| - |
78 |
| -Then authorize each provider: |
79 |
| - |
80 |
| -```javascript |
81 |
| -simpleAuthClient.authorize('twitter').then((info) => { |
82 |
| - let token = info.token; |
83 |
| - let name = info.name; |
| 97 | +import { google, facebook, twitter, tumblr } from 'react-native-simple-auth'; |
| 98 | + |
| 99 | +google({ |
| 100 | + appId: '123-123abc.apps.googleusercontent.com', |
| 101 | + callback: 'com.reactnativesimpleauthexample:/oauth2redirect', |
| 102 | +}).then((info) => { |
| 103 | + // info.user - user details from the provider |
| 104 | + // info.credentials - tokens from the provider |
84 | 105 | }).catch((error) => {
|
85 |
| - let errorCode = error.code; |
86 |
| - let errorDescription = error.description; |
| 106 | + // error.code |
| 107 | + // error.description |
87 | 108 | });
|
88 | 109 | ```
|
89 | 110 |
|
90 | 111 | License
|
91 | 112 | =======
|
92 | 113 |
|
93 | 114 | react-native-simple-auth is released under the MIT license.
|
94 |
| - |
95 |
| -Thanks |
96 |
| -====== |
97 |
| - |
98 |
| -- [calebd](https://github.com/calebd) for the code review and [SimpleAuth](https://github.com/calebd/SimpleAuth) library |
|
0 commit comments