Log in by API Workflow

Need help APIs
1

Hi there! I have an app that uses the basic login, where user just types email and password, and then, a action “log the user in“ log in the user on frontend.

(I will be sharing a visual sketch to help following my thoughts and app architeture flow)

However, i need now to integrate my bubble app with a another dev app, separated from bubble, that already has a more robust login system, and i wanted that when a user log in by the another app, log in the same user onto my bubble app.

For be simple
My app: App x
App that i will integrate: App Y

So, i had an idea to create an api workflow that let the App Y send a request to log in onto app X, and then, App X wont have a login page, once it’s set up on App Y, working like microsoft/google login flow. Exactly like a third party login system.

But, i don’t know how to save user token in a way that browser (or any mechanism) remembers whom logged in onto app x. And also, the api workflow just generates the token, so, user is not logged in directly.

So, reviewing: I need when users that access App Y and Successfully log in, be redirect for app X and be propely logged in. And my idea is a API workflow where i can generate a access token, but i still have some doubts on using it.

Someone had any experience in a case like this? Any idea that helps me is totally welcome

image
image1307×622 49.4 KB

2

why not a magic link (generated via API) and the browser redirects the user in the browser or a iframe to the magic link (which logs them in)

3

I saw that idea yesterday and i liked that! I didn’t know how magic login works but fits exactly in app logic. Thanks for the tip.

4

As @code-escapee said, that’s prob. the easiest solution. On Bubble app (App X), create an API WF like ‘magic_auth’ and set it’s request type to POST. Add a field called user and set its type to ‘User’. Then in the logic, create a magic login link for ‘user’ and check the box to only create it, then add a return data from api action and in that create a param called ‘magic_link’ as text and select step 1’s output (the magic link).

Then go in to your Bubble editor and create a Admin Token from the settings. In your App Y backend (crucial that it’s the backend as the admin token can do a lot of damage if exposed), create logic so when login happens, that API endpoint is called on Bubble with the ‘user’ param as the UID of the user you want to sign in, a link is returned as ‘magic_link’, direct the user from App Y to that link and they are signed in and on the page you want.

Otherwise, you could setup infra. on App Y to allow OAuth, then on your Bubble app, add it as a OAuth flow and setup a page on Bubble like /oauth or even /login that on page load automatically opens the OAuth URL for App Y (which will be signed in already and redirect back to Bubble and log the user in and maintain a DB row for the user).

You can save the session cookie in your browser storage and use that to check on page load or whatever if the user is logged into App Y, but this requires technical knowledge to setup for sure.

I’ve achieved both, Bubble as the auth provider and an external app as an auth provider so it’s possible.

I made a tutorial for Bubble as the auth provider, though I don’t think it will help here: https://www.youtube.com/watch?v=LGkGX6_KcGI