Symfony 4 FOSuserbundle - submit form via React-Redux Axios

Question

I am building a PWA using Symfony 4 as back-end and also using FOSUserbundle to manage users.

When submitting the register form using redux-form and Axios it is not posting the information as required.

This is what I see at the Network tab of Firefox's devtools as being posted;

   {"fos_user_registration_form[email]":"email@gmail.com",
    "fos_user_registration_form[plainPassword[first]":"password",
    "fos_user_registration_form[plainPassword[second]":"password",
    "fos_user_registration_form[username]":"username"}

And this is what a dump of $_POST shows in the controller:

array(1) { ["{"fos_user_registration_form"]=> array(1) { ["email"]=> string(0) "" } }

The correct $_POST output should be ( when posting using the regular Symfony/FOSUserbundle form) :

array(1) { ["fos_user_registration_form"]=> array(3) { ["email"]=> string(22) "email@gmail.com" ["username"]=> string(8) "username" ["plainPassword"]=> string(8) "Array(2)" } }

On the Redux action that handles the post below I've used the same HTTP Headers that I have observed on the 'regular' Symfony/FOSUserbundle post request:

export function actionSubmitRegister(values){
const url = "/register/";
return {
    type: SUBMIT_REGISTER,
    payload: axios.post(url,{
            "fos_user_registration_form[email]": values.fos_user_registration_form['email'],                    
            "fos_user_registration_form[plainPassword][first]": values.fos_user_registration_form['plainPassword']['first'],
            "fos_user_registration_form[plainPassword][second]": values.fos_user_registration_form['plainPassword']['second'],
            "fos_user_registration_form[username]": values.fos_user_registration_form['username']},
            {
                headers: {
                    'Accept':'text/html,application/xhtml+xml',
                    'Content-Type':'application/x-www-form-urlencoded'}
        })
}
}

So, I do have an issue of formatting, but I do not seem to be able to arrange it correctly.

Thanks

Answer 1

It seems that Axios is unable to handle the 'Content-Type':'application/x-www-form-urlencoded' despite accepting the header parameter.

As per the documentation, one needs to use URLSearchParameters to accomplish that. Also a polyfill is required to address the usual suspects ( IE ) that do not support it.

So, the code for the Redux action should look like this ( without using the polyfill ):

export function actionSubmitRegister(values){
const url = "/register/";

let data = new URLSearchParams();
data.append("fos_user_registration_form[email]", values.fos_user_registration_form['email']);
data.append("fos_user_registration_form[plainPassword][first]", values.fos_user_registration_form['plainPassword']['first']);
data.append("fos_user_registration_form[plainPassword][second]", values.fos_user_registration_form['plainPassword']['second']);
data.append("fos_user_registration_form[username]",values.fos_user_registration_form['username']);
return {
    type: SUBMIT_REGISTER,
    payload: axios.post(url, data)
}
}