# Facebook

{% hint style="info" %}
This documentation is a work in progress, and we welcome your feedback and suggestions. Please let us know if you have any questions or if there is anything else you would like to see included in the documentation.
{% endhint %}

Mainly there are 3 steps involved in having Facebook login integrated into your app.

1. **Create an app** in the [Facebook Developers Console](https://developers.facebook.com/) (Now it's renamed to "Meta for Developers")
2. **Link Facebook to CodeMash**. Here you need to enter the **App ID** and **Secret Key** you have received from the 1rst step. 
3. **Implement Facebook Sign-In** capability in your app.

## 1. Creating the Facebook app

You will need a Facebook project to connect to CodeMash.

* Go to the [Facebook developers console](https://developers.facebook.com/) and log in with your Facebook account.
* Once you logged in, go ahead and press the "My Apps" menu link and press the button "**Create App.**"
* When you create an app, you will be asked how the app will be used. If you just want to have Facebook login capability and get some useful user information to avoid the long onboarding process, choose the **"Consumer"** type. Otherwise, follow the original Meta [guidance](https://developers.facebook.com/docs/development/create-an-app/app-dashboard/app-types) for the right app type. 

<figure><img src="https://760328771-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LwSkuCpTNI_AerL8J2a%2Fuploads%2FQMLnphoZdjZhnTHIl5kj%2FScreenshot%202022-09-21%20at%2017.08.30.png?alt=media&#x26;token=5ff50d96-6e43-4372-b6b1-4b2858f32f58" alt=""><figcaption></figcaption></figure>

* Choose **Facebook login** and press the "**Set up**" button as it is shown in the image below.

<figure><img src="https://760328771-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LwSkuCpTNI_AerL8J2a%2Fuploads%2FTuyuGhKKNUL81jeoJR6s%2FScreenshot%202022-09-21%20at%2011.12.21.png?alt=media&#x26;token=923b4740-8c2d-4469-a132-d11e643cdc52" alt=""><figcaption></figcaption></figure>

* Under Products now you can see that the Facebook Login section appeared. Press "**Settings**" and enter **<https://api.codemash.io/v2/auth/facebook>** URL in the "Valid OAuth Redirect URIs" input field.&#x20;

<figure><img src="https://760328771-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LwSkuCpTNI_AerL8J2a%2Fuploads%2FTiYz3L3pCe6KLNX9U9Jk%2FScreenshot%202022-09-21%20at%2011.36.03.png?alt=media&#x26;token=f1d37b86-5b81-4d2d-8756-7d0befa186e8" alt=""><figcaption></figcaption></figure>

* For further integrations, you need to fetch the **App ID** and **App Secret**. In this case, click the **Settings -> Basic** menu item on the left side, and at the very top of the screen, you will see the App ID and App Secret. Copy it and follow the instructions provided below.&#x20;

<figure><img src="https://760328771-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LwSkuCpTNI_AerL8J2a%2Fuploads%2FrDkWt9xBIeTuMBKiea4K%2FScreenshot%202022-09-21%20at%2011.48.31.png?alt=media&#x26;token=8d869a62-9c2c-4ded-86d0-ac1c804668fc" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In Development mode, your app can only request data from users with an app role (**Roles** section). To request end-user data, your app must have Advanced Access permissions (**App Review -> Permissions and Features**) and be set to Live mode (you can see the **App Mode** switcher on the header of the Meta portal).

To publish your Facebook app and use it in production, you need at least the following:

* Select App Category in **Settings -> Basic**
* Add Privacy Policy Url (Don't have a website ready? You can write your Privacy Policy using Google Docs, make that document publicly available, copy and paste the URL of the document in **Settings -> Basic** section.&#x20;
* Add App Icon (512x512 or 1024x1024) in **Settings -> Basic**

As you have all the necessary information filled in, you can ask Facebook to approve your app (**App Review -> Requests**) and publish it for production use.
{% endhint %}

## 2. Link Facebook to CodeMash <a href="#id-2-connecting-to-codemash" id="id-2-connecting-to-codemash"></a>

Once you have created the app on the "Meta for Developers" portal, copy the **App ID** and **App Secret** to CodeMash.&#x20;

* Log in to the [Cloud portal](https://cloud.codemash.io) of CodeMash.&#x20;
* Navigate to your **Project > Membership > Settings**. Here select **Facebook**.
* In the opened screen enter the following:
  * **App ID** - enter your Facebook **App ID**.
  * **App Secret** - enter your Facebook **App Secret**.

<figure><img src="https://760328771-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LwSkuCpTNI_AerL8J2a%2Fuploads%2FzIP0eTsIvMDK7k2pXybj%2FScreenshot%202022-09-21%20at%2011.58.51.png?alt=media&#x26;token=160e3b7f-21df-42d9-8d30-e56f5d95286e" alt=""><figcaption></figcaption></figure>

* Other recommended fields to fill out (applicable to web scenarios only):
  * **Callback URL** - after a successful login, the user will be redirected to this URL.
  * **Logout URL** - after successful logout, the user will be redirected to this URL.
  * **Failure URL** - after failed login, the user will be redirected to this URL.

## 3. **Implement Facebook Sign-In** <a href="#id-3-google-api-access" id="id-3-google-api-access"></a>

### **3.1 Implement Facebook Sign-In on your website.**

To implement Facebook log-in on your website you need

1. Add a platform called **"website"** to the Facebook app.&#x20;
2. Add a login button to the website and call the CodeMash endpoint **<https://api.codemash.io/v2/auth/facebook>.** Try out our [**Live demo**](https://codesandbox.io/s/codemash-oauth-options-9g0cu2)

&#x20;Let's start with the platform.

* Go to **Settings -> Basic**
* Scroll down to the very bottom until you will find the "+ Add Platform" button
* Press the button and choose the **"Website"** platform

<figure><img src="https://760328771-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LwSkuCpTNI_AerL8J2a%2Fuploads%2FUPZv0XcR6ihdtmvneChW%2FScreenshot%202022-09-21%20at%2017.36.56.png?alt=media&#x26;token=af9a2afd-c7c8-459f-b526-61a311df0967" alt=""><figcaption></figcaption></figure>

* You only need to provide the URL of your Website which can actually be any URL.&#x20;

After registering your website on the Facebook Meta platform, it's time to implement a button that calls the right endpoint.&#x20;

{% hint style="success" %}
*<mark style="color:green;">**Try it out:**</mark>* As a reference, we created a [**Live demo**](https://codesandbox.io/s/codemash-oauth-options-9g0cu2) on the [CodeSandbox](https://codesandbox.io/) platform where you can play with OAuth logins.&#x20;
{% endhint %}

Go to the **CodeMash -> Membership -> Integrations -> Facebook** and try things like:

1. Different environments (Production, Development, Test)
2. Set Callback URL - where you should be redirected after successful login. The same goes when you logout - Logout URL or when a failure occurs - Failure Redirect URL

### 3.2 Implement Facebook Sign-In on ReactNative