Authentication Syntax with Firebase and adding username
October 23, 2020 at 7:21pmAuthentication Syntax with Firebase and adding username
October 23, 2020 at 7:21pmHello,
I am new to web development on unclear on how the syntax below works even though I think I understand it's purpose.
const signup = (email, password) => {
return firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(handleAuth);
};
The signup function is creating a new user by calling "firebase.auth().createUserWithEmailAndPassword(email, password)" with a .then promise. I am unclear on how .auth() being isolated on it's own line is connected to what's above and below it. The syntax almost looks like 3 separate promises.
Also, how would I go about allowing the user to to choose a username on signup? Using firebase docs, my best guess is it that would be using something similar to "signup.user.updateProfile({displayName: name })" but I'm not sure where to place this in the auth.js authentication logic.
Thank you in advance.
October 23, 2020 at 11:46pm
I am unclear on how .auth() being isolated on its own line is connected to what's above and below it. The syntax almost looks like 3 separate promises.
Not sure I'm understanding correctly, but
.auth()
being on its own line is the same if it's all on the same line (firebase.auth().createUserWithEmailAndPassword
), it's just formatting for readability. Let me know if you mean something else though.Also, how would I go about allowing the user to to choose a username on signup?
Here's an updated signup function that should work (although not tested):
// profileData should be object containing "username"const signup = (email, password, profileData) => {return firebase.auth().createUserWithEmailAndPassword(email, password).then(handleAuth).then(() => {return updateProfile(profileData);});};
Firebase auth doesn't have a concept of a "username", but what
updateProfile
does is update both Firebase auth if any specified values are supported by Firebase auth (such as "email" and "displayName") and then any other values (such as "username") will be added to the user data in Firestore. Because our auth.js implementation automatically merges Firestore data into the Firebase user object the result will be that your user object now contains a "username" value. Just wanted to make sure you understand what's going on. Let me know if that needs any clarification or if the above code doesn't work for some reason.October 26, 2020 at 3:45am
Thanks for the help Gabe. Another quick question, any firebase permissions or rules have to be manipulated for merging auth and cloud firestore? When MERGE_DB_USER = true on util > auth.js, I get a "FirebaseError: Missing or insufficient permissions." When it is false, no issues. Have been tinkering and can't seem to figure it out.
October 26, 2020 at 3:30pm
January 26, 2021 at 5:49am
In case anyone stumbles across this thread, I've written up a full doc on how to add extra fields to the authentication form: https://docs.divjoy.com/Adding-extra-fields-to-your-authentication-form-5284b7dd48364a3e97c6a291fd5c6367