Google Sign-In

Complete guide to enabling Google authentication in your Firebase project.

Google Sign-In is one of the most popular authentication methods for web applications. It allows users to sign in with their existing Google account, providing a seamless and trusted experience.

Official Documentation

This guide summarizes the key steps. For complete details, see the Firebase Google Sign-In documentation.

  1. Open Firebase Console

    Go to console.firebase.google.com and select your project.

  2. Navigate to Authentication

    In the left sidebar, click Build → Authentication.

  3. Go to Sign-in Method

    Click the Sign-in method tab at the top.

  1. Find Google Provider

    In the Sign-in providers list, find Google.

  2. Click to Configure

    Click on Google to open the configuration panel.

  3. Enable the Provider

    Toggle the switch to enable Google as a sign-in method.

  4. Set Support Email

    Enter a support email address. This is shown to users on the consent screen.

  5. Save

    Click Save to enable the provider.

For production apps, you may need to configure the OAuth consent screen in Google Cloud Console:

  1. Open GCP Console

    Go to OAuth consent screen in GCP Console.

  2. Configure App Information

    Fill in the app name, user support email, and developer contact information.

  3. Add Authorized Domains

    Add your Vercel deployment domains (e.g., *.vercel.app and any custom domains).

Authorized Domains

Make sure to add all domains where your app will be accessed, including localhost for development, Vercel preview URLs, and any custom production domains.

Once enabled, you can implement Google Sign-In in your app using the Firebase Auth SDK:

import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

const auth = getAuth();
const provider = new GoogleAuthProvider();

// Optional: Add scopes for additional permissions
provider.addScope('profile');
provider.addScope('email');

// Sign in with popup
async function signInWithGoogle() {
  try {
    const result = await signInWithPopup(auth, provider);
    const user = result.user;
    console.log('Signed in as:', user.displayName);
  } catch (error) {
    console.error('Sign-in error:', error);
  }
}

Alternative: Use redirect instead of popup (better for mobile):

import { signInWithRedirect, getRedirectResult } from 'firebase/auth';

// Trigger redirect
await signInWithRedirect(auth, provider);

// Handle result (call this on page load)
const result = await getRedirectResult(auth);
if (result) {
  const user = result.user;
  // User is signed in
}

To test Google Sign-In:

  1. Run Your App Locally

    Start your development server and navigate to the sign-in page.

  2. Click Sign In with Google

    The Google sign-in popup (or redirect) should appear.

  3. Select an Account

    Choose a Google account to sign in with.

  4. Verify in Firebase

    Check the Firebase Console → Authentication → Users to see the signed-in user.

Common issues and solutions:

  • Popup Blocked – Ensure the sign-in is triggered by a user action (button click). Browsers block popups not initiated by user interaction.
  • Domain Not Authorized – Add your domain to the authorized domains list in Firebase Console → Authentication → Settings.
  • OAuth Error – Check that the OAuth consent screen is properly configured in GCP Console.
  • CORS Errors – Ensure your Firebase config is correct and matches the project.
Additional Resources

Firebase Auth: Sign in with Google
Manage Users in Firebase