How do I store firebase Auth data in firestore? - reactjs

Question

So I have a basic app running. There's just one button which is used to login with google and I want to store that user's info in firestore and then I want to map through every user and display every single user's which are signed in, in my app. Firebase auth is complete but I don't know how to store that user's auth info.Also I am using useContext to pass authorized users info.Here's the code:
Main Entry Level 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 Component
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>
</>
);
};
Login.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;
signInWithGoogle
export const signInWithGoogle = () => {
auth.signInWithPopup(provider).catch((err) => alert(err.message));
};

Answer 1

You should use a then() block in your signInWithGoogle() function, as follows:
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));
};
More details in the doc.