Skip to main content

Twitter provider setup for Users & Permissions

The present page explains how to setup the Twitter provider for the Users & Permissions feature.

Twitter configuration

Note

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

  1. Visit the Apps list page at https://developer.twitter.com/en/apps
  2. Click on Create an app button
  3. Fill the information (replace with your own ngrok url):
    • App name: Strapi Twitter auth
    • Application description: This is a demo app for Strapi auth
    • Tell us how this app will be used: - here write a message enough long -
  4. At the end of the process you should see your Application ID and secret, save them for later
  5. Go to you app setting and click on edit Authentication settings
  6. Enable 3rd party authentication AND Request email address from users
  7. Fill the information (replace with your own ngrok url):
    • Callback URLs: https://65e60559.ngrok.io/api/connect/twitter/callback
    • Website URL: https://65e60559.ngrok.io
    • Privacy policy: https://d73e70e88872.ngrok.io
    • Terms of service: https://d73e70e88872.ngrok.io

Strapi configuration

  1. Visit the User & Permissions provider settings page at http://localhost:1337/admin/settings/users-permissions/providers
  2. Click on the Twitter provider
  3. Fill the information (replace with your own client ID and secret):
    • Enable: ON
    • API Key: yfN4ycGGmKXiS1njtIYxuN5IH
    • Api Secret: Nag1en8S4VwqurBvlW5OaFyKlzqrXFeyWhph6CZlpGA2V3VR3T
    • The redirect URL to your front-end app: http://localhost:3000/connect/twitter/redirect

Your configuration is done. Launch the backend and the react login example application, go to http://localhost:3000 and try to connect to the provider you configured.