Skip to content

Latest commit

 

History

History
65 lines (39 loc) · 3.38 KB

facebook-auth.md

File metadata and controls

65 lines (39 loc) · 3.38 KB
Raw

Facebook Authentication

This project comes set up with react-native-fbsdk out of the box, allowing you to take full advantage of Facebook's native SDK. Example authentication code can be found in src/providers/Facebook.tsx.

As with all third party authentication providers you will need to configure your project details to use Facebook's SDK.

Configuration

Before you begin you will need to create a developer account at Facebook Developer Portal if you haven't done so already. Once you have your developer account set up:

  1. Go to Facebook Developer Dashboard and create a new app id.

  2. Click on Facebook Login to start the setup.

IOS

  1. Select iOS quickstart in Facebook Developer Dashboard

  2. Adding FBSDKLoginKit CocoaPod is not required as auth kit already includes it.

  3. Add your bundle ID when prompted and click continue.

  4. If you want to allow users to sign in via notifications enable single sign on.

  5. You will be given code snippets to add to your Info.plist file. To add them:

    1. Open your .xcworkspace project via XCode.
    2. Locate your Info.plist file and right click: Open As -> Source Code. xcode-plist
    3. Paste in your url type details snippet. xcode-url-schema
    4. Any other Info.plist config snippets have already been pre-configured.
    5. NOTE: You don't need to add -ObjC flag to your project as all React Native apps already include it.

  6. The "Connect AppDelegate" step is not required as auth kit already includes it.

Android

  1. Select Android quickstart Facebook Developer Dashboard.

  2. You don't need to download SDK, everything is already pre-configured

  3. Fill in your app details.

  4. Generate development key hash (as instructed in Facebook Developer Dashboard).

  5. Add the generated resources to your project, you only need to update android/app/res/values/strings.xml everything else is already included. You can perform global search for <!-- [android] facebook_app_id --> and <!-- [android] fb_login_protocol_scheme --> comments to find exact places where these details should be placed. android strings

  6. The rest of the native implementation is already pre-configured.

Firebase

Once iOS & Android have been configured, open the Facebook Developer Dashboard and Firebase Console.

  1. In Firebase Console go to Authentication > Sign In Method and enable Facebook. You will be prompted to enter your App ID and App Secret: firebase-console

  2. Go to your Facebook Developer Dashboard and select your app, then go to Settings > Basic. Here You will find your App ID and App secret. Copy these and add them in your Firebase Console: facebook-appid-secret

  3. In the Firebase Console, copy the oAuth redirect url and go back to Facebook Developer Dashboard, here choose Facebook Login > Settings and paste oAuth redirect url in Valid oAuth Redirect URL's field: facebook-oauth-redirect