Firebase Google Sign In

Google Sign-In lets users log into your app using their existing Google account. No new password to create, no email to verify — users click one button and they are in. This reduces friction and increases registration rates significantly. Firebase makes adding Google Sign-In straightforward.

Why Google Sign-In Improves User Experience

Consider two doors into a building. Door A requires you to fill out a form, create a new ID card, memorize a new PIN, and then enter. Door B just scans your existing work badge and opens. Most people choose Door B.

Google Sign-In is Door B. Users trust Google, they are already logged into Google on most devices, and they do not need to remember one more password. For your app, it also means you receive a verified email address and a real name automatically — no email verification step required.

How Google Sign-In Works

User clicks "Sign in with Google"
          |
          v
Firebase opens Google's login page (popup or redirect)
          |
          v
User selects their Google account
          |
          v
Google confirms identity to Firebase
          |
          v
Firebase creates or finds the user record
          |
          v
Returns User object with uid, email, displayName, photoURL

Enabling Google Sign-In in the Console

Open the Firebase Console and go to Authentication > Sign-in method. Click Google. Toggle Enable on. Enter a Project public-facing name — this name appears on the Google login screen that users see. Add a Project support email — use your Google account email. Click Save.

Firebase automatically handles the OAuth client setup. You do not need to create OAuth credentials manually in the Google Cloud Console for basic web usage.

Implementing Google Sign-In with a Popup

The popup method opens a small Google login window on top of your app. Users log in there, and the popup closes automatically after success.

import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { auth } from "./firebase";

const provider = new GoogleAuthProvider();

async function signInWithGoogle() {
  try {
    const result = await signInWithPopup(auth, provider);
    const user = result.user;

    console.log("Name:", user.displayName);
    console.log("Email:", user.email);
    console.log("Photo:", user.photoURL);
    console.log("UID:", user.uid);
  } catch (error) {
    if (error.code === "auth/popup-closed-by-user") {
      console.log("User closed the popup without signing in.");
    } else {
      console.error("Error:", error.message);
    }
  }
}

Implementing Google Sign-In with a Redirect

The redirect method sends users to Google's login page and brings them back to your app after login. This works better on mobile devices where popups may be blocked.

import {
  GoogleAuthProvider,
  signInWithRedirect,
  getRedirectResult
} from "firebase/auth";
import { auth } from "./firebase";

const provider = new GoogleAuthProvider();

// Call this when the user clicks the sign-in button
function startGoogleSignIn() {
  signInWithRedirect(auth, provider);
}

// Call this when the page loads to check for a redirect result
async function checkRedirectResult() {
  try {
    const result = await getRedirectResult(auth);
    if (result) {
      console.log("Signed in:", result.user.displayName);
    }
  } catch (error) {
    console.error("Redirect error:", error.message);
  }
}

// Run on page load
checkRedirectResult();

When using redirect, call getRedirectResult every time the page loads. Firebase checks whether the current page load is the result of a redirect sign-in. If it is, Firebase returns the user data. If not, result is null.

Requesting Additional Scopes

By default, Google Sign-In gives you the user's email, name, and profile photo. You can request additional permissions (scopes) if your app needs them — for example, access to the user's Google Calendar or Drive files.

const provider = new GoogleAuthProvider();

// Request access to Google Calendar
provider.addScope("https://www.googleapis.com/auth/calendar.readonly");

// Request access to Google Drive
provider.addScope("https://www.googleapis.com/auth/drive.metadata.readonly");

Each scope you add appears in the Google permission dialog. Users must accept these permissions to complete sign-in. Only request scopes your app genuinely needs — unnecessary permission requests make users uncomfortable and reduce sign-in rates.

Forcing Account Selection

By default, if a user is logged into only one Google account, Google skips the account selector and signs them in automatically. You can force the account picker to appear every time:

provider.setCustomParameters({
  prompt: "select_account"
});

This is useful for apps where users might have multiple Google accounts and need to choose the right one.

Getting the Google Access Token

If you need to call Google APIs directly (not Firebase APIs), you need the Google OAuth access token. Firebase returns it in the credential after sign-in:

import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { auth } from "./firebase";

const provider = new GoogleAuthProvider();

async function signInAndGetToken() {
  const result = await signInWithPopup(auth, provider);
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const googleAccessToken = credential.accessToken;

  // Use this token to call Google APIs directly
  console.log("Google Token:", googleAccessToken);
}

New User vs Returning User

Firebase detects whether a Google Sign-In created a new account or logged in an existing one. The result.operationType field tells you which happened:

const result = await signInWithPopup(auth, provider);

if (result.operationType === "signIn") {
  // Could be new or existing user
  const isNewUser = result._tokenResponse.isNewUser;
  if (isNewUser) {
    console.log("Welcome! New user created.");
    // Show onboarding
  } else {
    console.log("Welcome back!");
  }
}

Signing Out

Signing out from Google Sign-In uses the same signOut function as email/password auth:

import { signOut } from "firebase/auth";
import { auth } from "./firebase";

await signOut(auth);
console.log("Signed out");

Key Takeaway

Google Sign-In in Firebase requires enabling the provider in the console and choosing between popup and redirect sign-in methods. The popup method works well for desktop browsers. The redirect method works better for mobile. Both return a User object with the user's name, email, and photo. Add OAuth scopes only when your app genuinely needs Google API access beyond basic profile information.