How can I use Bearer Authentication with superagent in React? I am not sure in syntax and can't find an example.

What I do now

   showTransactionList = () => {
        superagent
            .post('http://193.124.114.46:3001/api/protected/transactions')
            .set({'Authorization': 'Bearer ' + this.state.id_token})
            .accept('application/json')
            .then(res => {
                const posts = JSON.stringify(res.body);
                console.log(posts);
            })
            .catch((err) => {
                console.log(err);
                throw err;                    
            });
    }

How can I use Bearer Authentication with superagent in React? I am not sure in syntax and can't find an example.

What I do now

   showTransactionList = () => {
        superagent
            .post('http://193.124.114.46:3001/api/protected/transactions')
            .set({'Authorization': 'Bearer ' + this.state.id_token})
            .accept('application/json')
            .then(res => {
                const posts = JSON.stringify(res.body);
                console.log(posts);
            })
            .catch((err) => {
                console.log(err);
                throw err;                    
            });
    }

Thnx!

• javascript
• reactjs
• authentication
• ecmascript-6
• superagent

• 1 When I ping your endpoint with no Auth header, I get UnauthorizedError: No Authorization header was found. With a token of 'test', I get UnauthorizedError: jwt malformed. With an actual jwt, I get UnauthorizedError: invalid signature. Are you able to determine whether the header is being set at all and which response you are getting? – user6080677 Commented Nov 27, 2018 at 20:45
• 1 Thanks a lot!! Everything works not. And all ok with this code. Prooblem was in id_token (it was emplty) ,Sorry, And sending SET not like a single object was useful too. Thnx A LOT! – Andrew Fleyer Commented Nov 28, 2018 at 15:39

3 Answers 3

rather than setting the full header with

.set({'Authorization': 'Bearer ' + this.state.id_token})

you can use

.auth(this.state.id_token, { type: 'bearer' })

The way headers are set is by providing the header item name and value, try:

showTransactionList = () => {
    superagent
        .post('http://193.124.114.46:3001/api/protected/transactions')
        .set('Authorization', 'Bearer ' + this.state.id_token)
        .accept('application/json')
        .then(res => {
            const posts = JSON.stringify(res.body);
            console.log(posts);
        })
        .catch((err) => {
            console.log(err);
            throw err;                    
        });
}

So instead of setting the object in the header, pass it as 2 parameters (name, value).

Try using .auth('Bearer', this.state.id_token) http://visionmedia.github.io/superagent/#authentication