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>

HTML

Copy

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);

JavaScript

Copy

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();

JavaScript

Copy

Disqus Recommendations

We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.

❮

8 months ago

In this FREE course, you're going to learn how to build a simple real-world …

3 years ago

Learn how to sign out or log out users of their current authentication using …

3 years ago

Learn how to authenticate a user account using the …

3 years ago

Learn how to use createUserWithEmailAndPassword() to create a new Firebase …

4 months ago

Learn how to model Firestore data the right way for performance, cost, and …

3 years ago
1 comment

The onAuthStateChanged() method is triggered when a user's authentication state …

❯

tempest.services.disqus.com

tempest.services.disqus.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Disqus Comments

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

Start the discussion…

Comment

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Don't be a jerk or do anything illegal. Everything is easier that way.

Read full terms and conditions

This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:

Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
Contact me or enable others to contact me by email with offers for goods or services
Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information

Acknowledge I am 18 or older

1
Discussion Favorited!

Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!

Find More Discussions

Tweet this discussion
- Share this discussion on Facebook
- Share this discussion via email
- Copy link to discussion
Best
- Newest
- Oldest

Be the first to comment.

Load more comments

live.rezync.com

live.rezync.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

pippio.com

pippio.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Twitter Widget Iframe

Firebase Version 9 Tutorial (Modular)

Firebase Version 8 Tutorial (Namespaced)

1. Create A New User Account

2. Add User Data

3. Get User Data

tempest.services.disqus.com is blocked

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Discussion Favorited!

live.rezync.com is blocked

pippio.com is blocked