Firebase User Profile Add Custom Fields

Question

Is it possible to add custom fields to the user profile table in Firebase?

Right now it looks like I can only add data to:

"uid"
"displayName"
"photoURL"
"email"
"emailVerified"
"phoneNumber"
"isAnonymous"
"tenantId"
"providerData":
"apiKey"
"appName"
"authDomain"
"stsTokenManager"
"redirectEventId"
"lastLoginAt"
"createdAt"

I would like to have the ability to add custom objects to the JSON string to contain all of the user data.

https://firebase.google.com/docs/auth/web/manage-users

Why not simply create a collection with the uid linked to a record in that collection? That way, you can fill in all the fields you wanted. — Angelo, Oct 24 '19 at 19:37
I believe you can set custom fields in user claims: https://firebase.google.com/docs/auth/admin/custom-claims — sleepystar96, Feb 01 '22 at 19:47

score 30 · Accepted Answer · answered Oct 24 '19 at 19:45

30

Quick example, where after I have registered a user, I add that user to a usersCollection and supply other field information as necessary.

In my firebase powered app, what I do is the following:

import app from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/firestore'

const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID 
}

class Firebase {
  constructor (props) {
    app.initializeApp(config)

    this.auth = app.auth()
    this.db = app.database()
    this.firestore = app.firestore()
  }

  signUpWithEmailAndPassword = (email, pw) => {
    this.auth.createUserWithEmailAndPassword(email, password)
    .then(registeredUser => {
      this.firestore.collection("usersCollection")
      .add({
        uid: registeredUser.user.uid,
        field: 'Info you want to get here',
        anotherField: 'Another Info...',
        ....
      })
    }
  }
}

Hope this helps.

answered Oct 24 '19 at 19:45

Angelo

1,578
3
20
39

is pulling this data from the cloudstore or the realtime database the preferred method on page load? why would they have a profile table then? – Olivia Oct 25 '19 at 15:19
firestore or realtime database - the option is yours, but Firebase is recommending the firestore as it provides more functionality. profile table? that is something that they could be using internally to manage the users registered. Maintaining a separate data for your users would be up to you. As long as you can tie that up via the UID. – Angelo Oct 25 '19 at 16:40
7

To add some background to @Angelo's answer, Firebase Authentication is an authentication solution, it's not intended to be a user profile management system. It is for developers to implement user profile features themselves, as these tend to depend on the specific use cases of your system. – Peter Friese Feb 13 '20 at 06:12
@PeterFriese why waste money storing duplicates in Firestore when we can store them in Profile? I really don't understand why people keep saying that but never really explained why! – showtime Jan 18 '21 at 02:16
The OP wanted to store user data (e.g. to-dos, recipes, etc.) in the user object. This is not what authentication solutions are made for, and you should use an appropriate database to do so. You're free to use whichever data store is most suitable, be it Firestore, RTDB, Cloud Storage, or even something entirely different. Also, Firestore has got generous free limits - check out https://firebase.google.com/pricing#blaze-calculator to compute the actual cost of storing data in Firestore. – Peter Friese Jan 18 '21 at 10:22

score -3 · Answer 2 · edited Apr 17 '21 at 23:21

-3

 auth()
  .createUserWithEmailAndPassword(email, password)
  .then((res) => {
    console.log('User account created & signed in!', res);
    res.user.updateProfile({
      displayName: "Hanzala",
      photoURL:"https://placeimg.com/140/140/any",
    })
  })
  .catch(error => {
    if (error.code === 'auth/email-already-in-use') {
      console.log('That email address is already in use!');
    }

}

edited Apr 17 '21 at 23:21

DaveL17

1,673
7
24
38

answered Apr 17 '21 at 11:14

Hanzala Khan

19
1
2

5

Code only answers are discouraged here. Please add a description of how your answer solves the problem and why it may be preferable to the other answers already provided. – DaveL17 Apr 17 '21 at 12:13
Your answer is not related to the question made. – Lucas Silva Aug 12 '21 at 08:50

Firebase User Profile Add Custom Fields

2 Answers2