Appearance
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 Login → Settings 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 provideraction 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
- Go to Meta for Developers and sign in.
- Open My Apps and click
Create app. - On the
Add use casestep, selectAuthenticate and request data from users with Facebook Login, then clickNext. - On the
Login typestep, selectNo, I'm not building a game, then clickNext. - Enter
App nameandApp contact email, then clickCreate app. Complete Meta’s security verification if it appears. - When Meta confirms the app was created, click
Go to Dashboard.
Add Facebook Login and permissions
- Register Facebook Login on the app:
- Click
Customize adding a Facebook Login buttonon the dashboard onboarding card, or - Open
Productsin the left sidebar, findFacebook Login, and clickSet up.
- Click
- Scroll to
Permissionsand addpublic_profileandemailusingAddfor 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, underFacebook Login→Settings, or underApp Review/Permissions and features. Only add what you need. - Open
Facebook Login→Settingsin the left sidebar (do not skip this if you only used the customize flow). You registerValid OAuth Redirect URIsin the next section.
Development or Live
- Leave the app in
Developmentuntil you are ready to go public. While inDevelopment, 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 toLiveon the app’s dashboard, complete every required field Meta lists forLive(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 Login → Settings → Client OAuth settings → Valid 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.
- Open
Facebook Login→Settingsin the left sidebar. - Open
Client OAuth settings. - In
Valid OAuth Redirect URIs, add one callback URL per line for each environment you use.
| Where the app runs | Add to Valid OAuth Redirect URIs |
|---|---|
| WeWeb editor project | https://<your-project-id>-editor.weweb.io/api/auth/callback/facebook |
| Published app | https://your-domain.com/api/auth/callback/facebook |
| Preview or staging app | https://your-preview-domain.com/api/auth/callback/facebook |
- Set
Client OAuth loginandWeb OAuth logintoYes. - 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
- Open
App settings→Basic. - Under
App Domains, add each hostname your WeWeb app uses, withouthttps://(for exampleyour-domain.comand your editor host if needed). - Click
Add platform→Websiteif theWebsiteplatform is not listed yet. SetSite URLto thehttps://origin of your main WeWeb experience (for examplehttps://your-domain.com). - Before you set the app to
Live, fill inPrivacy Policy URL,App Domains, and every other required field Meta shows onBasic(often includingTerms of Service URLand user data deletion). Meta frequently blocks publishing until those gates pass.
4. Copy the App ID and App secret
- Open
App settings→Basic. - Copy the
App ID. - Click
Shownext toApp secretand copy theApp 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.
- Open
Data & API→Authentication→SSO Providers. - Open the
Facebooksection. - Turn on
Enable. - Paste Meta’s credentials into the Facebook fields:
Facebook client ID(OrClient ID), paste MetaApp IDFacebook secret(OrClient Secret), paste MetaApp secret
- 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.
- In the editor, add a button or link to your interface.
- Attach a workflow with the
Sign in with social providerinterface action. - In the action options:
- Set
Providertofacebook. - Choose a
Success pagefor where users should land after sign in. - Choose an
Error pagefor where users should go if sign in fails. - Optionally choose a
New user pageif you want to route first-time users differently.
- Set
- Preview your project and click the button.
- Complete the Facebook sign-in flow with a test Facebook account.
- 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
| Setting | Description | Where to find it in Meta |
|---|---|---|
Enable | Turns 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 ID | Same as Meta App ID. | App settings → Basic → App ID. |
Facebook secret / Client Secret | Same as Meta App secret. | App settings → Basic → App secret (use Show to reveal). |
Meta fields to prepare
| Meta field | What to enter |
|---|---|
Valid OAuth Redirect URIs | WeWeb callback on each hosted origin: https://<origin>/api/auth/callback/facebook. |
App ID / App secret | Shown under App settings → Basic. 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 Domains | The 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.

