使用带有 onAuthStateChanged 的自定义用户名答案

【问题标题】：Use custom username with onAuthStateChanged使用带有 onAuthStateChanged 的自定义用户名
【发布时间】：2020-11-10 23:20:34
【问题描述】：

首先，我将我的客户注册到：

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 值发送。

【问题讨论】：

标签： firebase google-cloud-firestore firebase-authentication google-authentication

【解决方案1】：

如果您使用自定义属性，则应将其链接到 Firebase 提供的属性：您可以使用email 或displayName 作为描述符。

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

这样您就可以根据电子邮件检索用户名。

【讨论】：