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
Copy file name to clipboardExpand all lines: src/routes/blog/post/add-figma-oauth2-appwrite/+page.markdoc
+10-10Lines changed: 10 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ Figma's API opens up some interesting doors, such as automating workflows, synci
14
14
15
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
16
17
-
## Understanding the OAuth flow in Appwrite
17
+
# Understanding the OAuth flow in Appwrite
18
18
19
19
When a user attempts to sign in with Figma, Appwrite starts a standard OAuth2 flow:
20
20
@@ -26,7 +26,7 @@ When a user attempts to sign in with Figma, Appwrite starts a standard OAuth2 fl
26
26
27
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
28
29
-
## Creating your OAuth app in Figma
29
+
# Creating your OAuth app in Figma
30
30
31
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
32
@@ -50,7 +50,7 @@ Now that the app is registered, find it in your list of apps and click to open i
50
50
51
51
Keep this tab open. We'll come right back to it.
52
52
53
-
## Enabling Figma as a provider in Appwrite
53
+
# Enabling Figma as a provider in Appwrite
54
54
55
55
Now let's switch over to Appwrite.
56
56
@@ -74,7 +74,7 @@ Once that's done, head back to Appwrite, paste in your **Client ID** and **Clien
74
74
75
75
At this point, Figma is connected to your Appwrite backend.
76
76
77
-
## Logging in from your frontend
77
+
# Logging in from your frontend
78
78
79
79
Once Figma is enabled as a provider, you can trigger a login using the Appwrite SDK. Here's an example using the JavaScript SDK in a React app:
80
80
@@ -99,7 +99,7 @@ function signInWithFigma() {
99
99
100
100
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
101
102
-
## Calling the Figma API (if needed)
102
+
# Calling the Figma API (if needed)
103
103
104
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
105
@@ -128,13 +128,13 @@ async function getFigmaFiles() {
128
128
129
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
130
131
-
## What happens when the Figma token expires?
131
+
# What happens when the Figma token expires?
132
132
133
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
134
135
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
136
137
-
## Common issues to watch for
137
+
# Common issues to watch for
138
138
139
139
**Redirect URI mismatch**
140
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.
@@ -148,7 +148,7 @@ That's expected if the token has expired. Just call `updateSession('current')` b
148
148
**Scope mismatch**
149
149
Make sure the scopes you request in `createOAuth2Session()` match what you enabled in Figma. Otherwise, Figma will block the request.
150
150
151
-
## Logging out
151
+
# Logging out
152
152
153
153
To log the user out and remove access to their Figma account:
This clears both the Appwrite session and the associated access and refresh tokens.
160
160
161
-
## Final thoughts
161
+
# Final thoughts
162
162
163
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
164
165
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
166
167
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