9 - User Profile Management with Firebase Authentication

User Profile Management with Firebase Authentication

Managing user profiles is a crucial aspect of building applications, as it enables personalization and enhances the user experience. Firebase Authentication provides features for storing and managing user profiles. In this guide, we’ll explore how to create and manage user profiles with Firebase Authentication, including essential user information and profile picture management.

1. Collecting User Information

When a user signs up or logs in using Firebase Authentication, you can collect essential user information like name, email, and additional custom fields. This information helps in creating user profiles.

Here’s an example of collecting user information during the sign-up process:


// Get the user's input data
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;

// Create the user with email and password
firebase.auth().createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
        // Set the user's display name
        userCredential.user.updateProfile({
            displayName: name
        });
        // Additional profile setup
    })
    .catch((error) => {
        // Handle sign-up error
    });

In this code, we collect the user’s name, email, and password during the sign-up process. After creating the user, we update their profile with the name using the updateProfile method.

2. Retrieving User Information

Once you have collected user information, you can retrieve it whenever necessary. Firebase Authentication provides an API to access user profile information:


var user = firebase.auth().currentUser;
if (user) {
    var name = user.displayName;
    var email = user.email;
    // Additional profile information
} else {
    // User not signed in
}

With this code, you can retrieve the user’s name and email to display in the app. Additionally, you can access custom user profile fields.

3. Managing User Profile Pictures

Profile pictures are a common feature in user profiles. Firebase Authentication allows you to manage user profile pictures easily. You can store the profile picture URL in the user’s custom fields.

Here’s how you can set a profile picture URL:


var user = firebase.auth().currentUser;
if (user) {
    var profilePictureURL = "https://example.com/profile.jpg";
    user.updateProfile({
        photoURL: profilePictureURL
    });
} else {
    // User not signed in
}

By updating the user’s profile with a photo URL, you can display the profile picture in your application.

4. User Profile Custom Fields

Firebase Authentication allows you to create custom fields to store additional user information, such as a user’s bio, date of birth, or any other relevant data.

Here’s an example of adding custom fields to a user’s profile:


var user = firebase.auth().currentUser;
if (user) {
    var profileData = {
        bio: "Hello, I'm a user of this app!",
        birthdate: "1990-01-01"
    };
    // Set the custom profile data
    user.updateProfile({
        customProfile: profileData
    });
} else {
    // User not signed in
}

Custom fields can store any user-specific data and improve the personalization of your application.

5. User Profile Privacy

It’s essential to consider privacy when managing user profiles. Firebase Authentication provides security rules that allow you to control access to user profile information. You can specify who can read and write user profiles based on your application’s requirements.

Here’s an example of Firebase Security Rules to protect user profiles:


{
  "rules": {
    "users": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "auth != null && auth.uid == $uid"
      }
    }
  }
}

In these rules, only authenticated users are allowed to read and write their own user profiles, ensuring privacy and security.

6. User Profile Updates

Users might need to update their profiles from time to time. You can allow them to change their information or profile picture as necessary. Firebase Authentication provides methods for updating user profiles:


var user = firebase.auth().currentUser;
if (user) {
    // Update user information
    user.updateProfile({
        displayName: "New Name",
        photoURL: "https://example.com/new-profile.jpg"
    })
    .then(() => {
        // Profile updated successfully
    })
    .catch((error) => {
        // Handle error
    });
} else {
    // User not signed in
}

Users can change their display names, profile pictures, or any other custom fields you allow.

Conclusion

Managing user profiles with Firebase Authentication is essential for providing a personalized and secure user experience. Collecting user information, accessing custom fields, handling profile pictures, and ensuring privacy are key aspects of building user profiles in your applications.

9 – User Profile Management with Firebase Authentication