What code can I use to access a bearer token that's been stored in localStorage?
const apiClient = axios.create({
baseURL: 'http://localhost:5000/api/v1',
withCredentials: false,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'.
Authorization: ???
}
});
I'm having trouble sending auth headers using a axios Service. When I hardcode the existing bearer token it works, but how can I dynamically access that for each user as it changes?
This is what worked! Thanks to DigitalDrifter for showing me the getItem function in localStorage.
I've been storing the bearer token in 'user' state, so I retrieved the object, parsed it, then inserted it into the Authorization header.
const user = JSON.parse(localStorage.getItem('user'));
const token = user.token;
const apiClient = axios.create({
baseURL: 'http://localhost:5000/api/v1',
withCredentials: false,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
}
});
A request interceptor can be used to set the Authorization header prior to each outgoing request.
// Add a request interceptor
axios.interceptors.request.use(function (config) {
let token = localStorage.getItem('bearer_token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
Related
I'm working through this tutorial on creating an app that uses the Spotify API. Everything was going great until I got to the callback portion of authenticating using the authentication code flow.
(I do have my callback URL registered in my Spotify app.)
As far as I can tell, my code matches the callback route that this tutorial and others use. Significantly, the http library is axios. Here's the callback method:
app.get("/callback", (req, res) => {
const code = req.query.code || null;
const usp = new URLSearchParams({
code: code,
redirect_uri: REDIRECT_URI,
grant_type: "authorization_code",
});
axios({
method: "post",
url: "https://accounts.spotify.com/api/token",
data: usp,
headers: {
"content-type": "application/x-www-form-urlencoded",
Authorization: `Basic ${new Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString("base64")}`,
},
})
.then(response => {
console.log(response.status); // logs 200
console.log(response.data); // logs encoded strings
if (response.status === 200) {
res.send(JSON.stringify(response.data))
} else {
res.send(response);
}
})
.catch((error) => {
res.send(error);
});
Though the response code is 200, here's a sample of what is getting returned in response.data: "\u001f�\b\u0000\u0000\u0000\u0000\u0000\u0000\u0003E�˒�0\u0000Ee�uS\u0015��\u000e�(\b\u0012h\u0005tC%\u0010\u0014T\u001e�����0��^:���p\u0014Ѻ\u000e��Is�7�:��\u0015l��ᑰ�g�����\u0"
It looks like it's encoded, but I don't know how (I tried base-64 unencoding) or why it isn't just coming back as regular JSON. This isn't just preventing me logging it to the console - I also can't access the fields I expect there to be in the response body, like access_token. Is there some argument I can pass to axios to say 'this should be json?'
Interestingly, if I use the npm 'request' package instead of axios, and pass the 'json: true' argument to it, I'm getting a valid token that I can print out and view as a regular old string. Below is code that works. But I'd really like to understand why my axios method doesn't.
app.get('/callback', function(req, res) {
// your application requests refresh and access tokens
// after checking the state parameter
const code = req.query.code || null;
const state = req.query.state || null;
const storedState = req.cookies ? req.cookies[stateKey] : null;
res.clearCookie(stateKey);
const authOptions = {
url: 'https://accounts.spotify.com/api/token',
form: {
code: code,
redirect_uri: REDIRECT_URI,
grant_type: 'authorization_code',
},
headers: {
Authorization: `Basic ${new Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64')}`,
},
json: true,
};
request.post(authOptions, function (error, response, body) {
if (!error && response.statusCode === 200) {
const access_token = body.access_token;
const refresh_token = body.refresh_token;
var options = {
url: 'https://api.spotify.com/v1/me',
headers: { Authorization: 'Bearer ' + access_token },
json: true,
};
// use the access token to access the Spotify Web API
request.get(options, function(error, response, body) {
console.log(body);
});
// we can also pass the token to the browser to make requests from there
res.redirect('/#' + querystring.stringify({
access_token: access_token,
refresh_token: refresh_token,
}));
} else {
res.redirect(`/#${querystring.stringify({ error: 'invalid_token' })}`);
}
});
});
You need to add Accept-Encoding with application/json in axios.post header.
The default of it is gzip
headers: {
"content-type": "application/x-www-form-urlencoded",
'Accept-Encoding': 'application/json'
Authorization: `Basic ${new Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString("base64")}`,
}
I'm trying to make a request with generated git token, but it seems like I'm making a wrong authentication, what am I doing wrong? Thanks
const token = 'my github token'
fetch('https://api.github.com/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'bearer' + token
},
body: JSON.stringify({ query: QUERY })
})
.then(res => res.json())
.then(data => console.log(data))
}
Error message:
{message: 'This endpoint requires you to be authenticated.'}
Solved it by putting space in bearer:
'Authorization': 'bearer ' + token
async create() {
const data = {
name: this.name
};
const headers = {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${this.token}`
};
axios
.post("URL", data, headers)
.then(res => {
console.log('SUCCESS');
})
.catch(err => console.log(err.response));
}
The token from the login component. The token is loaded correctly as the POST request returns success when tried in Postman but the axios call returns
{ message: 'Unauthenticated.' },
status: 401,
statusText: 'Unauthorized'
Any pointers would be appreciated to identify the direction or root of this error.
You're passing the headers to the axios incorrectly. Try this:
const headers = {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${this.token}`
};
axios.post(URL, data, { headers })
That's why your Authorization header is not included in your request and the server returns 401.
I am experimenting with Kentico Delivery Preview API using VueJS, which allows you to get unpublished content by submitting a bearer token for authorisation (https://developer.kenticocloud.com/reference#authentication). However, no matter what I do I get a 401 in response. PROJECT_ID, ITEM_NAME and TOKEN are all correct, taken from the project, so it's not a typo issue. I admit I don't have much experience with auth, but any help would be appreciated:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
mounted () {
axios
.request({
url: '/items/ITEM_NAME',
method: 'get',
baseURL: 'https://preview-deliver.kenticocloud.com/PROJECT_ID',
headers: {
'Authorisation': 'Bearer TOKEN'
}
})
.then(response => {
console.log(response.data)
})
}
})
As pointed out by Walter in the comments, I spelt Authorization with an S rather than a Z.. because I'm English. Whoops.
Use create to config axios headers before your request
const TOKEN = 'Token';
const BASEURL = 'https://preview-deliver.kenticocloud.com/PROJECT_ID';
const ENDPOINT = '/items/ITEM_NAME';
axios.create({
baseURL: BASEURL,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer '+TOKEN
}
})
.get(ENDPOINT)
.then(res => {
console.log(res);
});
well i have a problem i tried to connect an api with basic authorization but the server don´t give me access it return a 401(unautorized) my code is:
getApi() {
console.log('here i am in the method for get extensions');
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Basic ***********************'
});
const options = {
headers,
withCredentials: true
};
// tslint:disable-next-line:max-line-length
return this.http.post('https://10.100.43.241/json', this.jsonBody, options).map((response: Response) => {
const resToJSON = JSON.stringify(response);
console.log('i am going to return jsonfrom method');
return resToJSON;
});
}
i tried too with postman an it is working as well. i really need to know how can i solved this problem of connection or authorization
note: i am not the administrator about the server
Try this architecture.
Component:
this._appApiService.getApi(this.jsonBody).subscribe(result => {
this.resToJSON = result;
});
Service:
getApi(jsonBody: any) {
// add authorization header with jwt token
let headers = new HttpHeaders({ 'Authorization': 'Bearer ' + this.token });
let options = { headers: headers };
return this.http.post(this.baseUrl + 'https://10.100.43.241/json', this.jsonBody , options);
}