[Feature request] Make API calls with Headers from the Browser

Hey, Bubble community.

I’m trying to make API calls with Headers from Browser. Bubble docs say it’s possible only for Data API calls without headers (API Connector - Bubble Docs)

I’m wondering if it’s possible to extend this functionality / have an option to make API calls from the browser with headers.

My use case: I’m trying to integrate Supabase with Bubble app in GDPR-compliant way. In this case, need to get my data from Supabase directly client - Supabase server (without running the call through Bubble in the middle).

But in order to access the data, I need to pass the Authorization Bearer token together with the request (token is user-specific, user authorized with Supabase before).

Without being able to make the call from the browser, I’m not able to avoid data leaving EU…
Here’s a quick video of what I’m trying to achieve - https://youtu.be/xuwPIqxn4Ig

Any help would be appreciated. :pray::pray::pray:

Thanks in advance.

This is exactly why Bubble doesn’t allow you to do a browser call with header. You should never do an API call using this kind of authorization from the browser. Making browser request with authorization header is not safe. (Normally, a server call is needed when you use a public key on client side, like for plaid auth for example, that will give a short token that was first requested on server side request and after, exchanged for another token using another server call)

Also, using a tool in the middle like Bubble doesn’t make your app non GDPR compliant. Having your data stored in EU and not going outside of EU doesn’t make your app GDPR compliant.
Take a short read here

1 Like

re the user level Bearer token …
If it were an app level Bearer token , that is totally different animal- but it single user. HTTPS / SSL means that a bearer token remains secure from the rest of the world while on the wire (client to server). Sure that user , sitting with devtools can easily divulge the token but its not a breach at all. reason - its single user level permission token and that user who granted the permission is at that device. I cant speak to GDPR which may have been the main point.

consider it 2 cents on tokens

1 Like

Thanks for your response and help :raised_hands:
Regarding:

I cannot agree. It’s unsafe if you use public or app-level API keys. As mentioned, I’m generating and using user-specific Access Token (with which the user has access only to their own data). It’s how most of the apps work anyway (including Bubble itself). So this token is safe to be visible by the user in the dev tools, and safe to make Browser → Server requests.

Regarding:

Yes, I know, just storing the data in EU doesn’t make it GDPR-compliant. Other steps are also needed.
But as one of the steps and requirements for my use-case, I want to make sure this specific data does not leave EU, and the communication is directly Broser → Supabase server.
It seems Bubble already have this feature in place, just need to find a way to “enable” it for specific apps or requests.
I can achieve this with custom JS code (or custom Plugin) using JS fetch() function. But then it’s very hard and cumbersome to pass data from JS to Bubble UI components. Through API Connector it would have been much-much easier and preferred.

Look if API allow to use the key in url. Some api will accept an url parameters for the auth (like Bubble API Do).

1 Like