Updating User Profile Using React and Firebase

In a previous post, I shared the steps I took to wire a React project to connect to Firebase services and retrieve data from the database.

Fetching from Firestore Realtime Database

Clark Johnson ・ Jul 12 '20 ・ 3 min read

#javascript #react

My latest task involved creating a user with the Firebase Auth service and persisting profile data for the user.

The user was created through a React component containing a form for signup. When submitted, the form executes the function loginUser().

 const loginUser = () => { props.firebase .doCreateUserWithEmailAndPassword(inputs) .then((authUser) => { console.log("authUser: ", authUser); }) .catch((error) => { console.error(error.code, error.message); }); }; 

The fields from the form are passed to the Firebase handler function.

In my project, the connections to the Firebase services and helper methods are encapsulated in a class. In my project, the file is /src/Firebase/firebase.js.

class Firebase { constructor() { app.initializeApp(firebaseConfig); this.auth = app.auth(); this.db = app.firestore(); } ... } 

The form fields are passed to the doCreateUserWithEmail() method. This method relies on the createUserWithEmailAndPassword() and updateProfile() methods supplied by the Firebase library.

Firebase Auth Class maintains a basic set of fields for the display_name, email, phone_number, and uid (unique identifier). All other fields must be stored separately in a database like Firestore. In my case, they are stored in a Firestore collection called users.

The action takes place asynchronously through Promise chains. First, the authorized user is created. Then a default display_name is derived from the email address and persisted in the Auth record. Finally, a users document is created with the uid as the key, and the fields from inputs as data. In this example, I'm saving the first and last names.

 doCreateUserWithEmailAndPassword = (inputs) => { const { email, password, firstName, lastName } = inputs; return this.auth .createUserWithEmailAndPassword(email, password) .then((user) => { const displayName = user.user.email.split("@")[0]; return this.auth.currentUser.updateProfile({ displayName }); }) .then(() => { console.log(this.auth.currentUser); return this.db .collection("users") .doc(this.auth.currentUser.uid) .set({ firstName, lastName }); }) .catch((error) => console.error("Error: ", error)); }; 

The profile document for a single user can easily be retrieved from the users collection by referencing the uid.

 doGetUserProfile = (uid, callback) => { return this.db .collection("users") .doc(uid) .get() .then(callback); }; 

Similarly, the profile document for an existing user can easily be updated.

 doProfileUpdate = (profile) => { return this.db .collection("users") .doc(this.auth.currentUser.uid) .set(profile) .catch((error) => console.error("Error: ", error)); }; 

So far, my foray into Firebase has been quite rewarding. It's easy to see that after a few implementations the development time for my applications will begin to diminish.

Happy coding!

Cover photo by Kelly Sikkema on Unsplash