Skip to main content

Bubble.io Plugin

The Warrant Bubble.io Plugin allows you to quickly add role-based access control to your bubble.io application without writing any code.

The following guide assumes that you already have a bubble.io application up and running in your bubble.io editor.

Installation & Configuration

The first step is to install and configure the Warrant plugin in your bubble.io app.

  1. Open up your application in bubble.io. Click on 'Plugins' in the left navbar to bring up the Plugins page.
  2. On the 'Installed Plugins' page, click the 'Add plugins' button in the top right of your screen. This will bring up the plugin installer window. Search for 'warrant' in the search box and click 'Install' on the plugin.
  3. After exiting the plugin installer window, you'll see the Warrant plugin now installed. Make sure that the 'Currently installed version (latest version)' box has the latest version number selected.
  4. In the API Key box, paste your API key from your warrant.dev account as follows: ApiKey warrant_api_key (where warrant_api_key = your key)

That's it! Your plugin is now configured and ready for use. Next, we'll hook up the plugin to application actions.

Setting up User Creation

In order to implement user authorization, each new user in your app needs to be added into Warrant. This should be configured by adding the plugin into your app's user sign-up flow.

  1. Go to the 'Workflow' tab in your bubble.io application editor.

  2. Select your user sign-up page/popup using the page dropdown.

  3. Select the event corresponding to a user sign-up (ex. 'When Button Sign up is clicked'). This will bring up the action flow where you can add a new Warrant 'create user' action.

  4. In the 'new action popup,' select 'Plugins > Warrant API - Create User'. Bubble

  5. For 'userId' select 'current user's unique id'. For 'username' select 'current user's email'. The username allows you to easily identify users in the Warrant dashboard. Bubble

The user creation flow is now ready. You can test your change by previewing your application and signing up with a test user. The new user should show up in your Warrant dashboard if the action has been properly integrated.

Implementing Authorization Actions

Now that user creation is set up, you can start adding authorization checks in your application. These steps will walk you through an example.

  1. In the 'Workflow' tab, select the page and/or action that you'd like to gate behind Warrant user authorization.

  2. Click to add a new action. Select 'Plugins > Authorize User'. Bubble

  3. In the 'Authorize User' popup, you will see 3 options to be passed to the action. For 'objectType' select the type of object you are authorizing access to (ex: 'movie' if we're authorizing access to a particular movie in our app). For 'objectId' select the id of the particular object you are authorizing access to (typically you can use 'current cell's unique id' for this). For 'relation' select the type of relation (ex: editor, viewer, etc) the current user needs to be considered authorized.

  4. The 'Authorize User' action returns an 'isAuthorized' result of either 'yes' or 'no'. Create your desired post-authorization action using this result. In most cases, this will be navigation to another page. In the new action configuration popup, select 'Only when Result of step x (Authorize User)'s isAuthorized is "yes"'. This will ensure that the action is only taken if the user is authorized to do it. Bubble

All done! Remember that the 'Authorize User' action can be added anywhere that you'd like to verify user permissions using Warrant. If you have any other questions, feel free to email us at hello@warrant.dev.