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:
- Create and configure a Figma App on the Figma Developers page.
- Add your Figma
client_id
andclient_secret
to your Supabase Project. - Add the login code to your Supabase JS Client App.
Access the Figma Developers page#
- Go to the Figma Developers page
- Click on
My apps
at the top right - Log in (if necessary)
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 Redirect 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
- Copy and save your newly-generated
Client ID
- Copy and save your newly-generated
Client Secret
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
:
_10async 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:
_10async function signout() {_10 const { error } = await supabase.auth.signOut()_10}