Twitter | callback URL

You can probably do the hard work in your app, but sending a state in the parameter, redirecting to a single Bubble page, then using the state that is passed back to work out where to go next.

@NigelG do you mean:

  1. Showing the popup
  2. Letting them click their prefer social login choice
  3. Redirecting to an actual login page and then immediately redirecting to login based on their previous choice?
  4. Then back to whatever page they were on previously?

That would actually make a lot of sense and could work potentially!

  1. Showing the popup
  2. Letting them click their prefer social login choice
  3. Redirecting to the social login URL with the state parameter filled in
  4. Redirect to a standard page for all, then work out from the state parameter who they are…
  5. Then back to whatever page they were on previously?

An alternate is to use Auth0 to combine the social logins in one place.

@NigelG The redirect to a login page with parameters worked! Thank you!

However, for some reason I get a weird twitter loop going on.

Would you have any insight into why this would happen?
Here is the workflow:

They may be still logged in on the redirect ?

That said, Twitter is being odd at the moment, the Bubble plugin is broken and I was struggling with my auth0 Twitter signup all yesterday.

Happy to have a chat if needed :slight_smile:

@NigelG do you know of a way to manipulate the URL before sending to twitter auth?

Right now my workaround for the twitter auth not allowing over 10 pages for oauth is:

  1. clicks login with twitter
  2. send to login pagewith previous page url
  3. immediatelylogin with twitter
  4. sends back to previous page

But the confusion starts when folks are sent to another page that shows the login twitter button again instead of immediately showing twitter auth.

I’d like to have a simple auth flow similar to uplabs.com

Hmmm, not quite sure what you are intending here.

Are you trying to login to Twitter from multiple pages, and thus can’t use a generic page for the redirect ? And you are limited to 10 redirect pages in the dev setup of twitter ?

We use Auth0 to do the oauth stuff (which has a single redirect) but that might not help.

What I think you might want to do is do the redirect yourself, and include something in the state parameter to tell a generic page what to do on return ?

Yeah essentially my Twitter login button is on a popup on every page. My process now is to let them hit twitter, but it redirects them to a single login page with parameters to immediately start the Twitter auth flow and then send them back where they originated.

Just wasn’t sure if there was an easier way to get twitter auth going for Twitter, or for all of google/twitter/facebook in general.

Im using a similar method too, it works althougj its awkward and slow. I will be switching over to auth0 (theres a plugin i have tested before) but will need to understand how to capture the code to use for calls like username, profile image etc.

That is where auth0 comes in, as they conform to the OpenID Connect standard - so every social login has profile/name etc as standard no matter what the provider.

You use the auth0 token to get the profile via their API.

Which looks a bit like this (ignore the app meta data, that is some custom stuff for the token as we do calls to the twitter API for posting).

{
"name": "NigelG",
"picture": "https://pbs.twimg.com/profile_images/3094117973/57772f012c98ed248e34c61652fb2629_normal.jpeg",
"description": "Blogger | Insurance Weaseler | Building Stuff with #NoCode",
"location": "Surrey, UK",
"screen_name": "NigelG",
"url": "https://t.co/gGhCfrK",
"updated_at": "2019-09-27T12:21:53.217Z",
"user_id": "twitter|14159027",
"nickname": "NigelG",
"identities": [
    {
        "provider": "twitter",
        "user_id": "141527",
        "connection": "twitter",
        "isSocial": true
    }
],
"created_at": "2019-09-20T11:35:28.500Z",
"app_metadata": {
    "oauthToken": "14159027-2Ja7JviQl0oum7",
    "oauthTokenSecret": "GceRGT7BFqJi"
},
"last_ip": "88.111.70.136",
"last_login": "2019-09-27T12:21:52.996Z",
"logins_count": 7,
"blocked_for": [],
"guardian_authenticators": []

}

You get the same format for Google/Linkedin./Facebook etc etc

1 Like

You can do the External Page redirect to twitter auth from the popup though, not sure why you need a redirect to another page.

Have a single callback page, and use parameters on your callback URL https://yourbubbleapp.com/callbackpage?page=whateverpage to then take them back to where they started. URL encoded if you need to.

If you use auth0, then you will get a modal with all the possible social logins in a list, and the user can choose from there. Callback works in the same way.

I’ve tried adding just my domain to Twitter’s callback url’s, but if it’s not the exact path it doesn’t work (so it hasn’t worked on every page)

So I’ve had to let them hit Twitter login in the popup, then send them to a login page with a single path in the callback url’s.

Have you setup the Twitter auth (through Bubble’s normal plugin) in a popup before?

Also, is autho the better solution for what I’m trying to do? Will I still be able to call info from their profiles/etc?

Ah, no. IIRC the Bubble plugin uses the current page as the callback url.

It would be really useful if they could add a tick box to use the generic redirect page as they have with OAUTH2.

Might be worth an ask ?

We have rolled our own (harder with Twitter due to the signing requirements) for this reason. Need access to the various parameters.

This thread has been helpful, as I’ve been just trying to troubleshoot this issue.

For anyone with their login as a popup, instead of a specific login page, I’ve taken another approach for now which may help you too. The problem was that I couldn’t add in the index page into Twitter’s callback URL’s. Every other page with a path worked. However, login always failed on the index page.

So instead, I’ve created a feed page, which is effectively my index (or home). I’ve set up my index to then redirect to the feed page. That’s it.

This may not suit every app, but it’s a minimal approach to troubleshoot this little annoying pain point.

2 Likes

@NigelG I am using Auth0 plugin but I cannot enable dynamic RETURN URL, is there a way to do it? I just want to return to the last page I was (I use a pop up to trigger the login). I don’t see any parameter to use in the url to pin point the last page I was.

PS: I have to redirect to the last page used because I have many different processes and delaying the sign in until before checkout

Yeah, annoying isn’t it !

You have to send a parameter as part of the callback URL. Read that in on callback page load and then you can workout where to go next.

thanks, I can specify a parameter like ?name of the page, but the callback urls are static, how does auth0 know what callback URL to use? just making sure I understood.

We are having a similar situation but we have already gone life. The “version-test” callback works fine. Its the live site that is giving issues.

It is really fussy.

Try…

www.mylaunchstash.com
www.mylaunchstash.com/

etc

It worked. OMG This was so annoying. Thanks @NigelG. I sent you a Twitter DM about something else.

1 Like