A tiny microservice that makes adding authentication with Figma to your application easy.
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.comYou'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.comwill redirect them tohttps://google.com/?access_token=asdf123. (whereasdf123is the provided access token)
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! 🎉
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.
git clone git@github.com:jongold/micro-figma.gitMove now-secrets.example.json to now-secrets.json and fill in your Figma API details and redirect url.
npm run devThe 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.
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! 👌
Thank you to Max Stoiber for micro-github, which this repo is based upon.
Copyright (c) 2018 Jon Gold, licensed under the MIT license. See LICENSE.md for more information.