I want to create a VS Code extension that will connect to an API and display some data.

The API I want to connect to uses Auth0 authentication. Once authenticated, I will display data for the user.

Is this something I can do with Webviews in VS Code or do I need to use another approach?

1 Answers

HaaLeo On

Yes you can do that.

From the docs:

As the extension host is a Node.js process, you can use the Node API in your extensions and even better you can reuse existing Node.js modules when implementing an extension. You define your module dependencies inside the package.json and you use npm to install a Node.js module.

With this in mind you can use the node-auth0 (or some other) package to handle authentication. So your extension could do the following steps:

  1. Ask the user for credentials (username and password) with the vscode.window.showInputBox API. This could also be done with a webview, however the showInputBox API is more straight forward and easier to start with.
  2. Use the node-auth0 package to handle authentication
  3. Retrieve data from your API
  4. Show the data to the user using a webview

To get started with webviews you can check out the webview extension sample.