• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Auth Overview
    • Setting up Firebase Auth
    • Auth Flow
    • Third-Party Providers
    • Email Link Authentication
    • Multi-Factor Authentication
    • Requiring Email verification
    • Auth SSR
    • Page Guards
    • API Guards
    • Prevent abuse with AppCheck
    • Custom React Hooks
    • Troubleshooting

Set up Third party authentication providers with Next.js and Firebase

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:

tsx
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:

tsx
oAuth: [
GoogleAuthProvider,
MicrosoftAuthProvider,
AppleAuthProvider
],
Remember to enable authentication methods

<p> 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. </p>

<p> Often, these need an additional configuration you need to enable on the provider's end. </p>

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.

On this page
  1. Customizing the Third Party providers
    1. Adding Additional Scopes