VS Code: JSON Preview shows form requesting API key and Submit does nothing.

[robws]

I pressed Preview while viewing a swagger.json file, and the preview screen showed "Want to see a context aware preview of your docs?" with a text box for API key. Adding my API key - even generating a new one - and pressing Submit had no effect.

What should have happened instead?
Assuming pressing Submit would authenticate me with Redocly and show the OpenAPI Preview.

Minimal reproducible OpenAPI snippet
No snippet results in correct behavior; this does not appear to be a factor of the OpenAPI itself.

If possible, include a short example of your OpenAPI definition that we can use to simulate the problem.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other information about the problem here, like: the extension version number; OpenAPI version you're using in your definition; your operating system.
Latest extension, Mac, VS Code latest version.

[tatomyr]

That's strange. Could you check if logging via Redocly CLI helps here? For that, please run npx @redocly/cli login, then close and reopen your editor. Then try the 'Preview' feature again.

[robws]

Where do I run that from, and will it leave anything in my system I don't expect? When I first ran it it seemed to put something in NPM.

It says "Need to install the following packages:
@redocly/[email protected]"

What does that do?

[robws]

I see this:

Which is bogus, because you can't literally get your API key from that address (you would have had to have retrieved it when you created it)

And pasting it doesn't result in anything other than "logging in..." then a return to the prompt.

[robws]

Restarting VS Code has the same behavior as described.

[tatomyr]

I see. It looks like you're using an expired or revoked key. The message should look like the following:

Please follow the link and generate a new key. 

This can also explain why you cannot log in directly with the extension. This is a bug, indeed. There should be a warning in case of a wrong key.

It says "Need to install the following packages:
@redocly/[email protected]"

What does that do?

It installs Redocly CLI (which the extension is driven by) in your local NPM cache.

[robws]

Thank you! I'll make another key and give it a shot. I was confused why the preview window didn't seem to do anything when I pressed submit. I was watching and developer tools to see if there were any network traffic, and didn't see any JS errors. But I guess there wouldn't be if you coded it to trap errors!

I wasn't sure about whether or not I pasted the right thing into the CLI, because of course it doesn't show you the text of what you paste and sometimes you're not sure if you put other characters into that prompt at all.

[robws]

It is indeed our VPN, Cloudflare Warp Zero-Trust, as the authorization works fine when I turn it off, as does the extension to preview.

I didn't realize this at first, as the preview was failing, and possibly has multiple reasons for failure. I'm assuming when it can't reach the redocly servers, it perpetually shows the "Log in" form screen.

[tatomyr]

I'm assuming when it can't reach the redocly servers, it perpetually shows the "Log in" form screen.

Yes. It relies on authenticating through a Redocly endpoint, so the VPN have to be configured appropriately for the extension to be able to verify the token.

[robws]

Once the token is verified, does any more communication happen?

I suspect the company would probably want to know if API specs must be sent to our stored at redocly, or if the preview tool can be used otherwise.

[tatomyr]

The extension tries to verify the token each time it gets loaded. So (more or less) each time you reopen the editor it will send a request to the Redocly API.

[romanpryshliak]

Currently, the extension doesn't accept the personal API key for me. However, I managed to get it working with an organization API key from Redocly Workflows:

[leodolbir]

I observed the problem described above and unable to use the preview. I was however able to login through the CLI, so I'm confident the VPN has nothing to do with it. Also looking through developer tools there are input fields and the button but no form to submit or a javascript handler

[jmehnle]

I, too, am suffering from this problem: I paste my personal API key into the "API key" input field in the preview tab and click "Submit", yet absolutely nothing happens. I can click the button many times, to no avail. I have the redocly CLI installed via npm, and I can run it on the shell.