Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How does OAuth 2.0 integration differ between Figma plugins and web applications
    Figma API


How does OAuth 2.0 integration differ between Figma plugins and web applications


OAuth 2.0 integration differs between Figma plugins and web applications in the following ways:

Figma Plugins

- Figma plugins run in a sandboxed environment, so the usual OAuth flows used for websites and native apps don't work[1].
- The only way to do OAuth in a Figma plugin is to run your own server on the public internet and have the user authenticate your server via OAuth[1].
- You can't store secrets anywhere, so you need to use a Proof Key for Code Exchange (PKCE) flow for security[2].
- The entire OAuth flow must happen in the UI part of the plugin, except for saving the access token in `figma.clientStorage`[2].
- You need to communicate between the plugin's UI entry point and main entry point to save the access token[2].

Web Applications

- For web apps, you can open the authentication page with `window.open()`, have the user authenticate, and then the authentication page sends the access token back using `window.opener.postMessage()`[1].
- The access token can be stored on the server and used to make authenticated API requests.
- The OAuth flow is simpler since the entire application runs in the same environment.

In summary, Figma plugins require a more complex OAuth flow involving a separate server and communication between plugin entry points, while web apps can use the standard OAuth flows and store tokens on the server. The sandboxed nature of plugins necessitates these differences.

Citations:
[1] https://www.figma.com/plugin-docs/oauth-with-plugins/
[2] https://evilmartians.com/chronicles/how-to-make-next-level-figma-plugins-auth-routing-storage-and-more
[3] https://github.com/didoo/figma-api
[4] https://forum.bubble.io/t/plugin-oauth2-flow-for-figma/136616
[5] https://forum.figma.com/t/oauth-with-figma-itself/22522