Having trouble with Vuex actions. Getting an error message that says "Failed to signInWithEmailAndPassword: The first argument "email" must be a valid string."

I recently started exploring Vuejs state management. I attempted to create a login system with Firebase using Vuex. However, I encountered the following error:

signInWithEmailAndPassword failed: First argument "email" must be a valid string

I'm having trouble pinpointing the issue.

<pre>
//  store/auth.js

export const actions = {
    loginUser(payload){
        firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
        .then(user => {           
            console.log(user);
        })
        .catch(error => {
            console.log(error);            
        }) 
    }
}


// Login.vue

export default {
    data(){
      return{
        email:'',
        password:''
      }
    },
    methods:{
      login(){
        this.$store.dispatch('auth/loginUser', {email:this.email, password:this.password})
      }
    }
}
</pre>   

// Form

<v-flex xs12>
                  <v-text-field
                    v-model="email"                           
                    name="email"
                    label="Email"
                    type="email"
                    required></v-text-field>
                </v-flex>
              </v-layout>

              <v-layout row>
                <v-flex xs12>
                  <v-text-field
                    v-model="password"                               
                    name="password"
                    label="Password"
                    type="password"
                    required></v-text-field>
                </v-flex>
              </v-layout>

Answer №1

Make sure to correctly pass the payload to the action function.

Here's the correct way to do it:

loginUser(context, payload) => {
   //...
}

For more information, refer to the documentation: https://vuex.vuejs.org/guide/actions.html

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

Having trouble displaying form in a different view, form is not appearing as expected

I am facing an issue with rendering a form inside a modal. The form is being rendered but the form_for does not show up, only the inputs are visible. This prevents me from targeting the submit button, which I need for ajax functionality. My file path: Adg ...

Sorting through an array of objects based on a key and value that match another object

Is it possible to filter or query an array with the following structure? [ { 'xml:id': 'Name1', sex: { '$t': 'M' }, occupation: { n: 1 ...

When forcibly closing a window, the disconnect event for Socket.IO sockets may not trigger as expected

Currently in the process of creating chat rooms with Socket.io. I've had good success so far, as it's user-friendly and well-documented. However, I've noticed that if I reload the page, wait for the socket to connect, and then close the w ...

Optimal method for managing user session data in Vue with the power of Laravel and Inertia

I am creating an application that features a dynamic menu using Laravel, Vue, and Inertia. To transmit the session details about the menu items to be displayed (such as icons) and user information (like avatar and name), I currently rely on the HandleIner ...

Vue Bootstrap Checkbox and <b-table> with <b-form-checkbox> components combine to provide a powerful and flexible user

I am currently implementing b-form-checkbox with b-table to fetch the selected module Ids. <b-table id="module-table" :items="list.modules" :fields="fields" :busy="isBusy"> <template slo ...

Retain the user's input in the text box even after the form has been submitted

Currently, I am tackling the challenge of creating a register form with an error handler to manage any mistakes made by users during registration. Once the form is submitted, potential errors are displayed to the user. To enhance user experience, I am ex ...

Utilizing properties from the same object based on certain conditions

Here's a perplexing query that's been on my mind lately. I have this object with all the styles I need to apply to an element in my React app. const LinkStyle = { textDecoration : 'none', color : 'rgba(58, 62, 65, 1)', ...

Sharing the same instance of a class across various entry points in webpack output: A guide

Are separate instances of a class created when it is imported into different entry-point files of webpack? I need to import a class called AJAX and maintain the same instance throughout the project across all entry-point files. Currently, AJAX is used as ...

Router DOM in conjunction with Next.js

I am attempting to extract the output of the code in navigation, but unfortunately it is generating a dreadful error: Unhandled Runtime Error Error: You cannot render a <Router> inside another <Router>. You should never have more than one in ...

Merge three asynchronous tasks into a single observable stream

I have 3 different observables that I am using to filter the HTML content. Here is the TypeScript code snippet: fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear); isLoading$ = this.store$.select(this.tableStoreService.tableSelector ...

Mui CardContent not displaying transparent background color properly

I recently completed a course that used MUI v4, and I'm now facing challenges with transitioning to v5. Despite my best efforts, I am struggling to replicate all the styles and find myself stuck. This issue relates to my FeaturedMovie.jsx component i ...

What is the jQuery alternative for the classList property in vanilla JavaScript?

Currently, I am working on a collaborative project with two acquaintances. One of the requirements is to stick to either vanilla JavaScript selectors like document.getElementById("thisDiv"); or jQuery selectors such as $("#thisDiv"); to maintain consis ...

Issue encountered while attempting to remove a row from a table (JavaScript)

I'm encountering an error when attempting to delete a table row: "Uncaught ReferenceError: remTable is not defined index.html:1:1". When I inspect index.html to identify the issue, I find this: remTable(this) This is my code: const transact ...

Utilizing Leaflet to Ensure Polylines Align with Roads

I have a scenario where I am loading markers from a database and then connecting them with a polyline to calculate the overall distance. This approach saves me from having to calculate the distance between each pair of markers individually. However, I&apo ...

What is the solution for getting rid of the "clear sort" state in an angular-ui-grid column header?

I am looking for information on how to remove the default behavior where the 3rd click disables sort and stays "neutral" on sortable headers. Having a disable sort state seems flawed as it does not change the sort order. How can I eliminate the 3rd state ...

Filter the output from a function that has the ability to produce a Promise returning a boolean value or a

I can't help but wonder if anyone has encountered this issue before. Prior to this, my EventHandler structure looked like: export interface EventHandler { name: string; canHandleEvent(event: EventEntity): boolean; handleEvent(event: EventEntity ...

Getting an error that reads, "Unable to read properties of null (reading 'uid')," but surprisingly, the application continues to function properly

After logging out, I encounter the following error: (Uncaught TypeError: Cannot read properties of null (reading 'uid')). However, my application functions as intended. During the logout process, I delete an API access token from the user docume ...

Use an external javascript file in AngularJS if permitted

To ensure that my HTML page only loads an external JavaScript file when the variable $scope.jsallowed is set to true, I attempted the following code implementation within my AngularJS based page: <script src="assets/js/slider.min.js" data-ng-if="jsallo ...

Employ the setInterval function to run a task every 15 minutes for a total of

I have a task that requires me to use setInterval function 5 times every 15 minutes, totaling one hour of work. Each value retrieved needs to be displayed in an HTML table. Below is the table: enter image description here For example, if it is 7:58 p.m. ...

Retrieve every checklist associated with all the cards in Trello

Can I retrieve all checklists from every card that I am a member of in a single API request? I am hoping to use this path: Trello.get('members/me/cards/all/checklists', function(checklist) { ... }); Is it feasible to achieve this with just one ...