Skip to content

Updating visuals

If you see any images containing outdated UI, please bear with us.

We are updating all content as quickly as possible to mirror our new UI.

Facebook authentication

Facebook (Meta) lets your users sign in with a Facebook account they already have. You create a Meta app, add the Facebook Login product, register redirect URIs under Facebook LoginSettings so Meta accepts WeWeb’s auth callback (/api/auth/callback/facebook on each origin), then paste your App ID and App secret into WeWeb’s Facebook provider.

Official reference: Facebook Login in Meta’s documentation.

What this integration supports

  • Let users sign in with their Facebook account through Facebook Login.
  • Work with the Sign in with social provider action in your interface workflows.
  • Use the same WeWeb Users, Roles, protected pages, and protected API rules as any other sign-in method.
  • Send users to different pages after sign in, after an error, or on first sign in.

Setup in Meta (Facebook developers)

All configuration happens in the Meta for Developers site. You will create or open an app, add Facebook Login, and list the exact redirect URLs WeWeb uses for each environment.

1. Create an app and add Facebook Login

Create the Meta app

  1. Go to Meta for Developers and sign in.
  2. Open My Apps and click Create app.
  3. On the Add use case step, select Authenticate and request data from users with Facebook Login, then click Next.
  4. On the Login type step, select No, I'm not building a game, then click Next.
  5. Enter App name and App contact email, then click Create app. Complete Meta’s security verification if it appears.
  6. When Meta confirms the app was created, click Go to Dashboard.

Add Facebook Login and permissions

  1. Register Facebook Login on the app:
    • Click Customize adding a Facebook Login button on the dashboard onboarding card, or
    • Open Products in the left sidebar, find Facebook Login, and click Set up.
  2. Scroll to Permissions and add public_profile and email using Add for each. WeWeb sign-in uses profile and email; extra permissions can require app review. Depending on your app type and Meta’s current layout, you may manage permissions here, under Facebook LoginSettings, or under App Review / Permissions and features. Only add what you need.
  3. Open Facebook LoginSettings in the left sidebar (do not skip this if you only used the customize flow). You register Valid OAuth Redirect URIs in the next section.

Development or Live

  1. Leave the app in Development until you are ready to go public. While in Development, only people with a role on the app and test users you add can complete login. To allow anyone to sign in, switch the app to Live on the app’s dashboard, complete every required field Meta lists for Live (including privacy and data use), and complete app review for any permission Meta flags as restricted. See app modes.

2. Valid OAuth redirect URIs and WeWeb

Meta only allows redirects that appear in Facebook LoginSettingsClient OAuth settingsValid OAuth Redirect URIs. If this list does not include WeWeb’s callback, Meta returns a redirect URI error at runtime.

WeWeb’s auth server completes Facebook OAuth at a fixed path on the same origin where your app (and /api/auth) is served, matching other providers such as GitHub:

https://<origin>/api/auth/callback/facebook

Use the real origin for each place you run the app. When the WeWeb editor, preview, and published app use different hosts, add one callback URL per origin.

  1. Open Facebook LoginSettings in the left sidebar.
  2. Open Client OAuth settings.
  3. In Valid OAuth Redirect URIs, add one callback URL per line for each environment you use.
Where the app runsAdd to Valid OAuth Redirect URIs
WeWeb editor projecthttps://<your-project-id>-editor.weweb.io/api/auth/callback/facebook
Published apphttps://your-domain.com/api/auth/callback/facebook
Preview or staging apphttps://your-preview-domain.com/api/auth/callback/facebook
  1. Set Client OAuth login and Web OAuth login to Yes.
  2. Click Save changes.

FULL URLS MATTER

Each value must include the full path /api/auth/callback/facebook and use https:// with the exact hostname WeWeb uses for that environment (including www vs bare domain). If Meta shows a redirect URI or URL blocked error, compare the failing URL to the list you saved in Meta.

3. Site URL, app domains, and policy URLs

  1. Open App settingsBasic.
  2. Under App Domains, add each hostname your WeWeb app uses, without https:// (for example your-domain.com and your editor host if needed).
  3. Click Add platformWebsite if the Website platform is not listed yet. Set Site URL to the https:// origin of your main WeWeb experience (for example https://your-domain.com).
  4. Before you set the app to Live, fill in Privacy Policy URL, App Domains, and every other required field Meta shows on Basic (often including Terms of Service URL and user data deletion). Meta frequently blocks publishing until those gates pass.

4. Copy the App ID and App secret

  1. Open App settingsBasic.
  2. Copy the App ID.
  3. Click Show next to App secret and copy the App secret (treat it like a password; do not expose it in the client or in public repos).

If you reset the app secret, update the value in WeWeb wherever you stored it.

Connect Facebook in WeWeb

With your Meta app credentials ready, connect Facebook in the WeWeb editor.

  1. Open Data & APIAuthenticationSSO Providers.
  2. Open the Facebook section.
  3. Turn on Enable.
  4. Paste Meta’s credentials into the Facebook fields:
    • Facebook client ID (Or Client ID), paste Meta App ID
    • Facebook secret (Or Client Secret), paste Meta App secret
  5. Save.

Every origin you added under Valid OAuth Redirect URIs in Meta must match an environment where this WeWeb project actually runs, or Facebook will reject the redirect.

FACEBOOK CALLBACK URL VS SUCCESS PAGE

The redirect URI you register in Meta is always WeWeb’s route, for example https://your-domain.com/api/auth/callback/facebook.

The Success page, Error page, and New user page in the Sign in with social provider action are separate. They are the pages inside your app where users land after the Facebook callback is complete.

Test sign in

After saving the provider configuration, test end to end.

  1. In the editor, add a button or link to your interface.
  2. Attach a workflow with the Sign in with social provider interface action.
  3. In the action options:
    • Set Provider to facebook.
    • Choose a Success page for where users should land after sign in.
    • Choose an Error page for where users should go if sign in fails.
    • Optionally choose a New user page if you want to route first-time users differently.
  4. Preview your project and click the button.
  5. Complete the Facebook sign-in flow with a test Facebook account.
  6. Confirm that you are redirected to the correct page in your app and that you are authenticated as the expected user.

For how sessions, roles, and page protection work once a user is signed in, see Using authentication in WeWeb ->.

Common pitfalls

Redirect URI mismatch

If Meta or Facebook shows an error about the redirect URI, callback, or an invalid URL, the value in Valid OAuth Redirect URIs does not match the URL WeWeb actually uses for that test.

  • Confirm you added the full callback URL, such as https://<origin>/api/auth/callback/facebook.
  • Add a separate line for each origin (editor, preview, production) you use.
  • After you change custom domains or preview hosts, add the new callback URLs in Meta and save.

Using the success page as the Facebook redirect

The Success page in Sign in with social provider is not what you paste into Meta.

  • Meta needs the fixed WeWeb callback URL: https://<origin>/api/auth/callback/facebook.
  • The action’s page settings only control where the user goes after that callback finishes.

App in development mode

If only you and your team can sign in, your app may still be in Development mode. People must either hold a role on the app (developer, tester, admin) or appear as test users. When you are ready for everyone to sign in, complete Meta’s steps to switch the app to Live and satisfy policy and review requirements for your use case.

Missing privacy policy or incomplete app settings

Moving beyond testing often requires a Privacy Policy URL, accurate App Domains, and other fields Meta shows as required for Live apps. Fill these in the app’s settings pages before expecting broad access.

www vs non-www and http vs https

The redirect URI must match the real URL, including host and scheme. If your site is https://www.example.com, use that exact origin in both WeWeb and Meta, not a different variant.

Reference

WeWeb settings reference

SettingDescriptionWhere to find it in Meta
EnableTurns Facebook sign in on for your WeWeb project.Not used in Meta; turn this on in WeWeb after you finish Meta setup.
Facebook client ID / Client IDSame as Meta App ID.App settingsBasicApp ID.
Facebook secret / Client SecretSame as Meta App secret.App settingsBasicApp secret (use Show to reveal).

Meta fields to prepare

Meta fieldWhat to enter
Valid OAuth Redirect URIsWeWeb callback on each hosted origin: https://<origin>/api/auth/callback/facebook.
App ID / App secretShown under App settingsBasic. Copy into WeWeb as Facebook client ID and Facebook secret (or the generic Client ID / Client Secret if the panel shows those).
Site URL / App DomainsThe website and domains where your WeWeb app is used, as Meta’s form requests (no https:// in App Domains per Meta’s format).

FAQs

Which redirect URL should I add in Meta?

Add https://<origin>/api/auth/callback/facebook for every hosted origin where your WeWeb app runs: the editor project, preview or staging URL, and your live domain when they differ. This is not the same as the Success page you pick in the sign-in action.

Is the success page the same as the Facebook redirect URI?

No. The redirect URI in Meta always ends with /api/auth/callback/facebook. The success page is a page in your WeWeb app where you send users after the flow finishes.

Can I use Facebook sign in and email/password together?

Yes. You can enable multiple providers and let users choose how to sign in.

Where are Meta’s official Facebook Login docs?

Start with Facebook Login and the Meta for Developers help for your app’s current dashboard and product names.

Do I need to submit my app for review?

For basic email and public profile style permissions, you can often test in Development with roles and test users. Additional permissions, data use, and going Live to the public usually require following Meta’s app review and policy steps for your case.

CONTINUE LEARNING

After Facebook sign in is working, the next step is deciding what authenticated users can access.

Managing roles ->