Axios Request Does Not Return a Token - authentication

Question

i'm trying to apply token for my request. So i tried to console.log the result of the request, and cannot find any token there inside the object array.
Object {
"config": Object {
"adapter": [Function xhrAdapter],
"data": "ktp=3578270708950002&member=199508070003",
"headers": Object {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/x-www-form-urlencoded",
},
"maxContentLength": -1,
"method": "post",
"timeout": 0,
"transformRequest": Object {
"0": [Function transformRequest],
},
"transformResponse": Object {
"0": [Function transformResponse],
},
"url": "http://103.53.10.122/mobile/LoginCheck.php",
"validateStatus": [Function validateStatus],
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
},
"data": Array [
Object {
"status": "67457",
},
],
"headers": Object {
"connection": "keep-alive",
"content-type": "text/html; charset=UTF-8",
"date": "Fri, 22 Dec 2017 05:38:21 GMT",
"server": "nginx",
"transfer-encoding": "chunked",
"vary": "Accept-Encoding",
},
"request": XMLHttpRequest {
"DONE": 4,
"HEADERS_RECEIVED": 2,
"LOADING": 3,
"OPENED": 1,
"UNSENT": 0,
"_aborted": false,
"_cachedResponse": undefined,
"_hasError": false,
"_headers": Object {
"accept": "application/json, text/plain, */*",
"content-type": "application/x-www-form-urlencoded",
},
"_incrementalEvents": false,
"_lowerCaseResponseHeaders": Object {
"connection": "keep-alive",
"content-type": "text/html; charset=UTF-8",
"date": "Fri, 22 Dec 2017 05:38:21 GMT",
"server": "nginx",
"transfer-encoding": "chunked",
"vary": "Accept-Encoding",
},
"_method": "POST",
"_requestId": null,
"_response": "[{\"status\":\"67457\"}]",
"_responseType": "",
"_sent": true,
"_subscriptions": Array [],
"_timedOut": false,
"_trackingName": "unknown",
"_url": "http://103.53.10.122/mobile/LoginCheck.php",
"readyState": 4,
"responseHeaders": Object {
"Connection": "keep-alive",
"Content-Type": "text/html; charset=UTF-8",
"Date": "Fri, 22 Dec 2017 05:38:21 GMT",
"Server": "nginx",
"Transfer-Encoding": "chunked",
"Vary": "Accept-Encoding",
},
"responseURL": "http://103.53.10.122/mobile/LoginCheck.php",
"status": 200,
"timeout": 0,
"upload": XMLHttpRequestEventTarget {},
"withCredentials": true,
},
"status": 200,
"statusText": undefined,
}
Can someone point me how to add token to authenticate, because i'm still confuse about the concept even after reading it. So if i'm not mistaken, i should do the following in order:
Generate the token when user successfully login
Save the token in local storage
Use the token for each request (How does the backend check the validity of the token?)
Any help would be appreciated

Answer 1

Depending on the way the backend handles API requests you should either use axios.get and append the token to the URL or use axios.post and pass a object as body to the method with your token.
E.g.
axios.post('http://103.53.10.122/mobile/LoginCheck.php', {
username: "test",
password: "1234"
})
.then((res) => {
console.log(res);
/*
In this example I assume that res.data has the token returned from the backend
The res.data should look like this then:
{
token: "1234"
}
*/
let token = res.data.token;
AsyncStorage.setItem("token", token);
})
.catch((err) => {
console.log(err);
});
To use the token for each request save it in AsyncStorage for persistent storage or in the redux state if you are using redux.
On the server side you could generate a JSON web token which contains all data you need for authenticating the user and validating it with the data stored in a database. Due to the fact that you are using PHP I can recommend you this introduction to JSON web tokens in combination with PHP: https://www.sitepoint.com/php-authorization-jwt-json-web-tokens/