react component not getting a return from asyncronous method

Question

I'm working on a simple application that uses firebase for google sign on authentication. The authentication part works as far as I can because I'm getting a uid for the user. However, when I try to create a firebase database instance, and call createUserDocumentFromAuth and pass it the user that was created, I don't see the app going to the method in the console-it looks like it hangs. I put a test method in-hitThis- and I get a return from it, but not the other method.

firebase.utils.js
    import {initializeApp } from 'firebase/app';
import { getFirestore, collection,doc, getDocs } from 'firebase/firestore';

import {
        getAuth,
        signInWithRedirect,
        signInWithPopup,
        GoogleAuthProvider
    } from 'firebase/auth';


// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyB8FRK9lJ8WFJa5MnCraDBTiJWN3TJCKmg",
    authDomain: "ztm-react-project.firebaseapp.com",
    projectId: "ztm-react-project",
    storageBucket: "ztm-react-project.appspot.com",
    messagingSenderId: "737539305609",
    appId: "1:737539305609:web:d7a6bd52d7af973f475658"
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  const provider = new GoogleAuthProvider();
  provider.setCustomParameters({
    prompt: "select_account"
  });

  export const auth = getAuth();
  export const signInWithGooglePopup = () => signInWithPopup(auth,provider)

  
  export const createUserDocumentFromAuth = async (userAuth) => {
   const userDocRef = doc(db, 'users', userAuth.uid);   
    console.log(userDocRef);
  }

  export const hitThis = () =>{
    console.log('hit this');
  }

   sign-in.component.jsx

    import { signInWithGooglePopup, createUserDocumentFromAuth, hitThis} from '../../utils/firebase/firebase.utils';

const SignIn = () =>{
    hitThis();
    const logGoogleUser = async () => {
        const user = await signInWithGooglePopup();
        createUserDocumentFromAuth(user);
    }
   return(
    <div>
    <h1>Sign In Page</h1>
    <button onClick={logGoogleUser}>Sign in with Google Popup</button>
</div>

   );

   }
   

export default SignIn

Answer 1

Your createUserDocumentFromAuth function doesn't call any API that writes data, so that'd explain why you don't see any result in the database. To actually write data, call setDoc as shown in the documentation on writing data to a new document reference .