Forum Academy Marketplace Showcase Pricing Features

How do I implement an OAuth2 flow in my UI?

Need help APIs
#1

Hi,

I’m struggling with implementing Oauth in my app’s user creation.

Target flow is:

  1. User signs up
  2. User authorizes an API connection to their own Zendesk instance
  3. User can fetch a sample of data.

After a new user signs up, how do I trigger the authentication flow for Oauth2 Password? I can create a button pointing to the auth URL for the API I’m working with, but that doesn’t seem to use the API Connector. And I’m unsure if I need to store the returned token or if the API Connector has a way of doing that.

I’ve looked through any lesson and example I could find, but none that I could find have implemented any user facing Oauth2 as far as I can see.

I created a sample app of what I’m trying to do: https://bubble.io/page?name=index&id=api-connector-uc&tab=tabs-1

What do I need to add (elements, workflows, API config) to allow a user to complete the Oauth 2 Password flow?

I’m not new to working with APIs and I can figure out how get the calls to return the data I’m looking for. My problem is that I don’t understand the basics of how I build the UI and workflows in Bubble.is to let users authenticate using either of the OAuth2 methods. I may need the crayon version here.

Thank you!

1 Like
#2

Digging through more API posts i found this: Google Analytics report via Bubble API connector

Never dawned on me that the “Social network” signup would be the action to use. Still can’t completely wrap my head around how to organize things but will experiment with this. Still happy to hear any pointers on whether I’m headed in the right direction here.

#3

Hi Morten,

You’re headed in the right direction with the sign up or log in the user with a social network but where you’re bound to run into trouble is, if the zendesk account that you want your user to authenticate with is different than the one they used to sign up for your app, what will happen is that once you authenticate with zendesk, your user’s current logged in state will be replaced with the zendesk login email and an additional account will be created on the backend if it didn’t already exist.

I’m looking for a similar way of “linking” a social/email account to an existing logged in state so that data can be fetched seamlessly. I’m currently building a google contact uploader and am having trouble with bringing in google contacts from any gmail account regardless of whether they match the current user’s original login or not.

I’ve raised this issue on the following thread that you can follow: Connecting to External Services More Seamlessly

Will keep you posted as I make any further developments. Feel free to PM me as well if you want to discuss.

#4

Hi Morten,

Wanted to give you an update that this issue I described above has been magically fixed by the Bubble team within the span of a few hours! If you have any further questions please feel free to let me know!

-Jonathan

#5

Thank you Jonathan! That’s great!

I’m making some progress here but struggling with another issue. The API I’m using maintains each installation on a separate domain ([domain].zendesk.com) meaning each user will have a different URL for auth and fetching. So I think I either need to build URLs myself or create a new API in the API Connector for each user.

The current setup only needs to scale to a few handfuls of users so I can manage some manual work behind the scenes. But I will eventually need to fix it completely.

I’m trying to get the social network path to work for now. Next I’ll probably do something half manual to set up a connection for each new user.

#6

Oh wow never heard of that before, very unique situation. My first thought would be to create a dynamic URL in bubble based on the user info and then use the open an external website workflow action to get to the auth endpoint but what I found from the google contact uploader implementation is that you need the api connector and its setup to do the entire oauth2 process, and passing url’s as external website into the browser might not work. I unfortunately didn’t have to reach that stage of trying to figure it out that way but I guess right now since you have a small handful of users it would be ok. Keep me posted though on any developments!

#7

Is this a native app?

Have you tried putting both of the oAuth steps in the same workflow?

#8

I am not sure it is fixed.

There is a very odd (and what looks like a big security risk) situation in that it seems to switch you to a random account when you come back from the OAUTH dialog.

And fully logged onto that account as well, not just some sort of dummy account.

Tried this on a virtual tablet on Browser Stack and it logged me into another account. There can be no cookies on that machine whatsoever, so it isn’t an “old” login being picked up.

Ah, so what it appears to do is log you into the account that is already connected to that OAUTH account.

So you can’t connect two bubble accounts to the same OAUTHed account ?

4 Likes
Connecting to External Services More Seamlessly
QuickBooks Integration - Follow Along as I Struggle [So You Don't Have To]
#9

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

#10

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.

#11

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.

#12

@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.

Run time, instanced, API connector
#13

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.

#14

@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

#15

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.

#16

@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.

#17

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.

#18

@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

#19

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

24 PM
Screen Shot 2017-09-25 at 3.57.24 PM.png2880×1800 882 KB
39 PM
Screen Shot 2017-09-25 at 3.57.39 PM.jpg2880×1800 634 KB
29 PM
Screen Shot 2017-09-25 at 3.57.29 PM.jpg2880×1800 638 KB

3 Likes
How to use WordPress OAuth Server to log into Bubble app?
#20

@jonathan.timianko Thank you for sharing.