Sign in React (Front) & Bubble (Back)

Hello everyone, I am facing a problem and I am struggling to understand how to solve it.

I have a login form as below built in React Native. I would like to make my backend on Bubble.

I understand that to connect React to Bubble. I need to use Bubble API as it allows other services to make requests and communicate with Bubble. In the Bubble API, there is the Workflow API and the Data API (I understand the difference between the two.)

Concerning my problem, I have trouble understanding how I can connect my users correctly (via email and password)?

Should I create a Sign in API Workflow and then call it in React? If so, I don’t understand how my components (from my picture above, i.e. my Front) will “interact” with Bubble?

Do you see what I mean?

Thanks in advance

Create a backend workflow api endpoint called “login_user”. On this workflow you will have an action that will either “Log the user in” or “sign the user up” based on a conditional of whether there is a user with that email in your database. The third last step shoud be “Return Data” and you can return a yes/no value or/along with the User object that just signed in to let you know whether or not that was successful. Then when your login button is clicked you can send a POST request to that backend workflow to create or sign in the user and if you receive back the values that let you know the user existed and the password was correct you will be able to continue and know the user is logged in. Is there a specific part of that you are not understanding?

Thanks for your help.

“when your login button is clicked you can send a POST request to that backend workflow”.

I dont understand this part very well. You mean that : Networking · React Native

Do you have any examples of Post request to bubble backend workflow ?

If you go to your settings tab then click the api tab, you will see you have a url that points to your backend workflows. I think it is called Workflow API root url and it should be right at the top of the page. So for the example above the url would look like this: “https://www.yourappname.com/api/v1/wf/login_user

And yes I use this syntax in many places to post to bubbles backend workflows. You can even add an action on the backend workflow called “Return Data” and you can recieve back anything you want form your database.
fetch(url, options).then(data => {console.log(data})

Here is an actual example I use just edited to remove any information

Ok so I have just created (for the moment, I just want to return data without taking into account the action of logging in)

How can I return data to React?

Finnaly, I create the POST request with fetch():
image

A thing that I dont understand is to retrieve the data in React…

This topic was automatically closed after 70 days. New replies are no longer allowed.