Axios + JWT auth + October error

[Incremental]

Hello, I have a working application with MDB vue.
As I’m switching to Quasar, I’d like to perform the same.
For registering an User, I have a Store performing the Axios call invoked from my vue :

CreateUser.vue :

// REGISTER new User
        const user_data = new URLSearchParams();
        // Get data from the form
        user_data.append("name", this.name);
        user_data.append("surname", this.surname);
        user_data.append("email", this.email);
        user_data.append("password", this.password);
        user_data.append("password_confirmation", this.password_confirmation);

        // Call store 'Server' : registerUser()
        this.$store.dispatch('server/registerUser', { user: user_data });

store :

const actions = {
   registerUser ({ commit }, user) {
      this.$axios
         .post(Constantes.SERVER_URL + "/api/auth/register", user)
         .then(response => {
            router.push({ name: "usercreated" });  // or POPUP success
         })

But I get the following error within Axios :

As it’s working with the same configuration with MDB framework, what could be wrong ?
Thanks

[metalsadman]

@Incremental your error is in your data params, in your client you have stores your data in user object, but in your backend you accessed it directly. Should be $data['user']['password'], it’s stated in your error log, totally unrelated to quasar.

[Incremental]

@metalsadman thanks for your answer, but I’m completely lost !!!..
Is there a difference with Axios in Quasar ?
Based on this tuto : https://www.youtube.com/watch?v=8S3DySmMOuk#comments
I’ve done it in MDB without any Error and my user is being created in October.

I didn’t changed anything on the server side, so what could change in Quasar which modify the URLSearchParams() data passed to Axios ???
It could be the only reason which disturbs JWTauth October’s plugin ?

Is there something to parameter somewhere ???
Thanks

[beets]

@Incremental If you want a quick fix, try changing this line:

   registerUser ({ commit }, user) {

to

   registerUser ({ commit }, { user }) {

It might work, but as metalsadman said, it really looks like you are sending a different object than you did in MDB

[Incremental]

@beets Thanks a lot, it perfectly works with your syntax !!!
I’m trying to understand… Could you please explain the difference ?

Here is my user declaration in the store :

user: {},

I understand that the object is sent differently, but I build the “user” string the same way.
In CreateUser.vue If I put a trace before calling the store with :

this.$store.dispatch('server/registerUser', { user: user_data });

I get :

name=toto&surname=toto&email=toto%40toto.com&password=totototo&password_confirmation=totototo

The only differences with Quasar are in the store :

• syntax with an index.js : https://forum.quasar-framework.org/topic/6796/vuex-store-syntax-in-quasar/11?_=1605859714645

• Quasar structure with Axios in a boot file.

It would be very nice to have a sample in the Quasar doc, I spent so many days on these differences…

[Incremental]

I modified the code (differently from all the tutos ie : Ivan Doric)
My forms directly fills the object credentials :

      credentials: {
        // Valeurs par défaut ???
        name: 'toto',
        surname: 'toto',
        email: "toto@toto.com",
        password: 'toto',
        password_confirmation: "toto"
      },

and on submit, I directly do :

this.$store.dispatch('server/registerUser', { user: this.credentials });

Now it works without error.
My only frustration is that this code is different from all the tutos I saw…

I opened a discussion with the plugin developer here : https://github.com/rluders/oc-jwtauth-plugin/issues/40
The error handling should be improved.

[beets]

@Incremental Glad it worked, instead of the fix I suggested, it’s probably more clear to do this:

const actions = {
   registerUser ({ commit }, data) { // note change here
      this.$axios
         .post(Constantes.SERVER_URL + "/api/auth/register", data.user) // note change here
         .then(response => {
            router.push({ name: "usercreated" });  // or POPUP success
         })

Basically, you were trying to POST this info

data: {
      user: {
        // Valeurs par défaut ???
        name: 'toto',
        surname: 'toto',
        email: "toto@toto.com",
        password: 'toto',
        password_confirmation: "toto"
      }
}

when you needed to POST this:

data: {
  // Valeurs par défaut ???
  name: 'toto',
  surname: 'toto',
  email: "toto@toto.com",
  password: 'toto',
  password_confirmation: "toto"
}

Edit I see the linked github issue mentions the same.

[Incremental]

Thanks a lot beets, I used your suggestions with success ;-))