Authentication in Figma Plugin using OAuth

Plugin and Widget API
1

I have an OAuth link for google authentication
Looks like this: https://api.x.xx.com/v1/oauth/google (NOT THE ACTUAL API)

I need to use this link to open a browser window, which on opening shows the google provider screen showing our google accounts. I have done till that using window.open(url)
method. Now, on pressing a google account of ours, I need to obtain the user details and send these details to the figma plugin somehow. So like communicating or sending data between a browser window and my figma plugin. How do i do that?

2

Hi, you should read Figma’s docs on implementing OAuth with plugins if you haven’t already.

It seems like you’re looking for steps 6-10 describing that after the user authenticates with the OAuth provider, it redirects back to your server with the user details. At that point, your plugin’s iframe can poll your server using the read key.

I hope this helps, and I’m happy to answer any other questions you may have!

1 Like
3

Hi bro, i followed the steps in that documentation.

if(msg.type === 'login') {

    figma.showUI(`
    <iframe width="100%" height="100%" src="https://api.bud.dev2staging.com/v1/oauth/google"></iframe>`,
    { width: 750, height: 500, title:"Login to DevBud"}
    );
}

This is my code in the controller.jsx. On pressing a login button, this function is fired. But it gives me 403 error for some reason. Do you know why? And any workarounds for it.

1 Like
4

It looks like you’re trying to open the OAuth flow directly within the plugin iframe itself. I’m not entirely sure that this is possible, hence the 403 error you’re encountering.

Per the documentation, Step 6 states “The plugin iframe opens a new window hosted on your internet server” so I think that you would open Sign in - Google Accounts within a separate browser window to complete the OAuth flow there. Once it’s complete, you’ll store the user information on your own server, then the plugin can poll or query your server for that information to then complete the login process within the plugin iframe.

What’s described above is how I’ve personally implemented the OAuth flow for one of my plugins. I essentially push the plugin user to a separate browser window for them to complete the OAuth flow, then I store the resulting user information (specific keys or tokens) on my private server. Meanwhile, my Figma plugin is polling my server to see if the user has finished the sign in flow in the browser. At that point, the plugin will grab the user information from the server and I can authenticate the user on the plugin. I store my user’s refresh and access token with the Figma’s plugin data API.

I hope that this information helps. If you need further assistance, feel free to reply here or message me directly.

2 Likes
5

Can you please share some template code or something so that I can implement it as well. I am a fresher so I do not know how to do polling and stuff. Please bro, it would help me a lot.
At-least share the code for the polling process, how it is done.

5 Likes
6

Have you managed to find the solution? I am looking for the same answer

1 Like
7

Is there any walkthrough you can share with us?