Figma Authorization Provider

Figma OAuth App

Creating an OAuth App

The first step is to create and register a Figma OAuth App to grant access to the user's accessible resources like Users (Used by Aura Auth), Files, Comments, etc. For more detailed information read Create an OAuth App, Scopes and Users Endpoints

Creating a Figma OAuth app includes:

• Name: The application name shown when the user tries to grant access to the app.
• Owner: Owner of the OAuth App, in this section a team or an organization can be selected.

Once the OAuth App is created, the App's credentials can be accessed and updated. The new values needed are:

• OAuth credentials/Redirect URLs: The URL to which Figma OAuth will redirect, it should end in /auth/callback/figma for local and production environments.
  • Local environment: http://localhost:3000/auth/callback/figma.
  • Production environment: Set the URL of your production application.
• OAuth scopes: The scopes which the application can access. By default, Aura Auth uses current_user:read. Read about OAuth scopes.

Figma Aura Auth

Installation

Install the package using a package manager like npm, pnpm or yarn.

npm install @aura-stack/auth

Environment setup

Now, it's time to create and consume the Figma credentials required and used by Aura Auth, which include the client Id and client Secret and write them into a .env file.

Additionally set the secret used by Aura Auth to sign and encrypt the user's session.

# Figma Credentials
AURA_AUTH_FIGMA_CLIENT_ID="figma_client_id"
AURA_AUTH_FIGMA_CLIENT_SECRET="figma_client_secret"

# Aura Secret
AURA_AUTH_SECRET="32-bytes-secret"

Configure the provider

Set the oauth option of the createAuth instance and writing "figma" name.

import { createAuth } from "@aura-stack/auth"

export const auth = createAuth({
  oauth: ["figma"],
})

export const { handlers } = auth

Get HTTP Handlers

Use the HTTP handlers to consume the authentication logic and flow the Aura Auth library to be integrated into routers and frameworks.

import { handlers } from "@/auth"

export const { GET, POST } = handlers