Origin null is not allowed error getting Auth0 token with fetch command

[cristallo]

Getting the Auth0 access token on companion the following error appear on Auth0 authentication service log

"Origin null is not allowed."

{
  "date": "2018-03-08T11:04:56.760Z",
  "type": "fco",
  "description": "Origin null is not allowed.", 
  "connection_id": "",
  "client_id": "XXX",
  "ip": "XXX",
  "user_agent": "Mozilla/5.0 (Linux; Android 7.0; SM-G920F Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/65.0.3325.109 Mobile Safari/537.36",
  "details": {
    "xhr": false,
    "method": "POST",
    "origin": "null", 
    "allowedOrigins": [
      "https://manage.auth0.com",
      "https://auth0.com/docs",
      "https://login.eu.auth0.com",
      "https://docs.eu.auth0.com",
      "https://manage.eu.auth0.com",
      "https://login.auth0.com",
      "https://docs.auth0.com",
      "https://manage.auth0.com",
      "https://auth0.com"
    ],
    "headers": {
      "x-forwarded-proto": "https",
      "x-forwarded-for": "XXX, YYY",
      "host": "XXX.eu.auth0.com",
      "content-length": "224",
      "x-forwarded-port": "443",
      "x-amzn-trace-id": "Root=XXX",
      "accept": "application/json",
      "origin": "null",
      "client-version": "XXXFitbitIonic v1.1.2",
      "user-agent": "Mozilla/5.0 (Linux; Android 7.0; SM-G920F Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/65.0.3325.109 Mobile Safari/537.36",
      "content-type": "application/json",
      "accept-encoding": "gzip, deflate",
      "accept-language": "it-IT,en-US;q=0.9",
      "x-requested-with": "com.fitbit.FitbitMobile"
    },
    "host": "https://XXX.eu.auth0.com",
    "originalUrl": "/oauth/token"
  },
  "hostname": "XXX.eu.auth0.com",
  "log_id": "YYY"
}

I guess that this 

"origin": "null"

parameter is added to the header by the fitbit app for something related to the CORS mechanism

It is happening only on Android, on iOS the "origin" parameter is not present at all and the token request does not generate any error on Auth0

How can I avoid this strange behavior?

[JonFitbit · Accepted solution]

Are you doing this with the <oauth> component in the settings page? The settings page blocks CORS, whereas the companion allows it.

Rather than trying to fetch the auth token in the settings page itself, you can use the companion to make the request. 

Something like this:

// common/constants.js
export const CLIENT_ID = "XXXXX";
export const CLIENT_SECRET = "XXXXXX";

// settings/index.jsx
import { CLIENT_ID, CLIENT_SECRET } from "../common/constants";

function mySettings(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Account</Text>}>
        <Oauth
          title="Login"
          status="Login"           
          label="oAuth Login"
          authorizeUrl="https://BLAH/oauth/authorize"
          requestTokenUrl="https://BLAH/oauth/access_token"
          clientId={ CLIENT_ID }
          clientSecret={ CLIENT_SECRET }
          onReturn={ async (data) => {
            props.settingsStorage.setItem("excode", data.code)
          }}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(mySettings);

Then in the companion:

// companion/index.js
import { settingsStorage } from "settings";
import { CLIENT_ID, CLIENT_SECRET } from "../common/constants";

settingsStorage.onchange = function(evt) {
  if (evt.key === "excode") {
    getToken(evt.newValue).then(function(result) {
      console.log('Result:\n'+ JSON.stringify(result));
    }).catch(function(err){
      console.log('Err: '+ err);
    });
  }
}

async function getToken(exchangeCode) {
  const urlEncodePost = function (object) {
    let fBody = [];
    for (let prop in object) {
      let key = encodeURIComponent(prop);
      let value = encodeURIComponent(object[prop]);
      fBody.push(key + "=" + value);
    }
    fBody = fBody.join("&");
    return fBody;
  };

  const Token_Body = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: urlEncodePost({
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      code: exchangeCode
    })
  };

  return await fetch('https://BLAH/oauth/access_token', Token_Body)
    .then(function(data){
      return data.json();
    }).catch(function(err) {
      console.log('Error on token gen: '+ err);
    });
}