Firebase Auth OAuth Providers — Social Login with Google, Facebook, GitHub, and More

In this tutorial, you will learn about Firebase Auth OAuth Providers. We cover key concepts, practical examples, and best practices to help you master this topic.

Firebase Authentication supports OAuth social login providers including Google, Facebook, GitHub, Twitter, Apple, and Microsoft, enabling one-click sign-in with existing accounts.

What You'll Learn

• Configuring OAuth providers in Firebase Console
• Implementing social login in web and mobile apps
• Linking multiple auth providers to the same user account

Why It Matters

Social login reduces signup friction, improves conversion rates, and provides verified user information. DodaTech's applications support Google and GitHub login for developer-oriented tools.

flowchart LR
    A["User clicks social login"] --> B{"Choose provider"}
    B -->|"Google"| C["Google OAuth flow"]
    B -->|"Facebook"| D["Facebook OAuth flow"]
    B -->|"GitHub"| E["GitHub OAuth flow"]
    C --> F["Firebase creates/links account"]
    D --> F
    E --> F
    F --> G["User authenticated"]

Code Examples

// Google sign-in
import { GoogleAuthProvider, signInWithPopup, signInWithRedirect } from 'firebase/auth';
import { auth } from './firebase';

const googleProvider = new GoogleAuthProvider();
googleProvider.addScope('profile');
googleProvider.addScope('email');

// Popup method
async function signInWithGoogle() {
  try {
    const result = await signInWithPopup(auth, googleProvider);
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const user = result.user;
    console.log('Logged in with Google:', user.displayName);
    return user;
  } catch (error) {
    if (error.code === 'auth/popup-blocked') {
      // Fallback to redirect
      return signInWithRedirect(auth, googleProvider);
    }
    throw error;
  }
}

// Multiple providers
import { FacebookAuthProvider, GithubAuthProvider, OAuthProvider } from 'firebase/auth';

// Facebook
const fbProvider = new FacebookAuthProvider();
fbProvider.addScope('email');

// GitHub
const ghProvider = new GithubAuthProvider();
ghProvider.addScope('read:user');

// Apple
const appleProvider = new OAuthProvider('apple.com');
appleProvider.addScope('email');
appleProvider.addScope('name');

// Provider selection
async function loginWithProvider(providerName) {
  const providers = {
    google: new GoogleAuthProvider(),
    facebook: new FacebookAuthProvider(),
    github: new GithubAuthProvider(),
    apple: new OAuthProvider('apple.com')
  };

  const provider = providers[providerName];
  if (!provider) throw new Error('Unknown provider');

  return signInWithPopup(auth, provider);
}

// Link multiple providers to one account
import { linkWithPopup, unlink } from 'firebase/auth';

// Add Google login to existing account
async function linkGoogleAccount() {
  const user = auth.currentUser;
  if (!user) throw new Error('No user logged in');

  try {
    const result = await linkWithPopup(user, new GoogleAuthProvider());
    console.log('Google account linked:', result.user.displayName);
  } catch (error) {
    if (error.code === 'auth/credential-already-in-use') {
      // Account already linked to another user
      console.log('This Google account is already in use');
    }
  }
}

// Remove a provider
async function unlinkProvider(providerId) {
  const user = auth.currentUser;
  await unlink(user, providerId);
  console.log(`${providerId} unlinked`);
}

# Configure OAuth providers
# Firebase Console > Authentication > Sign-in method
# Enable providers and add client IDs/secrets

# Test with emulator
firebase emulators:start --only auth

Common Mistakes

1. Not Configuring OAuth Redirect URIs

OAuth providers require whitelisted redirect URIs. Add all Firebase Auth callback URLs.

2. Forgetting to Handle Popup Blockers

Popup sign-in may be blocked. Always provide a redirect fallback.

3. Not Linking Accounts Properly

Users may log in with different providers. Use linkWithPopup to merge accounts.

4. Requesting Too Many Scopes

Only request scopes you actually need. Excessive scopes may scare users.

5. Not Handling Provider-Specific Errors

Each provider returns different error codes. Handle them appropriately.

Practice Questions

1. What is the difference between signInWithPopup and signInWithRedirect?
2. How do you add multiple OAuth providers to a Firebase project?
3. How do you link a social login to an existing email/password account?
4. What is the fallback when popup sign-in is blocked?
5. How do you unlink a provider from a user account?

Answers:

1. Popup opens a popup window; redirect navigates the page to the provider. Redirect is better for mobile.
2. Enable each provider in the Firebase Console and configure the provider-specific credentials.
3. Use linkWithPopup while the user is logged in with the existing account.
4. Fall back to signInWithRedirect.
5. Use unlink(user, providerId).

Challenge: Build a login page with Google, Facebook, and GitHub social login buttons. Implement popup-with-redirect-fallback, link all providers to the same account, show which providers are linked, and allow unlinking.

FAQ

Mini Project

Build a multi-provider authentication system with Google, Facebook, and GitHub login. Implement account linking, display the list of linked providers, show profile photos from providers, and allow users to unlink accounts. Add a fallback from popup to redirect for mobile browsers.

What's Next

Learn about custom claims for role-based authorization, then explore the Admin SDK for server-side user management.