The Pattern Lock Screen Plugin allows you to add a classical pattern based authentication system to your application, similar to the lock screen of an Android smartphone. By enabling users to draw a unique pattern, you can provide both an intuitive login experience and an additional layer of security.
Pattern Lock is widely recognized from mobile devices and provides a visual, gesture-based login method. This plugin brings that familiar functionality into your Bubble application.
Each pattern is translated into a numeric code based on the positions of dots, corresponding to a standard phone dial arrangement.
Example: The code 257 represents a straight vertical line from the top-center dot to the bottom-center dot.
The correct code can be stored in your database and associated with each user account, making it easy to validate login attempts or use the pattern lock as a form of two factor authentication (2FA).
This plugin is especially useful for mobile-first apps, gamified experiences, or cases where you want to add gesture based input to enhance security and user experience.
Key Features
Classical pattern lock interface, familiar to Android users.
Patterns are stored as numeric codes (each dot mapped to a number).
Ability to customize the background color of the lock screen.
Supports storing user patterns in the database for secure authentication.
Can be used for:
Login systems
Two-factor authentication (2FA)
Custom verification flows
Enhanced mobile app UX
Prerequisites
Before using the plugin, ensure you have:
A Bubble application with the plugin installed.
A user database field (e.g., pattern_code) to store each user’s pattern as a number.
Familiarity with Bubble workflows to configure login checks.
How to setup
Step 1 – Install the Plugin
Go to the Plugin Tab
Open your Bubble Editor.
Navigate to the Plugins tab on the left panel.
Add Plugins
Once in the Plugins tab, click the Add Plugins button.
Search for the Plugin
Use the search bar to type Pattern Lock Screen
Locate the plugin in the search results.
Install/Buy
If the plugin is free, click Install to add it to your application.
For a paid plugin, click Buy and follow the purchase instructions.
Payment Information (For Paid Plugins)
If the plugin is a paid one, fill in your payment details and make payment.
Charges will be added to your Bubble billing account.
Remember, if you unsubscribe from the plugin shortly after installation, charges will be prorated based on the days used.
Plugin Installed
Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.
Step 2 – Add the Plugin Element to Your Page
Open the Design tab in your Bubble editor.
Search for the Pattern Lock element in the Elements panel.
You’ll see the element in the search:
Pattern Lock
Drag and drop the element onto your page.
Step 3 – Configure Properties
To configure the Pattern Lock Plugin
Correct Code
Define the default code (unlock pattern) for the Pattern Lock.
The code is stored as a number sequence, where each digit represents the position of a dot (similar to a phone dial).
Background Color
Select the primary color for the background
The plugin provides one workflow action:
Get Code Pattern Lock
This action retrieves the numeric code (pattern) drawn by the user.
You can configure this action to:
Save the code in the database (when registering or updating a user’s pattern).
Validate the code by comparing it against the stored user’s pattern (during login or authentication)
Plugin Element - Pattern Lock
Fields
Title
Description
Type
Correct Code
Define the default unlock pattern. You can keep it as 0000 or replace it with your own sequence (for example, 12345).
Number
Background Color
Pick the background color for the pattern lock container so it blends seamlessly with your app’s design.
Color
Element Actions
getcode is a programming function or method that developers use to fetch or obtain a particular code segment or data element from within an API or plugin.
Exposed States
Title
Description
Type
Unlocked?
Indicates whether the pattern lock has been successfully unlocked. The value changes to Yes once the correct code is entered.
Checkbox (yes/no)
Pattern
Shows the sequence of numbers that represent the user’s pattern. Each number corresponds to the position of a dot, just like on a phone dial pad.
Number
Element Events
Event
Description
Correct Code Entered
Triggered when the user draws the correct pattern and successfully unlocks the lock.
Incorrect Code Entered
Triggered when the user enters the wrong pattern, keeping the lock secured.
