Missed DevDay24? Register for the Best of DevDay
Auth0 Developer Logo

Integrate Figma Login in Your App Using Auth0

Published on February 17, 2025
Learning GoalLearn how to allow users to log in to any of your apps using their Figma account.

In this lab, you will:

  • Create a Figma OAuth app.
  • Use an Auth0 social connection to configure Figma as a social identity provider.
  • Test a "Login with Figma" button.

Why Use Figma For Login?

Figma is the leading prototyping platform for developers and designers to work together. If you are building an application that caters to developers and designers, you should consider allowing users to log in using their Figma account. Doing so can give you access to verified user metadata to populate user profiles. A "Login with Figma" button is easy to set up with Auth0 through a social connection.

What is Social Login?

Social login is Single Sign-On (SSO) for end-users. Users can log in to applications or websites using their existing login information from a social network provider like Facebook, Twitter, or GitHub. Social login simplifies registration and login transactions for end-users as they don't need to create a new account specifically for your application or website.

Additionally, social login improves the onboarding experience, as you can gather up-to-date user information from the social network provider in the background without creating any friction or compromising user experience.

The social login process is simple:

  • Users enter your application and select the desired social network provider.
  • Your application uses Auth0 to send a login request to the social network provider.
  • Existing users can access your application once the social network provider confirms the user's identity. Auth0 will register any new users and then log them into the application.
Learn more about the several benefits of social login, such as instant email verification and one-click return experiences.

By default, Auth0 automatically syncs Figma user profile data with each user login, which ensures that changes made in the user's Figma profile are automatically updated in Auth0. Optionally, you can disable user profile data synchronization to keep the scope of updating user profile information within your application.

Let's get started with using Figma to log in!

Lab Setup

Create a Figma Account

Before you begin, please sign up for a Figma account if you don't already have one.

Create an Auth0 Account

If you already have an Auth0 account, you can log in to your tenant and continue to the next step.

Otherwise, sign up for a free Auth0 account.

During the sign-up process, you create something called an Auth0 Tenant, representing the product or service to which you are adding authentication.

Once you sign in, Auth0 takes you to the Auth0 Dashboard, where you can configure and manage the authentication services for your applications.

Get Your Auth0 Domain

Your Auth0 domain is a unique URL to access your Auth0 tenant. At the same time, other services, such as Figma, use that unique URL to communicate with your Auth0 tenant to process user logins, create rich logs, and much more.

You can obtain your Auth0 domain by following these instructions:

  • Open the Applications section of the Auth0 Dashboard.
  • Click on any of the applications that show up.
  • Click on the "Settings" tab of the application page.
  • Locate the "Domain" field under the "Basic Information" section.
  • Store the "Domain" value in the following field to set up your Figma credentials in the next section:
For security, these configuration values are stored in memory and only used locally. They are gone as soon as you refresh the page! As an extra precaution, you should use values from an Auth0 test application instead of a production one.

Create a Figma OAuth 2.0 App

Figma supports OAuth 2.0 to let you establish a connection between existing user accounts and your application. This helps manage user identity and, if needed, allows you to interact with Figma APIs on the user's behalf.

To obtain the necessary credentials, create an OAuth 2.0 App in the Figma Developers dashboard.

Click the "Create a new app" button in the page's top-right corner.

Fill out the "Create a new app" form that comes up with the following data:

Name:

Figma will show this name to your users when they are redirected to Figma to log in.

VALUE
Quick Authentication Demo

In production, you'll use a value that easily associates the Figma application with your business branding or name.

Website:

While the Figma form indicates that this is the full URL of your app or website, in the context of authentication with Auth0, this value is your full tenant URL because the Auth0 tenant acts as the target application for Figma.

VALUE
https://AUTH0-DOMAIN

Logo:

When you are redirected to Figma to log in, Figma will show this logo next to the application name to your users. Feel free to upload any image you'd like. This is a required step.

Click the "Create" button to complete the Figma app creation process.

The "Quick Authentication Demo" modal loads up with all the Figma credentials you need for the Figma authorization server to identify itself with your Auth0 tenant. You'll store such credentials in your tenant so that it knows who to expect; in this case, what to expect since Figma is a machine acting on behalf of a user to log in with Auth0.

Keep this modal handy, as you'll need its values in the next section.

Configure the Figma Social Connection in the Auth0 Dashboard

Follow these steps to integrate the Auth0 social connection in your tenant with your Figma OAuth app:

  • Head to the Auth0 Dashboard.
  • Click the "Authentication" tab on the left-hand menu and then click the "Social" option.
  • Click the "Create Connection" button.
  • Type "Figma" in the search bar and click the Figma social connection card that shows up.
  • Read the description and disclosures in the "New Figma Social Connection" page that comes up.
  • Click the "Continue" button.

Head back to the modal of your Figma OAuth app page and do the following:

  • Copy the "Client ID" value from the Figma modal and paste it as the value of the "Client ID" field in the Auth0 configuration page.
  • Copy the "Client Secret" value from the Figma modal and paste it as the value of the "Client Secret" field in the Auth0 configuration page.
  • Click the "Create" button.
Notice that the file_read permission is selected by default.

A new page loads up with the "Applications" tab active. Enable this Figma social connection in any of the Auth0 applications you have created.

On the Figma Developers Dashboard, click the "Done" button to close the modal.

Define a Redirect URL For Your Figma OAuth 2.0 App

Before you can successfully test this Figma social login connection, you need to define a redirect URL for your Figma OAuth 2.0 app, which is the authorization callback URL where Auth0 can process the login transactions from Figma.

Head back to the Figma Developers dashboard and click the "Quick Authentication Demo" app to open its configuration modal.

Once there, click the "OAuth 2.0" tab. In this section, you can see again the Client ID of your Figma OAuth app and, partially, the Client Secret. It also has a section titled "Redirect URLs" where you can define where Figma can take your users after they successfully authorize your application to access their Figma profile.

Click the "Add a redirect URL" button and copy/paste the following value in the field that opens up:

VALUE
https://AUTH0-DOMAIN/login/callback

Click the "Add" button.

Auth0 will receive and process data from the Figma login transaction in the /login/callback endpoint of your Auth0 tenant. Once Auth0 does that, it redirects users to your actual application home page with the results of the login transaction. You don't have to worry about writing a single line of code to process Figma responses.

But wait a minute. Could anyone hit that /login/callback endpoint? Not at all. There needs to be a secure handshake that includes the Client ID and Client Secret you already defined in your Figma social connection in the Auth0 dashboard.

Test Your Figma Social Connection

Ensure you have configured your Figma social connection correctly using the Auth0 Dashboard.

Use the Auth0 Dashboard to log in

Instructions

  • Visit the Auth0 Dashboard home page.
  • Locate the "Try your Login box" under the "Next Steps" section.
  • Click the "Try it out" link to open the Auth0 /tester app.
  • The Auth0 Universal Login page loads up, which is a hosted page that Auth0 provides so that you don't have to write a single line of code to build the ultimate login and signup form.
  • Click the "Continue with Figma" button.

Expected results

A Figma authorization page loads up, showing your Figma OAuth app logo, name, and the permissions that you'll allow your Auth0 application to perform on your behalf and subsequently on behalf of your users.

If you'd like to see the full login flow in action, click the "Allow access" button.

If everything goes well, you'll see your browser processing a redirect that takes you to a page titled "It works!". On this page, you'll see user metadata about you that this Auth0 tester app got from Figma. For example:

{
  "sub": "oauth2|figma|1234567890",
  "nickname": "auth0.demo",
  "name": "Demo User",
  "picture": "https://example.com/user.png",
  "updated_at": "2025-02-17T20:20:00.060Z"
}

Next Steps

As a final piece of advice, it is a good idea to separate data in environments for data sanitation, management, and regional privacy policies. A best practice when working with Auth0 is to have different tenants for your project environments.

For example, it's recommended for developers to specify a production tenant. A production tenant gets higher rate limits than non-production tenants. Check out the "Set Up Multiple Environments" Auth0 document to learn more about how to set up development, staging, and production environments in the Auth0 Identity Platform.

You can create a Figma OAuth app that pairs with each Auth0 tenant. Then, you can configure the Figma social connection for each tenant using the credentials from its corresponding Figma OAuth app.

Under the Hood: Auth0 Universal Login

As you have seen, Auth0 allows you to provide a delightful yet robust authentication experience to your users. With Auth0, you can scale up your application security by enabling social identity providers with just a few clicks. With Auth0, developers don't have to invest any time into building complicated sign-up and login forms that need to support different social connections, such as Google, Facebook, and GitHub.

Auth0 Universal Login lets developers delegate the responsibility of building complex login forms that support social identity providers to Auth0. When you use Auth0 to protect your client applications, you delegate the authentication process to a centralized login page: the Auth0 Universal Login page.

With Universal Login, when your users need to log in, your client redirects them to a central domain, through which Auth0 performs the authentication process. Once your users log in successfully, Auth0 takes them back to your application. With Auth0, you can use your tenant URL or a custom domain as your central domain for authentication. Auth0 Universal Login supports both login and sign-up transactions.

Google services are a solid example of centralized authentication. Whenever you need to access any Google service (such as Gmail, Google Calendar, YouTube, etc.), if you have not logged in yet, Google will redirect you to https://accounts.google.com to log in. Once you successfully log in, Google redirects you to the application that initialized the login process.

With every successful login transaction, Auth0 returns to your client application an ID token and an access token. Your client application can use the ID token to personalize the user interface. It can use the access token to make authenticated requests to access protected resources from an API that you also protect using Auth0.

Learn more about the benefits of universal login.