How to get profile of signed in user in web and firebase ?

Last Updated : 02 Nov, 2022

If you are creating a web app and use the firebase services in your web app project, Then you may also need to show the user profile on the profile page. If you successfully Authenticated the user using any method such as Email Password, Google, GitHub, Microsoft, etc. Then we can show the Authenticated user profile data in your web app.

Prerequisite: Before going to start we need to set up the firebase to the web app, You can follow this GFG article to implement the firebase on the web and User Authentication using Email and Password.

Steps to get the profile of the signed-in user in web and firebase: After Setup the firebase and user Authentication, you can follow the below steps:

Step 1: Get a user’s profile:

To get a user’s profile information, use the properties of an instance of User:

Javascript

const user = firebase.auth().currentUser; 
if (user !== null) { 
    // The user object has basic properties  
    // such as display name, email, etc. 
    const displayName = user.displayName; 
    const email = user.email; 
    const photoURL = user.photoURL; 
    const emailVerified = user.emailVerified; 
    const uid = user.uid; 
}

In the end, we can display this data in our web app.

Step 2: Get a user’s provider-specific profile information:

To get the profile information retrieved from the sign-in providers linked to a user, use the providerData property.

Javascript

const user = firebase.auth().currentUser; 
  
if (user !== null) { 
    user.providerData.forEach((profile) => { 
        console.log("Sign-in provider: " + profile.providerId); 
        console.log("  Provider-specific UID: " + profile.uid); 
        console.log("  Name: " + profile.displayName); 
        console.log("  Email: " + profile.email); 
        console.log("  Photo URL: " + profile.photoURL); 
    }); 
}

index.html: Now create an HTML file and create two buttons to call both methods. Don’t forget to add the javascript file in your HTML file.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>samplefirebaseforweb</title> 
    <script src= 
"https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script> 
</head> 
  
<body> 
    <script src="/app.js"></script> 
    <button onclick="showUserProfile()">  
      Show user Profile data</button> 
    <button onclick="showUserProfile1()">  
      Show user Profile data using provider</button> 
</body> 
  
</html>

script.js: Define both methods in the new javascript file, but Before you, the app adds your configuration detail and initializes the app.

Javascript

const firebaseConfig = { 
    // Your firebase configuration data  
}; 
  
// Initialize Firebase 
const app = firebase.initializeApp(firebaseConfig); 
  
function showUserProfile() { 
    const user = firebase.auth().currentUser; 
    if (user !== null) { 
        // The user object has basic properties  
        // such as display name, email, etc. 
        const displayName = user.displayName; 
        const email = user.email; 
        const photoURL = user.photoURL; 
        const emailVerified = user.emailVerified; 
        console.log( 
            "Display Name -", 
            displayName, 
            ", Email -", 
            email, 
            ", EmailVerified - ", 
            emailVerified, 
            " ,Photo Url -", 
            photoURL 
        ); 
    } 
} 
  
function showUserProfile1() { 
    const user = firebase.auth().currentUser; 
  
    if (user !== null) { 
        user.providerData.forEach((profile) => { 
            console.log("Sign-in provider: " + profile.providerId); 
            console.log("  Provider-specific UID: " + profile.uid); 
            console.log("  Name: " + profile.displayName); 
            console.log("  Email: " + profile.email); 
            console.log("  Photo URL: " + profile.photoURL); 
        }); 
    } 
} 