Section 7 (Lesson 8/8): This security-focused lesson will help us understand how to redirect users who shouldn't be viewing our private dashboards. We’ll be creating detailed conditional statements to address a variety of scenarios.
Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...
Bubble editor: ➡ https://bubble.io/page?type=page&name...
Transcript
So in this lesson, we're going to cover page redirects. And we want to make sure that only when Hana is logged in and she belongs to the company Orbit can she view that particular dashboard page called company. Because, at the end of the day, that URL is plain text - Hana can see it, Hana's employees, it's shareable, and we just want to make sure that a person is redirected if they don't meet certain criteria.
Privacy rules do ensure that data won't be seen, but then we still want to finish off the user experience and make sure that people are redirected that shouldn't be at particular dashboards. Otherwise, they'll see dashboards with missing information. It's just not great from a UX standpoint. So it is something that we need to address, specifically on the dashboard pages, such as the company dashboard, the candidate dashboard, and the soon to be created admin dashboard.
So on the company dashboard, let's tackle this one first. Click on the Workflow tab, and then let's press "Click here to add an event..." and we're going to click "Page is loaded". So the "Page is loaded" event is actually super fast. Data won't be loaded on the page, and someone will be redirected as long as we we are using the correct expressions to redirect someone, and specifically, the expressions need to reference a field in the database.
So we'll say that when page is loaded, let's go to Navigation --> Go to page, and we're just going to send someone off to index. This is for a person that doesn't meet the criteria we are just about to create. And that criteria is if the "Current User's Company is not Current page's Company," then redirect them to the index page. Okay, so the current page will have data from Orbit, and we're doing a match with Hana's Company, which is Orbit as well. Company and Company.
Let's continue this expression. Let's say, so that is a reason to redirect someone, or we can say "Current page's Company is empty". So if a link is shared to a company dashboard, but there's no "/orbit" or slug from another company, that might happen, let's also redirect them. Just great user experience! We don't want a partially loaded dashboard with missing data, it just won't feel right. Okay, and what I'm going to do for a page load redirect is let's change the color of the workflow to purple.
Let's do another one that states when the Current User is logged out, also redirect them. Now we could add to this. We could say, "or Current User is logged out". And In fact, let's do that! Let's get comfortable with writing these longer expressions. So if any one of these, because we're using the "or" operator, if any one of these are true, then it will redirect to page index.
What about on the candidate page? Well, this one doesn't have page data, so it's a bit simpler. So we've got a "Page is loaded" event here. Let's do another one. Let's say "Page is loaded," let's change it to purple. Let's add the expression: If Current User is logged out, therefore, we're not going to see much data in this dashboard anyway, let's just go to page Index. Let's do the same for this purple one here.
Okay, so let's actually test this. So I'm currently logged in as Hana, and I'm on the company dashboard. Let's bring up the URL bar so I can see, "/company/orbit". Now, what if I remove this company data here? So part of our redirect expression says that if the Current page's Company is missing, and in this instance, it will be missing. Let me hit enter, and it did redirect us.
Let's go back to the dashboard and I'm going to copy this URL. So imagine I'm a rogue employee now, and I'm going to send someone else this link! So please do the same and copy your company URL (then we can actually remove this "Log out" button from here as well in a second), so let's log out as Hana. Let's log back in as Peter and off he goes to the candidate page, and I can see a parameter is missing, v=account. We're going to fix that. Let's now paste in the URL that we copied. So this is now Peter trying to access the company page. Redirected before any data was loaded.
Okay, let's go to Peter's dashboard, of which he can see his stuff. Let's copy this URL, let's log out, and let's paste the URL back in. And there you go: redirect back to the index page.
So let's just fix a few bugs that we saw. So one of them was on the log-in page. When the Button Log in is clicked (I'm going to change this to green) and it was the parameter was missing from candidate. So I'm going to send more parameters to the page. The key is "v" and the value is "account". And on the company, send more parameters to a page: "v" is "overview". All right, chipping away at all of these small bugs!
And let's go to the company page now. I just want to remove the navbar Text Log out. Now, when this happens, obviously, we need to reconfigure the layout here, but if I pull the Avatar out of this Group into the navbar, then I can delete this text. But actually, I'm going to use the Elements Tree here to delete Group Actions, rather. Then I'm going to click back onto Avatar, open up the Property Editor, and then right-align this.
Okay, now we're just going to log back in as Hana. One more time, we're almost done, folks. Log in. Log in as Hana. Just wanted to test that log in workflow. And I also would like to test, if we go down to candidates, I want to download both Raymond's and Sam's CVs. So let's click on the "more" dots here. There's Raymond from San Francisco, Download CV. All right! There we go, and I suspect Sam will have the same result.
All right, folks, that concludes the lesson and that concludes the section! I hope you enjoyed the section. Things are really starting to glue together nicely from the end-to-end app build process.
In the next section, we are going to be signing up as, well, I'll sign up as myself, you'll sign up as yourself as the admins of Workplace! And we'll build out a dashboard where we can manage users, jobs, applications via our candidates, and we will be able to create much more useful charts as well. So almost getting to the end of the course. Hang in there! I'm really proud of you for getting this far, and I'll see you in the next section.