OAuth with Figma

Figma is a collaborative design tool where teams design interfaces, build prototypes, and hand designs off to development. Its REST API gives apps access to files, comments, and other resources with the user's permission.

How does the integration work?

You can use the Figma OAuth adapter in Appwrite Auth to let users sign in with their Figma account. This fits design tools, plugins with a companion web app, and handoff workflows whose users already live in Figma. The session stores Figma's access token as providerAccessToken, so your server can call the Figma REST API on the user's behalf.

Appwrite requests the current_user:read scope and stores the user's handle, email, and profile image. Figma doesn't report whether the email is verified, so Appwrite stores it as unverified. If another user in your project already has that email, Appwrite redirects to your failure URL instead of signing the user in. To connect Figma to that account, have the user sign in first and then start the OAuth flow from the browser, which links Figma as a new identity.

How to implement

To implement the Figma OAuth adapter in Appwrite Auth, there are several steps you must complete:

Step 1: Create an OAuth app on Figma

Open My Apps and click Create a new app. Enter a name, select the team or organization that owns the app, and click Create. Save the Client ID and Client Secret right away, because Figma shows the secret only once.

The app starts as a draft, and draft apps can't authorize anyone. In the app's configuration:

• On the OAuth scopes page, select current_user:read, plus any scopes your app needs for the Figma API, such as file_content:read. The scopes Appwrite requests must be among the scopes you select here.
• On the Publish page, publish the app. A private app works for users in the team or organization you selected. To let any Figma user sign in, submit the app for Figma's review as a public app.

You'll add the redirect URL on the OAuth credentials page after you configure Appwrite in the next step.

Step 2: Add Figma OAuth adapter to your Appwrite project

For this step, you must create an account on Appwrite Cloud or self-host Appwrite if you haven't already. In your Appwrite project, head over to the Auth page, open the Settings tab, and click Figma under the OAuth2 Providers section.

Paste the app's credentials into the Client ID and Client Secret fields, turn the provider on, and click Update.

Copy the Redirect URI shown in the form. On Appwrite Cloud it looks like https://<REGION>.cloud.appwrite.io/v1/account/sessions/oauth2/callback/figma/<PROJECT_ID>, but always copy the exact value from the Console. In your Figma app's configuration, open OAuth credentials, click Add a redirect URL, and paste it.

Step 3: Test the provider

Start a session from your app with the OAuthProvider.Figma value. Pass any extra scopes your app needs in scopes. With the Web SDK:

import { Client, Account, OAuthProvider } from 'appwrite';

const client = new Client()
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>');

const account = new Account(client);

account.createOAuth2Session({
    provider: OAuthProvider.Figma,
    success: 'https://example.com/success',
    failure: 'https://example.com/failed',
    scopes: ['file_content:read'], // optional
});

Add your app's domain as a web platform in your Appwrite project so Appwrite accepts the success and failure URLs. Follow the OAuth 2 login flow for other platforms and for server-side sign-in.

Read more about Figma and Appwrite Auth

If you would like to learn more about Figma and Appwrite Auth, we have some resources that you should visit: