Adding new login providers to Firebase

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

🗣

Keep in mind that your code may look slightly different then the examples below, depending on your Divjoy export options. The main structure, variables, and function names should be the same though.

Export your codebase. This change must be done in code after export.
Add the new authentication provider in Firebase. Follow the instructions from our main Firebase guide.
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 allowed and you just need to update it with the new one like so:


const allProviders = [
  {
    id: "password",
    name: "password",
  },
	// Here's the new provider 🎉
	// We use bind so that when providerMethod() is called it's the same as
	// calling firebase.auth.OAuthProvider("apple.com"). This isn't needed
	// for the others because they have a different format.
  {
    id: "apple.com",
    name: "apple",
    providerMethod: firebase.auth.OAuthProvider.bind(this, "apple.com"),
  },
  {
    id: "google.com",
    name: "google",
    providerMethod: firebase.auth.GoogleAuthProvider,
  },
  {
    id: "facebook.com",
    name: "facebook",
    providerMethod: firebase.auth.FacebookAuthProvider,
    parameters: {
      // Tell fb to show popup size UI instead of full website
      display: "popup",
    },
  },
  {
    id: "twitter.com",
    name: "twitter",
    providerMethod: firebase.auth.TwitterAuthProvider,
  },
  {
    id: "github.com",
    name: "github",
    providerMethod: firebase.auth.GithubAuthProvider,
  },
];

Go to src/pages/auth.js and update the providers prop on the AuthSection component so that it includes apple. This is what it should look like:

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

🗣

Did you find this guide helpful? Anything confusing? Please reach out and let us know.