{"section":"tutorials","requestedLocale":"en","requestedSlug":"adding-client-id-and-client-secret-to-log-in-with-facebook","locale":"en","slug":"adding-client-id-and-client-secret-to-log-in-with-facebook","path":"docs/en/tutorials/authentication/authentication-basics/adding-client-id-and-client-secret-to-log-in-with-facebook.md","branch":"main","content":"To enable login via Facebook, in your VTEX Admin, go to **Account Settings > Authentication** and complete the **Client ID** and **Client secret** fields, as described in the [Configuring login with Facebook and Google](https://help.vtex.com/docs/tutorials/configuring-login-with-facebook-and-google) article.\n\n![Facebook OAuth EN](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/authentication/authentication-basics/adding-client-id-and-client-secret-to-log-in-with-facebook_1.PNG)\n\nTo get these credentials, follow the instructions below:\n\n1. [Create an app](#1-creating-an-app)\n2. [Configure Facebook Login in the app](#2-configuring-facebook-login-in-the-app)\n3. [Configure the app's basic settings](#3-configuring-the-apps-basic-settings)\n\n## 1. Creating an app\n\nTo begin, you need to create a Facebook application by following the steps below:\n\n1. Access the [Meta for Developers](https://developers.facebook.com/) website.\n2. Create a Facebook developer account.\n3. Once logged in, click **My Apps** in the top bar.\n4. Click `Create App`.\n5. Click **Allow people to log in with their Facebook account** from the options shown below.\n\n   ![2-login-fb-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/authentication/authentication-basics/adding-client-id-and-client-secret-to-log-in-with-facebook_2.png)\n\n6. Click `Next`.\n7. Enter the app name and the email address of the person in charge of the app in the fields illustrated below.\n\n   ![3-login-fb-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/authentication/authentication-basics/adding-client-id-and-client-secret-to-log-in-with-facebook_3.png)\n\n8. Click `Create app`.\n\n## 2. Configuring Facebook Login in the app\n\nThe next step is to set up the Facebook Login product in the app you created. To do this, follow the instructions below:\n\n1.\tClick **Products** in the side menu or the Meta for Developers **Dashboard**, as in the image below.\n\n   ![4-login-fb-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/authentication/authentication-basics/adding-client-id-and-client-secret-to-log-in-with-facebook_4.png)\n\n2. Click `Configure` and select `Settings`.\n\n   ![5-login-fb-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/authentication/authentication-basics/adding-client-id-and-client-secret-to-log-in-with-facebook_5.png)\n\n3. Set the options as in the image below:\n\n   ![Configuração URI OAuth Facebook EN](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/authentication/authentication-basics/adding-client-id-and-client-secret-to-log-in-with-facebook_6.png)\n\n   Insert the following URLs in **Valid OAuth Redirect URIs**, replacing `{{HOST_URL}}` with your store's base URL and `{{accountName}}` with your VTEX account name as described in the store's Admin:\n\n      * `https://vtexid.vtex.com.br/VtexIdAuthSiteKnockout/ReceiveAuthorizationCode.ashx`\n      * `https://{{HOST_URL}}/api/vtexid/pub/authentication/oauth/authorizationcode`\n      * `https://{{accountName}}.myvtex.com/api/vtexid/pub/authentication/oauth/authorizationcode`\n\n4. At the bottom of the page, click the `Save changes` button.\n\n## 3. Configuring the app's basic settings\n\nFinally, you must complete specific information about the app to finish the registration process. In this step, you’ll obtain the **Client ID** and **Client secret**. These will be used when configuring the Facebook login settings in the VTEX Admin. Follow the steps below:\n\n1.\tIn the Meta for Developers side menu, go to **App settings** and click **Basic:**\n\n   ![7-login-fb-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/authentication/authentication-basics/adding-client-id-and-client-secret-to-log-in-with-facebook_7.png)\n\n2. Copy the value from the **App ID** field. You must enter this value in the **Client ID** field when [configuring Facebook Login in the VTEX Admin](https://help.vtex.com/docs/tutorials/configuring-login-with-facebook-and-google).\n3. Under **App secret**, click the **Show** button, and then copy the value from the field. You must enter this value in the **Client secret** field when [configuring Facebook Login in the VTEX Admin](https://help.vtex.com/docs/tutorials/configuring-login-with-facebook-and-google).\n4. Add the link to your store's terms of service in the **Terms of Service URL** field.\n5. Under **App icon (1024x1024)**, add an icon of exactly 1024x1024 pixels and a transparent background for your app.\n6. Choose a **Category**. For stores, we recommend selecting **Shopping**.\n7. Below in this form, complete the **Data Protection Officer contact information** with the details of the company running the store.\n8. At the bottom of the page, click `Save changes`.\n\nOnce you’ve completed all these steps, use the **Client ID** and **Client secret** you obtained to configure Facebook Login in your store, as detailed in the [Configuring login with Facebook and Google](https://help.vtex.com/docs/tutorials/configuring-login-with-facebook-and-google) article."}