Get User Data By UID Using Firebase v9 Auth & Cloud Firestore

Learn how to get user data from the Cloud Firestore in Firebase 9 (the latest version).

In order to get the user data from the Cloud Firestore, you’ll typically need to have the user authentication functionality in place using Firebase Authentication.

Secondly, you’ll also need to add user data to the Cloud Firestore Database upon creating a new user account.

At this stage, I assume you’ll know how to create a Firebase project and add the Firebase SDK initialization code to your web app.

1. Create A New User Account

First, create a new user account in the Firebase Authentication back-end.

For more:
1. Create User With Email And Password
2. Authentication State Changed
3. Sign In A User With Email And Password
4. Sign Out A User

<form>
  <input type="email" id="email" placeholder="Email"/>
  <input type="password" id="password" placeholder="Password"/>
  <button id="signup-btn">Create Account</button>
</form>

<script type="module">
  import {
    getAuth,
    createUserWithEmailAndPassword,
  } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";

  const auth = getAuth();

  const email = document.getElementById("email");
  const password = document.getElementById("password");
  const signUpBtn = document.getElementById("signup-btn");

  const signUpButtonPressed = async (e) => {
    e.preventDefault();
    try {
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        email.value,
        password.value
      );
      console.log(userCredential);
    } catch (error) {
      console.log(error);
    }
  };
  signUpBtn.addEventListener("click", signUpButtonPressed);
</script>

2. Add User Data

Add user data to the Cloud Firestore right after the user account is created using the currently logged-in user’s uid as a document ID.

...
import {
  getFirestore,
  doc,
  setDoc,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-firestore.js";

const db = getFirestore();
...
const signUpButtonPressed = async (e) => {
  e.preventDefault();
  try {
    const userCredential = await createUserWithEmailAndPassword(
      auth,
      email.value,
      password.value
    );
    
    // Add User Data
    const docRef = doc(db, "users", userCredential.user.uid);

    await setDoc(docRef, {
      email: email.value,
    });
    // Add User Data


  } catch (error) {
    console.log(error);
  }
};
signUpBtn.addEventListener("click", signUpButtonPressed);

3. Get User Data

Get user data when a user signs in to an existing account from the Firebase Authentication using the currently logged-in user’s uid as a document id.

import {
  ...
  getDoc,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-firestore.js";

const auth = getAuth();
const db = getFirestore();

const getUserData = async () => {
     try {
        const docRef = doc(db, "users", auth.currentUser.uid);
        const docSnap = await getDoc(docRef);
        console.log(docSnap.data());
      } catch (error) {
        console.log(error.code);
      }
}

getUserData();