Axios + JWT auth + October error



  • 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 :
    Screen 2020-11-19 124640.jpg

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



  • @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.



  • @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



  • @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



  • @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 :

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



  • 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.



  • @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.



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


Log in to reply