Figma

OAuth 2.0 provider for Figma.

Also see the OAuth 2.0 guide.

Initialization

import { Figma } from "arctic";

const figma = new Figma(clientId, clientSecret, redirectURI);

Create authorization URL

import { generateState } from "arctic";

const state = generateState();
const scopes = ["files:read", "file_variables:read"];
const url = figma.createAuthorizationURL(state, scopes);

Validate authorization code

validateAuthorizationCode() will either return an OAuth2Tokens, or throw one of OAuth2RequestError, ArcticFetchError, or a standard Error (parse errors). Figma returns an access token, the access token expiration, and a refresh token.

import { OAuth2RequestError, ArcticFetchError } from "arctic";

try {
	const tokens = await figma.validateAuthorizationCode(code);
	const accessToken = tokens.accessToken();
	const accessTokenExpiresAt = tokens.accessTokenExpiresAt();
	const refreshToken = tokens.refreshToken();
} catch (e) {
	if (e instanceof OAuth2RequestError) {
		// Invalid authorization code, credentials, or redirect URI
		const code = e.code;
		// ...
	}
	if (e instanceof ArcticFetchError) {
		// Failed to call `fetch()`
		const cause = e.cause;
		// ...
	}
	// Parse error
}

Refresh access tokens

Use refreshAccessToken() to get a new access token using a refresh token. Figma only returns an access token and its expiration. This method also returns OAuth2Tokens and throws the same errors as validateAuthorizationCode()

import { OAuth2RequestError, ArcticFetchError } from "arctic";

try {
	const tokens = await figma.refreshAccessToken(accessToken);
	const accessToken = tokens.accessToken();
	const accessTokenExpiresAt = tokens.accessTokenExpiresAt();
} catch (e) {
	if (e instanceof OAuth2RequestError) {
		// Invalid authorization code, credentials, or redirect URI
	}
	if (e instanceof ArcticFetchError) {
		// Failed to call `fetch()`
	}
	// Parse error
}

Get user profile

Use the /me endpoint.

const response = await fetch("https://api.figma.com/v1/me", {
	headers: {
		Authorization: `Bearer ${accessToken}`
	}
});
const user = await response.json();