Almost true whitelabel domains in bubble

I think I almost found a way to do true multiple domains on one bubble app but having one bug I need help with. I have a working test app to show you guys.

I am using reverse proxy (instead of a iframe).

What I got working:

  • Adding multiple domains to a bubble app without using iframes (I use netlify reverse proxy)
  • People can search, add and remove things from the database
  • Workflows and backend workflows work
  • rewriting the cookies

What doesnt work:

  • Logging in (somehow bubble gives an error)

Test app (editor): https://bubble.io/page?type=page&name=index&id=netlify-test-app&tab=tabs-1
Native domain added to bubble: http://test.saasworksuite.com/
Domain added using reverse proxy: https://versel-proxy-bubble.vercel.app/

So the problem is:

  • when i login it gives an error. After refresh I am logged in and everything works ( code: 1603747634514x395352877241044860 )

What I need from bubble (or a solution from the community):

  • Fix the bug that gives an error alto every thing seems to be working?

What I know:

  • So I know that bubble currently only allows for one domain per app
  • They dont have time to dedicate resources to allow for more that one domain per app
2 Likes

@shawnmi6 @nocodeventure @zelus_pudding do you guys have any ideas?

Just curious if it works if third-party cookies are enabled in the browser.

@sudsy

It doenst because the domain attribute is invalid… only happens when you connect the domain to a bubble app…

Try this… Go to Settings > General
“Checkmark” Do not set cookies on new visitors by default

Hey Ab, this is really interesting!

I need to read up on exactly what reverse proxying is but here are my thoughts on the issues you’re facing.

The issue with the login cookie not working is likely associated with anti-Cross Site Scripting measures Bubble has in place. As you know, Bubble will need to tweak this behavior in order to get white labelled sites working this way. That said, I guess you said that the issue doesn’t really appear when on the free domain provided by Bubble. So I am really curious to know why the behavior changes when on a custom domain, and if Bubble actually has wiggle room to modify this behavior for custom domains.

On another note, ideally your proposed solution is one that can be setup/driven from within Bubble itself (rather than needing to involve a Bubble developer to configure some portion of a white label every time a new one is needed). Is that possible?

Also, I wonder if someone from the Netlify community would have a useful insight for your here.

Wish I could suggest more.

Also, is there no way for javascript to check which cookies where blocked and conditionally set them (as you did by manually copying and pasting from within the developer tab)?

update
Obviously javascript can’t enable cookies - that’s a power reserved only for the browser, but as long as cookies are enabled, is there a way for JS to check which one’s were blocked by the browser. I can’t seem to find info on this with a quick google search. Maybe you will have better luck!

1 Like

Thanks for brainstorming. Netlify isnt allowing for modifing of headers. I am now trying to build the reverse proxy as a node.js script. See if I can modify headers.

I was thinking maybe it would work if i rewrite all bubble workflow paths to the original domain inside the html/js. First i try to only rewrite the domain inside the cookie.

Did you try this?

@shawnmi6 / @sudsy yes I did. It doesnt work. Currently trying a proxy build with node.js (if it works will rebuild it in go for performance).

Wel I fixed the cookie problem: https://versel-proxy-bubble.vercel.app/

So that app is originally on test.saasworksuite.com and is reversed proxyed on https://versel-proxy-bubble.vercel.app/

I get a problem when I login bubble gives me a 1603747634514x395352877241044860 error. When I refresh I am logged in and everything seems to work. Hopefully bubble can fix this bug.

1 Like

Seem to have fixed all the errors myself :slight_smile: @shawnmi6 do you have time to turn it into a plugin? If so hit me up so we can discuss the budget.

4 Likes

This is amazing! I like to use it for Roooom.io

1 Like

Which netlify plan is required for that?

EDIT

So you’re final solution doesn’t use netlify?

Yes it does. Free plans works fine.

Almost done turning the node js code into a plugin

Cost me around 5k in time and money.

What would be a reasonable price for the plugin? Monthly?

1 Like

Waiting for bubble to approve the plugin

You mean, you build this plugins you spend $ 5k? right?

Yeah, took me a while to figure out bubble bugs