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:

configuration.ts
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 ],

Adding Additional Scopes

To add additional scopes to the oAuth provider, we can tweak the OAuthProviders.tsx component and assign the scopes based on the instance type:

OAuthProviders.tsx
import { GoogleAuthProvider, FacebookAuthProvider, } from 'firebase/auth'; {OAUTH_PROVIDERS.map((OAuthProviderClass) => { const providerInstance = new OAuthProviderClass(); const providerId = providerInstance.providerId; if (providerInstance instanceof GoogleAuthProvider) { providerInstance.addScope('scope'); } if (providerInstance instanceof FacebookAuthProvider) { providerInstance.addScope('scope'); } return ( // render <AuthProviderButton /> ); });

For example, if you are adding the scopes for Facebook Login, you can check out the Firebase documentation. Then, add them to the addScope method as described above.


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS