CODEWITHSUNDEEP
javascriptjwtbasic-authenticationfetch-api
NKnuelle
NKnuelle

Reputation: 282

Call an URL with Auth Token with Fetch API

I'm using the Fetch API to Login to my Webapp using Baisc Authentication. After a successful login the server returns a token as a json object. I am then using this token to make requests to other API Endpoints. Those endpoints just show a webpage if the request contains a valid token.

Everything works fine but nothing shows up in the browser after I make a successful call with the fetch API..

If I call the API endpoint in a REST Client it returns the html which seems to be fine. The problem seems to be that the browser should call the url instead of just fetch the html..

Here is my code. I am getting the "Success"-Alert - so everything seems to work fine. But I need the browser to show the result as a new page (some kind of a direct call of the url with the token in the header).

function login(event) {
  event.preventDefault();
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let url = URL + 'login';
  let headers = new Headers();
  headers.append('Authorization', 'Basic ' + btoa(username + ":" + password));
  fetch(url, {method:'GET',
          headers: headers,
         })
  .then(function(response)
  {
    if (response.ok) {
      return response.json();
    } else {
      let error = document.getElementById("login-error");
      error.innerHTML = "Username/Password incorrect.";
    }
  })
  .then(function(json)
  {
    if (typeof(json) !== "undefined") {
      startWebapp(json.token);
    }
  })
  .catch(error => console.error('Error:', error));
}

function startWebapp(token) {
  let url = URL + 'webapp/overview';
  let headers = new Headers();
  headers.append('Authorization', 'Bearer ' + token);
  fetch(url, {method:'GET',
headers: headers,
})
.then(function(response) {
  alert("Success!");
  return response;
});
}

How can I achieve that the browser actually calls the url with the API token and opens it if the fetch is successful?

Upvotes: 1

Views: 4329

Answers (1)

NKnuelle
NKnuelle

Reputation: 282

For anyone searching for a solution: This is actually not possible with JavaScript nor the fetch API. For me the (easiest) solution is to save the token in a cookie. The server then searches for a token in the cookie and uses it for authentication/authorization. This works pretty well and I don't need to send the token on every request.

Hope that helps.

Upvotes: 2

Related Questions