How to Implement Google Sign-In with Firebase JavaScript

                            
const provider = new GoogleAuthProvider();

// Request access to the user's Google Calendar (optional scope)
provider.addScope("https://www.googleapis.com/auth/calendar.readonly");

// Force the account chooser to appear even if already signed in
provider.setCustomParameters({
  prompt: "select_account"
});
                            
                                

                            
// ---- GOOGLE AUTH ERROR HANDLER ----
function handleGoogleAuthError(error) {
  const msgs = {
    "auth/popup-closed-by-user":       "Sign-in popup was closed. Please try again.",
    "auth/popup-blocked":              "Popup was blocked by your browser. Allow popups and retry.",
    "auth/account-exists-with-different-credential":
                                       "An account already exists with this email using a different sign-in method.",
    "auth/cancelled-popup-request":    "Another popup is already open.",
    "auth/network-request-failed":     "Network error. Please check your connection.",
    "auth/unauthorized-domain":        "This domain is not authorized. Add it in Firebase Console ⟶  Authentication ⟶  Settings."
  };

  const message = msgs[error.code] || "Google Sign-In failed. Please try again.";
  alert(message);
  console.error(error.code, error.message);
}
                            
                                

                            
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  onAuthStateChanged,
  signOut
} from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js";

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();
provider.setCustomParameters({ prompt: "select_account" });

// Auth State
onAuthStateChanged(auth, (user) => {
  const path = window.location.pathname;
  if (user) {
    const nameEl  = document.getElementById("user-name");
    const emailEl = document.getElementById("user-email");
    const photoEl = document.getElementById("user-photo");
    if (nameEl)  nameEl.textContent = "Hello, " + (user.displayName || user.email);
    if (emailEl) emailEl.textContent = user.email;
    if (photoEl && user.photoURL) { photoEl.src = user.photoURL; photoEl.style.display = "block"; }
    if (path.includes("index.html") || path.includes("signup.html")) window.location.href = "dashboard.html";
  } else {
    if (path.includes("dashboard.html")) window.location.href = "index.html";
  }
});

// Google Sign-In
const googleBtn = document.getElementById("google-signin-btn");
if (googleBtn) {
  googleBtn.addEventListener("click", async () => {
    try {
      await signInWithPopup(auth, provider);
      window.location.href = "dashboard.html";
    } catch (error) { handleGoogleAuthError(error); }
  });
}

// Email Sign-Up
const signupBtn = document.getElementById("signup-btn");
if (signupBtn) {
  signupBtn.addEventListener("click", () => {
    const email    = document.getElementById("email-signup").value.trim();
    const password = document.getElementById("password-signup").value.trim();
    createUserWithEmailAndPassword(auth, email, password)
      .then(() => { window.location.href = "index.html"; })
      .catch(handleAuthError);
  });
}

// Email Login
const loginBtn = document.getElementById("login-btn");
if (loginBtn) {
  loginBtn.addEventListener("click", () => {
    const email    = document.getElementById("email").value.trim();
    const password = document.getElementById("password").value.trim();
    signInWithEmailAndPassword(auth, email, password)
      .then(() => { window.location.href = "dashboard.html"; })
      .catch(handleAuthError);
  });
}

// Logout
const logoutBtn = document.getElementById("logout-btn");
if (logoutBtn) {
  logoutBtn.addEventListener("click", async () => {
    try { await signOut(auth); window.location.href = "index.html"; }
    catch (error) { alert("Logout failed: " + error.message); }
  });
}

// Error Handlers
function handleAuthError(error) {
  const msgs = {
    "auth/email-already-in-use": "Email already registered.",
    "auth/invalid-email":         "Invalid email address.",
    "auth/weak-password":         "Password must be at least 6 characters.",
    "auth/user-not-found":        "No account found with this email.",
    "auth/wrong-password":        "Incorrect password."
  };
  alert(msgs[error.code] || "An error occurred.");
}

function handleGoogleAuthError(error) {
  const msgs = {
    "auth/popup-closed-by-user":  "Popup closed. Please try again.",
    "auth/popup-blocked":         "Popup blocked. Allow popups in your browser.",
    "auth/account-exists-with-different-credential": "Account exists with a different sign-in method.",
    "auth/unauthorized-domain":   "Domain not authorized in Firebase Console."
  };
  alert(msgs[error.code] || "Google Sign-In failed.");
}