403 on API access

I’m trying to use the endpoint: https://preview.threekit.com/api/fast-compositor/

I’ve attempted requests from 3 different locations:

  1. on the documentation page itself with both a public and private access token
  2. through a REST client (VS Code ext) with both a public and private access token
  3. using a fetch from the browser with a public access token (this is ultimately our use case)
  1. On the documentation page, I receive a 403 no matter if I use the Authorization header, or the bearer_token query string parameter.
  2. Through the REST client, I receive only a 400 Bad Request, which is interesting because the endpoint only claims to have 2 required query string parameters: assetId and orgId. I have tried the call with and without the orgId since there is an explanation in the REST doc page about the orgId no longer being necessary for calls since the tokens are created in the orgs. No matter how large or small I build the request (adding/removing optional query string params), I still receive a 400 Bad Request.
  3. Using fetch on the browser, I only receive 403 Forbidden as a response status. It being a request from the browser, I am utilizing the bearer_token query string parameter, which the documentation claims to allow the use of a public token to access the API. Yes, I have the domain accessing the endpoint in the allowed list for the token. It’s the same token used with our player and that works seamlessly.

No matter how I attempt to create the request, I don’t seem to be able to access the endpoint in a way the documentation says I should be able to.

Here is some example code:

const getCompositeImage = async (config) => {
  let params = new URLSearchParams();

  params.append('bearer_token', process.env.REACT_APP_THREEKIT_PUBLIC_TOKEN);
  params.append('assetId', '0c54543b-6865-4453-bf79-7d358fd79709');
  params.append('orgId', process.env.REACT_APP_THREEKIT_ORG_ID);
  params.append('configuration', JSON.stringify(config));
  params.append('width', '1920');
  params.append('height', '1080');
  params.append('cropWidth', '1');
  params.append('cropHeight', '1');
  params.append('format', 'png');
  params.append('imageFitMode', 'cover');

  const req = new Request(`https://preview.threekit.com/api/fast-compositor/?${params.toString()}`, {
    method: 'GET',
    headers: {
      // Authorization: `Bearer ${process.env.REACT_APP_THREEKIT_PUBLIC_TOKEN}`,
      Accept: 'image'
    }
  });

  console.log('getCompositeImage URL:', req.url);

  try {
    const result = await fetch(req);
  
    if (!result.ok) {
      const errorData = await result.json();
      console.error('Error response:', errorData);
      throw new Error(`Request failed with status: ${result.status}`);
    }
  
    return await result.blob();
  } catch (error) {
    console.error('Error:', error);
    return error;
  }
}

Please explain what errors I am making in accessing this endpoint. Thank you in advance! :slight_smile:

It seems this feature has a switch that needs to be turned on by an account manager for the organization, which I didn’t seem to come across in the documentation. We are waiting for this feature to be turned on for us and seems to be the issue with authorization.

1 Like

Thanks @joe.deak - let me know if flipping the switch didn’t help