{"id":4741,"url":"https://github.com/Nubescope/react-native-facebook-account-kit","last_synced_at":"2025-08-04T02:31:57.598Z","repository":{"id":8689574,"uuid":"59314342","full_name":"Nubescope/react-native-facebook-account-kit","owner":"Nubescope","description":"Facebook Account Kit SDK wrapper for React Native","archived":false,"fork":false,"pushed_at":"2023-01-11T00:58:19.000Z","size":48113,"stargazers_count":322,"open_issues_count":128,"forks_count":120,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-22T01:55:33.483Z","etag":null,"topics":["account-kit","android","facebook","ios","react-native"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nubescope.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-20T17:43:33.000Z","updated_at":"2024-04-19T17:08:01.000Z","dependencies_parsed_at":"2023-01-13T15:01:07.870Z","dependency_job_id":null,"html_url":"https://github.com/Nubescope/react-native-facebook-account-kit","commit_stats":null,"previous_names":["underscopeio/react-native-facebook-account-kit"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nubescope%2Freact-native-facebook-account-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nubescope%2Freact-native-facebook-account-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nubescope%2Freact-native-facebook-account-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nubescope%2Freact-native-facebook-account-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nubescope","download_url":"https://codeload.github.com/Nubescope/react-native-facebook-account-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228587347,"owners_count":17941442,"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":["account-kit","android","facebook","ios","react-native"],"created_at":"2024-01-05T20:17:21.893Z","updated_at":"2024-12-07T09:30:59.640Z","avatar_url":"https://github.com/Nubescope.png","language":"Objective-C","funding_links":[],"categories":["Components"],"sub_categories":["Integrations"],"readme":"# React Native Facebook Account Kit\n\nA Facebook Account Kit SDK wrapper for react-native.\n\n[![version](https://img.shields.io/npm/v/react-native-facebook-account-kit.svg)](https://www.npmjs.com/package/react-native-facebook-account-kit)\n[![downloads](https://img.shields.io/npm/dt/react-native-facebook-account-kit.svg)](https://www.npmjs.com/package/react-native-facebook-account-kit)\n\n\u003e ## IMPORTANT: Deprecation Notice\n\u003e As announced by **Facebook** the **Account Kit** is being deprecated meaning that this library will no longer be maintained 😢\n\n![](images/deprecation-notice.png)\n\n## Supported versions - React Native / Facebook Account Kit\n\nThe table below shows the supported versions of React Native and the different versions of `react-native-facebook-account-kit`.\n\n| RN Facebook Account Kit | 0.4.x | 0.6.x | 0.10.x  |  1.x.x   |  2.x.x   |\n| ----------------------- | :---: | :---: | :-----: | :------: | :------: |\n| React Native            | 0.24  | \u003c0.48 | 0.48-56 | \u003e=0.57.x | \u003e=0.60.x |\n\n\n## Installation  \n\n```shell\nyarn add react-native-facebook-account-kit\ncd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n```\n\n\u003e For RN \u003c **0.60.x** Follow the installation steps described [in this document](docs/Legacy-Instalation-Steps.md)\n\n\u003e For RN \u003c **0.40.0** Check the [Troubleshooting Guide](#troubleshooting)\n\n## Linking\n\nNot necessary 🎉 [Check out the RN 0.60 release blog post](https://facebook.github.io/react-native/blog/2019/07/03/version-60)\n\n\n## Configuration\n\n### Obtaining secret and token to configure the library\n\nFirst of all you must obtain an **Account App Id** and an **Account Kit Client Token**. To obtain them you must create a Facebook application using [facebook developer's website](https://developers.facebook.com/apps/). \n\nIn the [part 1]((https://medium.com/react-native-training/passwordless-authentication-in-react-native-using-facebook-account-kit-part-1-8d83e92077e9)) of the following blog post series you will find detailed steps about how to create and configura a **Facebook Account Kit** application:\n\n- [Passwordless Authentication in React Native Using Facebook Account Kit (Part 1)](https://medium.com/react-native-training/passwordless-authentication-in-react-native-using-facebook-account-kit-part-1-8d83e92077e9)\n- [Passwordless Authentication in React Native Using Facebook Account Kit (Part 2)](https://medium.com/react-native-training/passwordless-authentication-in-react-native-using-facebook-account-kit-part-2-367a820f269c)\n- [Passwordless Authentication in React Native Using Facebook Account Kit (Part 3)](https://medium.com/react-native-training/passwordless-authentication-in-react-native-using-facebook-account-kit-part-3-ddf44d81beb5)\n\n\n### IOS Configuration\n\nAdd your **Account App Id** and an **Account Kit Client Token** to your project's `Info.plist` file\n\n```xml\n\u003cplist version=\"1.0\"\u003e\n  \u003cdict\u003e\n    ...\n    \u003ckey\u003eFacebookAppID\u003c/key\u003e\n    \u003cstring\u003e{YOUR_FACEBOOK_APP_ID}\u003c/string\u003e\n    \u003ckey\u003eAccountKitClientToken\u003c/key\u003e\n    \u003cstring\u003e{YOUR_ACCOUNT_KIT_CLIENT_TOKEN}\u003c/string\u003e\n    \u003ckey\u003eCFBundleURLTypes\u003c/key\u003e\n    \u003carray\u003e\n      \u003cdict\u003e\n        \u003ckey\u003eCFBundleURLSchemes\u003c/key\u003e\n        \u003carray\u003e\n          \u003cstring\u003eak{YOUR_FACEBOOK_APP_ID}\u003c/string\u003e\n        \u003c/array\u003e\n      \u003c/dict\u003e\n    \u003c/array\u003e\n    ...\n  \u003c/dict\u003e\n\u003c/plist\u003e\n```\n\n### Android Configuration\n\nAdd your **Account App Id** and the **Account Kit Client Token** to the `android/app/src/main/res/values/strings.xml`:\n\n```xml\n...\n\u003cstring name=\"fb_app_id\"\u003eYOUR_FACEBOOK_APP_ID\u003c/string\u003e\n\u003cstring name=\"ak_client_token\"\u003eYOUR_ACCOUNT_KIT_CLIENT_TOKEN\u003c/string\u003e\n```\n\nThen update set your app metadata by editing the `android/app/src/main/AndroidManifest.xml` file:\n\n```xml\n...\n\u003capplication\u003e\n    ...\n    \u003cmeta-data\n        android:name=\"com.facebook.sdk.ApplicationId\"\n        android:value=\"@string/fb_app_id\" /\u003e\n    \u003cmeta-data\n        android:name=\"com.facebook.accountkit.ApplicationName\"\n        android:value=\"@string/app_name\" /\u003e\n    \u003cmeta-data\n        android:name=\"com.facebook.accountkit.ClientToken\"\n        android:value=\"@string/ak_client_token\" /\u003e\n    ...\n\u003c/application\u003e\n...\n```\n\n3. If you want AccountKit to prefill your phone number add the `READ_PHONE_STATE` permission to the `android/app/src/main/AndroidManifest.xml` file:\n\n```xml\n...\n\u003cmanifest ...\u003e\n  ...\n  \u003cuses-permission android:name=\"android.permission.READ_PHONE_STATE\" /\u003e\n  ...\n\u003c/manifest\u003e  \n```\n\n4. *(Optional)* Exclude backup for Access Tokens on Android \u003e= 6.0\n\n    As per this [documentation](https://developers.facebook.com/docs/accountkit/accesstokens), Account Kit does not support automated backup (introduced in Android 6.0). The following steps will exclude automated backup\n\n    1.  Create a file `android/app/src/main/res/xml/backup_config.xml` that contains the follwoing:\n\n    ```java\n    \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n    \u003cfull-backup-content\u003e\n      \u003cexclude domain=\"sharedpref\" path=\"com.facebook.accountkit.AccessTokenManager.SharedPreferences.xml\"/\u003e\n    \u003c/full-backup-content\u003e\n    ```\n\n    2.  In your `AndroidManifest.xml` add the following to exclude backup of Account Kit's Access Token.\n\n    ```java\n    \u003capplication\n      //other configurations here\n      android:fullBackupContent=\"@xml/backup_config\" // add this line\n    \u003e\n    ```\n\n## Usage\n\n\u003e If you have issues with the method signatures you may be using an older version. Check the [Releases Notes](https://github.com/underscopeio/react-native-facebook-account-kit/releases) for breaking changes\n\n```javascript\nimport RNAccountKit from 'react-native-facebook-account-kit'\n\n// Configures the SDK with some options\nRNAccountKit.configure({\n  responseType: 'token'|'code', // 'token' by default,\n  titleType: 'login',\n  initialAuthState: '',\n  initialEmail: 'some.initial@email.com',\n  initialPhoneCountryPrefix: '+1', // autodetected if none is provided\n  initialPhoneNumber: '123-456-7890',\n  facebookNotificationsEnabled: true|false, // true by default\n  readPhoneStateEnabled: true|false, // true by default,\n  countryWhitelist: ['AR'], // [] by default\n  countryBlacklist: ['US'], // [] by default\n  defaultCountry: 'AR',\n  theme: {\n    // for iOS only, see the Theme section\n  },\n  viewControllerMode: 'show'|'present', // for iOS only, 'present' by default\n  getACallEnabled: true|false,\n  setEnableInitialSmsButton: true|false, // true by default\n})\n\n// Shows the Facebook Account Kit view for login via SMS\nRNAccountKit.loginWithPhone()\n  .then((token) =\u003e {\n    if (!token) {\n      console.log('Login cancelled')\n    } else {\n      console.log(`Logged with phone. Token: ${token}`)\n    }\n  })\n\n// Shows the Facebook Account Kit view for login via email\nRNAccountKit.loginWithEmail()\n  .then((token) =\u003e {\n    if (!token) {\n      console.log('Login cancelled')\n    } else {\n      console.log(`Logged with email. Token: ${token}`)\n    }\n  })\n\n// Logouts the user, so getCurrentAccessToken() will retrieve null\nRNAccountKit.logout()\n  .then(() =\u003e {\n    console.log('Logged out')\n  })\n\n// Retrieves the logged user access token, if any user is logged\nRNAccountKit.getCurrentAccessToken()\n  .then((token) =\u003e {\n    console.log(`Current access token: ${token}`)\n  })\n\n// Retrieves the logged user account info, if any user is logged\nRNAccountKit.getCurrentAccount()\n  .then((account) =\u003e {\n    console.log(`Current account: ${account}`)\n  })\n```\n\n[@MahbbRah](https://github.com/MahbbRah) put together a [video tutorial](https://youtu.be/R-HSmuVHkIM) of how to integrate the library you might find useful.\n\n## Examples\n\nTry the [examples](https://github.com/underscopeio/react-native-facebook-account-kit/tree/master/examples).\nThey are related to different React Native versions.\n\n```bash\ngit clone https://github.com/underscopeio/react-native-facebook-account-kit\ncd react-native-facebook-account-kit/examples/RN0XX\nyarn\nreact-native run-ios\nreact-native run-android\n```\n\n## Themes\n\n### iOS\n\n```javascript\nimport RNAccountKit, {\n  Color,\n  StatusBarStyle,\n} from 'react-native-facebook-account-kit'\n\nRNAccountKit.configure({\n  ...,\n  theme: {\n    // Background\n    backgroundColor: Color.rgba(0, 120, 0, 0.1),\n    backgroundImage: 'background.png',\n    // Button\n    buttonBackgroundColor: Color.rgba(0, 153, 0, 1.0),\n    buttonBorderColor: Color.rgba(0, 255, 0, 1),\n    buttonTextColor: Color.rgba(0, 255, 0, 1),\n    // Button disabled\n    buttonDisabledBackgroundColor: Color.rgba(100, 153, 0, 0.5),\n    buttonDisabledBorderColor: Color.rgba(100, 153, 0, 0.5),\n    buttonDisabledTextColor: Color.rgba(100, 153, 0, 0.5),\n    // Header\n    headerBackgroundColor: Color.rgba(0, 153, 0, 1.0),\n    headerButtonTextColor: Color.rgba(0, 153, 0, 0.5),\n    headerTextColor: Color.rgba(0, 255, 0, 1),\n    // Input\n    inputBackgroundColor: Color.rgba(0, 255, 0, 1),\n    inputBorderColor: Color.hex('#ccc'),\n    inputTextColor: Color.hex('#0f0'),\n    // Others\n    iconColor: Color.rgba(0, 255, 0, 1),\n    textColor: Color.hex('#0f0'),\n    titleColor: Color.hex('#0f0'),\n    // Header\n    statusBarStyle: StatusBarStyle.LightContent, // or StatusBarStyle.Default\n  }\n})\n```\n\n\u003e To see the statusBarStyle reflected you must set the **UIViewControllerBasedStatusBarAppearance** property to **true** on your app's _Info.plist_ file.\n\u003e You can do it from XCode \u003cimg width=\"507\" alt=\"screen shot 2016-08-02 at 11 44 07 am\" src=\"https://cloud.githubusercontent.com/assets/1652196/17332979/0fa632b2-58a7-11e6-9aa3-a669ae44f2e6.png\"\u003e\n\n### Android\n\n\u003e Check [this commit](https://github.com/underscopeio/react-native-facebook-account-kit/commit/77df35ae20f251e7c29285e8820da2ff498d9400) to see how it's done in our sample app\n\n1.  In your application _styles.xml_ file (usually located in _android/app/src/main/res/values_ folder) create a **Theme** with the following schema\n\n```xml\n\u003cstyle name=\"LoginThemeYellow\" parent=\"Theme.AccountKit\"\u003e\n    \u003citem name=\"com_accountkit_primary_color\"\u003e#f4bf56\u003c/item\u003e\n    \u003citem name=\"com_accountkit_primary_text_color\"\u003e@android:color/white\u003c/item\u003e\n    \u003citem name=\"com_accountkit_secondary_text_color\"\u003e#44566b\u003c/item\u003e\n    \u003citem name=\"com_accountkit_status_bar_color\"\u003e#ed9d00\u003c/item\u003e\n\n    \u003citem name=\"com_accountkit_input_accent_color\"\u003e?attr/com_accountkit_primary_color\u003c/item\u003e\n    \u003citem name=\"com_accountkit_input_border_color\"\u003e?attr/com_accountkit_primary_color\u003c/item\u003e\n\u003c/style\u003e\n```\n\n\u003e See the full set of customizable fields [here](https://developers.facebook.com/docs/accountkit/android/customizing)\n\n2.  In your app _AndroidManifest.xml_ file (usually under _android/app/src/main_ folder) set that **Theme** to the **AccountKitActivity**\n\n```xml\n\u003cmanifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:tools=\"http://schemas.android.com/tools\" \u003c-- Add this line\n    ...\u003e\n\n    \u003c!-- Set the AccountKitActivity theme --\u003e\n    \u003cactivity\n      tools:replace=\"android:theme\"\n      android:name=\"com.facebook.accountkit.ui.AccountKitActivity\"\n      android:theme=\"@style/LoginThemeYellow\" /\u003e\n\n\u003c/manifest\u003e\n```\n\n## Troubleshooting\n\n### Missing android.support.v4.content\n\n```bash\nerror: package android.support.v4.content does not exist\nimport android.support.v4.content.ContextCompat;\n```\n\nThis is because of the breaking change introduced in react-native **0.60.0** and therefore in our **2.0.0**.\n\nIn order to fix the issue you should either upgrade to react-native **0.60.0** of use the **1.2.0** of this library\n\nIssue: [#196](https://github.com/underscopeio/react-native-facebook-account-kit/issues/167)\n\n\n### I have problems running the example\u003c/summary\u003e\n\nIf you have trouble running any example try the following:\n\n1.  Move the example out of the repo\n2.  Remove this package local dependency from `package.json`\n    ```diff\n    -    \"react-native-facebook-account-kit\": \"file:../..\"\n    ```\n3.  Run \u003ccode\u003eyarn add react-native-facebook-account-kit\u003c/code\u003e\n\n4.  Re-run \u003ccode\u003ereact-native run-android\u003c/code\u003e or \u003ccode\u003ereact-native run-ios\u003c/code\u003e\n\n### A system issue occured, Please try again\" when sending SMS\n\n1. Check your `FacebookAppID` and `AccountKitClientToken` on iOS `Info.plist` and Android `strings.xml` are correct\n\n2. If you have enabled the **client access token flow in fb account kit dashboard**, then `responseType` should be set to `code` when calling `configure`\n\n```javascript\n// Configures the SDK with some options\nRNAccountKit.configure({\n    responseType: 'code'\n    ...\n})\n```\n\nIssue: [#68](https://github.com/underscopeio/react-native-facebook-account-kit/issues/68)\n\n### iOS only: Login screen doesn't show up\n\nIn some cases, if you implement the Login button in a presented Modal screen, you need to add `viewControllerMode: 'show'` into the configuration.\n\n```javascript\n// Configures the SDK with some options\nRNAccountKit.configure({\n    viewControllerMode: 'show'\n    ...\n})\n```\n\nIssue: [#167](https://github.com/underscopeio/react-native-facebook-account-kit/issues/167)\n\n### I cannot integrate the library with RN versions \u003c 0.40.0\n\nModify the `android/build.gradle` file to override the `com.facebook.android:account-kit-sdk` library with `com.facebook.android:account-kit-sdk:4.15.0` and the `compileSdkVersion` and `buildToolsVersion` as depicted below\n\n```java\nsubprojects { subproject -\u003e\n    afterEvaluate{\n        dependencies {\n            compile ('com.facebook.android:account-kit-sdk:4.15.0'){\n                force = true\n                exclude group: 'com.parse.bolts', module: 'bolts-android';\n                exclude group: 'com.parse.bolts', module: 'bolts-applinks';\n                exclude group: 'com.parse.bolts', module: 'bolts-tasks';\n            }\n        }\n\n        if(subproject.name == 'react-native-facebook-account-kit') {\n            android {\n                compileSdkVersion 23\n                buildToolsVersion \"23.0.3\"\n            }\n        }\n    }\n}\n```\n\n## License\n\nLicense is MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNubescope%2Freact-native-facebook-account-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNubescope%2Freact-native-facebook-account-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNubescope%2Freact-native-facebook-account-kit/lists"}