Skip to content

Commit 48b232b

Browse files
committed
Update headings
1 parent 8e7021e commit 48b232b

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

src/routes/blog/post/add-figma-oauth2-appwrite/+page.markdoc

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Figma's API opens up some interesting doors, such as automating workflows, synci
1414

1515
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.
1616

17-
## Understanding the OAuth flow in Appwrite
17+
# Understanding the OAuth flow in Appwrite
1818

1919
When a user attempts to sign in with Figma, Appwrite starts a standard OAuth2 flow:
2020

@@ -26,7 +26,7 @@ When a user attempts to sign in with Figma, Appwrite starts a standard OAuth2 fl
2626

2727
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.
2828

29-
## Creating your OAuth app in Figma
29+
# Creating your OAuth app in Figma
3030

3131
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.
3232

@@ -50,7 +50,7 @@ Now that the app is registered, find it in your list of apps and click to open i
5050

5151
Keep this tab open. We'll come right back to it.
5252

53-
## Enabling Figma as a provider in Appwrite
53+
# Enabling Figma as a provider in Appwrite
5454

5555
Now let's switch over to Appwrite.
5656

@@ -74,7 +74,7 @@ Once that's done, head back to Appwrite, paste in your **Client ID** and **Clien
7474

7575
At this point, Figma is connected to your Appwrite backend.
7676

77-
## Logging in from your frontend
77+
# Logging in from your frontend
7878

7979
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:
8080

@@ -99,7 +99,7 @@ function signInWithFigma() {
9999

100100
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.
101101

102-
## Calling the Figma API (if needed)
102+
# Calling the Figma API (if needed)
103103

104104
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.
105105

@@ -128,13 +128,13 @@ async function getFigmaFiles() {
128128

129129
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.
130130

131-
## What happens when the Figma token expires?
131+
# What happens when the Figma token expires?
132132

133133
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.
134134

135135
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.
136136

137-
## Common issues to watch for
137+
# Common issues to watch for
138138

139139
**Redirect URI mismatch**
140140
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
148148
**Scope mismatch**
149149
Make sure the scopes you request in `createOAuth2Session()` match what you enabled in Figma. Otherwise, Figma will block the request.
150150

151-
## Logging out
151+
# Logging out
152152

153153
To log the user out and remove access to their Figma account:
154154

@@ -158,15 +158,15 @@ await account.deleteSession('current')
158158

159159
This clears both the Appwrite session and the associated access and refresh tokens.
160160

161-
## Final thoughts
161+
# Final thoughts
162162

163163
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.
164164

165165
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.
166166

167167
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).
168168

169-
## Further reading
169+
# Further reading
170170

171171
- [Appwrite OAuth2 docs](https://appwrite.io/docs/client/auth#oauth2)
172172
- [Figma API docs](https://www.figma.com/developers/api)

0 commit comments

Comments
 (0)