CODEWITHSUNDEEP
angularfirebasefirebase-authenticationangularfire2
Manas
Manas

Reputation: 3330

how to add user's extra profile information apart from email and password in firebase?

I'm using firebase with angular4 with the angularfire2 library. After signing up user with email and password I can see the user has been registered in the database in firebase. However I cannot add extra fields like name, address, etc. I thought of creating a ('/users') list then use the user's Uid to store user profile information. But the document says I can assign "name" and "profile picture". If that's the case I cannot add any field to the users database from authentication.

Upvotes: 0

Views: 3037

Answers (3)

Wesley Masunika
Wesley Masunika

Reputation: 173

It took me a while to figure this one out and I couldn't find any recent answers for the latest firebase version. So I hope this solution works for you too.

The trick for me was I had to add an await on the update profile and make the function async.

The benefits for this is that you can use the firebase user object that you can store in your localStorage or sessionStorage and you can easily reference the information you need from there instead of creating a new document that you always have to query.

  SignUp(user, password) {
    return this.afAuth.createUserWithEmailAndPassword(user.email, password)
      .then(async (result) => {
        /* Call the SendVerificaitonMail() function when new user sign
        up and returns promise */
        this.SendVerificationMail();

        await result.user?.updateProfile({
          displayName: user.name+ ' '+ user.surname,
          photoURL: "https://example.com/jane-q-user/profile.jpg"
        }).then(() => {

          this.SetUserData(result.user, user);
          this.ngZone.run(() => {
            this.router.navigate(['home']);
          });

        }).catch((error) => {
          // An error occurred
          // ...
        });

      }).catch((error) => {
        window.alert('Something wrong with Signup  '+error.message);
      });
  }

Upvotes: 0

nipun-kavishka
nipun-kavishka

Reputation: 922

AngularFire2 has a new version of the update. You can try out this code for the new angularfire version.

this.afAuth.auth.currentUser.updateProfile({
          displayName: 'your profile name',
          photoURL: 'your pic url'
        }).then(() => {
          console.log('DisplayName updated')
        }).catch(err => console.log(err))

You can use this code for update user date when you logged in.

Upvotes: 0

nisanarz
nisanarz

Reputation: 927

As you mention, by the firebase documentation, you can do it by using angularfire2 like this: 

  this.af.auth.createUser({
    email: <UserEmail>,
    password: <UserPass>
  }).then(
    (success) => {
    success.auth.updateProfile({
        displayName: <UserName>,
        photoURL: <UserPhotoURLString>
      })
      .then(res => console.log("profile updated"))
      .catch(err => console.log(err));
  }).catch(
    (err) => {
    console.log(err);
  })

as you can see in the code attach above, after you use the built-in method of af.auth.createUser you receive as promise an User object, and after that you can use another built-in method success.auth.updateProfile to update the User Profile area in the firebase authetication section. This code worked for me perfectly, so just adjust this to your code and that it :) enjoy.

Upvotes: 1

Related Questions