Pattern Lock Login for Mobile App

Implementing Pattern Lock for Mobile App Login

Pattern lock — Android pattern, rarely seen in iOS (no system analog). Principle same as PIN: local unlock of storage without sending secret to server. But pattern has specific security problems to understand before implementing.

Problem of greasy residue

Oily finger traces remain on phone screen. Pattern of 9 points recovered visually from 1–2 meter distance under right lighting. Abraham et al. (2010) research showed: most users draw L-, Z-, or S-shaped patterns — 12 most popular patterns cover ~20% user base. Important context for client when choosing authentication method.

Pattern encoding

Standard 3×3 grid — 9 points with indices 0–8. Pattern — sequence of indices. Minimum length — 4 points (Android requirement). From 9 points with minimum 4, ~389,112 possible patterns — substantially less than 6-digit PIN (1,000,000 combinations).

Encode pattern to string of indices: [0,1,2,5,8] → "01258". Use this string as input for key derivation — same PBKDF2 scheme as PIN. Never save pattern in plaintext.

Custom View implementation

On Android you can take com.github.itsxtt:pattern-lock or similar open-source libraries — basic line drawing logic. But in enterprise projects we write ourselves: full control over visuals, cryptography, and no dependency on unsupported library.

Jetpack Compose:

@Composable
fun PatternLockView(
    onPatternComplete: (List<Int>) -> Unit
) {
    val selectedDots = remember { mutableStateListOf<Int>() }
    var currentPosition by remember { mutableStateOf(Offset.Zero) }

    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectDragGestures(
                    onDragStart = { offset -> /* find nearest point */ },
                    onDrag = { change, _ ->
                        currentPosition = change.position
                        // add point if touch in radius
                    },
                    onDragEnd = {
                        if (selectedDots.size >= 4) onPatternComplete(selectedDots.toList())
                        selectedDots.clear()
                    }
                )
            }
    ) {
        // draw dots and lines between selectedDots + line to currentPosition
    }
}

Key details: each point visited only once; line crossing untouched point automatically adds it (standard Android Pattern Lock behavior); minimum touch distance to point — ~24dp.

Hide pattern 500–800ms after completion — lines disappear, dots remain. Prevents shoulder surfing.

iOS: custom implementation

iOS has no system Pattern Lock. Implement via SwiftUI Canvas + DragGesture. Logic same, adapt visual under iOS Human Interface Guidelines. Pattern less common on iOS — usually specific client request (e.g., kids apps or specialized enterprise tools).

Fallback and error counter

After 5 failed attempts — require full credential login. Counter in Keychain (iOS) or EncryptedSharedPreferences (Android). After successful login reset counter and offer to redraw pattern — important warn user old pattern reset.

When not to use

Pattern — weaker than PIN with equal symbols. For banking, medical data, or corporate access — recommend PIN 6+ digits with PBKDF2 or biometrics. Pattern appropriate in apps where convenience matters more than max security: trackers, organizers, kids apps.

Timeframe

Custom PatternLock implementation with correct cryptographic scheme on one platform — 5–8 business days. On both platforms — 10–14 days (with UX adaptation per OS).