# Connecting Facebook Login

To let shoppers sign up with a Facebook account, you first register your service with Facebook and receive two values. They are the App ID and the App secret.

This page covers the order in which you receive those two values. Putting the values you received into WEEGLOO is covered in [Putting the values you received into WEEGLOO](#back-to-weegloo).

## The address to copy first {#redirect-uri}

When a shopper finishes logging in at Facebook, Facebook sends the result back to a set address. You have to register this address with Facebook, so copy it first. You paste it in step 3.

Pick your *Space* below and you get the address with the identifier filled in.

```weegloo-redirect-uri
{
  "template": "https://auth.weegloo.com/v1/spaces/{spaceId}/login/oauth2/code/{provider}",
  "provider": "facebook"
}
```

:::note
If you would rather fill it in yourself, put the identifier of your *Space* in the `{spaceId}` slot. Open that *Space* in the content studio and look at the browser address bar. The value that comes after `/spaces/` is the identifier.

This address is not your site's address. It is where WEEGLOO receives the login result. So it is settled now even if you have not built your site yet. If you turned on **Facebook** in the content studio, the same address appears in **Step 1**, so you can copy it from there.
:::

## Getting the two values from Facebook {#get-credentials}

Sign in with your Facebook account, then work through the four steps below in order. What you do here costs nothing.

::::step{title="Creating an app"}
You go through five screens in order: **App details**, **Use cases**, **Business**, **Requirements**, and **Overview**.

1. Open the app list screen (<https://developers.facebook.com/apps>).
2. Click **Create App**.

   ![The Apps screen with no apps at all. The No apps yet notice and the Create App button are in the middle](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-01-apps-empty.webp)

3. In **App name**, enter a name you will recognize later (for example, `Cozy Closet`).
4. In **App contact email**, enter the address that will receive inquiries.
5. Click **Next**.

   ![The App details step of the step-by-step screen. The App name box and the App contact email box are there, with the Next button at the bottom right](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-02-app-details.webp)

6. Check **Authenticate and request data from users with Facebook Login**.
7. Click **Next**.

   ![The Use cases step of the step-by-step screen. Authenticate and request data from users with Facebook Login is checked among the six items](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-03-use-case.webp)

8. Choose the **I don’t want to connect a business portfolio yet.** option.
9. Click **Next**.

   ![The Business step of the step-by-step screen. The I don’t want to connect a business portfolio yet. option and the notice that there is no business are visible](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-04-business.webp)

10. Read what is on the **Requirements** screen and click **Next**. There is nothing to enter.

    ![The Requirements step of the step-by-step screen. Business verification and App Review are listed under Publishing requirements](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-05-requirements.webp)

11. On the last screen, **Overview**, check what you have chosen so far and create the app.

:::note
**App contact email** is the address Facebook uses when it contacts you about the app. As the screen explains, you can add a business portfolio later.
:::
::::

::::step{title="Adding the email permission"}
When a shopper logs in with Facebook, WEEGLOO receives the email along with it and puts it on the member. Facebook does not hand the email over unless you add the `email` permission, so do not skip this step.

1. In the left menu, click **Use cases**.
2. Click **Customize** on the Facebook Login item.
3. On the left, click **Permissions and features**.
4. Click **+ Add** on the `email` row.

   ![The Permissions and features list. The email row has nothing in Status and a + Add button in Action, and the public_profile row shows Ready for testing](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-06-email-missing.webp)

5. Check that **Status** is **Ready for testing** on both the `email` row and the `public_profile` row.

   ![The same list. Status is Ready for testing on both the email row and the public_profile row](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-07-email-added.webp)

:::note
In the same *Space*, one email can sign up only once.
:::
::::

::::step{title="Registering the login address"}
The OAuth that appears on the screens is the name of the method that lets people log in with a Facebook account.

1. On the left, click **Settings**.
2. In the **Valid OAuth Redirect URIs** box, paste the address you copied in [The address to copy first](#redirect-uri).
3. Click **Save Changes**.

   ![The Settings screen. Redirect URI Validator is at the top, and the Valid OAuth Redirect URIs box is in Client OAuth settings below](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-08-redirect-uri.webp)

:::note
The only thing to enter here is the single address you copied above. In **Redirect URI Validator** at the top of the same screen, you can put an address into **Redirect URI to check** and click **Check URI** to check that address.
:::
::::

::::step{title="Copying the App ID and the App secret"}
The two values are on the app's basic settings screen.

1. In the left menu, click **App settings**.
2. Click **Basic**.
3. Copy the value written in **App ID**.
4. Click **Show** to the right of **App secret**.
5. Copy the value that appears.

   ![The Basic screen under App settings. The App ID value is visible, and App secret is hidden behind dots with a Show button to its right](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-09-credentials.webp)

:::note
**App ID** stays on this screen, and you can see **App secret** again whenever you click **Show**. Even if you leave the screen before writing the values down, you do not have to create new ones. **App secret** is a secret value, though, so do not tell it to anyone, and do not write it down anywhere public.
:::

:::note
A red **Currently ineligible for submission** banner may appear at the top of this screen. It is a notice that **App icon**, **Privacy policy URL**, and **Category** are empty. Those three items are needed when you submit for review, and they are not needed for connecting login right now.
:::
::::

## Every shopper can log in only after you pass the review {#app-review}

The app you just created has not been through review yet. Before it passes review, only the account that created the app can log in.

The WEEGLOO connection does not have to wait for the review. Once you put the two values in, login works right away.

To test it the way a shopper would, expand **App roles** in the left menu, click **Test users**, and create a test account with **Create test users**.

![The Test users screen. The Create test users button is next to the Facebook Accounts count](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-11-test-users.webp)

When you are ready to open it to every shopper, submit from **App Review** under **Review**. This screen lists the `email` and `public_profile` covered earlier as **Not submitted**.

![The App Review screen under Review. email and public_profile are listed under Not submitted](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/facebook-10-app-review.webp)

The materials you need and the review criteria are in the [Meta docs](https://developers.facebook.com/documentation/resp-plat-initiatives/appreview).

## Putting the values you received into WEEGLOO {#back-to-weegloo}

Now you have the two values in hand. Here is which box in the content studio each of the two values goes into.

| Facebook screen | Content studio |
|---|---|
| **App ID** | **App ID** |
| **App secret** | **App secret** |

From here the path splits depending on how you have been working so far.

If you were configuring this directly in the content studio, follow these steps.

1. Go back to turning on social login in [Service Member Login](/getting-started/core-concepts/service-users/service-login.md#turning-on-social-login).
2. Turn on **Facebook**.
3. Enter the App ID in the **App ID** box in **Step 2**.
4. Enter the App secret in the **App secret** box.
5. Click **Save**.

If you handed the integration to an AI agent and were told to go and get the values, paste the two values you received into the chat as they are and carry on with what you were doing. The agent handles the rest of the configuration from there.

## What to do next {#what-to-do-next}

- [Service Member Login](/getting-started/core-concepts/service-users/service-login.md): put the values you received into the content studio and finish the rest of the member login configuration.
- [Member Roles and Permissions](/getting-started/core-concepts/service-users/service-user-role.md): create the *ServiceUserRole* that decides what a signed-up member can see and use.
- [Auth API](/api/reference/auth-api.md): covers technical specifications such as the request format you need when wiring login into your own site's code.