Facebook provider for Users & Permissions
Using ngrok
Facebook doesn't accept localhost
urls.
Use ngrok
to serve the backend app.
ngrok http 1337
Don't forget to update the server url in the backend config file config/server.js
and the server url in your frontend app (environment variable REACT_APP_BACKEND_URL
if you use react login example app) with the generated ngrok url.
Facebook configuration
- Visit the Developer Apps list page
https://developers.facebook.com/apps/ - Click on Add a New App button
- Fill the Display Name in the modal and create the app
- Setup a Facebook Login product
- Click on the PRODUCTS > Facebook login > Settings link in the left menu
- Fill the information and save (replace with your own ngrok url):
- Valid OAuth Redirect URIs:
https://65e60559.ngrok.io/api/connect/facebook/callback
- Valid OAuth Redirect URIs:
- Then, click on Settings in the left menu
- Then on Basic link
- You should see your Application ID and secret, save them for later
Strapi configuration
- Visit the User Permissions provider settings page
http://localhost:1337/admin/settings/users-permissions/providers - Click on the Facebook provider
- Fill the information (replace with your own client ID and secret):
- Enable:
ON
- Client ID: 2408954435875229
- Client Secret: 4fe04b740b69f31ea410b9391ff3b5b0
- The redirect URL to your front-end app:
http://localhost:3000/connect/facebook/redirect
- Enable: