Question 108548 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – displayName returns null when createUserWithEmailAndPassword Firebase React

I have a small React app and I want to make a Firebase registration functionality with adding a username in registration. Registration is successful, but adding a username does not work, I get null in displayName.

  const createUser = (email, password, username) => {
    updateProfile(auth.currentUser,{
      displayName: username
    })
   return createUserWithEmailAndPassword(auth, email, password,username);
  };

Signup page

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [username, setUsername] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    if (validPass) {
      try {
        await createUser(email, password, username);
        navigate("/account");
        setNoUser(false);
      } catch (e) {
        setError(e.message);
      }
    } else {
      setWrongPassword(true);
    }
  };

<form onSubmit={handleSubmit}>
   <div>
   <label>Username</label>
    <input
      onChange={(e) => setUsername(e.target.value)}
      type="text"
      placeholder="place for username"
      required
     />
    </div>
    <div>
     <label>Email Address</label>
     <input
       onChange={(e) => setEmail(e.target.value)}
       type="email"
       placeholder="place for email"
       required
      />
     </div>
  //Here is the rest of the code that works
  </form>
Tags:

2

Answers


  1. 0

    You call updateProfile() before having created the user in the Firebase service, therefore it cannot work.

    You should first create the user and then update the profile, for example as follows:

    let user:
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    user = userCredential.user;
    return updateProfile(user,{
      displayName: username
    })
  })
  .then(() => {
    return user;
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
    Login or Signup to reply.
  2. 0

    The order of API calls here is wrong:

    const createUser = (email, password, username) => {
  updateProfile(auth.currentUser,{
    displayName: username
  })
 return createUserWithEmailAndPassword(auth, email, password,username);
};

    You can only call updateProfile once the account has been created, but you call it before calling createUserWithEmailAndPassword.

    What you’ll want to do is:

    const createUser = (email, password, username) => async {
  const result = await createUserWithEmailAndPassword(auth, email, password,username)
  updateProfile(auth.currentUser,{
    displayName: username
  })
  return result;
};

    Note that the updateProfile may not immediately update the data in currentUser. So if you want to show the result right away, you’ll want to reload the profile after updating it.

    const createUser = (email, password, username) => async {
  const result = await createUserWithEmailAndPassword(auth, email, password,username)
  await updateProfile(auth.currentUser,{
    displayName: username
  })
  await auth.currentUser.reload();
  return result;
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search