如何将 firebase Auth 数据存储在 Firestore 中？

Question

所以我有一个基本的应用程序正在运行。只有一个按钮用于登录谷歌，我想将该用户的信息存储在 Firestore 中，然后我想映射每个用户并在我的应用程序中显示每个登录的用户。 Firebase 身份验证已完成，但我不知道如何存储该用户的身份验证信息。另外我正在使用 useContext 传递授权用户信息。这是代码：

主要入门级 App.js

import React, { useEffect, useMemo, useState } from "react";
import Login from "./components/Login";
import { User } from "./components/User";
import db, { auth } from "./firebase";
import { UserContext } from "./Contexts/UserContext";

const App = () => {
  const [user, setUser] = useState([]);
  const value = useMemo(() => ({ user, setUser }), [user, setUser]);
  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      // console.log(user);
      setUser(user);
    });
  }, []);
  return (
    <UserContext.Provider value={value}>
      {user ? <User /> : <Login />}
    </UserContext.Provider>
  );
};

export default App;

User.js 组件

import React, { useContext } from "react";
import { UserContext } from "../Contexts/UserContext";
import db, { auth } from "../firebase";

export const User = () => {
  const { user } = useContext(UserContext);

  return (
    <>
      <img src={user.photoURL} alt={user.displayName} />
      <div>{user.displayName}</div>
      <div>{user.email}</div>
      <button onClick={() => auth.signOut()}>Log Out</button>
    </>
  );
};

登录.js

import React, { useContext, useEffect } from "react";
import { UserContext } from "../Contexts/UserContext";
import { auth, signInWithGoogle } from "../firebase";

const Login = () => {
  const { setUser } = useContext(UserContext);
  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      console.log(user);
      setUser(user);
    });
  });
  return (
    <>
      <div style={{ textAlign: "center" }}>
        <button onClick={signInWithGoogle}>
          <img
            src="https://img.icons8.com/ios-filled/20/000000/google-logo.png"
            alt="google icon"
          />
          <span> Continue with Google</span>
        </button>
      </div>
    </>
  );
};

export default Login;

用谷歌登录

export const signInWithGoogle = () => {
  auth.signInWithPopup(provider).catch((err) => alert(err.message));
};

Answer 1

您应该在signInWithGoogle() 函数中使用then() 块，如下所示：

export const signInWithGoogle = () => {
  auth.signInWithPopup(provider)
  .then((result) => {
    const userId = result.user.uid;
    // Create a doc in a users collection
    // It's up to you to build theJavaScript objec to pass to the set() methood
    firestore.collection("users").doc(userId).set( {foo: bar, bar: foo} );
  })
  .catch((err) => alert(err.message));
};

更多详情请关注doc。