[help] How does bubble's API Connector map to OAuth2.0 flow?

Need help APIs
1

Hi all,

I’m a beginner at “OAuth2.0”.
Is my understanding correct?

  • When using “Resource Owner Password Credentials Grant” select “Password Flow” in the Bubble API connector.

  • When using “Authorization Code Grant”, select “User-Agent Flow” in the Bubble API connector.

  • When using “Client Credentials Grant”, select “Custom Token” in the Bubble API connector.

Thank you in advance.

2

The User-Agent Flow is probably the most common.

You’ll find a lot of times when you’re trying to authenticate a new user to their outside platforms, you’ll need to send them to the login endpoint, request access to parts of their platform (scopes). Once they authenticate, the service will redirect user to your given redirect URL with a url parameter named ‘code’. This ‘code’ will then need to be exchanged for an access_token.

1 Like
3

Hi, @doug.burden

Thanks for the advice.
I see that User-Agent Flow is the most common.

I tried to read the RFC yesterday, but I did not fully understand it.
Today, however, thanks to your advice, I understand a little more.

  • [RFC 6749, 4.1. Authorization Code Grant]
  • [RFC 6749, 4.2. Implicit Grant]
  • [RFC 6749, 4.3. Resource Owner Password Credentials Grant]
  • [RFC 6749, 4.4. Client Credentials Grant]

For example, “code” is the parameter “response_type=code” of the HTTP GET request sent to the authorization endpoint in the Authorization Code Grant, isn’t it.

There are still many things I don’t understand, but I will actually run it on a bubble to better understand it.

Thank you so much.

4

But, in some or most cases from my experience, handling Oauth2.0 yourself seems to be less painless. Have a look at what that might look like.

Make your own redirect page
oauth_page

Have a ‘Sign Into’ button with a workflow to open external site
Be sure to read the documentation for the site your trying to access, as they will want their specific url built relatively the same with maybe some changes. If a URL wants a state parameter, you can generate one with bubbles native code as shown in blue.
auth-site

Create a page loaded event on your redirect page. (oauth_redirect - in my case) or a ‘Complete Action’ button to trigger this kind of workflow

workflow-overview
workflow-overview1014×358 10.3 KB

Getting the code from the URL

grab-code-from-url
grab-code-from-url1550×388 22.6 KB

Saving the token to database for User

save-token
save-token1127×394 20 KB

Api Connector Setup

api-connector-setup(1)
api-connector-setup(1)843×690 27.3 KB

2 Likes
5

Hi, @doug.burden

I apologize for the very late reply.
I have worked very hard over the past month to develop Bubble. As a result, I have a good understanding of the native features of Bubble and can create simple web applications without hesitation.

On the other hand, API connections are still in the process of being mastered. Actually, I was struggling with the API connector implementation. One of the problem was that I could not debug the internal logic, then did not know if I was getting the API token correctly.

However, A month ago I did not fully understand the solution you gave me. How foolish I was. I understood now because I have experienced failure.

So if I do it this way, I can directly check the api token. wonderful!
Such an elegant implementation had never occurred to me.

Now, The bubble app I’m building will be built-into a native app (iOS/Android) developed with traditional programming. After consulting with our iOS/Android developers, we’ve come to the conclusion that use “Client Credentials Grant”.
The method you described was “User-Agent Flow”, and I expect this can be applied to “Client Credentials Grant” as well.

I sincerely appreciate your detailed explanation. Thank you so much.

1 Like