SecretStorage VSCode extension API

There are several ways to store user preferences in VSCode. Before the arrival of version 1.53.0, confidential information had to be stored in Memento objects in workspaceState and globalState or, for example, keytar . And storing passwords with tokens in a standard configuration file or using environment variables was not the best idea, since this data could be read and cached by other extensions.

In the article, we will look at ways to read data from settings.json



and environment variables



. And then we will create a class with minimal functionality responsible for storing and serving keys with values ​​from VSCode SecretStorage.

We will conventionally name the project fancycolor



. The project initialization process is detailed in the VSCode Extensions documentation , so let's get started right away.

settings.json

All settings from all VSCode extensions are stored in a common file settings.json



and therefore can be accessed from any extension. For example, from our application, fancycolor



we can easily read a list of all hosts and their corresponding platforms from our config of another popular application SSH - Remote



.

const configurationWorkspace = workspace.getConfiguration()
const sshRemotePlatform: string | undefined = configurationWorkspace.get(
  "remote.SSH.remotePlatform"
)
console.log(sshRemotePlatform)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

This code will list your configuration for the extension SSH - Remote



.

Proxy {ubuntu: 'linux', home: 'linux', raspberry: 'linux'}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

environment variables

VSCode . .bashrc



Linux User.Environment



Windows process.env



.

/home/ubuntu/.env



ACCESS_TOKEN_ENV



.bashrc



.

echo 'export ACCESS_TOKEN_ENV="d8aba3b2-fda0-414a-b867-4798b7892bb4"' >> /home/ubuntu/.env
echo "source /home/ubuntu/.env" >> /home/ubuntu/.bashrc
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Windows Powershell.

[System.Environment]::SetEnvironmentVariable('ACCESS_TOKEN_ENV', 'd8aba3b2-fda0-414a-b867-4798b7892bb4', [System.EnvironmentVariableTarget]::User)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

VSCode fancycolor



extension.

import * as process from "process"
export const accessTokenEnv = process.env["ACCESS_TOKEN_ENV"]
console.log(accessTokenEnv)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.

d8aba3b2-fda0-414a-b867-4798b7892bb4
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

SecretStorage

, , VSCode. AuthSettings



, fancycolor_token



, :

• init
  
  
  
  SecretStorage

  
  
  
  
  

• getter instance
  
  
  
  

  
  
  
  
  

• storeAuthData
  
  
  
  SecretStorage

  
  
  
  
  

• getAuthData
  
  
  
  SecretStorage

  
  
  
  
  

import { ExtensionContext, SecretStorage } from "vscode"

export default class AuthSettings {
	private static _instance: AuthSettings

	constructor(private secretStorage: SecretStorage) {}

	static init(context: ExtensionContext): void {
		/*
		Create instance of new AuthSettings.
		*/
		AuthSettings._instance = new AuthSettings(context.secrets)
	}

	static get instance(): AuthSettings {
		/*
		Getter of our AuthSettings existing instance.
		*/
		return AuthSettings._instance
	}

	async storeAuthData(token?: string): Promise<void> {
		/*
		Update values in bugout_auth secret storage.
		*/
		if (token) {
			this.secretStorage.store("fancycolor_token", token)
		}
	}

	async getAuthData(): Promise<string | undefined> {
		/*
		Retrieve data from secret storage.
		*/
		return await this.secretStorage.get("fancycolor_token")
	}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

The extension.ts



write functionality allows you to add and retrieve the token using the commands in the Command Palette.

import * as vscode from "vscode"

import AuthSettings from "./settings"

export function activate(context: vscode.ExtensionContext) {
	// Initialize and get current instance of our Secret Storage
	AuthSettings.init(context)
	const settings = AuthSettings.instance
	
	// Register commands to save and retrieve token
	vscode.commands.registerCommand("fancycolor.setToken", async () => {
		const tokenInput = await vscode.window.showInputBox()
		await settings.storeAuthData(tokenInput)
	})
	vscode.commands.registerCommand("fancycolor.getToken", async () => {
		const tokenOutput = await settings.getAuthData()
		console.log(tokenOutput)
	})
}

export function deactivate() {}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

It remains only to package.json



register the commands fancycolor.setToken



and fancycolor.getToken



. Later, when working with VSCode SecretStorage, we will be able to refer exclusively to the specific SecretStorage created for our application, which will be assigned our own _id: 'undefined_publisher.fancycolor'



.