API Returning Unathorized

[TiborUdvari]

p5.js version

No response

What is your operating system?

None

Web browser and version

No response

Actual Behavior

When I'm sending an API request to the to /auth/access-check/I get a 401 unathorized error, and all other API endpoints. This seemed to be working a couple of days ago.

For context, I want to keep my sketchbook up to sync with the web editor. I'm working on making a lot of examples at the moment for a library I'm working on, so copy pasting to the editor is very cumbersome for me to keep everything up to date. https://www.tiborudvari.com/sketchbook

Here is the github repo of my sketchbook: https://github.com/TiborUdvari/sketchbook/tree/main

And the editor upload script for reference. https://github.com/TiborUdvari/sketchbook/blob/main/scripts/editorUpload.js

Maybe I should have asked before, but I saw that ml5 was doing a similar thing so I just went ahead and implemented it directly.

Expected Behavior

Get a valid response.

Steps to reproduce

curl --location 'https://editor.p5js.org/api/v1/auth/access-check/' \
--header 'Authorization: Basic TOKEN '

Or axios:

const axios = require('axios');

let config = {
  method: 'get',
  maxBodyLength: Infinity,
  url: 'https://editor.p5js.org/api/v1/auth/access-check/',
  headers: { 
    'Authorization': 'Basic TOKEN'
  }
};

axios.request(config)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
});

[raclim]

Thanks @TiborUdvari!

I think this issue might be related to some of the changes I made to the overall passport.js file 😅 I'm sorry about that! I think I might've not checked this portion as thoroughly since I didn't realize this feature was still being used by folks. I'll try to push out a fix for this alongside some other issues that were found within the next few days!

[TiborUdvari]

I saw it wasn't super well documented, so I was really happy to have it work! I think it's super useful to keep stuff updated. Especially for libraries that should have examples in the source, but should also be quickly testable I think.

[raclim]

I think this wasn't kept up to date for a bit because there was some discussion about whether to continue developing the API or not due to security concerns! I think due to this though I'm having some difficulty pinpointing what exactly the cause for this was. Would you be able to share your process with getting it to work?

[TiborUdvari]

Hi,

So I looked through the source code and the issues, and I saw that ml5 was using this, I thought that it was just something that was not well documented.

When looking through the code I saw the section relating to API keys, so I used tampermonkey to add the environment variable and I saw that the UI was there.

(function() {
    'use strict';
    window.process.env.UI_ACCESS_TOKEN_ENABLED = true;
})();

I think the button wasn't working to generate a new API key so I sent the request to generate the API key manually:

fetch('https://editor.p5js.org/editor/account/api-keys', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    label: 'test'
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Then it showed up in the UI.

Afterwards I followed the documentation to make the API calls.

[raclim]

I think I was able to get this working on my end! Are you still running into the same issue?

[TiborUdvari]

I just checked, it works with a new API key that I could generate, thank you very much!