How to hide secret keys from users?

Plugin and Widget API Questions
1

Currently I retrieve secret keys from a custom API that my plugin uses in order to work. But, my problem is that a user can see values of these secret keys by simply going into the “Network tab” of the console (Snippet shown in image attached). Hence, this is a security risk.

img
img1418×612 57.5 KB

What should I do in order to have the keys available for the plugin to use, while making sure users cannot see its value?

Please confirm if this is a possible solution: Manually setting and using secret key values via figma.clientStorage.setAsync and figma.clientStorage.getAsync?

2

Never mind, I just found out that the keys being retrieved are public anyways. However the proper solution for this type of stuff is as answered here: How can I manage and hide secret keys and configs?

Thanks! :sweat_smile:

3

@Saifylis In case you’re wondering, I found another solution.

You can generate signed jwt (json web token) inside the Figma Plugin API context. You can use secrets because this code is not visible to the user.

Example of code for generating a token:

import { addDays } from 'date-fns'
import jws from 'jws'

import { AUD, ISSUER, SECRET } from '../constants'

export async function generateToken() {
  const token = await signToken(
    {
      iss: ISSUER,
      sub: figma.currentUser?.id || null,
      aud: AUD,
      name: figma.currentUser?.name || null,
      // @NOTE: session id
      sid: figma.currentUser?.sessionId.toString() || null,
      // @NOTE: session color
      sc: figma.currentUser?.color || null,
      iat: Math.floor(new Date().getTime() / 1000),
      exp: Math.floor(addDays(new Date(), 1).getTime() / 1000),
    },
    SECRET
  )
  return token
}

function signToken<T>(payload: T, secret: string): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    jws
      .createSign({
        header: {
          alg: 'HS256',
          typ: 'JWT',
        },
        privateKey: secret,
        payload,
        encoding: 'utf-8',
      })
      .once('error', reject)
      .once('done', resolve)
  })
}

And then you can include this information in all queries as a Bearer token within your UI context.

const token = await figmaService.generateToken()

await fetch(url, {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${token}`
  }
})

Remember to verify the token on the backend with jws.verify(token).

4

@tonypinkevych This looks great! Thank you so much, I’ll surely try it out.