After the successful creation of a new user account using createUserWithEmailAndPassword, the collection

I'm having an issue with my signup user page where only half of it is functioning correctly.

What works: The createUserWithEmailAndPassword call via firebase firestore runs successfully.

What doesn't work: In the promise for that call, I'm trying to extract the uid from the user object and then create a corresponding user in the firestore database. However, when I try to use collection("users").set, I'm getting an error stating that the default collection is not a function (See 'Console error" below.)

The error seems to be indicating that vue or firebase does not recognize

fb.collection('users').doc(res.user.uid).set...
as a valid function. I usually get this error when I forget to include a component, but in this case, I have already used fb.auth... in the previous call.

Any assistance would be greatly appreciated!

...

firebaseConfig

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

const config = {
  // REMOVED THE VALUES FOR SECURITY, but they are correct in the app
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
}

firebase.initializeApp(config)

// firebase utils
const db = firebase.firestore()
const auth = firebase.auth()
const currentUser = auth.currentUser

// date issue fix according to firebase
const settings = {
    timestampsInSnapshots: true
}
db.settings(settings)

export default {
  db,
  auth,
  currentUser
}

Answer №1

When setting up a new user, the script utilizes fb.auth:

  fb.auth.createUserWithEmailAndPassword(this.email, this.password)

To interact with Cloud Firestore, simply employ the Firestore parameter specified in the configuration file, similar to how it's done for the Auth feature.

    fb.db.collection('users').doc(res.user.uid).set({
      email: _this.email
    })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Integrating Python Script with User Input and Output within a JavaScript Web Application

I have an existing JS website that requires additional functionality, and after some research I believe Python is the best tool to handle the necessary calculations. My goal is for users to input information that will then be used as input for my Python ...

Intersecting Rays and Positioning Spheres with three.js

I have a scenario where ray intersection is functioning properly with tube geometry. Upon ray intersection, a small red sphere and a tooltip appear next to the cursor. The image below shows the scene without a header: When I include a header using a div e ...

Issue: My application is unable to start due to the module nuxt.js not being found. Can someone help me troubleshoot

Upon attempting to execute npm run dev following the installation of dependencies, I encountered an error that has left me puzzled. Despite trying various solutions found online, none have seemed to resolve the issue. <a href="/cdn-cgi/l/email-protectio ...

What is the behavior of the JavaScript event loop when a Promise's resolution is tied to setTimeout?

console.log('1') setTimeout(() => { console.log('2') }, 0) function three() { return new Promise(resolve => { setTimeout(() => { return new Promise(resolve => resolve('3')) },0) ...

Incorporate the newest version of SASS in your Nuxt project using the @

Currently, I am implementing Sass into my project. I have successfully installed "node-sass" and "sass-loader", allowing me to utilize imports, variables, and other features of Sass. However, I am encountering an issue with using "@use" to employ a @mixin ...

Sending the selected option from a dropdown menu to populate a textbox on a separate webpage using PHP, jQuery, and AJAX

I am looking to dynamically update the value of a dropdown in index.php to a textbox in test.php using Ajax. The scenario involves having test.php embedded as an iframe within index.php. Upon changing the dropdown selection, the corresponding value should ...

The timing calculations in Vue.js do not align with the standard JavaScript version

I am currently working on developing a 'beats per minute' (BPM) calculator, which is similar to the one available here. However, I have noticed that when using the BPM calculator from that link for testing on a particular song, it quickly approxi ...

User instance does not function with the binding

When text is entered into the text box, the Angular form value changes but the userModel value remains the same , always displaying [Vino] as the userModel value. Below is the code from app.component.html, <form #userForm="ngForm"> {‌{userFor ...

Tips for styling the json response received from a servlet with jquery ajax

I am attempting to display a list of users returned from a servlet using jQuery ajax. The first script block is functioning well, successfully presenting the list of users in a formatted manner but experiencing issues passing form parameters such as text a ...

What is the method for implementing two-way binding on a checkbox in Angular?

Within my accordion, I have a series of options in the form of checkboxes. Users are able to select these checkboxes, but I am seeking a way to pre-select certain checkboxes based on specific conditions. The challenge arises when these conditions are deter ...

For the past two days, there has been an ongoing issue that I just can't seem to figure out when running npm start

After multiple failed attempts, I have exhausted all troubleshooting steps including executing npm clear cache --force, deleting node_modules/ and package-lock.json, followed by running npm install, npm build, and eventually npm run dev. The errors encoun ...

Animating the navigation toggle in a Nuxt application

When toggling the navigation into view, a simple animation using GSAP is applied. This site is being built in Nuxt/Vue, which is new for me, so I suspect that the issue might be related to how I've organized my functions. The nav toggle button and na ...

Add the child's input query first and then concentrate on it

I have successfully appended a div with a child input, but I am facing an issue where the newly appended input is not getting focused when added. $(document).ready(function() { var max_fields = 10; //maximum input boxes allowed var wrapper ...

Incorporate a PHP-generated array into JavaScript

I'm currently working on implementing a JavaScript slideshow on my index page. Rather than having a static array, I'd like to dynamically build the array using PHP and then include it in the script. However, I'm not sure how to go about this ...

The execution of dynamically generated Javascript in JSON format, returned through AJAX, is prevented when it is appended

Recently, I encountered an issue on my webpage where I made an AJAX request to a PHP script. The PHP script responded with a valid JSON object and set the Content-type header to application/json. After examining the JSON format using console.log(JSON.stri ...

What is the purpose of the video-js endcard plugin incorporating native controls into the player?

Endcard is a unique plugin designed for the video-js html5 video player that adds clickable links to the end of a video. (More information on endcards can be found here: https://github.com/theonion/videojs-endcard). To implement an endcard, simply include ...

Inquiry about how TypeScript handles object property references when passed into functions

As a newcomer to TypeScript, I am exploring the creation of a range slider with dual handles using D3.js. I have developed a simple class for managing the slider objects: export class VerticalRangeSlider{ private sliderContainer: d3.Selection<SVGG ...

Tips for programmatically choosing images from a Google Photos collection?

Currently, I am attempting to use code in the console to automatically choose a photo from a Google Photos Album while browsing. I've tried this method so far: const photo = document.getElementsByClassName('p137Zd')[0].parentElement photo. ...

Add a dynamic navigation class based on the current URL for corresponding URLs

Looking for a way to dynamically add an active class to navigation links? I came across this helpful article: Add Active Navigation Class Based on URL $(function(){ var current = location.pathname; $('#nav li a').each(function(){ ...

Top choice for removing items from a list array

Hey there, I'm working with an array of a custom type in Angular: List { task: string; id?: number; status?: boolean; } I'm trying to figure out how to delete elements where List.status == true. I've tried two methods for this. ...