Integrating Bubble app with existing website with authentication

[antoine_ol]

Hi everybody!

I want to use Bubble to build a new section of an existing website which has an authentication and sends requests to the API based on the authenticated user. This has to be transparent for the end user.

Would it make sense? What would be your recommended approach?

---

To do so, I was thinking the Bubble app should be able to communicate with the same API, thus reusing the tokens, session… (local storage and/or cookies.) I planned to get inspiration from the existing authentication plugins with external providers (Google, Facebook…) Ideally, the authentication should be automated (e.g. redirect to the existing website, then redirect back to Bubble), at worst a button. But having a new user/password is a no-go.

Another (complementary?) way of seeing that integration is that a Bubble user is created on-the-fly and Bubble auto-marks the user as signed in. This would allow Bubble to use its authentication features, thus its own database.

I’m open to writing a custom plugin if required (I’m a Bubble newbie but a developer). The other website is made with custom development and can be extended if required (especially the API).

Thanks a lot!

---

Edit: I’ve noticed there is a close topic, which does not mention the authentication challenge. I’m not (yet?) worried about the challenged mentioned there.

Integrating Bubble app with existing website

What would the best practice be if I want to keep my existing site (without rebuilding it) but then also have a Bubble app within that site? I assume one option is to leave the Bubble URL on for the app and just link to it from the main site and another option is to host the app on a different URL. But is there a way to have both the current site and the app under the same URL?

[antoine_ol]

I was able to do that by:

• turning my other app’s authentication into an OAuth2 provider
• declaring it in the API calls (either in API connector or in a plugin that wraps API calls)
• on page load (workflow), if not authenticated yet, sign in with this provider

When loading the page, the user is redirected to the auth provider, and if already authenticated, he’s immediately redirected back to the Bubble app, then recognized by Bubble as signed in (and the user is created the first time).

To avoid the issue of creating my own custom OAuth2 server, I’m planning to migrate my other app’s authentication to an external provider like Auth0.