Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

No Code Video Conferencing App with WHEREBY - Part 4

In this Bubble tutorial, we delve into the essential steps to enhance the usability and security of a video conferencing app built with and no-code development. From setting up registration and login forms to configuring privacy rules, optimising your app for both functionality and safety is crucial.

Building a Secure and Usable Video Conferencing App with Bubble

Welcome back to our bubble tutorial miniseries where we're looking at how to build a video conferencing app with no code. And we're combining the awesome power of the bubble no code web app development platform with the Whereby embedded API whereby providing the video conferencing and bubble building being our website web app builder. Yeah, you get a picture.

Making the App More Usable and Secure

So this video is going to be about basically making this app more usable for users. We've got the essential features in terms of video conferencing in, but we're still missing many key features.

If you actually wanted to roll this out and make it useful for other people, and not just useful but secure. So first thing I'm going to focus on is security. But before I do that, if you are learning bubble and you like videos like this and you want to find more videos, then click the link in the description because we've got hundreds of bubble tutorial videos exclusive to our members over on our website, Let's dive into this one then. So let's set up registration and login first of all.

Setting Up Registration and Login

So at the moment my index page is a list of meetings that a user has created, but I actually want to make that say a dashboard page. And so I need to swap my index page. So I'm going to create a new page, I'll just call it home.

And what that allows me to do is go edit, make this the new index page and then the old index page here. I'm going to rename that to dashboard. Okay, so by renaming it there, I'm changing the slug, the part of the URL that identifies the page and it renames in my page list of pages here. So now on my index page let's change this to align to parent and let's set it up. I do like a f two contrast.

Creating a Registration Form

I'm going to add in a group. I'm going to have one of those nice neat minimalist login registration forms in the center of my page. So let's put this in the center. Let's give it a max width of say 500 in width. Just get rid that down to zero.

Then background white, give it a nice say eight pixel radius on the border and then 24. Padding tends to look good with something like this. Let's add in a header.

I'm just using the presets. You can obviously make your bubble app look pretty much however you like. But let's start with registration.

What do I need to register? Well, I need to have a series of inputs so I'm only going to do the essentials here. I mean, you can register your user and have them fill in a lot more details about themselves, but essentially you just need email address and password. So we'll make this one your email again. Notice how bubble automatically renames the element for you.

The type of content is going to be email. That way bubble can check to see whether someone has indeed typed in an email address. I'm going to copy and paste that, change this to password and then say that this is password. And then lastly I need a button.

Let's put that down the bottom. And then so that this is a little bit more tidy, let's apply say twelve pixel gap between them. Okay, I'm also just going to rename this group register because I'm going to use this page for both my registration and my login form and I'm going to use URL parameters to swap between them because that means that if I wanted to link to a specific form, I can do that. Let me demonstrate. But first of all I'm going to add in the workflow.

Creating a Login Form

So when this button is clicked, we account sign the user up, match up the fields and then I'm actually going to rename these manually. Now as soon as I rename these manually, bubble won't change it. If I update the placeholder and I'm renaming it manually and I'm putting an r in there because this page is going to have two sets of email fields. It's got a registration, it's got a login email. Okay, r for registration.

Now at the moment this will register a user fine, but I want to go to a page and I want to then send the user to a dashboard.

Simple as that. Let's now build the login form. So I'm just going to copy this and paste, hide the register one, call this login and then update the field. So we'll say login, this is now l for login and say login. Let's update the workflow.

So this time we log the user in and I select the input field for login email and I select the input field for login password.

And then same thing, I want to send them to the dashboard. Okay, so that's going to work. But what if the user arrives on this page and I'm showing the registration form, but actually I want to log, the user wants to log in. So I'm going to say the default is registration. So in layout, is this element visible on page load?

Yes, I'm going to say collapse when hidden. I don't think that makes any difference with a lines parent, but I'm going to do that anyway. And then I'm going to say that when get data from page URL, parameter login is true, I'm going to hide this element, going to copy that on login I'm going to do the opposite. So say this is not visible on page load collapse when hidden, but it is going to be visible when login equals true in the page URL. Let me really spell out exactly what difference this is going to make.

So if I add in a text label on login and it will say need to register, so what will happen when someone needs to register? I need to go back to this page and I need to clear out any parameters in the URL. I'm going to really show you what I mean in a moment with that. So I just go back to this page, effectively link to itself.

But I need something slightly different for register. So I'm copying my text, going on to register, pasting it in. And so this will say need to log in.

And this time when I say go to page I'm saying index, but I'm passing in my parameter of login equals true.

That's my preview. Let's replace it with the new index page. So if we were going to go and look in the URL, we would now see that the parameter login equals true has been added and then by clicking need to register it removes it. So this is a really good tip. It's slightly better than using custom states in this instance because it means that you can directly link to a specific visual on your page.

Ensuring Data Privacy

So that's registration and login sorted. Let's just have a really quick chat about privacy rules. So in data privacy, let's start with user as I think it's perhaps the most simple, which is you probably don't want, at least for this app, any fields checked down here because that effectively means that that data is public. And there's not many instances where you would want a user's name or particularly their email address to be public. In bubble.

It is not just good enough to think, I'm not putting that data on any pages. You need to ensure that the data is sufficiently locked down. It does not leave the server unless a privacy rule applies to it. So for example here this user is current user is saying that if this user is current user, then view your own email address, view your own name if you've got a name field, etc. Now in an app like this, you're going to want to think about what you do with meetings.

So when I created the meeting, I had this box here checked. So that means that I've got this basic privacy rule in place and then nothing is public. Now what that would mean is that if you shared the link to the meeting page with anyone, they wouldn't actually be able to access it because they wouldn't be able to access any fields on that meeting, such as the meeting URL. And so that means whereby's embedded iframe is not going to work. So you could branch off in a few different directions here.

You could think about this. Oh, well, I only want meetings to be accessible in the app. If individuals invite each other, I mean, that's kind of a separate feature set to think about, but you would still leave everything else empty, unchecked like this. Or you might consider that. Actually, I would like my users to be able to just send the link to anyone, and as long as they arrive on the right URL, there's no other additional security, just the URL.

Then you want to provide the basic details so you could decide to check URL. I think that would be the only essential one there. Maybe you want to show the label, but privacy rules, please don't skip over them. Please make sure. Please test.

Please test with different users. If you've got different roles in your app on that, if you want to test as different users. We haven't actually registered any users, but once you register users, remembering this is your development database, which is separate to your live database, you'll get users listed here and there will be a button in one of the columns here that says run as. And that can save you a whole heap of time because it means when you start adding in test users, you can quickly swap between them and preview your app from the perspective of different users. So yeah, there you go.


This is probably where I wrap things up. If you want to see me go in any other directions with an app like this, I feel like we've covered the basics, but we read every single comment that is posted. So yeah, please let us know what else you'd like to see us do with the whereby API and building apps with bubble.


Latest videos