How to integrate login functionality with Facebook in a Bubble.io app: Step-by-S

Go to developers.facebook.com and log in with your Facebook account. Click My Apps in the top navigation, then click Create App. Select Consumer as the app type and click Next. Enter your app name (e.g., MyBubbleApp Login), your contact email, and click Create App. On the app dashboard, find Facebook Login in the product list and click Set Up. Choose Web as the platform. For the Site URL, enter your Bubble app's URL (e.g., https://yourapp.bubbleapps.io). Click Save.

In the Facebook Developer Console, go to Facebook Login → Settings in the left sidebar. In the Valid OAuth Redirect URIs field, add your Bubble app's OAuth callback URL. This is typically https://yourapp.bubbleapps.io/api/1.1/oauth_redirect. If you have a custom domain, add that version too (e.g., https://yourdomain.com/api/1.1/oauth_redirect). Click Save Changes. Then go to Settings → Basic in the left sidebar and copy the App ID and App Secret — you will need these in Bubble.

In your Bubble editor, go to the Plugins tab. Click Add plugins and search for Facebook. Install the official Facebook plugin. Once installed, open its settings. Paste your App ID into the App ID field and your App Secret into the App Secret field. In the Permissions field, enter email,public_profile — these are the basic permissions that let you access the user's email and name without additional Facebook review.

Go to the Design tab and open your login page. Add a Button element and style it to look like a Facebook login button (blue background, white text reading Continue with Facebook, and optionally add the Facebook icon). Go to the Workflow tab and create a workflow for When Button Facebook Login is clicked. Add the action Account → Signup/login with a social network. Select Facebook as the provider. After this action, add a navigation action to redirect the user to your app's main page (e.g., Go to page dashboard).

When a user logs in with Facebook for the first time, Bubble automatically creates a User record. The user's email from Facebook is stored in the email field. To access additional data like the user's name or profile picture, go to your User data type and add fields like facebook_name (text) and profile_image_url (text). In your login workflow, after the Signup/login action, add a Make changes to Current User action. Set facebook_name to Current User's Facebook's name and profile_image_url to Current User's Facebook's picture URL.

Open your app in Preview mode. Click the Facebook login button. A Facebook authorization popup should appear asking for permission to share your email and profile. Click Continue. After authorization, you should be redirected to your app's main page as a logged-in user. Check the Data tab → App data → User to verify a new User record was created with the Facebook email and profile data. Test with a second Facebook account by adding them as a tester in the Facebook Developer Console under App Roles.