Figma authentication

Figma authentication lets your users sign in with the Figma account they already use for design files and teams. Once connected, you can offer “Continue with Figma” in your WeWeb app.

What this integration supports

• Social sign in with Figma
• Redirect to different pages for success, error, and first-time users

Setup in the Figma dashboard

You create an OAuth app in Figma and register WeWeb’s callback URL (the URL Figma sends users back to after they approve sign in).

1. Create an OAuth app

1. Go to Figma Developer Apps.
2. Click Create a new app.
3. Enter your app details and create the app.

When you create the app, Figma shows a Client ID and a Client Secret. Copy them and store them safely.

2. Add the redirect URL

1. Open your app’s configuration.
2. Go to OAuth credentials.
3. Click Add a redirect URL.
4. Add your WeWeb callback URL:
   • https://<your-domain>/api/auth/callback/figma

If you use multiple environments, add a redirect URL for each environment (preview, staging, production).

3. Choose scopes (optional)

If Figma asks you to choose scopes, start with the minimum needed to identify the user. If you later add extra scopes, users may see an updated consent screen.

Connect Figma in WeWeb

1. In the WeWeb editor, go to Data & API → Auth → Integrating providers.
2. Find Figma and expand it.
3. Turn on the Enable toggle.
4. Paste:
   • Client ID
   • Client Secret
5. Click Save.

WeWeb stores these values as environment variables (for example PROVIDER_FIGMA_CLIENT_ID and PROVIDER_FIGMA_CLIENT_SECRET).

Test sign in

1. In Interface, add a “Continue with Figma” button.
2. Create a workflow on click and add Sign in with social provider.
3. Set:
   • Provider: figma
   • Success page, Error page, And (optional) New user page
4. Preview your project and complete the Figma sign-in flow.

For what to do after sign in (roles, private pages, and access checks), see Users and roles overview →.

Common pitfalls

Redirect URL mismatch

If Figma shows a redirect URL error, the redirect URL in Figma usually doesn’t match what your app is using.

• In Figma, confirm you added https:///api/auth/callback/figma in OAuth credentials → redirect URLs.
• Make sure the domain matches the environment you are testing (preview vs production).

Missing or incorrect client secret

If sign in fails immediately, make sure you copied the right values.

• Confirm the Client ID in WeWeb matches the one shown in your Figma app.
• Confirm you pasted the Client Secret exactly (no missing characters or extra spaces).

App not published or not allowed for your users

Depending on how your Figma app is configured (draft, private, or public), some users may not be able to approve it.

• If you want only your organization to use the app, publish it as a private app.
• If you want anyone to be able to use it, publish it as a public app (this can require review).

Reference

WeWeb settings

Setting in WeWeb	Description	Where to find it in Figma
Client ID	Identifies your Figma OAuth app.	Your app details in figma.com/developers/apps.
Client Secret	Secret used to securely complete sign in.	Shown when you create the app (store it safely).

FAQs

Which URL do I add as the redirect URL?

Use https://<your-domain>/api/auth/callback/figma. Add one redirect URL per environment you use.

What provider value should I use in the workflow action?

Use figma as the Provider value in the Sign in with social provider action.

Can I use Figma sign in just to identify users?

Yes. In WeWeb, the provider is used for sign in. Roles and access rules are managed in WeWeb after the user is authenticated.

Continue learning

Next, learn how to set up roles and restrict access after users sign in.

Users and roles overview →