Adding social login to your Bubble app lets users sign in with Google, Facebook, or Apple instead of creating a new password. This tutorial covers configuring OAuth providers, installing the corresponding Bubble plugins, designing a login page with multiple social buttons, and handling account merging when users sign in with different providers.
Overview: Adding Social Login Capabilities to Your Bubble App
Social login reduces sign-up friction by letting users authenticate with accounts they already have. This tutorial covers setting up three popular providers — Google, Facebook, and Apple — in a single login page. You will configure each OAuth provider, install the Bubble plugins, build an attractive login interface, and handle edge cases like account linking when a user tries different login methods. This guide is perfect for consumer-facing apps that want to maximize sign-up conversion.
Prerequisites
- A Bubble app with basic user authentication set up
- A Google Cloud Console account for Google OAuth
- A Facebook Developer account for Facebook login
- An Apple Developer account for Sign in with Apple ($99/year)
- Your app's domain URL for OAuth redirect configuration
Step-by-step guide
Configure Google OAuth credentials
Configure Google OAuth credentials
Go to console.cloud.google.com → APIs & Services → Credentials. Click Create Credentials → OAuth client ID. Select Web application as the type. Under Authorized redirect URIs, add https://yourapp.bubbleapps.io/api/1.1/oauth_redirect. Copy the Client ID and Client Secret. Then go to the OAuth consent screen and fill in your app name, user support email, and authorized domains. In Bubble, go to Plugins → Add plugins → Google, install the Google plugin, and paste your Client ID and Client Secret.
Expected result: Google OAuth is configured with credentials in both Google Cloud Console and the Bubble Google plugin.
Configure Facebook OAuth credentials
Configure Facebook OAuth credentials
Go to developers.facebook.com → My Apps → Create App → Consumer. Set up Facebook Login for the Web platform. In Facebook Login → Settings, add https://yourapp.bubbleapps.io/api/1.1/oauth_redirect as a Valid OAuth Redirect URI. Copy the App ID and App Secret from Settings → Basic. In Bubble, go to Plugins → Add plugins → Facebook, install the Facebook plugin, and paste the App ID and App Secret. Set permissions to email,public_profile.
Expected result: Facebook OAuth is configured with credentials in both Facebook Developer Console and the Bubble Facebook plugin.
Configure Sign in with Apple
Configure Sign in with Apple
Go to developer.apple.com → Certificates, Identifiers & Profiles. Create a new App ID with Sign in with Apple enabled. Then create a Services ID (this acts as the client ID). Configure the web domain and return URL (https://yourapp.bubbleapps.io/api/1.1/oauth_redirect). Generate a private key for Sign in with Apple. In Bubble, install the Apple plugin and enter the Services ID, Team ID, Key ID, and private key. Apple login requires an Apple Developer account ($99/year).
Pro tip: Apple requires a privacy policy URL and terms of service URL during setup. Have these pages ready before configuring.
Expected result: Sign in with Apple is configured with credentials in both Apple Developer Console and the Bubble Apple plugin.
Design the social login page
Design the social login page
Go to the Design tab and open your login page. Create a Group to contain all login options. Add three Buttons styled to match each provider's brand guidelines: a white button with the Google G logo reading Continue with Google, a blue button with the Facebook F logo reading Continue with Facebook, and a black button with the Apple logo reading Continue with Apple. Add an or divider between the social buttons and your email/password form. Use the Row container layout to center the buttons. Keep the email/password option as a fallback.
Expected result: A clean login page with branded social login buttons and an email/password fallback option.
Create login workflows for each provider
Create login workflows for each provider
Go to the Workflow tab. For each social button, create a workflow: When Button Google Login is clicked → Signup/login with a social network → Provider: Google. Repeat for Facebook and Apple. After each social login action, add Make changes to Current User to store the auth provider (set a field auth_provider to Google, Facebook, or Apple). Then add Go to page dashboard to redirect the user. Bubble automatically creates or links the User record based on email matching.
Expected result: Each social button triggers the correct OAuth flow, creates or links the user, and redirects to the dashboard.
Handle account merging and edge cases
Handle account merging and edge cases
When a user signs up with Google (user@gmail.com) and later tries to log in with Facebook using the same email, Bubble automatically links the accounts. However, if the emails differ, two separate accounts are created. To handle this, create a page where logged-in users can connect additional social accounts from their settings. Add buttons for each provider that run the Signup/login with social network action. If the user is already logged in, Bubble links the new provider to the existing account. Display which providers are connected by checking if the user has Google, Facebook, or Apple credentials.
Pro tip: For complex multi-provider setups or account deduplication logic, consider working with RapidDev's Bubble development team to implement a robust identity management system.
Expected result: Users can link multiple social accounts and log in with any connected provider.
Complete working example
1SOCIAL LOGIN WORKFLOW SUMMARY2==============================34OAUTH REDIRECT URL (same for all providers):5 https://yourapp.bubbleapps.io/api/1.1/oauth_redirect67PLUGIN CONFIGURATION:8 Google Plugin:9 Client ID: [from Google Cloud Console]10 Client Secret: [from Google Cloud Console]11 Facebook Plugin:12 App ID: [from Facebook Developer]13 App Secret: [from Facebook Developer]14 Permissions: email,public_profile15 Apple Plugin:16 Services ID: [from Apple Developer]17 Team ID: [from Apple Developer]18 Key ID: [from Apple Developer]19 Private Key: [downloaded .p8 file content]2021DATA TYPE ADDITIONS (User):22 - auth_provider (text)23 - display_name (text)24 - profile_image (text)25 - google_connected (yes/no)26 - facebook_connected (yes/no)27 - apple_connected (yes/no)2829WORKFLOW 1: Google Login30 Event: Button Google Login is clicked31 Action 1: Signup/login with a social network (Google)32 Action 2: Make changes to Current User33 auth_provider = Google34 display_name = Current User's Google's name35 google_connected = yes36 Action 3: Go to page dashboard3738WORKFLOW 2: Facebook Login39 Event: Button Facebook Login is clicked40 Action 1: Signup/login with a social network (Facebook)41 Action 2: Make changes to Current User42 auth_provider = Facebook43 display_name = Current User's Facebook's name44 facebook_connected = yes45 Action 3: Go to page dashboard4647WORKFLOW 3: Apple Login48 Event: Button Apple Login is clicked49 Action 1: Signup/login with a social network (Apple)50 Action 2: Make changes to Current User51 auth_provider = Apple52 apple_connected = yes53 Action 3: Go to page dashboard5455ACCOUNT LINKING (Settings page):56 - Show Connect Google button when google_connected = no57 - Show Connect Facebook button when facebook_connected = no58 - Each button runs Signup/login with social network59 while user is already logged in (links accounts)Common mistakes
Why it's a problem: Using different redirect URIs for different providers
How to avoid: Use https://yourapp.bubbleapps.io/api/1.1/oauth_redirect for all providers.
Why it's a problem: Not adding the custom domain redirect URI
How to avoid: Add both your Bubble subdomain and custom domain as authorized redirect URIs in every provider's settings.
Why it's a problem: Leaving Apple login without a fallback
How to avoid: Handle the case where Apple returns a private relay email. Store it and treat it as a valid email for that user.
Best practices
- Always provide email/password login as a fallback alongside social options
- Follow each provider's brand guidelines for button design (colors, logos, text)
- Store which auth provider was used so you can display the correct options on return
- Add both Bubble subdomain and custom domain redirect URIs for all providers
- Show connected providers in user settings so users know which accounts are linked
- Handle Apple's private relay emails gracefully — they are valid email addresses
- Test social login in both development and live environments since redirect URIs differ
- Display a loading state while the OAuth popup is processing
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add Google, Facebook, and Apple social login to my Bubble.io app. I need help configuring each provider's OAuth settings, installing the Bubble plugins, and creating a login page with all three options plus email/password. What are the steps for each provider?
Add social login to my app with Google, Facebook, and Apple buttons. Create a login page with all three options and email/password fallback. After login, redirect to the dashboard and store the user's display name and profile picture.
Frequently asked questions
Which social login provider should I add first?
Google is the most widely used and simplest to configure. Start with Google, then add Facebook and Apple based on your audience. For B2B apps, Google is often sufficient.
Does Apple login require a paid developer account?
Yes. Sign in with Apple requires an Apple Developer account which costs $99 per year. Google and Facebook OAuth are free to set up.
What happens when a user signs up with Google and later tries Facebook?
If both accounts use the same email, Bubble automatically links them — the user logs into the same account. If the emails differ, two separate accounts are created.
Can I get the user's profile picture from social login?
Yes. Google and Facebook return profile picture URLs after authentication. Access them via Current User's Google's picture or Current User's Facebook's picture in dynamic expressions.
Do social logins work on mobile browsers?
Yes. OAuth flows work in mobile browsers. The provider's login page opens in a popup or redirect. Some users may be automatically authenticated if they are already logged into the provider on their device.
Can RapidDev help with custom authentication setups?
Yes. RapidDev can help implement advanced authentication including multi-factor auth, enterprise SSO (SAML), custom OAuth providers, and complex account linking logic.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation