React-Laravel-JWT auth

Good day Sir @prafful. Im Saiful from MOSTI September Class. I wanna ask a question related to react. Im currently trying to make a web app with react as frontend and laravel as backend. I'm using jwt-auth as 'bridge' and axios in react. Im having trouble to send data and token from react to laravel. Im able to send them separately but not both combine. When I try to send data with token, the data is stored at the config, not at data. Can you guide me the proper way to make a request from react with axios. Thanks in advance.

JWT library:

https://laravel-jwt-auth.readthedocs.io/

http axios:

  const http = axios.create({
      baseURL:"http://localhost:8000/api",
      headers:{
          "Content-type":"application/json"
      }
  })

send data with get, and display the response at console:

const pushData = ()=>{
      http.get('/devices/create', { headers: { Authorization: `Bearer ${token}` }, deviceId:deviceId, deviceName:deviceName, customer:customer }).then((res)=>{
        console.log(res)
        res.status === 200?setIsOpen(false):setFail(true)
      })
    }

DevicesController.php in Laravel just trying to response with the data that being sent:

public function create()
    {
        return response()->json(['testmasuk' => request(['deviceId', 'deviceName', 'customer'])]);
    }

here is the console output, no data at data->testmasuk, the data are at the config:
console output.png

@asaifulas

Looks like you wish to send authorization token and request body (data) both with the request. 2 or 3 ways to do it. Any one can be used

  1. axios interceptors
    ->https://github.com/axios/axios#interceptors
  2. axios headers -> https://github.com/axios/axios#global-axios-defaults
    ->axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  3. setting the token explicitly on every request using config argument
    ->
const config = {
  headers:{
    headera: valuea,
    headerb: valueb
  }
};
const url = "api end point";

const data ={
  name: "Prafful Daga",
  email: "prafful@airasia.com"
}

Next,

axios.get(url, config)
  .then(res=> console.log(res))
  .catch(err=> console.log(err))

OR

axios.post(url, data, config)
  .then(res => console.log(res))
  .catch(err => console.log(err))

Pl. see if this helps!

Tq sir...