You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Figma's API opens up some interesting doors, such as automating workflows, syncing design tokens, and bringing live design previews into your app. But before you can do any of that, your users need to connect their Figma account. If you're using Appwrite for authentication, this process is simpler than you might expect. In this guide, we'll walk through everything you need to do to support Figma OAuth2 login inside your Appwrite project.
14
+
15
+
We'll cover both the configuration and the actual login flow, then show how to securely access Figma's API on behalf of the user. You won't need any server-side code because Appwrite handles the OAuth2 flow for you, and sessions are maintained like any other login provider.
16
+
17
+
# Understanding the OAuth flow in Appwrite
18
+
19
+
When a user attempts to sign in with Figma, Appwrite starts a standard OAuth2 flow:
20
+
21
+
1. It redirects the user to Figma with the necessary query parameters (`client_id`, `redirect_uri`, `scope`, and `state`).
22
+
2. Once the user grants access, Figma sends back an authorization code.
23
+
3. Appwrite exchanges that code for an access token and refresh token.
24
+
4. A new Appwrite session is created for the user.
25
+
5. That session includes the user's identity and also stores the Figma tokens, so your frontend can later call the Figma API if needed.
26
+
27
+
The access token is used to make requests to Figma's API. Appwrite also stores the refresh token and allows you to renew the access token when it expires. This is optional and only necessary if you continue to use Figma's API beyond the initial login.
28
+
29
+
# Creating your OAuth app in Figma
30
+
31
+
To connect your Appwrite project to Figma, the first step is to register your app on the [Figma Developer Portal](https://www.figma.com/developers/apps). This allows you to request access to a user's Figma data through OAuth2.
32
+
33
+
Click **"Create a new app"** in the top right.
34
+
35
+
You'll be asked to fill in a few details:
36
+
37
+
- **Name** - This will be shown to users during login.
38
+
- **Website** - A link to your app or landing page.
39
+
- **Logo** - Optional, but it helps users recognize your app in the consent screen.
Once you save the app, Figma will show your **Client ID** and **Client Secret**. These are the credentials you'll need to complete the setup in Appwrite.
44
+
45
+
46
+
47
+
Take a moment to copy both values. The **Client Secret** is shown only once, so make sure to save it somewhere you can reference later.
48
+
49
+
Now that the app is registered, find it in your list of apps and click to open it. Inside the modal, switch to the **OAuth 2.0** section and click **Add a redirect URL**. This is where you'll paste the callback URL that Appwrite generates in the next step.
50
+
51
+
Keep this tab open. We'll come right back to it.
52
+
53
+
# Enabling Figma as a provider in Appwrite
54
+
55
+
Now let's switch over to Appwrite.
56
+
57
+
1. Open the [Appwrite Console](https://cloud.appwrite.io/) and choose your project.
58
+
2. In the left-hand sidebar, click **Auth**.
59
+
3. Inside the Auth section, select the **Settings** tab.
60
+
4. Scroll down to the **OAuth2 Providers** section.
61
+
5. Click on **Figma**.
62
+
63
+
This opens a configuration panel where you'll see:
64
+
65
+
- A toggle to enable the Figma provider.
66
+
- Input fields for **App ID** and **App Secret**.
67
+
- A read-only **Redirect URI** that Appwrite will use for the callback.
68
+
69
+
Copy the Redirect URI and return to your Figma app configuration. Under **OAuth 2.0**, paste it into the redirect URL field and save the changes.
70
+
71
+
Once that's done, head back to Appwrite, paste in your **Client ID** and **Client Secret**, enable the toggle, and click **Update**.
This will redirect the user to Figma's consent screen. Once they log in and approve access, they'll be returned to your app with an active Appwrite session.
101
+
102
+
# Calling the Figma API (if needed)
103
+
104
+
If your app just needs Figma for login, you don't have to think about the Figma token again. Appwrite already pulled the identity info (name, email, etc.) when the session was created.
105
+
106
+
But if you want to call Figma's API after the initial login, either to fetch files, sync variables, or manage libraries, you'll need a valid access token. Figma's tokens expire after 24 hours, but Appwrite stores the refresh token and gives you a way to renew them:
const res = await fetch('https://api.figma.com/v1/files/file_key', {
116
+
headers: {
117
+
Authorization: `Bearer ${token}`,
118
+
},
119
+
})
120
+
121
+
if (!res.ok) {
122
+
throw new Error('Figma API error')
123
+
}
124
+
125
+
return res.json()
126
+
}
127
+
```
128
+
129
+
The `updateSession()` call silently refreshes the Figma token using the stored refresh token. Your user remains logged in to your app, so they won't see any interruptions.
130
+
131
+
# What happens when the Figma token expires?
132
+
133
+
Appwrite keeps the user logged in with their Appwrite session. Even after Figma's access token expires, your app's session remains valid. The only thing that stops working is the ability to make requests to Figma's API.
134
+
135
+
So if your app never talks to Figma again, you don't have to refresh anything. But if you need to access the API after the token has expired, calling `updateSession()` is the way to renew it.
136
+
137
+
# Common issues to watch for
138
+
139
+
**Redirect URI mismatch**
140
+
If the redirect URI you added in Figma doesn't match exactly what Appwrite is using, including protocol, port, or trailing slashes, Figma will reject the login with a `redirect_uri mismatch` error.
141
+
142
+
**Invalid client credentials**
143
+
If you see an `invalid_client` error, it usually means your Client ID or Secret is incorrect, or you didn't copy the secret when it was first shown.
144
+
145
+
**Expired token when calling Figma API**
146
+
That's expected if the token has expired. Just call `updateSession('current')` before you hit the Figma endpoint again.
147
+
148
+
**Scope mismatch**
149
+
Make sure the scopes you request in `createOAuth2Session()` match what you enabled in Figma. Otherwise, Figma will block the request.
150
+
151
+
# Logging out
152
+
153
+
To log the user out and remove access to their Figma account:
154
+
155
+
```js
156
+
await account.deleteSession('current')
157
+
```
158
+
159
+
This clears both the Appwrite session and the associated access and refresh tokens.
160
+
161
+
# Final thoughts
162
+
163
+
You don't need a custom backend to support "Sign in with Figma." Appwrite gives you a simple way to plug in Figma as an OAuth2 provider, handle authentication, and optionally access the Figma API, all with session management handled for you.
164
+
165
+
If you're only using Figma for sign-in, your work is done once the session is created. But if your app needs to interact with Figma's API after that, Appwrite gives you a safe way to refresh tokens on demand.
166
+
167
+
If you have any questions or run into any issues, feel free to reach out to the team through the [Appwrite Discord server](https://appwrite.io/discord).
0 commit comments