Unable to login using Twitter plugin

Hi Laura.

Thanks for replying here.

Indeed looks like quite a disruption in (Login with) Twitter Plugin. It has been working until now since others started reporting it, went to check it.

Having the same issue as @andrew21 @tuyosi.628 @masterpeacockmantiss

Submitted a bug report with the details.
Hope the team can check this out asap.

Thanks.

we getting an update any time soon ? apps built using it are completely broken and unusable

On November 11th at 3:23 JST, I received an email with the following content.

Thank you so much for flagging this behavior. I was able to confirm this behavior in a separate test app. As a result, I have escalated this ticket to the engineering team to investigate further. I will follow up with updates as promptly as I receive them.

I would recommend you submit a bug report with all the details if you haven’t already.
This would help to flag a bigger issue since it’s affecting pretty much all the apps using Bubble 's Twitter plugin.

But if you did submit it already, you should’ve gotten the same response as @tuyosi.628 . I also got this response from Bubble that they’ve escalated this further.
I presume they should know by now that it can be quite a big issue tbh, but w/o a proper reply with instructions, we’re still in the dark.

While there may be a workaround to create the Login with Twitter function using the API connector, I haven’t had a chance yet. But maybe I should try :thinking:

Hope we get an update on the issue asap.

still no updates?

they sent an email saying they pushed a fix, if folks want to confirm?

I was just informed that they are unable to provide a specific timeline for updating the Bubble Twitter API.

1 Like

me too

sorry false alarm.

But i did find a workaround for now which i’m going to use in the interim.

Step 1) Link the user to the external twitter site for an authentication code:
https://mobile.twitter.com/i/oauth2/authorize?response_type=code&client_id=bGFYbkxxxxxxxxxxxxxxxxxxxxxxxxxx&redirect_uri=https://sampleredirecturl.com&scope=tweet.read%20users.read&state=state&code_challenge=challenge&code_challenge_method=plain

Step 2: you will need to create two API Connector endpoints. but before we do that, you’ll want an action that checks if the data in url for “state” is empty or not. This could be on page load or a “when a condition is true” trigger. for testing i tied it to the click of a second button.

Step 3: First API Connector, you want to create an API Connector which looks like the below:


Header has content type = “application/x-www-form-urlencoded”
Authorization: Bearer [“access token:access secret” encoded using Base64, can use this website: https://www.base64decode.org/] this one was a bit tricky to figure out, be sure to encode your access_token:access_secret together with the colon in between

Data Type is Json, but you don’t format it as json format is like this:

“code=<auth_code>&grant_type=code_received_as_state_from_external_url&client_id=bGFYbkxxxxxxxxxxxxxxxxxxxxxxxxxx&redirect_uri=<redirect_uri>&code_verifier=challenge”

Make sure your redirect_uri exactly matches the one you fed the external site or it will throw n error. The authorization code is the code you received from the prior external url call returned as “state” in the html parms.

If you are lucky to get this working, response should look something like this:

{
“token_type”: “bearer”,
“expires_in”: 7200,
“access_token”: “TGJjMFlmMG5fOTFLUC0zTEhwZHR3X2d1TVBLMFlaUXhxMngwYTgwRHBfZVR3OjE2OTkxxxxxxxxxxxxxxxxxx”,
“scope”: “users.read tweet.read”
}

The “access_token” above is the oauth code you need to pass for the actual API calls.

so for example my step 3:

Step 3) call to get “me” data

To get additional info you need to tell it which fields you want. i ask for the following:

https://api.twitter.com/2/users/me?user.fields=description,profile_image_url,url,public_metrics

You need to pass your oauth token in the header as

Authorization: Bearer [oath_access_token]

If this works, response should look like this! I know this doesn’t log the user in for you but it works for my purposes. To get the email is a bit more cumbersome but this should give a big header start in that direction hopefully. good luck everyone.

{
“data”: {
“description”: “Founder of http://one2all.io. Speedrunning web3 at 10x, building 50+ killer apps and counting. http://one2all.io http://x.com/one2all_io http://discord.gg/J6r6fUAVfe”,
“username”: “theahchu”,
“id”: “60993240”,
“profile_image_url”: “https://pbs.twimg.com/profile_images/1682644164083847168/s443vj9B_normal.png”,
“name”: “chusla”,
“public_metrics”: {
“followers_count”: 430,
“following_count”: 325,
“tweet_count”: 849,
“listed_count”: 12,
“like_count”: 395
},
“url”: “http://www.medium.com/quality-works
}
}

PS - @laura.oppenheimer many folks are frustrated that this is now broken, hopefully my walkthrough above can help the team further troubleshoot and find a solution.

1 Like

@tuyosi.628 @matcha_tb @psycholabdesign @masterpeacockmantiss

FYI above if you are still looking for a workaround

2 Likes

do you have an example with editor i can look at ? thanks

Thanks @andrew21 .

Indeed Bubble did not manage to provide a fix to the issue in question, unfortunately. So I was thinking of implementing the Sign In with Twitter feature using API Connector method.

Or simply scrap the current option to Sign in with Twitter, since from what it looks it is going to take some time to get Bubble’s plugin to work and always there may be changes on twitter’s API paywall and stuff so API Connector may be only a temp solution. :thinking:

Thank you for providing an alternative though :slight_smile:

1 Like

hi @masterpeacockmantiss sorry my app currently in stealth but is there a portion of it that is not clear? maybe i can provide more detail on that step if so.

Could we set up a quick demo to check if my app requires major adjustments with the new method? Many post-login features rely on this plugin, and I want to ensure compatibility
thanks @psycholabdesign

Hey, sorry for the late reply.

Unfortunately atm, I am not moving forward with the Twitter Integration as I am rethinking the implementation and scoping for it to be part of the app.

You could try Andrew’s setup of API for Twitter integration and see if it works accordingly.

Hope this helps.

@andrew21 @matcha_tb @psycholabdesign @masterpeacockmantiss
I’ve created a private plugin for logging in with X.
Here’s how I did it:

  1. Create a new Plugin.
  2. In Plugin > General, enter information such as the name of the Plugin.
  3. In Plugin > API calls, set it up as follows:
    - API Name: X
    - Authentication: OAuth2 User-Agent Flow
    - App ID: ***
    - App Secret: ***
    - Scope: tweet.read users.read
    - Authentication goes in the header: True
    - Header key: Authorization: Bearer
    - Token is returned as querystring: False
    - Requesting an access token uses Basic Auth: True
    - Add access_type=offline (Google APIs): False
    - Login dialog redirect: https://twitter.com/i/oauth2/authorize?code_challenge=challenge&code_challenge_method=plain
    - Access token endpoint: https://api.twitter.com/2/oauth2/token?code_verifier=challenge
    - User profile endpoint: https://api.twitter.com/2/users/me
    - User ID key path: data.id
    - User email key path:
    - Name: get me
      - Use as: Action
      - Data type: JSON
      - GET: https://api.twitter.com/2/users/me?user.fields=id,name,username,profile_image_url,description
      - API documentation link: https://developer.twitter.com/en/docs/twitter-api/users/lookup/api-reference/get-users-me  # see also: https://developer.twitter.com/en/docs/twitter-api/users/lookup/api-reference/get-users-me
      - Include errors in response and allow workflow actions to continue: False
      - Capture response headers: False
    
  4. Authorize your app in Plugin > Settings

[WARNING]

Feel free to ask me anything if you have questions!

2 Likes

If you want to implement PKCE support, it seems you cannot use the “Signup/login with a social network” action.
Instead, you should create a plugin that implements each element of the authentication and authorization flow using “None or self-handled”, and then combine it in the workflow of the Bubble app to build the authentication and authorization flow.
In this case, after authentication, it appears that you should assign a temporary password each time and implement it with email and password login.

Though this is in Japanese, here’s a reference article: LINE ログイン v2.1 を完全網羅!メールアドレスも取得できる LINE LOGIN PRO プラグインを公開! - ノーコード ラボ

1 Like

Hello, so it works like that ?