`micro-figma`

A tiny microservice that makes adding authentication with Figma to your application easy.

Usage

Or, if you're old fashioned:

# Deploy this repository using now.sh
now jongold/micro-figma -e FIGMA_CLIENT_ID=12345 -e FIGMA_CLIENT_SECRET=12345 -e REDIRECT_URL=https://google.com

Environment variables

You'll need to provide three environment variables when running micro-figma:

now-secrets.json

{
  "figma-client-id": "12345",
  "figma-client-secret": "12345",
  "redirect-url": "https://google.com"
}

Create an application on Figma here to get your client id and secret if you haven't done that already.

When authentication was successful, the user will be redirected to the REDIRECT_URL with the access_token, refresh_token and expires_in query params to their respective responses from Figma.

You can then use that token to interact with the Figma API (e.g. with figma-js)!

E.g. setting REDIRECT_URL=https://google.com will redirect them to https://google.com/?access_token=asdf123. (where asdf123 is the provided access token)

Finish setup

To make this work you have to set the authorization callback URL of your application on Figma to whatever URL now gave you plus the path /callback e.g. http://localhost:3000/callback:

To log people in provide a link to url now gave you plus the path login e.g. http://localhost:3000/login when they click on the link it will redirect to https://www.figma.com/oauth, with the appropriate params from now-secrets.json.

This will redirect them to the Figma sign in page for your app, which looks like this:

When authentication is successful, the user will be redirected to the REDIRECT_URL with the access token from Figma for you to use! 🎉

Error handling

In case an error happens (either by the service or on Figma) the user will be redirected to the REDIRECT_URL with the error query param set to a relevant error message.

Development

git clone git@github.com:jongold/micro-figma.git

Move now-secrets.example.json to now-secrets.json and fill in your Figma API details and redirect url.

npm run dev

The server will then be listening at localhost:3000, so set the authorization callback URL of your dev application on Figma to http://localhost:3000/callback.

Updating

The master branch of this repository is what you will be deploying. To update to a new version with potential bugfixes, all you have to do is run the now command again and then set the authorization callback URL on Figma to the new URL that now gave you! 👌

Gratitude

Thank you to Max Stoiber for micro-github, which this repo is based upon.

kylemac/micro-figma