Integrate third-party authentication providers like Auth0, Firebase Auth, or custom OAuth2 services into your Bubble app using the API Connector and OAuth2 user-agent flow. This tutorial covers configuring external auth providers, handling login callbacks, mapping user data to Bubble accounts, and managing auth tokens for enterprise SSO scenarios.
Overview: Integrating Third-Party Authentication Services in Bubble
This tutorial walks you through connecting external authentication providers to your Bubble app. While Bubble has built-in auth and social login plugins for Google and Facebook, enterprise apps often need Auth0, Firebase Auth, Okta, or custom OAuth2 providers. You will configure the OAuth2 flow in the API Connector, handle the authentication callback, create or link Bubble user accounts, and manage access tokens for API calls on behalf of authenticated users.
Prerequisites
- A Bubble account with an existing app
- API Connector plugin installed
- An account with your chosen auth provider (Auth0, Firebase, Okta, etc.)
- Basic understanding of OAuth2 concepts (client ID, redirect URI, tokens)
Step-by-step guide
Register your Bubble app with the auth provider
Register your Bubble app with the auth provider
Go to your auth provider's dashboard (e.g., Auth0, Firebase Console, or Okta Admin). Create a new application or client. Set the application type to Regular Web Application or Single Page Application depending on the provider. Add Bubble's OAuth callback URL as an allowed redirect URI: https://yourapp.bubbleapps.io/api/1.1/oauth_redirect. Copy the Client ID and Client Secret from the provider — you will need these in the next step.
Pro tip: Add both your development and production Bubble URLs as allowed redirect URIs so authentication works in both environments.
Expected result: Your auth provider has a registered application with Bubble's callback URL whitelisted.
Configure OAuth2 in the API Connector
Configure OAuth2 in the API Connector
Go to the Plugins tab and open the API Connector. Add a new API and name it after your provider (e.g., Auth0). Set the Authentication type to OAuth2 User-Agent Flow. Fill in: App ID (Client ID from provider), App Secret (Client Secret), Authorization URL (e.g., https://your-domain.auth0.com/authorize), Access Token URL (e.g., https://your-domain.auth0.com/oauth/token), and Scope (e.g., openid profile email). Set the User Profile URL to the provider's userinfo endpoint.
Expected result: The API Connector is configured with OAuth2 settings pointing to your auth provider's endpoints.
Add the login button and trigger the OAuth flow
Add the login button and trigger the OAuth flow
Go to the Design tab and add a Login with [Provider] button on your login page. In the Workflow tab, create: When Button Login is clicked. Add the action: Signup/login with a social network then select your configured OAuth2 API. Bubble handles the redirect to the provider's login page, the user authenticates there, and the provider redirects back to Bubble with an authorization code. Bubble exchanges this for an access token automatically.
Expected result: Clicking the login button redirects users to the external auth provider's login page.
Map external user data to Bubble accounts
Map external user data to Bubble accounts
After successful authentication, Bubble creates or links a User account. The user's email from the external provider is matched to existing Bubble accounts. If no account exists, a new one is created. To store additional profile data, add a workflow that runs after login: Make changes to Current User with fields mapped from the OAuth response — name, profile picture URL, and provider ID. Store the provider's unique user ID in a custom field (e.g., auth0_id) for reliable account linking.
Pro tip: Always link accounts by the provider's unique user ID, not by email alone. Users may change their email, but the provider ID remains constant.
Expected result: External users are automatically created or linked in Bubble's User data type with profile data from the provider.
Use access tokens for authenticated API calls
Use access tokens for authenticated API calls
After OAuth login, Bubble stores the access token. You can use it in subsequent API calls to the provider's services. In the API Connector, add additional calls (e.g., GetUserProfile, UpdateUser) that include the Authorization header with the token. Set these calls to Use as Data or Action depending on your needs. The token is automatically included when you reference this call in workflows after the user has authenticated.
Expected result: Authenticated API calls to the provider's services use the stored access token automatically.
Handle token refresh and logout
Handle token refresh and logout
Access tokens expire (typically 1-24 hours). For providers that support refresh tokens, configure the API Connector's token refresh URL. Bubble handles token refresh automatically in most cases. For logout, create a workflow that calls Bubble's Log the user out action. Optionally, also call the provider's logout endpoint to end the session on both sides. For complex enterprise SSO implementations with SAML or multi-provider support, consider reaching out to RapidDev for expert development.
Expected result: Tokens refresh automatically and logout properly ends sessions on both Bubble and the external provider.
Complete working example
1THIRD-PARTY AUTH — WORKFLOW SUMMARY2=====================================34API CONNECTOR CONFIGURATION:5 API Name: Auth0 (or your provider)6 Authentication: OAuth2 User-Agent Flow7 App ID: your-client-id8 App Secret: your-client-secret (Private)9 Authorization URL: https://your-domain.auth0.com/authorize10 Access Token URL: https://your-domain.auth0.com/oauth/token11 Scope: openid profile email12 User Profile URL: https://your-domain.auth0.com/userinfo13 Callback URL: https://yourapp.bubbleapps.io/api/1.1/oauth_redirect1415USER DATA TYPE:16 User (built-in)17 - auth_provider (text) — e.g., auth0, firebase, okta18 - provider_user_id (text) — unique ID from provider19 - display_name (text)20 - avatar_url (text)21 - last_login (date)2223WORKFLOW 1: Login with external provider24 Event: Button Login with Auth0 is clicked25 Action: Signup/login with a social network26 OAuth provider: Auth027 (Bubble handles redirect + callback)2829WORKFLOW 2: Post-login data sync30 Event: User is logged in31 Only when: Current User's auth_provider is empty32 OR Current User's last_login < 1 day ago33 Action: Make changes to Current User34 auth_provider = auth035 provider_user_id = OAuth response's sub36 display_name = OAuth response's name37 avatar_url = OAuth response's picture38 last_login = Current date/time3940WORKFLOW 3: Logout41 Event: Button Logout is clicked42 Action 1: Open external URL43 https://your-domain.auth0.com/v2/logout44 ?returnTo=https://yourapp.bubbleapps.io45 &client_id=your-client-id46 Action 2: Log the user out4748PRIVACY RULES:49 provider_user_id: not viewable by other users50 auth_provider: viewable only by the user themselvesCommon mistakes
Why it's a problem: Not adding the correct callback URL to the auth provider
How to avoid: Add https://yourapp.bubbleapps.io/api/1.1/oauth_redirect as an allowed redirect URI in the provider's dashboard. Include both dev and production URLs.
Why it's a problem: Storing the Client Secret in a non-private field
How to avoid: Always enter the Client Secret in the App Secret field of the OAuth2 configuration, which Bubble keeps server-side.
Why it's a problem: Linking accounts by email instead of provider user ID
How to avoid: Store the provider's unique user ID (e.g., Auth0's sub claim) and use it for account matching.
Best practices
- Register callback URLs for both development and production environments
- Store the provider's unique user ID on the Bubble User for reliable account linking
- Keep Client Secrets in the OAuth2 configuration (never in page elements or URL parameters)
- Sync user profile data after each login to keep names and avatars current
- Handle both signup and login scenarios — check if a User with the provider ID already exists
- Implement proper logout that ends sessions on both Bubble and the external provider
- Test the full auth flow in development mode before deploying to live
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble.io app and need to integrate Auth0 (or another OAuth2 provider) for authentication. How do I configure the API Connector's OAuth2 settings, handle the login callback, and map external user data to Bubble accounts?
Integrate Auth0 authentication into my app. Configure the API Connector with OAuth2 User-Agent Flow, add a login button that redirects to Auth0, handle the callback to create or link Bubble user accounts, and sync profile data on each login.
Frequently asked questions
Can I use both Bubble's built-in auth and external auth?
Yes. Users can have a Bubble password and also link an external provider. The User record is the same — it just has additional auth methods associated with it.
Which auth providers does this work with?
Any OAuth2-compatible provider including Auth0, Okta, Firebase Auth, Azure AD, Google Workspace, and custom OAuth2 servers.
How do I handle SAML-based SSO?
Bubble does not natively support SAML. Use an intermediary like Auth0 which can accept SAML from your enterprise IdP and present OAuth2 to Bubble.
What happens if the user's email changes on the provider?
If you link by provider user ID (recommended), the account remains linked. The email on the Bubble User may be outdated — sync it on each login to keep it current.
Is this secure enough for enterprise apps?
The OAuth2 flow is industry standard. For additional security, use a provider that supports MFA, enforce HTTPS, and review Bubble's SOC 2 compliance if available on your plan.
Can RapidDev help with enterprise SSO integration?
Yes. RapidDev specializes in Bubble development and can help integrate complex enterprise authentication including multi-provider SSO, SAML via Auth0, role-based access control, and compliance requirements.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation