Adding new login providers to Auth0

This guide shows you how to add a new authentication provider to your Auth0 integration. By default your integration includes password, google, facebook, twitter, and github, but what if you wanted to enable your users to login with spotify too? Here's how you do it.

1. Export your codebase. This change must be done in code after export.
2. Add the new authentication provider in Auth0. Follow the instructions from our main Auth0 guide.
3. Open src/util/auth.js and find the allProviders array (toward the bottom of the file). This is the array of authentication providers that are currently active and you just need to update it with the new one like so:
Copy

const allProviders = [
  {
    id: "auth0",
    name: "password",
  },
		// Here's the new provider 🎉
    id: "spotify",
    name: "spotify",
  },
  {
		// This is what Auth0 internally calls this social connection
    id: "google-oauth2",
		// This is what your code uses when calling signinWithProvider(name)
    name: "google",
  },
  {
    id: "facebook",
    name: "facebook",
  }
  {
    id: "twitter",
    name: "twitter",
  },
  {
    id: "github",
    name: "github",
  },
];

4. Update your UI to include a button for the new auth provider that calls onSigninWithProvider("spotify"). Assuming you are using the authentication components from the Divjoy library, you'd just need to go to src/pages/auth.js and update the providers array on the AuthSection components like so:


That's it! The AuthSection component will pass those providers down to an AuthSocial component, which will iterate through and render a button for each. Make sure you also have an image named icon-spotify.svg at the image path you see specified inside of src/components/AuthSocial.js.