See TiddlyTools/Filters/encrypt.js which defines encrypt[key] and decrypt[key] filter operators.
To take user input and encrypt it, you could get both an APIKey value as well as an encryption key value that you would use as a “password” and then use the encrypt[...] filter to generate a JSON object that encodes the APIKey in encrypted form that can be stored in a tiddler (e.g. “MyAPIKey”).
Later on, you could then use that stored JSON object plus the same “password” value with the decrypt[...] filter to retrieve the unencrypted APIKey value and then reference {{$:/temp/APIKey!!key}} to access your OpenAI account.
Something like this:
APIKey: <$edit-text tiddler="$:/temp/APIKey" field="key"/>
Password: <$edit-text tiddler="$:/temp/APIKey" field="password"/>
<$button> save key
<$action-setfield $tiddler="MyAPIKey"
text={{{ [{$:/temp/APIKey!!key}encrypt{$:/temp/APIKey!!password}] }}}/>
</$button>
<$button> get key
<$action-setfield $tiddler="$:/temp/APIKey"
key={{{ [{MyAPIKey}decrypt{$:/temp/APIKey!!password}] }}}/>
</$button>
Note that by default $:/temp tiddlers are automatically discarded when the file is saved, so only the resulting “MyAPIKey” tiddler containing the encrypted JSON object is saved in your TiddlyWiki file.
Note also that for added security, you could use a <$password> widget for entering the encryption key, like this:
APIKey: <$edit-text tiddler="$:/temp/APIKey" field="key"/>
Password: <$password name="OpenAPIpassword"/>
<$button> save key
<$action-setfield $tiddler="MyAPIKey"
text={{{ [{$:/temp/APIKey!!key}encrypt:password[OpenAPIpassword]] }}}/>
</$button>
<$button> get key
<$action-setfield $tiddler="$:/temp/APIKey"
key={{{ [{MyAPIKey}decrypt:password[OpenAPIpassword]] }}}/>
</$button>
In this way, the password you enter is NEVER stored in a tiddler (not even a $:/temp tiddler), but is instead stored directly in your browser’s LocalStorage, which is used as the TiddlyWiki “Password Vault”.
enjoy,
-e
