How to Update User Profile in Firebase: Simple Guide

To update a user profile in Firebase, use the updateProfile method on the current user object from Firebase Authentication. This method lets you change the user's display name and photo URL easily.

Syntax

The updateProfile method updates the current user's profile information. It accepts an object with optional displayName and photoURL properties.

• displayName: The new name to show for the user.
• photoURL: The new URL for the user's profile picture.

It returns a promise that resolves when the update is complete.

javascript

firebase.auth().currentUser.updateProfile({
  displayName: "New Name",
  photoURL: "https://example.com/new-photo.jpg"
}).then(() => {
  console.log("Profile updated successfully.");
}).catch(error => {
  console.error("Error updating profile:", error);
});

Output

Profile updated successfully.

Example

This example shows how to update the user's display name and photo URL after they are signed in. It logs success or error messages to the console.

javascript

import { getAuth, updateProfile } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

if (user) {
  updateProfile(user, {
    displayName: "Alice Johnson",
    photoURL: "https://example.com/alice.jpg"
  }).then(() => {
    console.log("User profile updated.");
  }).catch((error) => {
    console.error("Failed to update profile:", error);
  });
} else {
  console.log("No user is signed in.");
}

Output

User profile updated.

Common Pitfalls

Common mistakes when updating Firebase user profiles include:

• Trying to update the profile before the user is signed in, causing currentUser to be null.
• Not handling the promise rejection, which hides errors.
• Passing invalid URLs or empty strings, which Firebase ignores silently.

Always check if a user is signed in and handle errors properly.

javascript

/* Wrong way: No user check and no error handling */
if (firebase.auth().currentUser) {
  firebase.auth().currentUser.updateProfile({
    displayName: "Bob"
  });
}

/* Right way: Check user and handle errors */
const user = firebase.auth().currentUser;
if (user) {
  user.updateProfile({ displayName: "Bob" })
    .then(() => console.log("Updated"))
    .catch(error => console.error(error));
} else {
  console.log("User not signed in.");
}

Output

Updated

Quick Reference

Remember these tips when updating Firebase user profiles:

• Use updateProfile on the signed-in user object.
• Update only displayName and/or photoURL.
• Always check if the user is signed in before updating.
• Handle promise results to catch errors.

Key Takeaways

Use the updateProfile method on the current user to change display name and photo URL.

Always check if a user is signed in before attempting to update their profile.

Handle promise success and failure to know if the update worked or failed.

Only displayName and photoURL can be updated with updateProfile.

Invalid or empty values may be ignored silently, so validate inputs before updating.