I am trying to implement the Authorization API for Auth0 Authorization extension. I followed through the guide here (Authorization Extension API Explorer)
I was able to successfully get an access_token.
But when I call the Api with the access token, I only get ‘undefined’ with a 401 unauthorized error.
The following is the relevant code in my main.js file of the VueJs Application
let ACCESS_TOKEN = ''
axios.post('https://georgeprep.auth0.com/oauth/token', config.body, config.headers)
.then(response => {
ACCESS_TOKEN = response.data.access_token
console.log(response);})
.then(response => {
const AuthString = 'Bearer '+ (ACCESS_TOKEN)
axios.get(
'https://georgeprep.us.webtask.io/adf6e2f2b84784b57522e3b19dfc9201/api/users',
{ authorization : AuthString})})
.then(object => {
console.log(object)})
The image is the response i get in console.log and the scopes in my API
I have posted the question in Stackoverflow as well
@alosies I think for gets you have to wrap the object within an object. Try doing something like:
const headers = { Authorization: AuthString };
Then inside your axios get request do axios.get(url, { headers })
. So essentially you are doing { { authorization: Authstring } }
1 Like
@tbaustin Thanks for looking into it.
I tried doing what you said, but now I am getting a 500 internal server error.
Current code given below
let ACCESS_TOKEN = "";
axios.post(“https://georgeprep.auth0.com/oauth/token”, config.body, config.headers)
.then(response => {
ACCESS_TOKEN = response.data.access_token;
console.log(response);
})
.then(response => {
const AuthString = "Bearer " + ACCESS_TOKEN;
const headers = { Authorization: AuthString };
console.log(headers);
axios.get(
“https://georgeprep.us.webtask.io/adf6e2f2b84784b57522e3b19dfc9201/api/users”,
{ headers }
);
})
.then(object => {
console.log(object)
});
@alosies I am using react, but I think axios would work the same way. Let me show you how I am doing it and see if that helps.
const generateToken = () => {
const headers = {
'content-type': 'application/json'
};
const body = {
grant_type: 'client_credentials',
client_id: 'client_id',
client_secret:
'client_secret',
audience: 'https://taustin.auth0.com/api/v2/'
};
return new Promise((resolve, reject) => {
axios
.post('https://taustin.auth0.com/oauth/token', body, headers)
.then(res => {
resolve(res.data.access_token);
})
.catch(err => {
reject(err);
});
});
};
Now that I have made this function I use it in another file:
generateToken()
.then(token => {
this.setState({
token
});
const headers = { Authorization: `Bearer ${token}` };
return axios.get(`https://taustin.auth0.com/api/v2/users/${user.sub}`, {
headers
});
})
.then(res => {
this.setState({
profile: res.data
});
})
.catch(err => {
this.setState({
err: err.message
});
});
Ignore the state part as that pertains to react. Make sure you are using the client ID and what not for the api you have specified as well.
2 Likes
@tbaustin, thanks for sharing the code.
I could implement the login functionality using the Management API(https://georgeprep.auth0.com/api/v2/)
I am trying to set up the Authorization extension which allows us to set Roles, Groups and Permissions(Authorization Extension). The ‘audience’ for the this is given as ‘urn:auth0-authz-api’. Please check this image
Are you able to set roles and permissions on your app through the API you set up?
I have not tried yet, but I am not using a custom api . Also in your client that you are using make sure it is non-interactive and that you also authorize that client in your custom api under the Non Interactive Clients
tab.
Let me know if you need help with that part.
1 Like
Ya, that part I could manage to do successfully. Reference Image
Thanks for taking your time out and helping.
Let me wait for someone who has implemented authorization API to give me some directions.
1 Like
Sounds good! From what I have found 401 errors are either a setting somewhere you have missed or you aren’t passing the token correctly in the header. But from what I see you are doing that all correctly.
Best of luck!
1 Like
Can someone help on this please
Hey there!
Sorry for such huge delay in response! We’re doing our best in providing you with best developer support experience out there, but sometimes our bandwidth is not enough comparing to the number of incoming questions.
Wanted to reach out to know if you still require further assistance?