1. Create a Facebook App

1. Navigate to https://developers.facebook.com/apps/
2. Log in with your Facebook credentials if you are not logged in
3. Click on the Add a New App button
4. Fill Display Name and Contact Email
5. Click on blue Create App ID button
6. Select Integrate Facebook Login at the Select a Scenario page, then click Confirm.
7. Enter your domain name to the App Domains
8. Fill up the Privacy Policy URL. Provide a publicly available and easily accessible privacy policy that explains what data you are collecting and how you will use that data.
9. Click on Save Changes
10. In the left sidebar under the Products section, click on Facebook Login and select Settings
11. Click on Save Changes
12. In the top of the left sidebar, click on Settings and select Basic
13. Here you can see your APP ID and you can see your App secret if you click on the Show button. These will be needed in plugin’s settings.
14. Your application is currently private ( Status: In Development ), which means that only you can log in with it. In the top bar click on the OFF switcher and select a category for your App.
15. By clicking Confirm, the Status of your App will go Live.

2. App setup

1. After the App has been registered successfully, please log into your site
2. Click on Appearance -> Theme Options -> Register And Login
3. Scroll down to Facebook Login -> Complete all settings here
4. Click Save Changes
5. If you are using a Cache plugin, please flush the cache

3. Set up Android Facebook Login

Step 1: Under your Facebook account -> Click on Quickstart -> Android

Step 2: We will skip the first 2 steps by clicking Next button

Step 3: Tell Us about Your Android Project

It’s your Android Package name that you configured under app.json

“android”: {
“package”: “com.wiloke.Wilcity”,
“versionCode”: 18,
“permissions”: [ …
] }

Step 4: Add Facebook Release Hashes Key

To generate Hashes Key, please do the following steps:

1. Log into your https://play.google.com/apps/publish/signup/Google Play account
2. Go to your App area setting
3. From the admin sidebar, click on Release management -> App Signing
4. Copy SHA-1 certificate fingerprint, You will look like this SHA1: 95:…..:AB:6A, We should remove SHA1:, just keep the key after it 95:…..:AB:6A
5. Go to http://tomeko.net/online_tools/hex_to_base64.php
6. Paste the key that you copied at step 4 to Hex string field -> Click Convert button, You should receive a new string key looks like this MXxbVId….z3UaHRDc= in Output (base64) field -> It’s Facebook Hashes Key
7. Finally, Log into https://developers.facebook.com/  => Put the hashes key to Key Hashes field.

expo fetch:android:hashes

Setup iOS Facebook Login

Step 1: The same Android App, please click on Quickstart -> iOS

Step 2: Add your Bundle Identifier

Skip Set up Your development Environment step by clicking on Next button.

On Add your Bundle Identifier, please enter in your Bundle ID. You can find Bundle Identifier under app.json configuration

Finally, click on Save button and ignore the rest of steps

Step 3: Set up iOS Facebook Login in app.json

Open app.json file under wilcity-app folder. Put the following code to this file:

    "facebookAppId": "352107608666372",
    "facebookDisplayName": "iCare-Plus",
    "facebookScheme": "fb352107608666372"

It should look like this:

"facebookAppId": "352107608666372",
"facebookDisplayName": "iCare-Plus",
"facebookScheme": "fb352107608666372",
"ios": {
  "buildNumber": "1",
  "supportsTablet": true,
  "infoPlist": {
    "NSLocationAlwaysUsageDescription": "This app uses the location to show listings nearby you.",
    "NSLocationWhenInUseUsageDescription": "This app uses the location to show listings nearby you.",
    "NSCameraUsageDescription": "This app requires to access your photo library to show image on profile",
    "NSPhotoLibraryUsageDescription": "This app requires to access your photo library to show image on profile"
  },
  "bundleIdentifier": "vn.icare-plus"
},

Now, you can now test Facebook login on your iOS device.

Caution: From 4/20/2018, Facebook disabled user ID scope https://developers.facebook.com/blog/post/2018/04/19/facebook-login-changes-address-abuse/, which means We can’t get REAL Facebook customer ID anymore. When registering an account with Facebook, Wilcity will get the ID and then Update Facebook URL to Customer’s Profile based on this ID. Because of Facebook won’t allow getting the REAL ID  anymore, it will cause  “redirect to wrong Facebook URL” issue. To solve this issue, please follow these steps above:

1. Go to your Facebook App https://developers.facebook.com/apps/
2. Click on App Review -> Permissions and Features
3. Request user_link permission