Using Axios GET with Authorization Header in React-Native App

Question

I'm trying to use axios for a GET request with an API which requires an Authorization header.

My current code:

const AuthStr = 'Bearer ' + USER_TOKEN;

where USER_TOKEN is the access token needed. This string concatenation may be the issue as if I post this as AuthStr = 'Bearer 41839y750138-391', the following GET request works and returns the data I'm after.

axios.get(URL, { 'headers': { 'Authorization': AuthStr } })
  .then((response => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

I also tried setting this as a global header with no success.

Try using concat. It is the recommended javascript way of string concatination — Swapnil
– Swapnil, Commented Jan 7, 2017 at 7:54

David Schumann · Accepted Answer · 2018-03-01 17:24:22Z

91

For anyone else that comes across this post and might find it useful... There is actually nothing wrong with my code. I made the mistake of requesting client_credentials type access code instead of password access code (#facepalms). FYI I am using urlencoded post hence the use of querystring.. So for those that may be looking for some example code.. here is my full request

Big thanks to @swapnil for trying to help me debug this.

   const data = {
      grant_type: USER_GRANT_TYPE,
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      scope: SCOPE_INT,
      username: DEMO_EMAIL,
      password: DEMO_PASSWORD
    };



  axios.post(TOKEN_URL, Querystring.stringify(data))   
   .then(response => {
      console.log(response.data);
      USER_TOKEN = response.data.access_token;
      console.log('userresponse ' + response.data.access_token); 
    })   
   .catch((error) => {
      console.log('error ' + error);   
   });



const AuthStr = 'Bearer '.concat(USER_TOKEN); 
axios.get(URL, { headers: { Authorization: AuthStr } })
 .then(response => {
     // If request is good...
     console.log(response.data);
  })
 .catch((error) => {
     console.log('error ' + error);
  });

edited Mar 1, 2018 at 17:24

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Jan 8, 2017 at 0:17

Ally Haire

2,5481 gold badge16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sahir Saiyed Over a year ago

how to pass multiple custom header in axios

blueprintchris Over a year ago

axios.get(uri, { headers: { "custom-header-1": "value", "custom-header-2": "value" } })

pabloRN Over a year ago

Do you have a header example to do it with Amplify and Apigateway? :) just asking

Michael Wing · Accepted Answer · 2020-04-09 19:57:59Z

7

Could not get this to work until I put Authorization in single quotes:

axios.get(URL, { headers: { 'Authorization': AuthStr } })

answered Apr 9, 2020 at 19:57

Michael Wing

891 silver badge2 bronze badges

1 Comment

conor909 Over a year ago

This shouldn't matter

Collectives™ on Stack Overflow

Using Axios GET with Authorization Header in React-Native App

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related