Issue with HTTP Basic Auth and fetch()

[jtickle]

I am having trouble using the fetch API in the companion app to request from a server with HTTP Basic authn.

if(s.user) {
  const auth = btoa(s.user + ':' + s.pass);
  headers['Authorization'] = `Basic ${auth}`;
}
headers['Accept'] = 'application/json';

const opts = {headers: headers, mode: 'no-cors'}; //, credentials: 'include'};
  
return fetch(url, opts).then(function(response) {
  console.log('Response: ' + response.status);
  return response.text();
}).catch(function(err) {
  console.log('ERROR: ' + err)
});

First of all, I tested the 'btoa' polyfill I'm using, and it properly base64'd the username and password.

This request is being executed and the catch handler isn't being invoked.  I know from server logs that the client is not providing username and password, and the server is responding with 401 Unathorized.  However, the response.status value is 0, and response.statusText is empty.

Worse... I can't seem to set username and password for HTTP Basic Auth.

What am I doing wrong here?  Or is there a bug?  Headers don't seem to be getting set at all.

[JonFitbit]

I know that iOS has a restriction which means the endpoint has to be HTTPS.

Could that be the issue?

[jtickle]

I should have said more about my environment.  I am on Android 8.0.0 on a Google Pixel.  The endpoint is HTTPS, with a LetsEncrypt certificate.

[jtickle]

I set up a server this evening that logs all request headers sent and played around with that a bit, changing different headers with fetch().

I CAN change the 'Accept' header.  It defaults to */*, I can change it to application/json.

I am not able to set the 'Authorization' header.  Nothing I put in there makes it through, even trying 'Bearer' like in the OAuth2 SDK example.

I am also not able to set a nonstandard header like 'X-Absurd-Header'.

[sibbl]

I ran in the same issue today as I want to get OAuth working with an /access_token endpoint enforcing CORS. I guess the "mode: 'no-cors'" results in the promise to be resolved properly, but the underlying website not being called at all... 

Is there any idea how to fix this? OAuth is the base of quite an amount of apps developers want to build, but are not able to with the current tools...

[Florian87]

Let the companion app do the get token stuff to handle CORS. Check the solution of JonFitbit in this thread:

https://community.fitbit.com/t5/SDK-Development/3rd-party-REST-API-OAuth-authentication/m-p/2338210/...

[sibbl]

I'm currently doing the same stuff as described in your link in the settings/index.jsx. Of course it's a bit different but in the end, I put together a URL I only need to do a GET on. This URL works properly when copy-pasting it in the browser, so there's not much magic. However, I cannot do this GET inside the onReturn method.

A normal GET without "no-cors" results in the URL being called (I can check this because the acquired token is invalid afterwards). However, Fitbit throws the error and I cannot parse the returned JSON due to this.

If I use "no-cors" mode, then the URL is not called (token is still valid afterwards) and there's no error. However, the response has a status code of 0 and no body.

UPDATE: I finally got it working by setting the code received with "onReturn" in the settingsStorage (why the hell is it "props.settingsStorage" and not a usual import?). Then the "settingsStorage.onchanged" is triggered in my companion/index.js - and there the fetch works properly. I store the received access_token then in my settingsStorage again (which interestingly doesn't trigger the "onchanged" event...) and can work with it. 
After using the SDK for some days, I have to say that it's not fun guessing such tricky solutions... 

[Seksit]

Hi jtickle,

I try to use companion fetch with Basic authhorization too, but how can i call btoa() method in companion file?

Thanks

Seksit