Forum Academy Marketplace Showcase Pricing Features

Web App Built using Bubble and Webflow

@patrick.luzny thanks for the videos! So I put in the URL, question on the header, query parameters, cookies. Could you paste a screenshot of what those should be for an example URL?

Thanks a bunch.

@ayan.basu I’ll give you a rundown of the next video about user registration with screenshots and hopefully, that will answer some of your questions about headers and cookies.

So let’s say we want to be able to register the users on our Webflow site using our Bubble back end. The first step is to create a “register” API Workflow in Bubble. Open the “Page” menu at the top and go to “API Workflows” (last option).

Add an endpoint. Let’s call it “register”, and make sure it can be run without authentication (users trying to register obviously won’t be logged in yet). Add two text parameters: email and password.

Add the action: Account -> Sign the user up. map our API inputs to the “Email” and “Password” fields. You could set up the other options here as well if you’d like, but I’ll skip them for this overview.

image


Next, let’s set up this endpoint in our Cloud Canal connector. Open the connector page that you made previously and add an endpoint. API Workflows in Bubble require POST requests. The endpoint we’re targeting is /register. It should look like this:

In case you were wondering, the way Cloud Canal routes a call is by combining the connector URL with the endpoint URL. Save the connector and reopen it. The endpoint will now have an ID assigned:

This is the ID we will use in our Webflow site to route the registration form to the API Workflow we made in Bubble.

Now open Webflow. We’ll need to create a simple registration form. I’ll elect to create a new “Register” page, but your implementation is up to you. I’ll open the “Pages” tab and create a new page:

At the bare minimum, you’ll need a form block on the page. The icon looks like this:

image

Set it up to include two inputs: an email field and a password field.

make sure the “names” of the fields match the parameters of our Bubble endpoint. Set them both to “Required”, and make sure you set the correct “Text Type” (Email and Password).

Now add a custom attribute to the form. Ensure you have the “Form” selected and NOT the “Form Block”. Hit the + button under custom attributes; set the Name to data-cc-endpoint and the Value to your /register endpoint’s ID from Cloud Canal.

Publish the site to your custom domain.

image

Now go to your form and get ready to test it. Open your browser’s Developer Tools (in Chrome, press ctrl+shift+i). Go to the Network tab. Fill out the form and submit it on your page. The network tab will show the request being made through Cloud Canal.

You should see your call succeed if everything was set up correctly. Bubble will send you back a user_id and token for the new user. Whether the user is freshly registered or is just logging in (future video), this token is what lets Bubble know who the user making the call is (the end-user on your site).


Now that part you’ve been waiting for! Whenever we want to make a call to a Bubble endpoint that requires authorization (i.e. a logged-in user), we’ll need to pass the user’s token as proof we are who we say we are. The way Bubble requests this is through an “Authorization” header.

The first thing we want to do is store the registered user’s token to a cookie in their browser. Back in our Cloud Canal connector, we’ll add a new cookie associated with our /register endpoint, “Set” it, assign it a name (here I chose “api_token”), and a value. Here, the double curly braces denote that we’re using a parameter to pull the value from the response our Bubble endpoint sends. From the image above, we’re accessing the “response” object and getting its “token” parameter. Therefore, we set the value to {{response.token}}.

To sum this all up, what we’re doing here is telling Cloud Canal to set a cookie on the user’s computer every time the /register endpoint is called. The cookie is named api_token, and its value should be taken from response.token.

Now if we save and register another user using the form on our Webflow page, we’ll see that the site successfully creates a cookie (“Application” tab in Dev Tools):

image

Ignore the other cookies, those are set by Webflow.


Now for future calls to Bubble, we can send this token along with our request by creating an Authorization header and setting its value to Bearer [TOKEN]. We can pull the token value from a cookie called api_token on the user’s computer by using the {{cookie:api_token}} parameter.


Still to come is reacting to the register call on the user’s end: redirecting on success, or showing an error message on failure.

This is super long, but hopefully, it gave you a good idea of how to use headers and cookies. Query parameters work in a similar way, and I’ll also cover them in a future video. Check out the docs for more info in the meantime.

3 Likes

@patrick.luzny thanks for the detailed steps! They were super clear.

I am getting an error though in developer tools in network.
“ERROR: This domain is not authorized to use this connector. If you are the creator of this connector, please register your domains at https://www.cloudcanal.io/domains to enable use. Registered connectors can also be set to public by their creator so that anyone can use them.”

Any idea what I did wrong?

@ayan.basu I think you’re almost there! Here’s a checklist:

  • Did you get a site plan for your Webflow site?
  • Did you assign it a custom domain? (you can’t use the ___.webflow.io domain)
  • Did you register your new custom domain with Cloud Canal? If not, go to https://www.cloudcanal.io/domains, hit the turquoise + button, and add it there.

I’m thinking you still have to do the last step. I see you’ve added a domain there, but based on the name, it looks like it may have been a temporary placeholder.


If you aren’t sure about the first two steps, you can watch the tutorial video at https://www.cloudcanal.io/college/freshman-creating-a-webflow-site from the 2:15 minute mark.

@patrick.luzny thanks. so I did not publish under the same domain (was at the .webflow.io domain). But now I fixed it and it’s the same domain as cloud canal.

getting this error now.
ERROR: Register this domain with Cloud Canal before attempting any calls."

I think I have everything set up correctly. appreciate the help!

@ayan.basu I messaged you. Glad everything worked out. If there are any other issues, let me know!

Hey everyone! Just a status update: the next videos will be out Thursday. Feel free to shoot me a message if you have any questions before then!

1 Like

We’ll be waiting for them, Patrick! I’ve just discovered a bunch of no code tools this week as I’ve the need to build my site and it seems CloudCanal is perfect for what I need! (just don’t know how to use it yet)

1 Like

Hey everyone!

The next tutorial video is now out on Cloud Canal. In it, we start building some functionality on our site by learning how to register users. We’ll build out a user registration page in Webflow, A registration API Workflow in Bubble, and hook it up with Cloud Canal. We’ll even cover how to react to the response of the workflow, by setting a cookie with an authentication token and redirecting when the user signs up successfully, or showing an error message when something goes wrong.

More videos are on the way, but this should start to give you a good understanding of how you can use Cloud Canal in your projects! Check out the latest video here:

https://www.cloudcanal.io/college/freshman-registering-users

4 Likes

Hi Patrick,

I am eagerly waiting for you to release all the remaining videos. Is it possible of you could tell by when you expect it to uploaded?

Thanks a ton for creating such a tool.

Regards

1 Like

Hey Patrick,
I like the look of this. Many of the websites I’ve designed are in Webflow, and I would love.to use this as the main frontend interface, powered by bubble backend.

Can you tell me if it’s possible to do the following with Cloud Canal?

  • CRUD for Webflow CMS
  • Retrieve data for logged in user
  • Display data only if user logged in

I’m new to APIs so dumb it down for me :wink:

Hey everyone! Sorry for the delay. I’ve been going through some of the feedback you all have been giving. I really appreciate it.

What I’m hearing most is that it isn’t clear enough on how to actually use Cloud Canal, so I need to work on simplifying it. The videos have been on the backburner but are now a priority.

@mattb, You can do all that and more by linking your Bubble backend via Cloud Canal. There are some videos posted on the site to get you started, and the rest are coming soon!

2 Likes

Thanks for the info. I’ll look into this a little more when you have more videos posted. I’m excited about the possibility of using Webflow as the frontend, but I need guidance for the items I mentioned previously. Hopefully hear back from you soon!

Amazing thank you Patrick for your hard work. This is a great tool. Excited to learn more!!!

Do you have any new content we can view? Just super eager to try and make this work. Would you recommend going through the documentation instead of waiting for the videos?

Just sent an email to you too. Hope things are going well man, thank you again!

Hey @cody2 ,

I just went through your email, thanks for reaching out. If you’ve got some background in coding then by all means take a look at the documentation! Be warned that the feedback I’ve received so far is that it needs to be clearer, so it’ll probably need a rewrite at some point for ease of use, but the information is all there.

As for the videos, the logging in/out will be up by end-of-day Thursday (Eastern Time). Hopefully that’s soon enough!

1 Like

Your a ganggsttttarrrrrrrr boiii thank you!

1 Like

still on for tonight?? can’t wait! Sorry to badger but this is just a godsend man im serious. what your making is something ive needed for so long thank you

Hey Cody,

The next video (logging in) has just been posted! Check it out.

I was hoping to get the video on logging out done today as well but ran out of time. I’ll likely have time to finish it up on Saturday, with the remaining videos coming out by Monday.

I appreciate the enthusiasm!

2 Likes

dude… YES!!!