When integrating Google sign-in with Firebase Authentication, accessing user profile details like name, email, and profile picture can be essential for a personalized user experience. This article will walk you through how to configure Google sign-in with Firebase in TypeScript to retrieve profile information and address common issues with missing claims in the backend.

Step 1: Set Up Firebase and Enable Google Sign-In

Before you begin, make sure Firebase is set up in your project, and Google sign-in is enabled in the Firebase console.

Go to the Firebase Console.
Select your project and navigate to Authentication > Sign-in method.
Enable Google as a sign-in provider and save the changes.

Step 2: Configure Scopes for Profile and Email Access

By default, Google sign-in only provides basic authentication claims. To retrieve additional profile information, specify the profile and email scopes in your GoogleAuthProvider setup.

Example in TypeScript

Here’s how to request these scopes using Firebase Authentication with TypeScript:

import firebase from 'firebase/app';
import 'firebase/auth';

const provider = new firebase.auth.GoogleAuthProvider();

// Add scopes to request profile information and email
provider.addScope('profile');
provider.addScope('email');

this.afAuth
.signInWithPopup(provider)
.then((res: any) => {
console.log("Login Response:", res);
// Access profile information here, such as res.user.displayName and res.user.photoURL
})
.catch(error => {
console.error("Error during Google sign-in:", error);
});

Step 3: Retrieve Profile Information on the Client-Side

Once the user grants access, the signInWithPopup response object will contain profile details like displayName, email, and photoURL. You can access this information directly:

const user = res.user;
console.log("User Name:", user.displayName);
console.log("User Email:", user.email);
console.log("User Photo URL:", user.photoURL);

Step 4: Accessing Claims in the Backend

Firebase ID tokens generally include only basic claims (like UID). To retrieve profile details on the backend, use Firebase Admin SDK to access the user record directly.

Example in Node.js Backend:

Using Firebase Admin SDK, you can retrieve user details by their UID:

const admin = require('firebase-admin');

async function getUserProfile(idToken) {
try {
// Verify ID token and extract UID
const decodedToken = await admin.auth().verifyIdToken(idToken);
const uid = decodedToken.uid;

// Fetch the user profile from Firebase
const userRecord = await admin.auth().getUser(uid);

// Access user profile information
console.log("User Email:", userRecord.email);
console.log("User Display Name:", userRecord.displayName);
console.log("User Photo URL:", userRecord.photoURL);
} catch (error) {
console.error("Error fetching user data:", error);
}
}

Tips for Success

Verify Permissions: Ensure that your users have granted profile and email scopes by checking the Google permissions prompt.
Store Profile Details: If you need consistent access to profile information on the backend, consider storing these details in your database upon user login.
Caching ID Tokens: Cache ID tokens if you make frequent requests, as Firebase Admin SDK will allow token reuse within their valid duration.

Final Thoughts

This setup enables you to fully utilize Google’s authentication while preserving access to user profiles across client and server. By following these steps, you can create a secure and SEO-compliant authentication experience that enhances your application’s personalization and user engagement.