menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Divjoy

The ⚛️ React codebase generator.

Channels
Team

Authentication Syntax with Firebase and adding username

October 23, 2020 at 7:21pm

Authentication Syntax with Firebase and adding username

October 23, 2020 at 7:21pm
Hello,
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.
Edited
like-fill
1

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
Did you update your Firestore rules with the contents of the firestore.rules file in your codebase?
like-fill
1
That fixed it! After reading the instructions you provided, this is clearly spelled out. I misunderstood that changing the rules was for using cloud firestore with a non-firebase auth provider only based on the first line of the instructions.
like-fill
1
Gotcha! Glad that fixed it. I'll tweak the wording a bit to make that more clear.

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