Let users login with their Twitter accounts and fetch their latest tweets.
Signup/login with a social network
This workflow step allows you to integrate a Twitter authentication event when registering a new user or logging in an existing user.
OAuth provider - Twitter
Allows the Bubble editor to verify the correct social platform to login/signup the user.
Current user’s Twitter
When adding dynamic data, this operator allows you to fetch and display content from a user’s connected Twitter account.
User’s ID
The unique ID of a user’s Twitter profile
User’s name
The full name listed on a user’s Twitter profile
User’s handler
The user’s Twitter handle
User’s location
The location listed on a user’s Twitter profile
User’s description
The user’s Twitter bio
User’s followers count
The total count of followers on a user’s profiles
User’s picture
A user’s Twitter profile picture
User’s banner
The banner image from a user’s Twitter profile
Setup
Configuring your API
Once you’ve installed the Twitter plugin, you’ll need to configure your API keys through the Twitter developer portal here. Add your API key into the ‘consumer key’ field, and the secret key into the ‘consumer secret’ field.
After connecting your plugin, you’ll now need to enable the Twitter OAuth settings within your developer portal. To find this, head to the settings page of your application, then select to edit the authentication settings.
When enabling this service, you’ll also need to provide a URL to a terms and policies page within your application.
Finally, you’ll then need to provide a callback URL. This is the page in your application that Twitter will redirect user’s to once their account has been verified.
Registering a user with Twitter OAuth
After configuring your API and app settings, you can now use the ‘signup/login with social network’ step within a workflow. From the event dropdown menu, you’ll see an option to select the Twitter OAuth provider. This event can be added to an element like a login button.
After a user clicks this button, they’ll be redirected to a Twitter portal where they can verify their account, then be redirected back to the destination URL of your application.
Now, you can choose to display data from a user’s Twitter profile by selecting the ‘current user’s Twitter’ operator.
Fetching a user’s Twitter timeline
After verifying a user’s Twitter account, it’s also possible to fetch a list of their previous tweets from their timeline.
When adding a repeating group, select the type of content to be a Tweet.
From here, select the data source to be the ‘current user’s Twitter timeline’ option.
Now, when adding a dynamic element within your repeating, select from the ‘current cell’s Tweet’ option.
FAQ
How do you store a user’s Twitter profile information within your own database?
When signing a user up through Twitter OAuth, it’s possible to add an additional step to your workflow that makes changes to the current user’s account.
Within this workflow step, connect your user data fields with the ‘current user’s Twitter’ operator.
Last updated
