Basic authentication with fetch?

Question

I want to write a simple basic authentication with fetch, but I keep getting a 401 error. It would be awesome if someone tells me what's wrong with the code:

let base64 = require('base-64');

let url = 'http://eu.httpbin.org/basic-auth/user/passwd';
let username = 'user';
let password = 'passwd';

let headers = new Headers();

//headers.append('Content-Type', 'text/json');
headers.append('Authorization', 'Basic' + base64.encode(username + ":" + password));

fetch(url, {method:'GET',
        headers: headers,
        //credentials: 'user:passwd'
       })
.then(response => response.json())
.then(json => console.log(json));
//.done();

qoomon · Accepted Answer · 2019-10-09 05:58:47Z

323

A solution without dependencies.

Node

headers.set('Authorization', 'Basic ' + Buffer.from(username + ":" + password).toString('base64'));

Browser

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));

edited Oct 9, 2019 at 5:58

answered Jul 24, 2018 at 13:51

qoomon

5,6021 gold badge26 silver badges32 bronze badges

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

3 Comments

Andreas Riedmüller Over a year ago

In a browser you can use window.btoa(username + ':' + password); developer.mozilla.org/en-US/docs/Web/API/WindowBase64/…

Andreas Riedmüller Over a year ago

to support special characters something like window.btoa(unescape(encodeURIComponent(string))); should do the job, you can read more about this here: developer.mozilla.org/en-US/docs/Web/API/WindowBase64/…

dovidweisz Over a year ago

Also depending on your version of node fetch doesn't exist there.

Knu · Accepted Answer · 2018-04-22 12:34:37Z

232

You are missing a space between Basic and the encoded username and password.

headers.set('Authorization', 'Basic ' + base64.encode(username + ":" + password));

edited Apr 22, 2018 at 12:34

Knu

15.2k6 gold badges60 silver badges93 bronze badges

answered May 8, 2017 at 8:36

Lukasz Wiktor

20.5k6 gold badges73 silver badges83 bronze badges

6 Comments

Martin Over a year ago

Isnt atob and btoa built in to the Javascript specification?

Lukasz Wiktor Over a year ago

The 2 functions are available in all major browsers, but I don't think they are covered by any ES specification. In particular, you won't find them in node.js github.com/nodejs/node/issues/3462

Nux Over a year ago

Note that this does NOT establish a session for the browser. You can use XHR to both establish a session and avoid base64 encoding. See: stackoverflow.com/a/58627805/333296

oligofren Over a year ago

@Sveen base64 refers to the library imported in the original post. It is not a built-in global, but a library that was imported in the CJS module.

chilljul Over a year ago

When using node, you have to use Buffer and specify utf8 const headers = { Authorization: `Basic ${Buffer.from("user:pass", "utf-8").toString("base64")}` };

|

V. Bozz · Accepted Answer · 2021-11-23 15:06:18Z

50

In pure JavaScript you can also use btoa instead of base64.encode():

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));

Note that this will only work with ASCII characters.

If you have to handle different encodings, see the linked btoa documentation.

edited Nov 23, 2021 at 15:06

V. Bozz

1,6321 gold badge23 silver badges42 bronze badges

answered Apr 8, 2019 at 22:44

Ilya

7446 silver badges7 bronze badges

2 Comments

Lukas Liesis Over a year ago

1. only in browsers 2. only with ascii characters.

Alexander Ites Over a year ago

A note on voting: this answer mentioned btoa half a year before the equivalent snippet showed up in an edit of the most voted answer by Coomon.

kolypto · Accepted Answer · 2021-08-03 15:00:55Z

46

A simple example for copy-pasting into Chrome console:

fetch('https://example.com/path', {method:'GET', 
headers: {'Authorization': 'Basic ' + btoa('login:password')}})
.then(response => response.json())
.then(json => console.log(json));

or with await:

let response = await fetch('https://example.com/path', {method:'GET', 
headers: {'Authorization': 'Basic ' + btoa('login:password')}});
let data = await response.json();
console.log(data);

edited Aug 3, 2021 at 15:00

answered Mar 3, 2020 at 10:25

kolypto

36.3k20 gold badges118 silver badges110 bronze badges

Comments

OZZIE · Accepted Answer · 2019-05-08 06:07:39Z

18

If you have a backend server asking for the Basic Auth credentials before the app then this is sufficient, it will re-use that then:

fetch(url, {
  credentials: 'include',
}).then(...);

edited May 8, 2019 at 6:07

answered Jan 7, 2019 at 10:48

OZZIE

7,47410 gold badges64 silver badges66 bronze badges

Comments

kumar kundan · Accepted Answer · 2019-06-04 19:04:58Z

15

NODE USERS (REACT,EXPRESS) FOLLOW THESE STEPS

npm install base-64 --save
import { encode } from "base-64";

 const response = await fetch(URL, {
  method: 'post',
  headers: new Headers({
    'Authorization': 'Basic ' + encode(username + ":" + password),
    'Content-Type': 'application/json'
  }),
  body: JSON.stringify({
    "PassengerMobile": "xxxxxxxxxxxx",
    "Password": "xxxxxxx"
  })
});
const posts = await response.json();

Don't forget to define this whole function as async

answered Jun 4, 2019 at 19:04

kumar kundan

2,0671 gold badge29 silver badges42 bronze badges

Comments

fixedDrill · Accepted Answer · 2022-02-15 06:56:14Z

get request with authorization for React Native Mobile application, i have spent more time searching for these lines inside fetch

 var base64 = require("base-64"); // install it before use from npm i base-64

 const uname = "some username goes here";
 const pword = "some password goes here";

const getMovies = async () => {
   try {
     const response = await fetch(
       "API URL goes here",
       {
         headers: {
           Authorization: "Basic " + base64.encode(uname + ":" + pword),
         },
       }
     );

     data = await response.json();
     setData(data);

     console.log(data);
     // console.log(data.name);
     return data;
   } catch (error) {
     console.error(error);
   } finally {
     setLoading(false);
   }
 };

 useEffect(() => {
   getMovies();
 }, []);


// other code 

// inside return
  <FlatList
           keyExtractor={(item) => item.id}
           data={data}
           renderItem={({ item }) => (
             <View style={styles.text_container}>
               <Text>{item.name}</Text>
               <Text>{item.images[0].name}</Text>
               <Text>{item.images[0].src}</Text>
             </View>
           )}
         />

Manoj Perumarath · Accepted Answer · 2018-06-14 10:54:29Z

3

I'll share a code which has Basic Auth Header form data request body,

let username = 'test-name';
let password = 'EbQZB37gbS2yEsfs';
let formdata = new FormData();
let headers = new Headers();


formdata.append('grant_type','password');
formdata.append('username','testname');
formdata.append('password','qawsedrf');

headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch('https://www.example.com/token.php', {
 method: 'POST',
 headers: headers,
 body: formdata
}).then((response) => response.json())
.then((responseJson) => {
 console.log(responseJson);

 this.setState({
    data: responseJson
 })
  })
   .catch((error) => {
 console.error(error);
   });

answered Jun 14, 2018 at 10:54

Manoj Perumarath

10.4k8 gold badges63 silver badges85 bronze badges

Comments

DJ-Glock · Accepted Answer · 2019-11-20 16:21:24Z

1

This is not directly related to the initial issue, but probably will help somebody.

I faced same issue when was trying to send similar request using domain account. So mine issue was in not escaped character in login name.

Bad example:

'ABC\username'

Good example:

'ABC\\username'

answered Nov 20, 2019 at 16:21

DJ-Glock

1,4532 gold badges14 silver badges43 bronze badges

2 Comments

qoomon Over a year ago

This is just because you need to escape js string escape character itself, however this is not basic auth related.

DJ-Glock Over a year ago

@qoomon correct. That's why I mentioned that it is not directly related, but might be helpful.

Collectives™ on Stack Overflow

Basic authentication with fetch?

9 Answers 9

3 Comments

6 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

6 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related