# How to Add Twitter Login in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Adding Twitter (now X) login to your Bubble app requires creating a Twitter developer app, configuring OAuth 2.0 credentials, installing the Twitter plugin in Bubble, and setting up the login workflow. This tutorial covers the complete setup from Twitter developer portal configuration through Bubble plugin setup to handling the login callback and accessing user profile data.

## Overview: Twitter Login in Bubble

This tutorial walks you through adding Sign in with Twitter to your Bubble app. Users can authenticate with their Twitter account instead of creating a new username and password.

## Before you start

- A Bubble app on any plan
- A Twitter/X account
- Access to the Twitter Developer Portal (developer.twitter.com)
- A login page in your Bubble app

## Step-by-step guide

### 1. Create a Twitter developer app

Go to developer.twitter.com and sign in. Navigate to the Developer Portal → Projects & Apps → Create App. Name your app and note the API Key (Client ID) and API Secret (Client Secret). Under App Settings → User authentication settings, enable OAuth 2.0. Set the callback URL to your Bubble app's OAuth callback URL (visible in the Twitter plugin settings in Bubble). Set the website URL to your app's domain. Enable the scopes you need: tweet.read, users.read, and offline.access for basic login.

**Expected result:** A Twitter developer app is created with OAuth 2.0 enabled and credentials noted.

### 2. Install and configure the Twitter plugin

In your Bubble editor, go to the Plugins tab and search for 'Twitter'. Install the official Twitter plugin. In the plugin settings, enter your API Key (Client ID) and API Secret (Client Secret) from the Twitter developer app. The plugin will show the callback URL that you need to add to your Twitter app settings if you have not already. Make sure the callback URL matches exactly between Twitter and Bubble.

**Expected result:** The Twitter plugin is installed and configured with your developer app credentials.

### 3. Add a Sign in with Twitter button

On your login page, add a Button element styled with Twitter's brand colors (black background, white text with the X logo, or the classic Twitter blue). In the Workflow tab, create: When Twitter Login button is clicked → Account → Signup/login with a social network → Twitter. This initiates the OAuth flow — the user is redirected to Twitter to authorize your app, then returned to your Bubble app. After successful login, Bubble automatically creates or links the User account.

**Expected result:** Clicking the button redirects users to Twitter for authorization and returns them after approval.

### 4. Handle the login callback and user data

After the user authorizes on Twitter and returns to your app, Bubble handles the token exchange automatically. The user is logged in and you can access their Twitter data. Create a workflow event: User is logged in → check if this is a new user (Created Date is within last minute). For new users, you may want to redirect to a profile completion page since Twitter provides limited data. Access the user's Twitter profile name and ID through the plugin's data sources. Store the Twitter handle on the User record for display.

**Expected result:** Returning users are logged in automatically, new users are created and optionally redirected to complete their profile.

### 5. Handle edge cases and test the flow

Test the complete flow: click Sign in with Twitter → authorize on Twitter → return to app → verify logged in. Test edge cases: what happens if the user denies authorization (they return without login — show an error message), what if they already have an account with the same email (Bubble may merge or create a duplicate — configure merge behavior in the plugin settings). Add a disconnect Twitter option in user settings. Test in incognito mode to ensure clean state.

**Expected result:** The Twitter login flow works end-to-end with proper handling of authorization denial and account merging.

## Complete code example

File: `Workflow summary`

```text
TWITTER LOGIN SETUP SUMMARY
=====================================

TWITTER DEVELOPER PORTAL:
  developer.twitter.com → Create App
  Enable OAuth 2.0
  Callback URL: [from Bubble plugin]
  Scopes: tweet.read, users.read, offline.access
  Note: API Key + API Secret

BUBBLE PLUGIN:
  Plugins tab → Install Twitter plugin
  Settings:
    API Key = Client ID from Twitter
    API Secret = Client Secret from Twitter
  Verify callback URL matches

LOGIN BUTTON:
  Button: 'Sign in with Twitter'
  Style: Black/dark background, X logo
  Workflow: Signup/login with social → Twitter

POST-LOGIN:
  Event: User is logged in
  New user check: Created Date within 1 min
  If new → Redirect to profile completion
  Store Twitter handle on User record

EDGE CASES:
  Auth denied → Show error message
  Existing email → Configure merge behavior
  Disconnect → Remove Twitter link in settings

TESTING:
  Full flow in normal browser
  Clean flow in incognito
  Auth denial handling
  Account merge behavior
```

## Common mistakes

- **Callback URL mismatch between Twitter developer portal and Bubble plugin** — OAuth redirects fail if the callback URLs do not match exactly, causing login to break with an error Fix: Copy the exact callback URL from the Bubble plugin settings and paste it into the Twitter developer app settings
- **Not enabling OAuth 2.0 in the Twitter developer app** — Twitter has both OAuth 1.0a and 2.0. The Bubble plugin requires 2.0 to be enabled in the app settings Fix: In your Twitter app settings, go to User authentication settings and enable OAuth 2.0
- **Not handling authorization denial** — If a user clicks 'Deny' on the Twitter authorization page, they return to your app without being logged in, potentially showing a blank state Fix: Check if the user is logged in after the OAuth return and show an appropriate message if login failed

## Best practices

- Match callback URLs exactly between Twitter and Bubble
- Request only the scopes you actually need for minimal permissions
- Style the login button following Twitter/X brand guidelines
- Handle both new and returning users with different flows
- Provide an option to disconnect the Twitter account in settings
- Test the complete flow in incognito mode for clean state testing

## Frequently asked questions

### Is Twitter login free to implement?

The Twitter Basic developer plan is free and includes OAuth 2.0 authentication. Higher tiers are only needed for advanced API access like posting tweets.

### What user data does Twitter share?

With basic scopes, you get the user's Twitter ID, display name, username/handle, and profile image. Email access requires elevated API access.

### Can I post tweets on behalf of the user?

Only if you request the tweet.write scope and the user authorizes it. This requires additional Twitter API permissions beyond basic login.

### What if Twitter is rebranded to X?

The API and developer portal remain at developer.twitter.com. The OAuth flow and plugin configuration are the same regardless of branding changes.

### Can I use Twitter login alongside email login?

Yes. Add both a Twitter login button and email/password inputs on your login page. Users can choose their preferred method.

### Can RapidDev help set up social login?

Yes. RapidDev can configure multiple social login providers including Twitter, Google, Facebook, and Apple for your Bubble application with proper account merging and profile management.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-login-via-twitter-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-login-via-twitter-in-bubble