0

I have a 3 step form and the last step is register or log in step. If the user is already logged in the third step is not shown to him and after second step the form will generate post using wp rest API. this is working completely fine if the user is loggedIn.

For authentication part I'm customising theme/plugin which was not made by me. So far I was able to write my own register and log in templates and to create my own js ajax requests which utilises plugin's php code and they work fine but If I try to call a function which creates the post after I get the success response from the logIn function I get: rest_cookie_invalid_nonce error.

register ajax js:

    registruoti: function() {
    let vue = this;

        var ajaxData = {
            action: 'urbango_membership_register_user',
            security: jQuery('.edgtf-register-form').find('#edgtf-register-security').val(),
            register_data: jQuery('.edgtf-register-form2').serialize()
        };

        var loginData = {
          user_login_name: jQuery('#user_register_name2').val(),
          user_login_password: jQuery('#user_register_password2').val(),
        }

        var ajaxDataLogin = {
          action: 'urbango_membership_login_user',
          security: jQuery('#edgtf-login-security').val(),
          login_data: jQuery.param(loginData),
        }

      jQuery.ajax({
            type: 'POST',
            data: ajaxData,
            url: edgtfGlobalVars.vars.edgtfAjaxUrl,
            success: function (data) {
                var response;
                response = JSON.parse(data);
                console.log(response);
              vue.prijungti(ajaxDataLogin);  //log in function is called
            }
        });
    },

log in ajax js:

       prijungti: function (ajaxData) {
        let vue = this;

          jQuery.ajax({
            type: 'POST',
            data: ajaxData,
            url: edgtfGlobalVars.vars.edgtfAjaxUrl,
            success: function (data) {
              var response;
              response = JSON.parse(data);
              vue.postinti();
            }
          });
        },

Post request to the api:

    postinti: function() {
      let vue = this;

        let postData = {
            title: this.selectedJobTitle,
            status: "publish",
            content: this.uzklausa.aprasymas,
              meta: {
              'marke': this.uzklausa.marke,
              'modelis': this.uzklausa.modelis,
              'metai': this.uzklausa.metai,
              'adresas': this.uzklausa.adresas,
                'lat': this.place.geometry.location.lat(),
                'long': this.place.geometry.location.lng(),
                'miestas': this.place.address_components[1].long_name,
              }
        };

        postData = JSON.stringify(postData);

        jQuery.ajax({
            url: 'wp-json/wp/v2/car_owner',
            method: 'POST',
            data: postData,
            crossDomain: true,
            contentType: 'application/json',
            beforeSend: function ( xhr ) {
                xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
            },
            success: function( data ) {
              var files = vue.imagesForUpload;
              console.log(files)

              for (let x = 0; x < files.length; x++) {
                var formData = new FormData();
                formData.append("file", files[x]);
                formData.append( 'title', 'testas' + x );
                formData.append( 'caption', 'testuojame' + x);
                formData.append( 'post', 2911);

                jQuery.ajax({
                  url: 'wp-json/wp/v2/media',
                  method: 'POST',
                  data: formData,
                  crossDomain: true,
                  contentType: false,
                  cache: false,
                  processData: false,
                  beforeSend: function ( xhr ) {
                    xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce);
                  },
                  success: function( data ) {
                    console.log( data );
                  },
                  error: function( error ) {
                    console.log( error );
                  }
                });
              }
            },
            error: function( error ) {
                console.log( error );
            }
        });
    }

I think this has to do something about that nonce is created while the user is not loggedIn and it tries to add post without the reload or I might need to set some auth cookies.

I could also redirect with query params in the url and do the post creation via php but I'm not sure how to upload the files only after the user is logged in. I need something to point me into the right direction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.