How to Set Up Firebase Authentication With Google Sign-In

1// Firebase Console steps:
2// 1. Go to console.firebase.google.com
3// 2. Select your project
4// 3. Click Authentication in the left sidebar
5// 4. Click the "Sign-in method" tab
6// 5. Click "Google" in the provider list
7// 6. Toggle "Enable" to on
8// 7. Enter your app name (shown on consent screen)
9// 8. Select a support email
10// 9. Click Save
11
12// After enabling, verify your authorized domains:
13// Authentication > Settings > Authorized domains
14// Ensure localhost and your production domain are listed

1import { initializeApp } from "firebase/app";
2import {
3  getAuth,
4  GoogleAuthProvider,
5  signInWithPopup,
6  signOut,
7  onAuthStateChanged,
8  type User,
9} from "firebase/auth";
10
11const firebaseConfig = {
12  apiKey: "your-api-key",
13  authDomain: "your-project.firebaseapp.com",
14  projectId: "your-project",
15  storageBucket: "your-project.appspot.com",
16  messagingSenderId: "123456789",
17  appId: "1:123456789:web:abc123",
18};
19
20const app = initializeApp(firebaseConfig);
21const auth = getAuth(app);
22
23// Create Google provider with optional scopes
24const googleProvider = new GoogleAuthProvider();
25googleProvider.addScope("profile");
26googleProvider.addScope("email");
27
28// Optional: force account selection every time
29googleProvider.setCustomParameters({
30  prompt: "select_account",
31});
32
33export { auth, googleProvider };

1import { auth, googleProvider } from "./firebase-config";
2import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
3
4async function signInWithGoogle() {
5  try {
6    const result = await signInWithPopup(auth, googleProvider);
7
8    // The signed-in user
9    const user = result.user;
10    console.log("Signed in as:", user.displayName);
11    console.log("Email:", user.email);
12    console.log("Photo:", user.photoURL);
13    console.log("UID:", user.uid);
14
15    // Google OAuth access token (for Google APIs, if needed)
16    const credential = GoogleAuthProvider.credentialFromResult(result);
17    const accessToken = credential?.accessToken;
18
19    return user;
20  } catch (error: any) {
21    if (error.code === "auth/popup-closed-by-user") {
22      console.log("User closed the popup");
23    } else if (error.code === "auth/popup-blocked") {
24      console.log("Popup was blocked by the browser");
25      // Fall back to redirect flow
26    } else {
27      console.error("Sign-in error:", error.message);
28    }
29    return null;
30  }
31}

1import { auth } from "./firebase-config";
2import { onAuthStateChanged, type User } from "firebase/auth";
3
4// Global auth state
5let currentUser: User | null = null;
6
7// Listen for auth state changes
8const unsubscribe = onAuthStateChanged(auth, (user) => {
9  currentUser = user;
10
11  if (user) {
12    console.log("User is signed in:", user.displayName);
13    // Show authenticated UI
14    // Redirect to dashboard
15    // Fetch user-specific data from Firestore
16  } else {
17    console.log("User is signed out");
18    // Show sign-in button
19    // Redirect to login page
20  }
21});
22
23// Wait for auth to initialize before querying Firestore
24function waitForAuth(): Promise<User | null> {
25  return new Promise((resolve) => {
26    const unsub = onAuthStateChanged(auth, (user) => {
27      unsub(); // Unsubscribe after first emission
28      resolve(user);
29    });
30  });
31}
32
33// Usage:
34// const user = await waitForAuth();
35// if (user) { /* fetch protected data */ }

1import { doc, getDoc, setDoc, serverTimestamp } from "firebase/firestore";
2import { db } from "./firebase-config";
3import { type User } from "firebase/auth";
4
5async function ensureUserProfile(user: User) {
6  const userRef = doc(db, "users", user.uid);
7  const userDoc = await getDoc(userRef);
8
9  if (!userDoc.exists()) {
10    // First sign-in — create the profile
11    await setDoc(userRef, {
12      displayName: user.displayName,
13      email: user.email,
14      photoURL: user.photoURL,
15      role: "user",
16      createdAt: serverTimestamp(),
17      lastLogin: serverTimestamp(),
18    });
19  } else {
20    // Returning user — update last login
21    await setDoc(userRef, { lastLogin: serverTimestamp() }, { merge: true });
22  }
23}
24
25// Call after successful sign-in:
26// const user = await signInWithGoogle();
27// if (user) await ensureUserProfile(user);

1// firestore.rules
2rules_version = '2';
3service cloud.firestore {
4  match /databases/{database}/documents {
5
6    // User profiles: owner can read/write, others can read
7    match /users/{userId} {
8      allow read: if request.auth != null;
9      allow write: if request.auth != null
10                   && request.auth.uid == userId;
11    }
12
13    // User-owned data: only the owner can access
14    match /todos/{todoId} {
15      allow read, write: if request.auth != null
16                         && request.auth.uid == resource.data.userId;
17      allow create: if request.auth != null
18                    && request.auth.uid == request.resource.data.userId;
19    }
20
21    // Public data: anyone authenticated can read
22    match /posts/{postId} {
23      allow read: if request.auth != null;
24      allow create: if request.auth != null
25                    && request.auth.uid == request.resource.data.authorId;
26      allow update, delete: if request.auth != null
27                            && request.auth.uid == resource.data.authorId;
28    }
29  }
30}

1import { signOut } from "firebase/auth";
2import { auth } from "./firebase-config";
3
4async function handleSignOut() {
5  try {
6    await signOut(auth);
7    // onAuthStateChanged will fire with null user
8    // Your auth state listener handles the UI update
9    console.log("Signed out successfully");
10
11    // Optional: clear local state
12    // localStorage.removeItem("userPreferences");
13    // Navigate to login page
14  } catch (error) {
15    console.error("Sign-out error:", error);
16  }
17}