Skip to content

Instantly share code, notes, and snippets.

@ivermac
Created August 1, 2018 14:45
Show Gist options
  • Save ivermac/922def70ed9eaf83799b68ab1a587595 to your computer and use it in GitHub Desktop.
Save ivermac/922def70ed9eaf83799b68ab1a587595 to your computer and use it in GitHub Desktop.
Using fetch with basic auth
let username = 'john';
let password = 'doe';
let url = `https://httpbin.org/basic-auth/${username}/${password}`
let authString = `${username}:${password}`
let headers = new Headers();
headers.set('Authorization', 'Basic ' + btoa(authString))
fetch(url,{method: 'GET', headers: headers})
    .then(function (response) {
        console.log (response)
        return response
    });
@ivermac
Copy link
Author

ivermac commented Oct 31, 2019

Thanks @Eccenux, I've learnt something new!

@gtalin
Copy link

gtalin commented Jan 22, 2021

Note that above doesn't estabilish a browser session. It only works for that one request.

This however does work:

		var http = new XMLHttpRequest();						
		http.open("get", 'https://httpbin.org/basic-auth/', false, login, pass);
		http.send("");
		if (http.status == 200) {
		alert("OK. You now established a session. You can navigate to the URL.");
		} else {
		alert("⚠️ Authentication failed.");
		}						

@Eccenux Thank you so much for this. This is a life saver. For the past 2-3 days I've been trying to figure out how to logout a user that is logged in using HTTP Basic Authentication.

Though basic authentication does not support logout, after some research I found that there are a few hacks which can be used.
One such hack involved creating a button and sending wrong credentials using an xhr request.

I decided to use fetch because that's easier to use. However when I searched for a method to send username and password for basic authentication, using fetch, all code snippets, used the method of doing headers.set('Authorization', 'Basic ' + btoa(username + ":" + password)); and using the headers with fetch.

With sending username and password using headers.set, I was getting a 401 response (unauthorized user) for that particular request, however for the website, as a whole, the user was not getting logged out.

Your code snippet helped tremendously in not only providing a solution that works but also providing an explanation as to why using the headers.set method appeared to be working but was not working.

@ddrigass
Copy link

ddrigass commented Apr 7, 2021

@Eccenux, Thanks, you helped me a lot!

@lowcrawler
Copy link

"btoa is not defined" when this code gets used in a Node14 lambda on AWS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment