How to add Cookie to external GET request

Hi Team,

Bubble newby here

I have setup an external API. The user must login first before they can interact with the API. The login api itself doesn’t require any auth, but other calls do. The login api (POST) is working fine and I am able to grab the response and store it in the login_id and ticket cookie. To store the cookie, I am using Browser Cookies.

You can find it here: Browser Cookies Plugin | Bubble

After the user logs in, I am redirecting them to a second page, that makes a GET call to our API. That call is protected. If the cookies are passed along with the cookie, then the API will validate the ticket and if valid, return the data from the API. I have logged the backend, and don’t see any cookies being passed through. I inspected the call from bubble and I see my cookies are in the header, but I think the call is made from the Bubble backend server, which is not passing in the cookie.

Can somebody please help on this?

1 Like

Hi there,

Just to confirm are you using your server as an Oauth endpoint to log the users in as bubble users, or are the users just temp accounts? If they are the temp accounts I think that data gets purged every 3 days btw.

Personally I would approach it by logging the user in and storing a unique id value on their account, then passing that on the 2nd API calls since you can easily reference it through the API connector rather than browser based cookies etc.

Does that make sense?

The auth shouldn’t matter. Actually, the login response includes set-cookie, which tells the browser to add the cookie automatically. So I shouldn’t need the cookie plugin. But it seems that the cookie is not set at all. I assume that the actual request is made from the bubble backend server and not front end. So, how do I tell bubble to add the cookie on the login and to use them in subsequent calls?

Yep so you need to store the data on the user profile rather than a browser cookie so that bubble can use that data in your API calls.

Just add the fields you want to the user profile and when you auth them do a workflow to make changes to the user and add that data in

How do I store the data in the user profile?

Have a quick read through the docco here - Data - Bubble Docs

You essentially just need to run the default bubble workflows to make changes to the current user and have fields in your database to store the values against.

Depending on the way you set it up you might get this data from url parameters etc, if you must get this from a cookie then you can also, but url Params would probably be easier

Thank you for the answer, but I still cant figure this out. When the user logs in, I make a POST request to my API to authenticate the user. Until here, I am fine, but not sure how to proceed.

The response contains the value, I want to store. This value should then be passed as cookie into each subsequent API request. I dont know how to to do any of this.

Okay, to start with, are you using the workflow to sign the user up so that you’re actually logging them in as a bubble user?

No. I am not doing that. I created two input fields, one for the username and one for the password. Then I added a login button. The button has a onclick workflow, which calls the API and does a POST request with the supplied email and password. The response then returns the data I need.

I would suggest you start by creating them as users in your bubble database when you run that login process, then you can store data against the user object in the db, allowing you to then pass that through your API calls later etc.

Would I use the “Sign the user up” action?

@Oliver-wholegraintech I think I got it so far. I was able to create the user and save the required data (ticket) in the user profile. I believe to send this information into the API, I have to first add a header into the API and uncheck the private checkbox. From the workflow, I should then be able to use the Current Users.ticket as the “data to send”. Is that correct so far?

Yeah exactly, now that you are creating the user in the database you can store whatever content you want on their object etc.

The next time they come back you can just run the “log the user in” workflow and all that data will be available.

Now when you run api calls you can use any data stored on the profile.

To make sure its saving properly you can look in the data tab and see what fields are there etc.

Ok. I am trying to send the data along with the next API, but my backend is not seeing it. I must be missing something. Do you see anything wrong with this?

This is going to a page not making an api call though?

I would imagine the next step you want is to make an api call and retrieve the user specific data?

The first step makes the Login POST request.
Second step page stores the ticket
Third step navigates to the secondsremaining page, that makes a call to get the seconds remaining for that user before he gets logged out (just for testing purposes).

In theory this should work. I checked chrome dev tools and saw the doapicallfromserver request failing with a 400 bad request. The response is coming from my server. I

Another thing I noticed is that after the user is created in bubble and I go directly to the secondsremaining page, then I don’t see the ticket at all in the request. I always have to go back and delete the user.

When I run the login flow again (after deleting the user), I see that the ticket is passed into the header like this:

Can this be passed in as a cookie or as a normal header named ticket?

I get where you’re going with it, but your approach needs to be a bit different for bubble, you need to utilise the built in functions rather than passing data this way IMO, there are probably ways to achieve this but I think it would be harder, I sent you a DM, happy to screenshare and show you some of my setups so you can get some ideas about how it looks when its all together