# Facebook Login

To start working with facebook login, you must first create a facebook app in your facebook developer console.

To create a facebook app, click on this link: <https://developers.facebook.com/apps/create/>

* On the create app page, select **Consumer** as the type of the app and click on **Next**

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/4X6LjIg8xgiLMBoNfL7M/image.png)

* On the details page fill in your **App Display name** and **support email.** Then click on **Create App**

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/0XvJcg17lqP2Msdyd8dt/image.png)

* Now you have successfully created a facebook app.

## Android Setup

Go to [Facebook Login for Android - Quickstart](https://developers.facebook.com/docs/facebook-login/android/?locale=en)

### Select an App or Create a New App

![](https://user-images.githubusercontent.com/15864336/98711287-cedfdc80-2352-11eb-9eb3-761f43ba4f7e.png)

1. Skip the step 2 (Download the Facebook App)
2. Skip the step 3 (Integrate the Facebook SDK)

### &#x20;<a href="#manifest" id="manifest"></a>

### Edit Your Resources and Manifest <a href="#manifest" id="manifest"></a>

1. Edit **Your Resources and Manifest** add this config in your android project
   * Open your `/android/app/src/main/res/values/strings.xml` file, or create one if it doesn't exists.
   * Replace **`YOUR APP NAME`** with your actual app name&#x20;
   * Add the following (replace `{your-app-id}` with your facebook app Id):

     ```xml
     <string name="app_name">YOUR APP NAME</string>
     <string name="facebook_app_id">{your-app-id}</string>
     <string name="fb_login_protocol_scheme">fb{your-app-id}</string>
     ```

### Associate Your Package Name and Default Class with Your App

In this step make sure your enter your application id/package id. Then the enter your package/application id in the second input field with **.MainActivity.** As your can see below, our application id is **online.edentech.fuodz** and the second input field **online.edentech.fuodz.MainActivity.**&#x20;

Then click on **Save**

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/TO3zwtBLXOjkszgQxs9i/Screenshot%202021-11-28%20at%2010.25.20%20AM.png)

### Provide the Development and Release Key Hashes for Your App

![](https://user-images.githubusercontent.com/15864336/98712555-73aee980-2354-11eb-9c25-c1ef3760fce1.png)

To find info to how to generate you key hash go to <https://developers.facebook.com/docs/facebook-login/android?locale=en_US#6--provide-the-development-and-release-key-hashes-for-your-app>

> Note: if your application uses [Google Play App Signing](https://support.google.com/googleplay/android-developer/answer/9842756?visit_id=637406280862877202-1623101210\&rd=1) then you should get certificate SHA-1 fingerprint from Google Play Console and convert it to base64

> You should add key hashes for every build variants like release, debug, CI/CD, etc.

**Note:** Skip/Ignore the rest steps on the page

## iOS Setup

* Go to [**Facebook Login for iOS - Quickstart** ](https://developers.facebook.com/docs/facebook-login/ios)and select or create your app.

  ![](https://user-images.githubusercontent.com/15864336/98708293-0056a900-234f-11eb-9975-b75ca08b6470.png)
* **Skip** the step 2 **(Set up Your Development Environment)**.
* In the step 3 (Register and Configure Your App with Facebook) you need add your `Bundle Identifier` This is the same as your application/package id. Then click on **Save.**

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/0wd90t2RZgdZGWHOyjkB/image.png)

* You can find your `Bundle Identifier` in Xcode (Runner - Target Runner - General)

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/eY4jzekLE2uudy3OZ7GK/image.png)

### Setup iOS Info.plist

In the Step 4 you need configure your `Info.plist` file inside `ios/Runner/Info.plist`

![](https://user-images.githubusercontent.com/15864336/98708650-66433080-234f-11eb-81c6-2297b9e6f7a7.png)

From Xcode you can open your **`Info.plist`** as **`Source Code`** .

Under the **CFBundleURLSchemes** section replace `{your-app-id}` with your facebook app Id

Now at the very bottom of the Info.plist file change the following with values from your facebook app.

1. APP-ID - same as facebbok app id
2. CLIENT-TOKEN - This value can be found under **Settings** > **Advanced** > **Client Token** in your Facebbok App Dashboard.
3. APP-NAME - Use your app name

## Firebase Setup

**Note:** You must have completed setup of facebook login for android/ios setup to be able to setup facebook login on firebase console.

You need to enable **Facebook** sign-in on your firebase project. Login to your firebase console and select your project.

1. Then select **Authentication.**
2. On the authentication page select **Sign-in methods.**&#x20;
3. Then select **Add New provider.**&#x20;
4. After select **Facebook** in the list of auth providers.
5. Enter your Facebook App id and secret
6. Click the enable switch to enable it
7. Then save

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/wIS2SN3E4jzQwOlNggBP/image.png)

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/0w3ihXRIdCzMolLvKVG2/image.png)

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/Q1bXQik49gCX2U7oD0XM/image.png)