Third-Party Providers

Learn how to setup Third-Paerty providers with Firebase Auth in your MakerKit application

By default, the kit uses Google as the third-party provider to allow users to access the application.

With that said, you could decide to add other providers that Firebase provides or even custom ones.

Customizing the Third Party providers

To add one or multiple oAuth providers, we will need to customize the global configuration by adding the Firebase provider to the oAuth array.

For example, we could also add Facebook, Twitter and GitHub:

import { FacebookAuthProvider, TwitterAuthProvider, GitHubAuthProvider } from
'firebase/auth';

{
  auth: {
    providers: {
      oAuth: [
        GoogleAuthProvider,
        FacebookAuthProvider,
        TwitterAuthProvider,
        GitHubAuthProvider
      ],
    }
  }
}

Additionally, we can add custom oAuth providers. First, we define them by extending the OAuthProvider class:

class MicrosoftAuthProvider extends OAuthProvider {
  constructor() {
    super('microsoft.com');
  }
}

class AppleAuthProvider extends OAuthProvider {
  constructor() {
    super('apple.com');
  }
}

And then, we simply add them to the oAuth array:

oAuth: [
  GoogleAuthProvider,
  MicrosoftAuthProvider,
  AppleAuthProvider
],

Remember that you will always need to enable the authentication methods you want to use from the Firebase Console once you deploy your application to production.

Often, these need additional configuration that you need to enable on the provider's end.


Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor