After spending a couple of days troubleshooting, I finally identified the issue with Sign in/Sign Up on Firebase Authentication. It turned out to be a simple syntax problem and a JavaScript asynchronous issue.
Error message encountered: 'Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined'
Alternatively, received this error: 'Cannot read property '$store' of undefined'.
Upon closer examination, it has been discovered that there is an issue within the code provided in this tutorial. This problem stems from the fact that the signInWithEmailAndPassword() method now returns a UserCredential instead of a User.
To address this, the code must be adjusted as shown below:
login() {
fb.auth.signInWithEmailAndPassword(this.loginForm.email, this.loginForm.password).then( function (userCredential) {
const user = userCredential.user;
this.$store.commit('setCurrentUser', user)
this.$store.dispatch('fetchUserProfile')
this.$router.push('/navigation')
}).catch(err => {
this.errorMsg = err.message
})
},
It is important to note that as of version 5.0.0 of the Firebase JavaScript SDK (released on May 8, 2018), the behavior of signInWithEmailAndPassword() has been updated: it now returns a promise that resolves with a UserCredential, whereas previously, it returned a User in the earlier version. More information can be found at https://firebase.google.com/support/release-notes/js
After tackling the issue, I managed to resolve it in the following way:
login() {
fb.auth.signInWithEmailAndPassword(this.loginForm.email, this.loginForm.password).then( function (user) {
this.$store.commit('setCurrentUser', user)
this.$store.dispatch('fetchUserProfile')
this.$router.push('/navigation')
}).catch(err => {
this.errorMsg = err.message
})
},
The original code snippet was sourced from the vuegram project by Savvy app. Initially, an error was thrown stating that 'Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined'.
To troubleshoot, I referred to a suggestion on stackoverflow advising to change the javascript function() to an arrow function. This adjustment did not entirely fix the issue as it resulted in undefined user info from firebase. To address this, I included additional code based on my previous experiences.
login() {
fb.auth.signInWithEmailAndPassword(this.loginForm.email, this.loginForm.password).then(() => {
var user = fb.auth.currentUser;
console.log("User id: ", user.uid)
this.$store.commit('setCurrentUser', user)
this.$store.dispatch('fetchUserProfile')
this.$router.push('/navigation')
}).catch(err => {
this.errorMsg = err.message
})
},
As a result, the browser console now displays the successfully fetched user data. https://i.sstatic.net/XAyDR.png
I'm working on a function that utilizes a promise to retrieve data from an asynchronous ajax call: $("#mySelect").on('change', function() { var mySelectValue = $('#mySelect').val(); var promise = getAvailableDates(mySe ...
I keep seeing an error message saying "Error parsing XML: not well-formed" when I encounter this line in my javascript code: for (var i=1; i<=totalImgs; i++) If I remove the < character from the line, the parsing error goes away. However, the javas ...
I am trying to iterate through an object's array to create a table structure like the one below: import React from "react"; export default function Scoreboard(props) { return ( <div className="scoreboard"> <ta ...
Short version: How can we efficiently handle a second AJAX call after an ASP.NET Membership Authentication response? Long version: Let's say we have a web-based Paint program created using ASP.NET MVC. A user is painting a picture when suddenly their ...
Here is the structure of a JSON object: { "0": { "Order_Id": "100000001", "prodct_Status": "Pending", "Price": "8.0000", "date_created": "Jun 4, 2014 7:55:42 AM", "Shipping_Address": "vbccv", "Region": ...
Is there a way to efficiently change the inline style property of multiple items based on their position info stored in a useState hook? I want to update the CSS value of all items except for the one that was clicked on. I tried using setState to achieve t ...
I have integrated tinymce into my Vue.js application, but I am experiencing issues with uploading images. I have included the following package in my project: import Editor from '@tinymce/tinymce-vue'. I believe I might be missing a necessary pl ...
As a PHP programmer new to Angular, I am facing an issue while trying to retrieve user properties from a Laravel API. When attempting this, I encountered the following error: compiler.js:1021 Uncaught Error: Unexpected value 'UserService' importe ...
Utilizing JavaScript, I am setting a repeated background image from a canvas to a div in the following way: var img_canvas = document.createElement('canvas'); img_canvas.width = 16; img_canvas.height = 16; img_canvas.getContext('2d' ...
Is it possible to duplicate a document to the same or a new collection with a new _id? Below is the data retrieved from the query stored in "doc" (res.query) [ { _id: new ObjectId("614d4766fb2600340fdb2904"), templateName: 'first template&a ...
I'm currently working with a table code and I need to retrieve the value of the table row with the class "highlight". However, when trying to do so with the code below, I'm getting a null result. Can someone please assist me? Table name: itemtab ...
When using vanilla JavaScript in the browser, we can retrieve the hostname using: window.location.hostname However, if we are working with Node.js/Express.js on the server side, how can we achieve the same result? Furthermore, I am looking for a way to ...
I've been working on setting up a MEAN (MongoDB, Express, Node.js, Angular 6) application. I'm trying to post user signup form data to a MongoDB database, but I keep getting an error message. This is my first time working with the MEAN stack and ...
Introducing my custom Input component: export type InputProps = { error?: string } & InputHTMLAttributes<HTMLInputElement> export const Input: FunctionComponent<InputProps> = ({ error, ...props }) => ( <input {...props} /> ) ...
I need to remove the option with a value of 0 when the user selects from the dropdown list. Choose: <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <form:select id="CONTEXTE" path="CONTEXTE" onclick="go()" class="s ...
Trying to get the sphere to turn right at a very slow pace. Here is my source code: I have created a new container with canvas inside, you can view the code below. How can I make the sphere turn slowly? You can also check out my git repository on github: s ...
Important factors to remember: This is programmed to imitate the time of 11:00 PM. var bt = "23:00"; This is set to emulate 8:00 AM. var wt = "08:00"; The intended operation: The countdown timer kicks off each morning at 8:00 AM. It counts down unti ...
In my grid, one column contains checkboxes. I need to implement a feature where a button is disabled if all the checkboxes are unticked. How can I achieve this using JavaScript or jQuery? .Aspx File <asp:TemplateField HeaderText="Cancel SO Line Item"& ...
Connected to this AngularJS issue on IE10+ where textarea with placeholder causes "Invalid argument." and also this AngularJS 1.1.5 problem in Internet Explorer with ng-show and objects (Bug), we had to resort to using the textarea element as a self-closin ...
I've been working on a bookshop application using Angular 9.0 and Firebase Realtime Database. So far, I've been able to handle writing and reading data with the default rules. { "rules":{ ".read": true, ".write": true } } No ...