title: How to access a firestore doc that has been created for my users on account creation so they can update/add user information
body: <p>I have a cloud function that successfully creates a document in a collection called 'users', this doc generates an auto ID and saves their email upon them creating an account. The problem I'm having is accessing this document so the user can submit a form in the UI and update/add information such as; username, first name, profile pic, birthday, etc...</p>
  <p>My pop-out form in the UI is working correctly ie it closes when I press submit button, but the data I input is being written into the localhost URL. - I'm thinking this is because it is not connecting to firestore in some way.</p>
  <p>Code in auth.js file
  <strong>All imports</strong></p>
  <pre><code>import { createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword } from &quot;firebase/auth&quot;;
  import { db, auth } from &quot;./firebase&quot;;
  import { doc, setDoc } from &quot;firebase/firestore&quot;;
  </code></pre>
  <p><strong>In order of sequence</strong></p>
  <pre><code>// Initiate firebase auth
  export function initFirebaseAuth() {
      // Listen to auth state changes.
      onAuthStateChanged(auth, authStateObserver);
  };
  
  // some DOM hide element functions
  
  // Triggers when the auth state change for instance when the user signs-in or signs-out.
  function authStateObserver(user) {
      if (user !== null) {
          const displayName = user.displayName;
          const email = user.email;
          console.log(displayName, email + ' is logged in')
  
          // User is signed in! Show on Profile info
          displayUser.appendChild(displayUserEmail);
          displayUserEmail.textContent = `Logged in as: ${user.email}`;
  
          // Get the signed-in user's profile pic and name.
          var profilePicUrl = getProfilePicUrl();
          var userName = getUserName();
  
          // Set the user's profile pic and name.
          userPicElement.style.backgroundImage =
              'url(' + addSizeToGoogleProfilePic(profilePicUrl) + ')';
          userNameElement.textContent = userName;
  
          // Show user's profile and sign-out button.
          // Hide sign-in button.
          userIsLoggedIn();
  
          // show post form
          shareContent.removeAttribute('hidden');
  
          // We save the Firebase Messaging Device token and enable notifications.
          // saveMessagingDeviceToken();
      } else {
          // User is signed out!
          console.log('no user is logged in ');
          // Hide user's profile and sign-out button.
          // Show sign-in button.
          noUserLoggedIn();
  
          // hide post form
          shareContent.setAttribute('hidden', 'true');
      }
      // return user, displayName, email, photoURL, emailVerified, uid;
  };
  
  
  // Returns the signed-in user's profile Pic URL.
  export function getProfilePicUrl() {
      return auth.currentUser.photoURL || '/Assets/Images/profile_placeholder.png';
  };
  
  // Returns the signed-in user's display name.
  function getUserName() {
      return '@' + auth.currentUser.displayName || 'Create Username';
  };
  </code></pre>
  <p>User <strong>Signup Form</strong></p>
  <pre><code>// create Account
  if (signUpForm) {
      signUpForm.addEventListener('submit', (e) =&gt; {
          e.preventDefault();
  
          //get user info
          const email = signUpForm['signupEmail'].value;
          const password = signUpForm['signupPassword'].value;
  
          createUserWithEmailAndPassword(auth, email, password).then((cred) =&gt; {
              // hide signup form and show profile edit form - reset signup form
              hideSignUpModal();
              profileModal.classList.remove('hidden');
  
              // reset form
              signUpForm.reset();
              document.getElementById(&quot;signUpErr&quot;).innerHTML = &quot;&quot;;
              //return user 
              console.log(user);
              console.table(cred);
          })
          .catch(err =&gt; {
              document.getElementById(&quot;signUpErr&quot;).innerHTML = err.message;
          })
      })
  }
  </code></pre>
  <p><strong>login form</strong></p>
  <pre><code>// login form
  loginForm.addEventListener('submit', (e) =&gt; {
      e.preventDefault();
  
      const email = loginForm['loginUsername'].value;
      const password = loginForm['loginPassword'].value;
  
      signInWithEmailAndPassword(auth, email, password)
      .then(() =&gt; {
          // hide login form
          hideLoginModal();
  
          // reset form
          loginForm.reset();
          // ...
          document.getElementById(&quot;loginErr&quot;).innerHTML = &quot;&quot;;
      })
      .catch((err) =&gt; {
          document.getElementById(&quot;loginErr&quot;).innerHTML = err.message;
      });
  });
  
  const logout = document.querySelector('#logout');
  if (logout) {
      logout.addEventListener('click', (e) =&gt; {
          if (!e.target.closest('.transBtn')) return;
          auth.signOut().then(() =&gt; {
              console.log('user signed out')
          });
      });
  
  };
  </code></pre>
  <p><strong>profile edit form</strong></p>
  <pre><code>// some DOM element hide/show code
  
  // checking for user ID
  const currentUserId = auth.currentUser.uid;
  console.log(currentUserId);
  
  // edit profile
  editProfileButton.addEventListener('submit', (e) =&gt; {
      e.preventDefault();
      return setDoc(doc(db, 'users', cred.user.uid), {
          photoURL: newProfilePicURL(),
          displayName: userNameInputElement.value,
          firstName: firstNameInputElement.value,
          lastName: lastNameInputElement.value,
          birthday: birthdayInputElement.value
      })
      .then(() =&gt; {
          console.log(`updated ${displayName}'s user info`);
          alert('Your profile information has been saved!');
          // Profile updated!
          profileModal.setAttribute('hidden', 'true');
          // ...
      }).catch((error) =&gt; {
          // An error occurred
          console.error('Error Firebase Database', error.message);
          // ...
      })
  })
  
  initFirebaseAuth();
  hideLoginModal();
  hideSignUpModal();
  hideProfileModal();
  </code></pre>