# Facebook Sign-in configuration

Use this when you want to enable the **Facebook** button in an enrolment form.

Start with [Social sign-in](https://docs.thewalletcrew.io/enroll/enrolment-form/social-sign-in) to understand the user flow. Then come back here for the provider setup.

<div data-with-frame="true"><figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FvnsDtv3LEhfOUECEe4zj%2FFB-Social-Sign-In.png?alt=media&#x26;token=a710a23c-cc63-4303-b3ac-9b97e8335162" alt="FB-Social-Sign-In-Example" width="375"><figcaption><p>Connect with Facebook in an enrolment form example</p></figcaption></figure></div>

### Overview

#### What you'll set up

* A **Facebook App** with the Facebook Login product enabled.
* **Allowed OAuth redirect URIs** and **valid domains** for your enrolment form.
* The App ID stored in **The Wallet Crew** admin console.

#### Prerequisites

* Access to your brand's **Meta for Developers** account.
* Permission to create or manage **Facebook Apps**.
* The list of domains where your enrolment forms will run (prod + staging + dev + custom).

### Create the Facebook App

{% stepper %}
{% step %}

#### **Open the Meta Developer portal**

Go to the Meta for Developers Apps dashboard:

<p align="center"><a href="https://developers.facebook.com/apps" class="button secondary" data-icon="chevrons-right">Meta Apps Dashboard</a></p>
{% endstep %}

{% step %}

#### **Create a new App**

1. Click `Create App`.
2. Select use case: `Authenticate and request data from users` (or `Consumer` depending on your Meta dashboard version).
3. Set a name. Example: `neostore login`.
4. Complete the app creation wizard and confirm your developer account if prompted.
   {% endstep %}

{% step %}

#### **Add the Facebook Login product**

1. From your App dashboard, find the **Add a product** section.
2. Click `Set up` on **Facebook Login for Business** (or **Facebook Login**).
3. Choose `Web` as the platform.
4. Enter your website URL (e.g. `https://app.neostore.cloud`) and save.
   {% endstep %}

{% step %}

#### **Configure allowed domains and redirect URIs**

Navigate to **Facebook Login → Settings** in the left sidebar and configure the following:

**Valid OAuth Redirect URIs** — add one URI per environment:

* `https://app.neostore.cloud`
* `https://app-qa.neostore.cloud`
* `https://app-dev.neostore.cloud`
* Any **custom domain** you use for enrolment forms (add the exact origin).

**Allowed Domains for the JavaScript SDK** — add the same list of origins (scheme + host only, no paths).

Save your changes.

> **Note:** Unlike Google, Facebook requires both the redirect URI and the domain allowlist to be filled in.
> {% endstep %}

{% step %}

#### **Switch the App to Live mode**

1. In the top bar of the App dashboard, toggle the app from **Development** to **Live**.
2. If prompted, provide a **Privacy Policy URL** — this is required by Meta before going live.

> While in Development mode, only users listed as testers or developers on the app can sign in. Switch to Live so all users can authenticate.
> {% endstep %}
> {% endstepper %}

> **Info:** Facebook Sign-In for web uses only the **App ID**. It is safe to paste it in the admin console.

### Add the App ID in The Wallet Crew

1. Open **Social logins → Facebook** in the admin console.

<p align="center"><a href="https://admin.thewalletcrew.io/tenant/~/settings/social/facebook" class="button secondary" data-icon="chevrons-right">Social logins -> Facebook</a></p>

<div data-with-frame="true"><figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fnm1nrsgMYCtyQsjIxgyd%2Fimage.png?alt=media&#x26;token=3f38000d-09e0-4703-aef4-7b442c766b0f" alt="The Wallet Crew - Facebook Social Sign In configuration" width="563"><figcaption><p>The Wallet Crew - Facebook Social Sign In configuration</p></figcaption></figure></div>

2. Paste the **App ID** from Meta for Developers.
3. Pas the **App Secret** from Meta for Developers.&#x20;
4. Save.

### Enable Facebook on your enrolment form

Enable the provider in the enrolment form settings.

Go into `advanced configuration -> Layout`  Open the layout you want to activate social sign-in on and add these lines

<pre class="language-yaml"><code class="lang-yaml"><strong>signinOptions:
</strong>  providers:
    - type: facebook
</code></pre>

For more information see [Enrolment form](https://docs.thewalletcrew.io/enroll/enrolment-form).

### FAQ

<details>

<summary><strong>Do we need a Facebook App Secret?</strong></summary>

No. This setup uses the **App ID** only.

If you see an App Secret in Meta for Developers, don't paste it anywhere in Wallet Crew.

</details>

<details>

<summary><strong>Should we configure "Authorized redirect URIs" in Facebook?</strong></summary>

Yes — unlike Google, Facebook **requires** valid OAuth Redirect URIs to be explicitly listed.

Add each environment origin under **Facebook Login → Settings → Valid OAuth Redirect URIs**.

</details>

<details>

<summary><strong>What exactly must be added as an allowed domain?</strong></summary>

Add the **origin only**: `scheme://host` (and port if you use a non-standard one).

Examples:

* ✅ `https://app.neostore.cloud`
* ✅ `https://brand.example.com`
* ❌ `https://app.neostore.cloud/molia/mobile` (paths are not allowed)

</details>

<details>

<summary><strong>We use a custom domain. What should we do?</strong></summary>

Add your custom domain both to **Valid OAuth Redirect URIs** and **Allowed Domains for the JavaScript SDK** in the Facebook Login settings.

Use the exact domain users see in the browser. Example: `https://wallet.brand.com`.

</details>

<details>

<summary><strong>Why do we list prod, QA, and dev origins?</strong></summary>

Facebook validates the origin at runtime.

If a user hits QA but only prod is configured, Facebook rejects the sign-in.

</details>

<details>

<summary><strong>Where do we enable the Facebook button in the user journey?</strong></summary>

Provider setup is not enough. You must also enable Facebook on the enrolment form.

See [Social sign-in](https://docs.thewalletcrew.io/enroll/enrolment-form/social-sign-in) and [Enrolment form](https://docs.thewalletcrew.io/enroll/enrolment-form).

</details>