How do I implement an OAuth2 flow in my UI?

That is annoying, Mailchimp does something similar but only on the fetches, so I can store the data centre id on the user.

For Zendesk it looks like you need request a “Global” Oauth client from Zendesk to allow this.

https://help.zendesk.com/hc/en-us/articles/229137227-Requesting-a-global-OAuth-client-for-a-Zendesk-Support-integration

Yes seeing the exact same thing over here. And I quickly tested to see if you can keep both accounts and just wipe the contacts from one of them and try to authenticate with the other but it does revert you to the old account. Guess this is somewhat of a limitation but not an enormous deal breaker. At least from the looks of it it could offer better security.

What’s blocking me from using OAuth is that I need the user provided sub domain as part of the auth URL. At the moment it will always auth with my test credentials because that’s what’s set in the API connector. I need to be able to collect the sub domain (in my test case playpenlabs) from the user and then create the URL to invoke the OAuth dialog for a given user. The API Connector assumes that an API has one generic auth URL.

I don’t know the detail of how the plugin works in the background, but would allowing params in the token endpoint fix it? Though changing the generic plugin for a couple of weird APIs may not be the way to go.

My work around for now is to use basic auth with user user sub domain, login email and a user generated API token instead of password. If I can just figure out how to get the JS plugins to to base64 conversion for me I should have that working.

@morten, couldn’t you do as @NigelG suggested and store the sub domain with the user? Of course, that would mean that a setup/configuration screen would be needed to enable the user to enter that information.

If the API Connector is like the API tab of the plugin builder (which is what I’ve been using), then you should be able to parameterize any portion of the URL (by using square brackets) so that you can inject dynamic data via the editor.

My bad. I guess that doesn’t work for the authentication endpoint - only the API calls. Sorry for the misinformation. That said, I’ve done something similar to what @NigelG suggested for a “self-handled” authentication. I provided a field for the user to enter the unique portion of the auth URL and store that in the db.

EDIT: Might be a nice feature to be able to parameterize the auth endpoint though.

@jonathan.timianko @morten could you elaborate on your workflow or anything that would give me a pointer… @morten thanks for posting the sampler but it seems to be missing the crucial insights around your workflows. I have created 2 users A and B . Signed both users up using the native bubble process.ON completely different IP’s, devices no cookies etc then attempted to connect up whilst logged in as each user independently to 2 social media services accounts…

it seems regardless of what I’ve done… I only ever seem to update the new social credentials of user A even whilst logged in as user B on a completely separate stack

I ended up going with basic auth and handling the API calls myself. I haven’t used the social network signup (which I assume is what you’re using) so can’t help much there unfortunately.

@morten I didn’t realise you could go the basic Auth route when connecting to social accounts and then combine that with your own API calls… I understood the only way was using the social network signup approach to store the token.

Hi @Bubbleboy, glad to help. That seems pretty peculiar. To be perfectly honest I haven’t performed a use case like yours because I only have one device but the only thing I can think of is making sure that you are not logged in to whatever account you’re connected to because what will happen is that Bubble will default to logging you into that account no matter what device you are using. For example, if I didn’t completely log out of my gmail off to the side before trying to connect a gmail account no matter what happens bubble would automatically log me into the account without even asking, which is not the approach big sites like Airbnb uber etc. take. Maybe I’m stating the obvious already, but let me know if that makes sense. Glad to post backend screenshots if you need them.

@jonathan.timianko Hi jonathan and thanks for the reply. Stating the obvious is always good…you can never bypass checking the rudimentary. “has the car got fuel in the tank” i make more than my fair share of school boy errors.

So in this case ive been fastidious and paired this back to the bare bone in an attempt to isolate where im missing something. Ive logged out…separate device with cleared cache, different network…even to the point of connecting over VPN.

Im actually at the point of staring over…“clean sheet of paper so to say” if you could do the reveal on your backend whilst removing anything sensitive i would be grateful…if i can replicate what you kinda have working, i can build and check each step from there… Cheers TIm

Here you go…let me know if you need any more info but this should be enough to get you started…

3 Likes

@jonathan.timianko Thank you for sharing.

Hi jonathan.timianko

Your snaps are helping me a lot. As I am trying to let 3rd parties to interact with my bubbles app user and get their info as response via Oauth 2.0 agent flow.

Could you explain by example too:

  1. Access token endpoint: should I create a login endpoint and then copy url (example: https://myapp.bubbleapps.io/api/1.1/wf/my_access-token_endpoint)?

  2. User profile endpoint: same as (1) >>create a wf to get user profile? … a bit confused.

Thank you and snapshots are always welcome!

Hi Sam, glad they were helpful. I don’t have much experience with Oauth 2 coming into a bubble app (and actually don’t know if you could do this right now since exposing Oauth2 is on the bubble roadmap page (bubble.is/roadmap), however I think in general the API connector is for when you want to access external services FROM your bubble app, whereas if you want an external service to access your application, what you need to do is go to the API workflows section which is found at the bottom of the menu at the top left that lists all of your pages. From there you would create the endpoint that you just listed above so that an external service to access your bubble app. I do this already for email parsing, so an external email parser would create an inbound call to an API workflow that i define in that menu.

Again, have no experience whatsoever with exposing Oauth2 in an api workflow but going there should get you moving. Let me know if you have any other questions!

-Jonathan

Hi Jonathan,
Thank you for your reply.

Creation of endpoints is fine for me but I am worried about security, I don’t want 3rd parties to fetch bubble app users passwords.
Any other authentication to suggest for a more secured API?

Example:

  1. Bubble app is a wallet
  2. 3rd party is an ecommerce website
  3. User wants to pay with his credit (bubble app)

=> I want to let 3rd party integrate bubble app as payment way which implies login first (go to url) in order to make sure only one user will be debited.

Open to suggestions other than Oauth 2.0. Thanks

Sam

Gotcha. Don’t have much experience in this area sorry about that, but if I think of anything down the road or come up with something will let you know!

Actually did you check out the stripe.js plugin?

Thanks

Is this logging in of the first oauth account, what would explain my issue posted here? What are people doing in order to use the API Connector for api calls, not social login?

This is what i want to know also… I guess this plugin should be more generic…