How to Encrypt Request Payload in Reactjs

after I find out myself and finally I find what I want.

the best way to encrypt data on a payload is to make it encrypted into an object then when the data is received on the controller it is decrypted again

then the most important way when the local strategy in the passport only wants email and password only .. so manipulated again in req.body

in react js

const result = {data : encrypt(values)}
axios.post(`${API}/signin`, result) // I simplify the coding

after that in controller nodejs

app.post(`${api_path}/signin`, 
            validateBody(schemas.loginEncryptAccSchema),
            requireSignIn, //focus in this function
        (req, res, next) => {
            const { user }    = req;
            const { decrypt } = req.query
                  params      = { user, decrypt };
            return console.log('params', params); // i stopped

            const c_account   = new ControllerAccount(params);
            c_account._postSignin(doc => res.status(200).json(doc))
    });

requireSignin function

const requireSignIn       = (req, res, next) => {
        const data     = req.body.data;
        const bytes    = CryptoJS.AES.decrypt(data, `${KEY_CHAIN}`); //i decrypt
              req.body = JSON.parse(bytes.toString(CryptoJS.enc.Utf8)); //then i assign into req.body again
        passport.authenticate('local', { session : false })(req, res, next);
    }

finaaaalyyy xD

You can use JWT encryption and create algorithm that backend can understand/decode when request is handled by the express.

    const jwtDetails = {
        secret: 'your secret', 
        key: 'your key'
    };

    jwtEncrypt.generateJWT(
        jwtDetails,
        payload,
        constants.encryption,
    ).then(token => {
        // use your token on you request payload
    });

On your request payload it will look like this.

data: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJmZDJhMDA0Yy0wMTIzLTRmZDctOGEzMi1mY2MzZGJiMmQ1YjAiLCJkYXRhIjp7InB1YmxpYyI6eyJhY2NvdW50IjoiNDAwNyIsInBhc3N3b3JkIjoiMTIzNDU2IiwiYXBpX2tleSI6IkREZTgwZjg0MWVhN2JjOWU3ODk0NmUwYjlkNmQ5YjdlMjAwZWQ1NDY4YSIsInVzZXJfdHlwZSI6WyJBR0VOVCJdfSwiZW5jRGF0YSI6ImQxYmJhNjJhMzE2NWI2MDRhYTM2YTU3ZGZjNTQ2ZTRmIn0sImlhdCI6MTYxNTczMDQ4NCwiZXhwIjoxNjE1NzczNjg0fQ.xVbWKBYJBvpHeYVMqr96nYkLNqkoiOeWRkZ5GmiOi3w

What you can do is

Instead of doing encryption and then decryption in your frontend side.
You can handle it by your backend 

Simple and secure way is like you just need to pass username and password from 
your front end.

Then check both value are not empty.if you get any field empty then return 
error 402 with error message 

If you get both value then first check your user exist or not if not then 
return error 

If your user exist then an then you need to create token from your server side 
and store this token with your user table/document 

When you successfully store your token in users table/model then return 
response with your success message and your token.

Finally you can use your token in frontend. 

You can store this token in localStorage or as cookie in your frontend 

Then in every request which need to be authenticated you can pass your token 
in header of that request and you can verify your token from backend.

If token is not valid then you can simple throw error message that user is not 
authenticated.

Or you can give permission for sending response as per request      

Example :

   //your data and secrete key 
   var ciphertext = CryptoJS.AES.encrypt('my message', 'secret key 123'); in crypto js    

  then you can pass it to your servere like { data : ciphertext } as payload 

  use that secrete key(like : 'secret key 123') to decrypt your reqest data in your backend side