Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 39

Building a Private Admin Page

Recommended resources

Hello! In our previous lessons, we successfully forged a complete two-way communication bridge between your Bubble app and an embedded JavaScript tool. This was a major step toward your goal of creating a platform with deeply integrated tools.

Now that you have the power to integrate individual tools, we need to think about scale. How will you manage your growing library of calculators, converters, and formatters? Adding each new tool through the Bubble editor isn't a scalable solution. Today, we'll solve this by starting a new module on content management. Your learning outcome is to design and build a private admin page for managing your tool database. This page will become the central control panel for your entire platform, a private space where you can oversee everything without touching the live site.

Part 1: Establishing an "Admin" Role

Before we can build a private page, we need a way for our app to distinguish between a regular user and an administrator—you. The most robust and common way to do this in Bubble is by creating user roles.

An excellent video from the "Building With Bubble" channel explains this concept perfectly. It shows why you should use a single User data type and how to use Option Sets to define roles. This is a best practice because roles are a fixed list of options, not data that users create.

How To Create Multiple User Roles In Bubble.io (And Restrict Features)

This video provides a thorough walkthrough of setting up user roles, which is the foundation for any admin functionality.

Watch the first section from the beginning until the database setup is complete. Pay close attention to: The explanation of why you should not create separate data types for different users. How to create an Option Set for roles (e.g., 'Admin', 'User'). How to add a new field to the User data type that links to this Option Set. The benefit of setting a default value for the role, so every new user is automatically assigned a basic role upon signup.

Action: Implement User Roles

Let's apply this to your app.

  1. Create the Option Set:

    • Go to the Data tab and then to the Option sets sub-tab.
    • Create a new option set named Role.
    • Add two options to this set: Admin and User.

  2. Update the User Data Type:

    • Go back to the Data types sub-tab and select the User data type.
    • Create a new field named role (or similar). For the Field type, scroll to the bottom of the list and select your new Option Set, Role.
    • Click on the role field you just created to see its properties. Set a Default value by selecting the User option.

  3. Assign the Role on Signup:

    • In Module 6, you built a signup workflow. You don't need to change it! Because you set a default value, Bubble will automatically assign the User role to every new user who signs up.

  4. Make Yourself an Admin:

    • Go to the App data sub-tab and view your All Users.
    • Find your own user account, click the pencil icon to edit it, and change the role field from User to Admin. Save the change.

You now have a system that can differentiate between you and your future users.

Part 2: Building and Securing the Admin Page

An "admin page" is simply a standard Bubble page that is protected from unauthorized access. Let's create the page and then lock it down.

First, you'll need a new page to serve as your admin dashboard. An article from RapidDev provides a concise overview of the initial steps.

How to build an admin panel in Bubble.io?

This guide outlines the basic steps for creating and designing an admin panel. We'll start with the very first step.

Read the section under the heading "Setting Up Your Project". It simply instructs you to create a new page for your panel.

Following that advice, create a new page in your app and name it admin.

Now, we need to secure it. There are two layers of security we'll implement:

  1. Client-Side Redirect: A workflow that boots out any non-admin user who lands on the page. This is a quick and user-friendly deterrent.
  2. Server-Side Privacy Rules: The real, non-negotiable security. These rules are enforced by Bubble's server and control who can even see or find specific data, regardless of what's on the page.

Implementing the Client-Side Redirect

The most direct way to protect a page is with a workflow that runs the moment the page loads. The "Anti Code" channel demonstrates this clearly.

How to create an Admin Panel for your Bubble Application

This video shows how to create a simple workflow that redirects any user who isn't an admin.

Watch the short segment from this part of the video. It shows the creation of a "Do when condition is true" workflow specifically for this purpose.

Action: Create the Redirect Workflow

  1. Go to the Workflow tab for your new admin page.
  2. Click to add a new event, and choose General > Do when condition is true.
  3. In the Only when box for this workflow, define the condition: Current User's role is not Admin.
  4. Now, add an action to this event: Navigation > Go to page... and select your index (homepage).

With this in place, any logged-in user who isn't an Admin will be immediately sent back to the homepage if they try to access the admin page URL.

Part 3: Designing the Page and Enforcing Privacy

A redirect is good, but it's not foolproof. A sophisticated user might be able to interrupt the page load and see the page's layout. The real security comes from controlling the data itself.

The "Anti Code" video also contains one of the clearest explanations of Bubble's most important security feature: Privacy Rules.

How to create an Admin Panel for your Bubble Application

This is the most critical part of securing your admin panel. It explains how to use server-side rules to control who can access what data.

Watch the segment from "privacy and defining some privacy rules". The video explains how to define different rules for different user roles (Admin vs. Everyone else) and what permissions to grant.

Let's apply this powerful concept to your Tool database.

Action: Implement Privacy Rules and Design the Layout

  1. Add a "Published" Field:

    • Go to Data > Data types > Tool.
    • Create a new field named isPublished, set the type to yes / no, and set the default value to no. This ensures that when you add a new tool, it's hidden from the public by default.

  2. Set Up Privacy Rules:

    • Go to Data > Privacy.
    • Find the Tool data type in the list. If there are no rules, click Define a new rule.
    • Rule for Everyone Else: In the Everyone else column, uncheck all boxes except Find this in searches and View all fields.
    • Click on the Find this in searches condition. In the rule definition, set it to: When This Tool's isPublished is yes. This means regular users can only find and see tools that you have explicitly published.
    • Rule for Admins: Click Define a new role. Name the role Admin. For the condition, set it to When Current User's role is Admin.
    • For this Admin role, check all the boxes to grant full permissions, with no other conditions.

  3. Design the Admin Page Layout:

    • Go back to the Design tab for your admin page.
    • Add a Text element with the heading "Tool Management".
    • Add a Repeating Group below the heading.
    • Configure the Repeating Group:
      • Type of content: Tool
      • Data source: Do a search for > Tool (with no constraints).
    • Inside the first cell of the repeating group, add text elements to display data like Current cell's Tool's Name, Current cell's Tool's Category's Display, and Current cell's Tool's isPublished.

Now, preview your admin page while logged in as your admin account. You should see a list of all the tools in your database, whether they are published or not. This is because your Admin privacy rule gives you unrestricted access. A regular user would be redirected, and even if they weren't, the privacy rules would prevent the repeating group from loading any unpublished tool data.

Conclusion

Congratulations! You have successfully designed and built the foundation of your platform's control center. This private, secure page is the key to your goal of building a scalable system for managing tools.

Let's recap the key takeaways:

  • User roles, best managed with an Option Set, are essential for creating different levels of access.
  • A private page should be secured with a client-side redirect workflow to provide a good user experience for unauthorized visitors.
  • The most crucial layer of security is server-side Privacy Rules, which control data access at its source and are not bypassable by the user.

In our next lesson, we will build on this foundation. We will add forms and workflows to your new admin page, enabling you to add new tools and edit existing ones directly from your control panel, fully automating your content management process.