{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/how-to/enable-facebook-login/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"Enable Facebook login","slug":"enable-facebook-login","updated":"2020-11-16T00:00:00.000Z","category":"how-to-users-and-authentication","ingress":"In this how-to guide we'll take a look at the process of setting up Facebook login for your marketplace. It will allow your users to sign and log in by using their Facebook accounts.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note, that Facebook login requires ftw-daily version\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/releases/tag/v6.4.0","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"6.4.0"}]},{"type":"text","value":" or\nftw-hourly version\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-hourly/releases/tag/v8.4.0","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"8.4.0"}]},{"type":"text","value":"."}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"Updating from upstream not an option?"},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Has your marketplace UI application diverged from ftw-daily or\nftw-hourly so much that pulling upstream updates to enable Facebook\nlogin is not a feasible option? In that case, take a look at the\nfollowing change set in ftw-daily for reference on how to implement\nFacebook login in the front end:\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/pull/1366","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Facebook login in Github"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Enabling Facebook login consists of three main steps:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Create a Facebook app"}]},{"type":"text","value":" Facebook app is what connects your\nmarketplace to Facebook and let's Facebook know that users from your\nmarketplace are allowed to authenticate themselves using the Facebook\nlogin."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Create an identity provider client in Flex Console"}]},{"type":"text","value":" Identity\nprovider (IdP) client is what let's Flex know that the users of your\nmarketplace are allowed to use the Facebook app you created to log\ninto your marketplace."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Configure FTW"}]},{"type":"text","value":" A few attributes from the Facebook app will need to\nbe configured to FTW so that FTW can perform the login flow via\nFacebook."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"configure-a-facebook-app","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configure-a-facebook-app","ariaLabel":"configure a facebook app permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Configure a Facebook app"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First thing to do is to create a Facebook app for your marketplace.\nCreate a Facebook app by following these steps:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Go to "},{"type":"element","tagName":"a","properties":{"href":"https://developers.facebook.com/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://developers.facebook.com/"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Log in. In case you do not have a Facebook account you will need to\nsign up."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click on the \"My Apps\" dropdown in the top right corner of the\nheader."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click \"Create App\". A popup asking \"How are you using your app?\"\nshould appear."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Choose the last option: \"For Everything Else\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Type your App Display Name. For example: \"My Marketplace\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Enter the contact email of your choice."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click \"Create App ID\". You may have to answer a security check."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Don't select a Product or Recommended Product but instead in the left\nhand menu, click \"Settings\" then \"Basic\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In \"App Domains\", add all the domains from which you want the\nFacebook login to work, i.e. all your marketplace domains. Add the\ndomains without any subdomain, for example www, so if your\nmarketplace runs in "},{"type":"element","tagName":"a","properties":{"href":"https://www.example.com","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://www.example.com"}]},{"type":"text","value":", add example.com."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Scroll all the way to the bottom and click \"+ Add Platform\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select \"Website\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In \"Site URL\", add your full marketplace's URL with https and\npossibly www or the subdomain, for example: "},{"type":"element","tagName":"a","properties":{"href":"https://www.example.com","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://www.example.com"}]},{"type":"text","value":".\nNote that the Site URL needs to have the same domain that you added\nto App Domains, or one of them if you added many."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"You might also need to add your privacy policy URL (in some cases\nthis is not needed). If so, please add it by typing the URL to your\nprivacy policy into the \"Privacy Policy URL\" field. In FTW the\npolicy is by default located in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"/privacy-policy"}]},{"type":"text","value":" path, so the\nURL could then be "},{"type":"element","tagName":"a","properties":{"href":"https://www.example.com/privacy-policy","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://www.example.com/privacy-policy"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click \"Save Changes\" at the bottom right."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now your app basic setting should look like this:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/9043b340b46471a8b8d9722349b49739/53fb6/fb-app-settings.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 71.69811320754718%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpUlEQVQ4y4VTi46jMAzk/79vtTqddNKqVwqEV0LeCWFWNgtq97Y9S6MgGDsztqm0sVDLghgjQoyIKSHGR6ScMc8SnejhffiXkxJCiMyrrPMYxpETtDYw1kEbx+f+bBFCQn1r8fb+C00rQDkHZz89ZqngQ0DlnIcQPaRS2LYNpZQfQcoIFM84Zdt2hW0nME4S6/qEWDaEELAsGs651wXlYvH2+4r3Pw0G6XAfh2IKKSWu9Q1dJ7hXx3fmMG9/rujGYRjQ9z2UUtDGsBJj7cPN1jkotTC8918D2Yd474R7SAMhTPPMZHpHDT6I21dB5z3WUpDXFeuJcjphhZRI05KLgbX+tHhvm2IYRlzrhk9akZwzUkpIKbOyI6oQE69B3UlMUrOV+/4cBamIMWZfLWMZWmteq7yWM6ci4qINlCZLkS18j6Poqzg4Fd3YNC3GaeKGS7XAWsd9pMGQre+Kf8KpkCzWt4b/gGGcME7zSwX/i4rW5OPjgsvlL0Tfo+s6hhACbdtCDBI+Uhse1TwtaFxENzmIyUJpv+9WjGyVTh9XxFwebL8q+AlmQUW+NS72xgAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/9043b340b46471a8b8d9722349b49739/82e29/fb-app-settings.webp 159w","/docs/legacy/static/9043b340b46471a8b8d9722349b49739/ef33f/fb-app-settings.webp 318w","/docs/legacy/static/9043b340b46471a8b8d9722349b49739/f1837/fb-app-settings.webp 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/9043b340b46471a8b8d9722349b49739/8b9b5/fb-app-settings.png 159w","/docs/legacy/static/9043b340b46471a8b8d9722349b49739/fa108/fb-app-settings.png 318w","/docs/legacy/static/9043b340b46471a8b8d9722349b49739/53fb6/fb-app-settings.png 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/9043b340b46471a8b8d9722349b49739/53fb6/fb-app-settings.png","alt":"Facebook app settings","title":"Facebook app settings","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/1efcc/fb-website-settings.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 17.61006289308176%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAYklEQVQY052OUQoCMRBDe/+LKoJtoe24zWznCQv6IwuygUcghJA05UyJOXW45H/z6W/b5HZ/kEsl8aM4gdM8IjB7IYn0zJlSK6UUWu+stS4Q3ztpDDuGWusMM9wdXUGO+84bLUE6xnFOeo4AAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/82e29/fb-website-settings.webp 159w","/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/ef33f/fb-website-settings.webp 318w","/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/f1837/fb-website-settings.webp 635w","/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/e961d/fb-website-settings.webp 720w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/8b9b5/fb-website-settings.png 159w","/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/fa108/fb-website-settings.png 318w","/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/53fb6/fb-website-settings.png 635w","/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/1efcc/fb-website-settings.png 720w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/4d9ec1519e9f6c5cf0d2e30f361edc04/53fb6/fb-website-settings.png","alt":"Facebook Website settings","title":"Facebook Website settings","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":16},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In the left hand menu, click \"PRODUCTS +\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Look up \"Facebook Login\" form the products list and click \"Set up\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select \"Web\" (www) in the list of options."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Verify that your \"Site URL\" is correct and click \"Save\" then\n\"Continue\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"You can leave the 2nd step after setting the site URL as it is and\nin the left hand menu, click \"Facebook Login\" then \"Settings\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Under \"Client OAuth Settings\" check that the following settings are\ncorrect:\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Client OAuth Login: Yes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Web OAuth Login: Yes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Force Web OAuth Reauthentication: No"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Use Strict Mode for Redirect URIs: Yes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Enforce HTTPS: Yes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Embedded Browser OAuth Login: No"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Login from devices: No"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In the \"Valid OAuth redirect URIs\" field add your marketplace\naddress followed by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"/api/auth/facebook/callback"}]},{"type":"text","value":", for example:\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.example.com/api/auth/facebook/callback","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://www.example.com/api/auth/facebook/callback"}]},{"type":"text","value":". This endpoint\ncan be different if you have modified the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"/api"}]},{"type":"text","value":" endpoints in FTW."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Your Facebook login settings should now look like this:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/1efcc/fb-login-settings.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 55.9748427672956%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABYklEQVQoz4VRiUrEMBTc//88ERQRcWWPHkma5r7akZe1dbtSfDCQ0pfJHIdBjmBcoGccznnMAHIpKDvIC/IDSkEIEQdjHbwPUEqDiwFKKaScdwkXzPO8AU3OGQfrAlKeYK1F2/XoeoZxVBiVghx/IEeIgSBBjuj//WwIjfOIqcAYC8Z5JYopIaW0LtI4HxFiwrVp0TRddTQqjRDCulMJ6fLNf4BzDsZaaG2gjcE0TasCOtMuYwJ9z6pqAsW1IaS8SA3ld7k2dZnAGK8PLUOE1roayRKLHInQbwmdv2WojUXfcwgx1KzoQkoZZZpqCURISpfzboY+BJSSYYwB5xxyGGpBMQbknBBjrCrI2j2WB/60LKTG0+sRz29feHk/43gR+DwLfJxYhQ95VXGPqea64EZOjg4hJEhl0fYCp2uH06XFIDWUpoICcplWgvkfpFpKyvWDbFJ+1By1TfIfM9qbX8sF39l8Wc4uRvXYAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/82e29/fb-login-settings.webp 159w","/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/ef33f/fb-login-settings.webp 318w","/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/f1837/fb-login-settings.webp 635w","/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/e961d/fb-login-settings.webp 720w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/8b9b5/fb-login-settings.png 159w","/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/fa108/fb-login-settings.png 318w","/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/53fb6/fb-login-settings.png 635w","/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/1efcc/fb-login-settings.png 720w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/21a57392ab8da1361a335e7f1b5f6411/53fb6/fb-login-settings.png","alt":"Facebook login settings","title":"Facebook login settings","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":23},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click \"Save Changes\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Your Facebook app is now ready for development. Note that while the\napp is in development mode only you and other app admins can use it\nto log in. When you are ready to take the app live, turn the top\nswitch from \"In development\" to \"Live\" in the top bar. Confirm the\nchoice when asked. You may have to select a category and/or answer a\nsecurity check. Your app doesn't require an approval from Facebook\nso you don't have to go through the submission process. In the left\nhand menu, click \"Dashboard\". Your app should be public and a green\ndot should be displayed."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Your Facebook app is now created and configured. The next step is to set\nup an identity provider client in Flex Console."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"configure-an-identity-provider-client-in-console","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configure-an-identity-provider-client-in-console","ariaLabel":"configure an identity provider client in console permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Configure an identity provider client in Console"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now that your Facebook app is all set up, a corresponding "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"identity\nprovider client"}]},{"type":"text","value":" will need to be configured for your marketplace. This\nwill tell Flex that your users will be allowed to log into your\nmarketplace using the Facebook app you just created. The information\nstored in an IdP client is used to verify a token obtained from Facebook\nwhen a user logs in."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"An identity provider client can be configure with the following steps:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Go to\n"},{"type":"element","tagName":"a","properties":{"href":"https://flex-console.sharetribe.com/social-logins-and-sso","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Social logins & SSO in Console"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Under "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Identity provider clients"}]},{"type":"text","value":" click \"+ Add new\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Set \"Client name\". This can be anything you choose, for example,\n\"Facebook login\". In case you need to create multiple Facebook apps,\nthis will help you make a distinction between the corresponding IdP\nclients."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Set the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Client ID"}]},{"type":"text","value":". This value is the App ID from your Facebook app.\nYou can see the value under "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Settings > Basic"}]},{"type":"text","value":" in the Facebook app\nview."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Set the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Client secret"}]},{"type":"text","value":". This value is the App secret in your\nFacebook app. You can see the value under "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Settings > Basic"}]},{"type":"text","value":" in the\nFacebook app view. You will need to authenticate to reveal the secret\nvalue."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The IdP client config should now look something like this:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/1efcc/add-idp-client.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 97.48427672955974%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAABYlAAAWJQFJUiTwAAAB/ElEQVQ4y6WUW26bQBSGvZsuoE9966L6FNuq1KbKDpJGBfulygKat+4hdSvwLQ02N+NL4jbhMswAw1/NYFsmoaRJD/p04Af+OTOHoaEoCuI4BiFE5n0IKevivIowDGVWFBWNTqeDbXDOS3kbeZ6jLtI0le90u100VFWVYpIk6PV6GI/HmEwm0HVdMhwOYRgGNE2D7/u7AcUg+4hQ1Y4w7JSrQb6rav9hod83qTUUFbqOi9ViCW/mIef106yKkiFLGMy5g6lnwfRsOCsPhFNEWQGpYKvzqgqFGOcJSM5KRv8Cz/lDQ9Gpm+U11qsb8CTDc2JjWHSZMgrtcoC+McKVM5VcB79kxWEWP71C0UWGTEKRIuL0UaNawyzNcLv+jcgPJcj+s8tiyvrPAX6MdGjjPgzXhL1wMZ1ZsBaOxJzbsJczWHMH3nqx63ZlhUIMEwKfRQiSCHc03BDglvi4iwP4m2txLjRS99k8J4SP2CWVFZa22/2jQvvrGopfDmMpKE1AKdvkahgrEM9dBXP0fQcD38XQdxHQGKqyv4a8oJjGQ8S9KIrBaAqaZXg9OsTLQQuvhm/xQnuDXmTjrPsZjePjE9i2A9O0H2U6tYpsWjj7/hWnF1/w6eIcyrdz6JNLfDw5RaPVaqPZbOHgoPkkPrTe4ah9iKP2e0m72Ybw+gNb43u2INluSwAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/82e29/add-idp-client.webp 159w","/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/ef33f/add-idp-client.webp 318w","/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/f1837/add-idp-client.webp 635w","/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/e961d/add-idp-client.webp 720w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/8b9b5/add-idp-client.png 159w","/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/fa108/add-idp-client.png 318w","/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/53fb6/add-idp-client.png 635w","/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/1efcc/add-idp-client.png 720w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/211fdb5cfd735f0ad833e30f0cc18532/53fb6/add-idp-client.png","alt":"Add identity provider client","title":"Add identity provider client","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":6},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click \"Add client\" and your identity provider client is ready."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"configure-ftw","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configure-ftw","ariaLabel":"configure ftw permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Configure FTW"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Last step to enabling Facebook login is to configure FTW with the values\nthat you used to add an identity provider client in Console. Add the\nfollowing environment variables to FTW:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_FACEBOOK_APP_ID"}]}]},{"type":"text","value":" The App ID of your Facebook app.\nCorresponds to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"client ID"}]},{"type":"text","value":" of the identity provider in Console."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"FACEBOOK_APP_SECRET"}]}]},{"type":"text","value":" The App Secret of your Facebook app.\nCorresponds to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"client secret"}]},{"type":"text","value":" of the identity provider in Console."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more information on FTW environment variables, see the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/ftw-env/"},"children":[{"type":"text","value":"FTW Environment configuration variables"}]},{"type":"text","value":" article."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"That is it. Setting these environment variables will make FTW render the\nFacebook login button in signup and login forms."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Configure a Facebook app","depth":2},{"value":"Configure an identity provider client in Console","depth":2},{"value":"Configure FTW","depth":2}]}},"pageContext":{"slug":"enable-facebook-login","category":"how-to-users-and-authentication"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}