{"id":13777424,"url":"https://github.com/fullstackreact/react-native-oauth","last_synced_at":"2025-04-05T20:09:06.193Z","repository":{"id":52798570,"uuid":"61697934","full_name":"fullstackreact/react-native-oauth","owner":"fullstackreact","description":"A react-native wrapper for social authentication login for both Android and iOS","archived":false,"fork":false,"pushed_at":"2021-05-07T13:38:31.000Z","size":15932,"stargazers_count":805,"open_issues_count":141,"forks_count":214,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-03-29T19:05:23.552Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fullstackreact.com","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fullstackreact.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-22T07:22:57.000Z","updated_at":"2025-03-20T21:45:04.000Z","dependencies_parsed_at":"2022-08-23T05:32:01.310Z","dependency_job_id":null,"html_url":"https://github.com/fullstackreact/react-native-oauth","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-native-oauth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-native-oauth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-native-oauth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-native-oauth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullstackreact","download_url":"https://codeload.github.com/fullstackreact/react-native-oauth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247123094,"owners_count":20887260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T18:00:43.164Z","updated_at":"2025-04-05T20:09:06.172Z","avatar_url":"https://github.com/fullstackreact.png","language":"Java","readme":"## react-native-oauth\n\nThe `react-native-oauth` library provides an interface to OAuth 1.0 and OAuth 2.0 providers with support for the following providers for React Native apps:\n\n* Twitter\n* Facebook\n* Google\n* Github\n* Slack\n\n## TL;DR;\n\nThis library cuts out the muck of dealing with the [OAuth 1.0](https://tools.ietf.org/html/rfc5849) and [OAuth 2.0](http://oauth.net/2/) protocols in react-native apps. The API is incredibly simple and straight-forward and is intended on getting you up and running quickly with OAuth providers (such as Facebook, Github, Twitter, etc).\n\n```javascript\nimport OAuthManager from 'react-native-oauth';\n\nconst manager = new OAuthManager('firestackexample')\nmanager.configure({\n  twitter: {\n    consumer_key: 'SOME_CONSUMER_KEY',\n    consumer_secret: 'SOME_CONSUMER_SECRET'\n  },\n  google: {\n    callback_url: `io.fullstack.FirestackExample:/oauth2redirect`,\n    client_id: 'YOUR_CLIENT_ID',\n    client_secret: 'YOUR_SECRET'\n  }\n});\n\n// ...\nmanager.authorize('google', {scopes: 'profile email'})\n.then(resp =\u003e console.log('Your users ID'))\n.catch(err =\u003e console.log('There was an error'));\n```\n\n### Help\n\nDue to other time contraints, I cannot continue to work on react-native-oauth for the time it deserves. If you're interested in supporting this library, please help! It's a widely used library and I'd love to continue supporting it. Looking for maintainers!\n\n## Features\n\n* Isolates the OAuth experience to a few simple methods.\n* Atomatically stores the tokens for later retrieval\n* Works with many providers and simple to add new providers\n* Works on both Android and iOS\n* Makes calling API methods a snap\n* Integrates seamlessly with Firestack (but can be used without it)\n\n## Installation\n\nInstall `react-native-oauth` in the usual manner using `npm`:\n\n```javascript\nnpm install --save react-native-oauth\n```\n\nAs we are integrating with react-native, we have a little more setup to integrating with our apps.\n\n### iOS setup\n\n**Important**: This will _not_ work if you do not complete all the steps:\n\n- [ ] Link the `RCTLinkingManager` project\n- [ ] Update your `AppDelegate.h` file\n- [ ] Add KeychainSharing in your app\n- [ ] Link the `react-native-oauth` project with your application (`react-native link`)\n- [ ] Register a URL type of your application (Info tab -- see below)\n\n#### RCTLinkingManager\n\nSince `react-native-oauth` depends upon the `RCTLinkingManager` (from react-native core), we'll need to make sure we link this in our app.\n\nIn your app, add the following line to your `HEADER SEARCH PATHS`:\n\n```\n$(SRCROOT)/../node_modules/react-native-oauth/ios/OAuthManager\n$(SRCROOT)/../node_modules/react-native/Libraries/LinkingIOS\n```\n\n![](./resources/header-search-paths.png)\n\nNext, navigate to the neighboring \"Build Phases\" section of project settings, find the \"Link Binary with Library\" drop down, expand it, and click the \"+\" to add _libOAuthManager.a_ to the list.\n\nMake sure to Update your `AppDelegate.m` as below, otherwise it will _not_ work.\n\n#### Automatically with [rnpm](https://github.com/rnpm/rnpm)\n\nTo automatically link our `react-native-oauth` client to our application, use the `rnpm` tool. [rnpm](https://github.com/rnpm/rnpm) is a React Native package manager which can help to automate the process of linking package environments.\n\n```bash\nreact-native link react-native-oauth\n```\n\nNote: due to some restrictions on iOS, this module requires you to install cocoapods. The process has been semi-automated through using the above `react-native link` command.\n\nOnce you have linked this library, run the following command in the root directory:\n\n```\n(cd ios \u0026\u0026 pod install)\n```\n\nOpen in xcode the created `.xcworkspace` in the `ios/` directory (**NOT THE `.xproj` file**) when it's complete.\n\nWhen working on iOS 10, we'll need to enable _Keychain Sharing Entitlement_ in _Capabilities_ of the build target of `io.fullstack.oauth.AUTH_MANAGER`.\n\n![](./resources/capabilities.png)\n\n## Handle deep linking loading\n\n**Required step**\n\nWe'll need to handle app loading from a url with our app in order to handle authentication from other providers. That is, we'll need to make sure our app knows about the credentials we're authenticating our users against when the app loads _after_ a provider is authenticated against.\n\n### iOS setup\n\nWe need to add a callback method in our `ios/AppDelegate.m` file and then call our OAuthManager helper method. Let's load the `ios/AppDelegate.m` file and add the following all the way at the bottom (but before the `@end`):\n\n```objectivec\n// Add the import at the top:\n#import \"OAuthManager.h\"\n// ...\n@implementation AppDelegate\n// ...\n- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {\n  return [OAuthManager handleOpenUrl:application\n                             openURL:url\n                   sourceApplication:sourceApplication\n                          annotation:annotation];\n}\n```\n\nIn addition, we'll need to set up the handlers within the iOS app. Add the following line somewhere in your `application:didFinishLaunchingWithOptions:` method, like so:\n\n```objectivec\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n  NSURL *jsCodeLocation;\n\n  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@\"index.ios\" fallbackResource:nil];\n\n  // other existing setup here\n\n  // ADD THIS LINE SOMEWHERE IN THIS FUNCTION\n  [OAuthManager setupOAuthHandler:application];\n  // ...\n\n  [self.window makeKeyAndVisible];\n  return YES;\n}\n```\n\nWhen our app loads up with a request that is coming back from OAuthManager _and_ matches the url pattern, OAuthManager will take over and handle the rest and storing the credentials for later use.\n\n### Adding URL schemes\n\nIn order for our app to load through these callbacks, we need to tell our iOS app that we want to load them. In order to do that, we'll have to create some URL schemes to register our app. Some providers require specific schemes (mentioned later).\n\nThese URL schemes can be added by navigating to to the `info` panel of our app in Xcode (see screenshot).\n\n![](./resources/info-panel.png)\n\nLet's add the appropriate one for our provider. For instance, to set up twitter, add the app name as a URL scheme in the URL scheme box.\n\n![](./resources/url-schemes.png)\n\n### Android setup\n\nAfter we link `react-native-oauth` to our application, we're ready to go. Android integration is much simpler, thanks to the in-app browser ability for our apps. `react-native-oauth` handles this for you.\n\nOne note, *all* of the callback urls follow the scheme: `http://localhost/[provider_name]`. Make sure this is set as a configuration for each provider below (documented in the provider setup sections).\n\nMake sure you add the following to your `android/build.gradle` file:\n\n```\nmaven { url \"https://jitpack.io\" }\n```\n\nFor instance, an example `android/build.gradle` file would look like this:\n\n```\n// Top-level build file where you can add configuration options common to all sub-projects/modules.\n\nbuildscript {\n  // ...\n}\n\nallprojects {\n    repositories {\n        mavenLocal()\n        jcenter()\n        maven { url \"https://jitpack.io\" } // \u003c~ ADD THIS LINE\n        maven {\n            url \"$rootDir/../node_modules/react-native/android\"\n        }\n    }\n}\n```\n\n## Creating the manager\n\nIn our JS, we can create the manager by instantiating a new instance of it using the `new` method and passing it the name of our app:\n\n```javascript\nconst manager = new OAuthManager('firestackexample')\n```\n\nWe need to pass the name of our app as the oauth manager uses this to create callback keys. This _must_ match the URL route created in your iOS app. For instance, above we created a URL scheme for Twitter. Pass this as the string in the `OAuthManager` constructor.\n\n## Configuring our providers\n\nProviders, such as Facebook require some custom setup for each one. The following providers have been implemented and we're working on making more (and making it easier to add more, although the code is not impressively complex either, so it should be relatively simple to add more providers).\n\nIn order to configure providers, the `react-native-oauth` library exports the `configureProvider()` method, which accepts _two_ parameters and returns a promise:\n\n1. The provider name, such as `twitter` and `facebook`\n2. The provider's individual credentials\n\nFor instance, this might look like:\n\n```javascript\nconst config =  {\n  twitter: {\n    consumer_key: 'SOME_CONSUMER_KEY',\n    consumer_secret: 'SOME_CONSUMER_SECRET'\n  },\n  facebook: {\n    client_id: 'YOUR_CLIENT_ID',\n    client_secret: 'YOUR_CLIENT_SECRET'\n  }\n}\n// Create the manager\nconst manager = new OAuthManager('firestackexample')\n// configure the manager\nmanager.configure(config);\n```\n\nThe `consumer_key` and `consumer_secret` values are _generally_ provided by the provider development program. In the case of [twitter](https://apps.twitter.com), we can create an app and generate these values through their [development dashboard](https://apps.twitter.com).\n\n### Implemented providers\n\nThe following list are the providers we've implemented thus far in `react-native-oauth` and the _required_ keys to pass when configuring the provider:\n\n#### Twitter (iOS/Android)\n\nTo authenticate against twitter, we need to register a Twitter application. Register your twitter application (or create a new one at [apps.twitter.com](https://apps.twitter.com)).\n\n![](./resources/twitter/app.png)\n\nOnce you have created one, navigate to the application and find the `Keys and Access Tokens`. Take note of the consumer key and secret:\n\n![](./resources/twitter/api-key.png)\n\nFor the authentication to work properly, you need to set the Callback URL. It doesn't matter what you choose as long as its a valid url.\n\n![](./resources/twitter/callback-url.png)\n\nTwitter's URL scheme needs to be the app name (that we pass into the constructor method). Make sure we have one registered in Xcode as the same name:\n\n![](./resources/twitter/url-scheme.png)\n\nAdd these values to the authorization configuration to pass to the `configure()` method as:\n\n```javascript\nconst config =  {\n  twitter: {\n    consumer_key: 'SOME_CONSUMER_KEY',\n    consumer_secret: 'SOME_CONSUMER_SECRET'\n  }\n}\n```\n\n#### Facebook (iOS/Android)\n\nTo add facebook authentication, we'll need to have a Facebook app. To create one (or use an existing one), navigate to [developers.facebook.com/](https://developers.facebook.com/).\n\n![](./resources/facebook/dev.facebook.png)\n\nFind or create an application and find the app id. Take note of this app id. Next, navigate to the `Settings` panel and find your client_secret.\n\n![](./resources/facebook/app.png)\n\nBefore we leave the Facebook settings, we need to tell Facebook we have a new redirect url to register. Navigate to the bottom of the page and add the following into the `bundle ID` field:\n\n`fb{YOUR_APP_ID}`\n\nFor instance, my app ID in this example is: `1745641015707619`. In the `Bundle ID` field, I have added `fb1745641015707619`.\n\n![](./resources/facebook/redirect-url.png)\n\nFor Android, you will also need to set the redirect url to `http://localhost/facebook` in the Facebook Login settings.\n\n![](./resources/facebook/redirect-url.png)\n\nWe'll need to create a new URL scheme for Facebook and (this is a weird bug on the Facebook side) the facebook redirect URL scheme _must be the first one_ in the list. The URL scheme needs to be the same id as the `Bundle ID` copied from above:\n\n![](./resources/facebook/facebook-redirect.png)\n\nBack in our application, add the App ID and the secret as:\n\n```javascript\nconst config =  {\n  facebook: {\n    client_id: 'YOUR_APP_ID',\n    client_secret: 'YOUR_APP_SECRET'\n  }\n}\n```\n\n#### Google  (iOS)\n\nTo add Google auth to our application, first we'll need to create a google application. Create or use an existing one by heading to the [developers.google.com/](https://developers.google.com/) page (or the console directly at [https://console.developers.google.com](https://console.developers.google.com)).\n\n![](./resources/google/auth-page.png)\n\nWe need to enable the `Identity Toolkit API` API. Click on `Enable API` and add this api to your app. Once it's enabled, we'll need to collect our credentials.\n\nNavigate to the `Credentials` tab and create a new credential. Create an **iOS API credential**. Take note of the `client_id` and the `iOS URL scheme`. In addition, make sure to set the bundle ID as the bundle id in our application in Xcode:\n\n![](./resources/google/creds.png)\n\nTake note of the `iOS URL Scheme`. We'll need to add this as a URL scheme in our app. In the `Info` panel of our app target (in Xcode), add the URL scheme:\n\n![](./resources/google/url-scheme.png)\n\nFinally, add the `client_id` credential as the id from the url page as well as the ios scheme (with any path) in our app configuration:\n\n```javascript\nconst config =  {\n  google: {\n    callback_url: `[IOS SCHEME]:/google`,\n    client_id: 'YOUR_CLIENT_ID'\n  }\n}\n```\n\n#### Google (Android)\n\nTo set up Google on Android, follow the same steps as before, except this time instead of creating an iOS API, create a **web api credential**. Make sure to add the **redirect url** at the bottom (it defaults to `http://localhost/google`):\n\n![](./resources/google/android-creds.png)\n\nWhen creating an Android-specific configuration, create a file called `config/development.android.js`. React Native will load it instead of the `config/development.js` file automatically on Android.\n\n#### Github  (iOS/Android)\n\nAdding Github auth to our application is pretty simple as well. We'll need to create a web application on the github apps page, which can be found at [https://github.com/settings/developers](https://github.com/settings/developers). Create one, making sure to add _two_ apps (one for iOS and one for Android) with the callback urls as:\n\n* ios: [app_name]:// oauth (for example: `firestackexample://oauth`)\n* android: http://localhost/github\n\nTake note of the `client_id` and `client_secret`\n\n![](./resources/github/apps.png)\n\nThe `iOS URL Scheme` is the same as the twitter version, which means we'll just add the app name as a URL scheme (i.e. `firestackexample`).\n\nAdd the `client_id` and `client_secret` credentials to your configuration object:\n\n```javascript\nconst config =  {\n  github: {\n    client_id: 'YOUR_CLIENT_ID',\n    client_secret: 'YOUR_CLIENT_SECRET'\n  }\n}\n```\n\n## Slack\n\nWe'll need to create an app first. Head to the slack developer docs at [https://slack.com/developers](https://slack.com/developers).\n\n![](./resources/slack/dev.png)\n\nClick on the Getting Started button:\n\n![](./resources/slack/getting_started.png)\n\n From here, find the `create an app` link:\n\n![](./resources/slack/create.png)\n\n Take note of the `client_id` and the `client_secret`. We'll place these in our configuration object just like so:\n\n```javascript\nconst config =  {\n  slack: {\n    client_id: 'YOUR_CLIENT_ID',\n    client_secret: 'YOUR_CLIENT_SECRET'\n  }\n}\n```\n\nLastly, Slack requires us to add a redirect_url.\n\nFor **iOS**: the callback_url pattern is `${app_name}://oauth`, so make sure to add your redirect_url where it asks for them before starting to work with the API.\n\nfor **Android**: the `callback_url` pattern is `http://localhost/slack`. Be sure to add this to your list of redirect urls.\n\n![](./resources/slack/redirect.png)\n\n## Authenticating against our providers\n\nWe can use the manager in our app using the `authorize()` method on the manager.\n\nThe `authorize` method takes two arguments (the first one is required):\n\n* The provider we wish to authenticate against (i.e. twitter, facebook)\n* The list of options on a per-provider basis (optional)\n\nFor example:\n\n```javascript\nmanager.authorize('twitter')\n  .then(resp =\u003e console.log(resp))\n  .catch(err =\u003e console.log(err));\n```\n\nThis method returns a promise that is resolved once the authentication has been completed. You'll get access to the authentication keys in the `resp` object.\n\nThe `resp` object is set as follows:\n\n```javascript\n{\n  status: \"ok\",\n  response: {\n    authorized: true, (boolean)\n    uuid: \"UUID\", (user UUID)\n    credentials: {\n      access_token: \"access token\",\n      refresh_token: \"refresh token\",\n      type: 1\n    }\n  }\n}\n```\n\nThe second argument accepts an object where we can ask for additional scopes, override default values, etc.\n\n```javascript\nmanager.authorize('google', {scopes: 'email,profile'})\n  .then(resp =\u003e console.log(resp))\n  .catch(err =\u003e console.log(err));\n```\n\n* Scopes are a list of scopes _comma separated_ as a string.\n\n## Calling a provider's API\n\nWe can use OAuthManager to make requests to endpoints from our providers as well. For instance, let's say we want to get a user's time line from twitter. We would make the request to the url [https://api.twitter.com/1.1/statuses/user_timeline.json](https://api.twitter.com/1.1/statuses/user_timeline.json)\n\nIf our user has been authorized for thi request, we can execute the request using the credentials stored by the OAuthManager.\n\nThe `makeRequest()` method accepts 3 parameters:\n\n1. The provider we're making a request to\n2. The url (or path) we want to make the request\n3. Any additional options\n\nWe can pass a list of options for our request with the last argument. The keys OAuthManager recognizes are:\n\n1. `params` - The query parameters\n2. `method` - The http method to make the request with.\n\nAvailable HTTP methods:\n  * get\n  * post\n  * put\n  * delete\n  * head\n  * options\n  * trace\n\n\n```javascript\nconst userTimelineUrl = 'https://api.twitter.com/1.1/statuses/user_timeline.json';\nmanager\n  .makeRequest('twitter', userTimelineUrl)\n  .then(resp =\u003e {\n    console.log('Data -\u003e', resp.data);\n  });\n```\n\n\"me\" represents the authenticated user, in any call to the Google+ API\n\n```javascript\nconst googleUrl = 'https://www.googleapis.com/plus/v1/people/me';\nmanager\n  .makeRequest('google', googleUrl)\n    .then(resp =\u003e {\n      console.log('Data -\u003e ', resp.data);\n    });\n\n```\n\nIt's possible to use just the path as well. For instance, making a request with Facebook at the `/me` endpoint can be:\n\n```javascript\nmanager\n  .makeRequest('facebook', '/me')\n  .then(resp =\u003e {\n    console.log('Data -\u003e', resp.data);\n  });\n```\n\nTo add more data to our requests, we can pass a third argument:\n\n```javascript\nmanager\n  .makeRequest('facebook', '/me', {\n    headers: { 'Content-Type': 'application/java' },\n    params: { email: 'me+rocks@ari.io' }\n  })\n  .then(resp =\u003e {\n    console.log('Data -\u003e', resp.data);\n  });\n```\n\n## Getting authorized accounts\n\nSince OAuthManager handles storing user accounts, we can query it to see which accounts have already been authorized or not using `savedAccounts()`:\n\n```javascript\nmanager.savedAccounts()\n  .then(resp =\u003e {\n    console.log('account list: ', resp.accounts);\n  })\n```\n\n## deauthorize()\n\nWe can `deauthorize()` our user's from using the provider by calling the `deauthorize()` method. It accepts a single parameter:\n\n1. The `provider` we want to remove from our user credentials.\n\n```javascript\nmanager.deauthorize('twitter');\n```\n\n## Adding your own providers\n\nTo add your own providers you can use the `addProvider()` method and fill in your provider details:\n\n```javascript\nmanager.addProvider({\n    'name_of_provider': {\n        auth_version: '2.0',\n        authorize_url: 'https://provider.dev/oauth',\n        access_token_url: 'https://provider.dev/oauth/token',\n        callback_url: ({app_name}) =\u003e `${app_name}://oauth`,\n    }\n});\n```\n\n## Contributing\n\nThis is _open-source_ software and we can make it rock for everyone through contributions.\n\n```shell\ngit clone https://github.com/fullstackreact/react-native-oauth.git\ncd react-native-oauth\nnpm install\n```\n___\n\n## TODOS:\n\n* [x] Simplify method of adding providers\n* [x] Add github(https://developer.github.com/v3/oauth/) support\n* [x] Add Google support\n* [x] Add Facebook support\n* [x] Add Android support\n","funding_links":[],"categories":["\u003ca name=\"Security-\u0026-Auth:-Native-Modules\"\u003eSecurity \u0026 Auth: Native Modules\u003c/a\u003e","Java"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2Freact-native-oauth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstackreact%2Freact-native-oauth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2Freact-native-oauth/lists"}