MARKETPLACE
PLUGINS
PATTERNLOCK – DRAW TO UNLOCK
PatternLock – Draw to Unlock logo

PatternLock – Draw to Unlock

Published May 2026
   •    Updated this week

Plugin details

PatternLock gives your Bubble app a native draw-to-unlock authentication experience — no external services, no iframes, no monthly fees. Let users set and verify a pattern with a familiar Android-style gesture lock built entirely on canvas.
───────────────────
✨ KEY FEATURES
───────────────────

🔐 Draw-to-Unlock Canvas
 • Drag across dots to draw an unlock pattern directly on a canvas element
 • Fully responsive — auto-resizes via ResizeObserver to fit any Bubble layout
 • Configurable grid size (rows × cols) — 2×2 up to any dimension

🎨 Full Color Customization
 • Set background, dot, active and accent colors independently
 • Neutral dark defaults when colors are left empty (#1e2a35 background, #ffffff dots)
 • Success (green) and failure (red) visual states built in

⚙️ Two Operation Modes
 • Recording mode — user draws a pattern; hash is captured via the pattern_hash state
 • Verification mode — pass a saved hash via set_pattern; plugin validates automatically

📡 Events & States
 • Events: pattern_complete, pattern_correct, pattern_wrong, pattern_too_short, hash_defined
 • States: pattern_hash (text), pattern_nodes (JSON), pattern_length (number)
 • Minimum points threshold configurable via the min_points property


🔗 [View demo page](https://plugins-demo-70356.bubbleapps.io/version-test/parttenlock)
🔗 [View demo in editor](https://bubble.io/page?id=plugins-demo-70356&tab=Design&name=parttenlock)

$48

One time  •  Or  $4/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

Acampamento no-code logo
Acampamento no-code
Joined 2021   •   44 Plugins
View contributor profile

Instructions

Setup: 1. Add the "Pattern Lock" element to your page
2. Recommended minimum size: 200×200 px
3. Leave set_pattern empty to record a new pattern
4. Pass a previously saved pattern_hash to set_pattern to enter verification mode

Properties: grid_rows · grid_cols · background_color · dot_color · accent_color · active_color · min_points · set_pattern
States:     pattern_hash · pattern_nodes · pattern_length
Events:     pattern_complete · pattern_correct · pattern_wrong · pattern_too_short

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Containers   •   Mobile   •   Technical   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble