在 onAuthStateChanged 中使用自定义用户名

Use custom username with onAuthStateChanged

首先,我通过以下方式注册我的客户:

const register = (e) => {
    e.preventDefault();

    auth
      .createUserWithEmailAndPassword(email, password)
      .then((auth) => {
        // The username will be created here
        db.collection("users")
          .doc(username)
          .collection("profile")
          .doc(username)
          .set({
            username: username,
          });
        // it successfully created a new user with email and password
        if (auth) {
          history.push("/dashboard");
        }
      })
      .catch((error) => alert(error.message));
  };

然后,在我的 App.js 中,我发送 SET_USER 并尝试将我的 reducer 中的 user 值设置为在我的数据库中设置的 username

function App() {
  const [{ user }, dispatch] = useStateValue();
  useEffect(() => {
    // will only run once when the app component loads...

    auth.onAuthStateChanged((authUser) => {
      console.log("THE USER IS >>> ", authUser);

      if (authUser) {
        // the user just logged in / the user was logged in

        dispatch({
          type: "SET_USER",
          user: authUser,
        });
      } else {
        // the user is logged out
        dispatch({
          type: "SET_USER",
          user: null,
        });
      }
    });
  }, []);

但是,我不确定如何从 firebase 中提取用户名并将其作为 user 值发送。

如果您使用自定义 属性,您应该 link 它到 Firebase 提供的: 您可以使用 emaildisplayName 作为描述符。

db.collection("users")
 .doc(email)
 .collection("profile")
 .doc(email)
 .set({
  username: username,
 });

这样你就可以根据邮箱找回用户名了。