Skip to main content

Instagram 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.

Instagram 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 an Instagram product
  • Click on the PRODUCTS > Instagram > Basic Display link in the left menu
  • Then click on the Create new application button (and valid the modal)
  • Fill the information (replace with your own ngrok url):
    • Valid OAuth Redirect URIs: https://65e60559.ngrok.io/api/connect/instagram/callback
    • Deauthorize: https://65e60559.ngrok.io
    • Data Deletion Requests: https://65e60559.ngrok.io
  • On the App Review for Instagram Basic Display click on Add to submission for instagram_graph_user_profile.
  • 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 Instagram provider
  • Fill the information (replace with your own client ID and secret):
    • Enable: ON
    • Client ID: 563883201184965
    • Client Secret: f5ba10a7dd78c2410ab6b8a35ab28226
    • The redirect URL to your front-end app: http://localhost:3000/connect/instagram/redirect