How to Set Up Google Sign-In with Firebase Authentication

To set up Google Sign-In with Firebase Authentication, enable Google as a sign-in provider in the Firebase console, then use Firebase SDK to trigger the Google sign-in flow in your app. After the user signs in, Firebase manages the authentication state and user info.

Syntax

Here is the basic syntax to sign in users with Google using Firebase Authentication in JavaScript:

• new GoogleAuthProvider(): Creates a Google sign-in provider object.
• signInWithPopup(auth, provider): Opens a popup for Google sign-in.
• auth.currentUser: Accesses the signed-in user info.

javascript

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

const firebaseConfig = {
  // your config here
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

signInWithPopup(auth, provider)
  .then((result) => {
    const user = result.user;
    console.log('User signed in:', user.displayName);
  })
  .catch((error) => {
    console.error('Error during sign-in:', error);
  });

Output

User signed in: [User's Google Display Name]

Example

This example shows how to enable Google Sign-In in a web app using Firebase. It initializes Firebase, sets up the Google provider, and signs in the user with a popup. On success, it logs the user's name.

javascript

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

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT_ID.appspot.com',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID'
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

function signInWithGoogle() {
  signInWithPopup(auth, provider)
    .then((result) => {
      const user = result.user;
      console.log('Signed in user:', user.displayName);
    })
    .catch((error) => {
      console.error('Sign-in error:', error.message);
    });
}

// Call the function to trigger sign-in
signInWithGoogle();

Output

Signed in user: [User's Google Display Name]

Common Pitfalls

Common mistakes when setting up Google Sign-In with Firebase include:

• Not enabling Google provider in Firebase Console under Authentication > Sign-in method.
• Using incorrect Firebase config values, causing initialization errors.
• Not handling popup blockers or errors from signInWithPopup.
• Forgetting to import and initialize Firebase modules properly.

Always check the browser console for errors and verify your Firebase project settings.

javascript

/* Wrong: Forgot to enable Google provider in Firebase Console */
// signInWithPopup will fail with error: auth/provider-not-enabled

/* Right: Enable Google provider in Firebase Console before using this code */
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider).catch(console.error);

Quick Reference

Steps to set up Google Sign-In with Firebase:

1. Go to Firebase Console > Authentication > Sign-in method.
2. Enable Google provider and save.
3. Install Firebase SDK in your app.
4. Initialize Firebase with your config.
5. Create a GoogleAuthProvider instance.
6. Call signInWithPopup(auth, provider) to sign in users.

Key Takeaways

Enable Google Sign-In in Firebase Console before coding.

Use Firebase SDK's GoogleAuthProvider and signInWithPopup for authentication.

Handle errors and popup blockers gracefully in your app.

Initialize Firebase correctly with your project config.

Check browser console for troubleshooting sign-in issues.