Users & Permissions providers#

Configure OAuth and OAuth2 providers for Strapi's Users & Permissions authentication feature, with setup guides for common providers like GitHub, Google, and Auth0, plus instructions for creating custom providers.

Strapi comes with a predefined set of built-in providers for the Users & Permissions feature. The present page explains how the login flow works, how to set up the server URL, and list many examples for common 3rd-party providers.

If you're looking to create your own custom provider, please refer to the dedicated guide.

Understanding the login flow#

and allow you to use OAuth and OAuth2 providers to enable authentication in your application.

For a better understanding, review the following description of the login flow. The example uses github as the provider but it works the same for other providers.

Let's say that:

• Strapi's backend is located at: strapi.website.com, and
• Your app frontend is located at: website.com

1. The user goes on your frontend app (https://website.com) and clicks on your button connect with Github.
2. The frontend redirects the tab to the backend URL: https://strapi.website.com/api/connect/github.
3. The backend redirects the tab to the GitHub login page where the user logs in.
4. Once done, Github redirects the tab to the backend URL:https://strapi.website.com/api/connect/github/callback?code=abcdef.
5. The backend uses the given code to get an access_token from Github that can be used for a period of time to make authorized requests to Github to get the user info.
6. Then, the backend redirects the tab to the url of your choice with the param access_token (example: http://website.com/connect/github/redirect?access_token=eyfvg).
7. The frontend (http://website.com/connect/github/redirect) calls the backend with https://strapi.website.com/api/auth/github/callback?access_token=eyfvg that returns the Strapi user profile with its jwt.
   (Under the hood, the backend asks Github for the user's profile and a match is done on Github user's email address and Strapi user's email address).
8. The frontend now possesses the user's jwt, which means the user is connected and the frontend can make authenticated requests to the backend!

An example of a frontend app that handles this flow can be found here: .

Setting up the server URL#

Before setting up a provider you must specify the absolute URL of your backend in /config/server:

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env('', 'http://localhost:1337'),
});

export default ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env('', 'http://localhost:1337'),
});

Setting up the provider - Examples#

Instead of a generic explanation we decided to show an example for each provider. You can also create your own custom provider.

In the following examples, the frontend application will be the running on http://localhost:3000, while Strapi (i.e., the backend server) will be running on http://localhost:1337.

If you want to create and add a new custom provider, please refer to the following guide: