Auth

Login with Figma

To enable Figma Auth for your project, you need to set up a Figma OAuth application and add the application credentials to your Supabase Dashboard.

Overview

Setting up Figma logins for your application consists of 3 parts:

Access the Figma Developers page

Figma Developers page

Find your callback URL

The next step requires a callback URL, which looks like this: https://<project-ref>.supabase.co/auth/v1/callback

  • Go to your Supabase Project Dashboard
  • Click on the Authentication icon in the left sidebar
  • Click on Providers under the Configuration section
  • Click on Figma from the accordion list to expand and you'll find your Callback URL, you can click Copy to copy it to the clipboard

Create a Figma OAuth app

  • Enter your App name, Website URL and upload your app logo
  • Click on Add callback
  • Add your Callback URL
  • Click on Save

Create Figma app

  • Copy and save your newly-generated Client ID
  • Copy and save your newly-generated Client Secret

Get Figma app credentials

Enter your Figma credentials into your Supabase project

  • Go to your Supabase Project Dashboard
  • In the left sidebar, click the Authentication icon (near the top)
  • Click on Providers under the Configuration section
  • Click on Figma from the accordion list to expand and turn Figma Enabled to ON
  • Enter your Figma Client ID and Figma Client Secret saved in the previous step
  • Click Save

Add login code to your client app

When your user signs in, call signInWithOAuth() with figma as the provider:


_10
async function signInWithFigma() {
_10
const { data, error } = await supabase.auth.signInWithOAuth({
_10
provider: 'figma',
_10
})
_10
}

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:


_10
async function signOut() {
_10
const { error } = await supabase.auth.signOut()
_10
}

Resources