expo-secure-keypad-jsi 0.1.0

package/android/src/main/java/expo/modules/securekeypadjsi/KeyboardCanvasView.kt

@@ -0,0 +1,291 @@
+// Copyright (c) 2026 expo-secure-keypad-jsi contributors. MIT License.
+package expo.modules.securekeypadjsi
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.view.MotionEvent
+import android.view.View
+import java.security.SecureRandom
+
+/**
+ * Full QWERTY secure keyboard drawn with [Canvas] and no child views, so key
+ * glyphs never become scrapeable text. Touches resolve to a final ASCII value
+ * here (shift and symbol layer included); the on-screen position never leaves
+ * this class.
+ *
+ * Following commercial secure-keyboard practice, the QWERTY arrangement is
+ * kept readable: the digit row is fully shuffled (order comes from the native
+ * core's CSPRNG), and each character row gets one blank dummy key at a random
+ * slot so the same character is not at the same coordinate across sessions.
+ */
+@SuppressLint("ViewConstructor")
+class KeyboardCanvasView(context: Context) : View(context), ThemedKeypadView {
+
+  interface Listener {
+    /** Final ASCII character — shift/layer already applied. */
+    fun onKeyPressed(asciiChar: Int)
+    fun onBackspace()
+    fun onClear()
+    fun onDone()
+    fun onObscuredTouch()
+  }
+
+  var listener: Listener? = null
+
+  var shuffleMode: KeypadCanvasView.ShuffleMode = KeypadCanvasView.ShuffleMode.MOUNT
+
+  /** Shuffled 0..9 from the native core; identity order when shuffle is off. */
+  var digitsProvider: (() -> ByteArray)? = null
+
+  private val density = context.resources.displayMetrics.density
+
+  override var keyColor: Int = Color.parseColor("#1C1C1E")
+  override var keyTextColor: Int = Color.WHITE
+  override var actionTextColor: Int = Color.parseColor("#8E8E93")
+  override var keyCornerRadiusDp: Float = 8f
+  override var digitTextSizeDp: Float = 32f
+  override var fontFamily: String? = null
+
+  override var pressedHighlight: Boolean = true
+
+  private companion object {
+    const val ACTION_SHIFT = -1
+    const val ACTION_BACKSPACE = -2
+    const val ACTION_CLEAR = -3
+    const val ACTION_DONE = -4
+    const val ACTION_TOGGLE = -5
+    const val DUMMY = -6
+
+    const val ROW_QWERTY_TOP = "qwertyuiop"
+    const val ROW_QWERTY_MID = "asdfghjkl"
+    const val ROW_QWERTY_BOT = "zxcvbnm"
+    // All 32 printable ASCII specials, three rows + a short fourth row.
+    const val ROW_SYM_0 = "!@#$%^&*()"
+    const val ROW_SYM_1 = "-_=+[]{}\\|"
+    const val ROW_SYM_2 = ";:'\",.<>?/"
+    const val ROW_SYM_3 = "`~"
+  }
+
+  private enum class Layer { LETTERS, SYMBOLS }
+  private enum class ShiftState { OFF, ONE_SHOT, LOCK }
+
+  private data class Key(val code: Int, val weight: Float = 1f)
+
+  private var layer = Layer.LETTERS
+  private var shift = ShiftState.OFF
+  private var lastShiftTapMs = 0L
+
+  private val random = SecureRandom()
+  private var digitsOrder = identityLayout()
+  // One dummy slot per character row, re-drawn on reshuffle(); -1 = none.
+  private var dummySlots = IntArray(5) { -1 }
+
+  private var keyRects = ArrayList<Pair<RectF, Key>>(48)
+
+  private val keyPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+  private val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { textAlign = Paint.Align.CENTER }
+  private val actionPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { textAlign = Paint.Align.CENTER }
+  private val gap = 6f * density
+
+  private var pressedIndex = -1
+
+  init {
+    isClickable = true
+    filterTouchesWhenObscured = true  // tapjacking
+    reshuffle()
+  }
+
+  fun reshuffle() {
+    val shuffled = shuffleMode != KeypadCanvasView.ShuffleMode.OFF
+    digitsOrder = if (shuffled) {
+      digitsProvider?.invoke() ?: identityLayout()
+    } else {
+      identityLayout()
+    }
+    for (i in dummySlots.indices) {
+      // Slot count per row is resolved in buildRows(); draw an index generously
+      // and clamp there so one random pull per row suffices.
+      dummySlots[i] = if (shuffled) random.nextInt(Int.MAX_VALUE) else -1
+    }
+    layoutKeys()
+    invalidate()
+  }
+
+  private fun withDummy(keys: MutableList<Key>, rowIndex: Int) {
+    val slotSeed = dummySlots[rowIndex]
+    if (slotSeed < 0) return
+    keys.add(slotSeed % (keys.size + 1), Key(DUMMY))
+  }
+
+  private fun buildRows(): List<List<Key>> {
+    val rows = ArrayList<List<Key>>(5)
+    if (layer == Layer.LETTERS) {
+      rows.add(digitsOrder.map { Key(('0' + it.toInt()).code) })
+      rows.add(ArrayList<Key>(ROW_QWERTY_TOP.map { Key(it.code) }).also { withDummy(it, 0) })
+      rows.add(ArrayList<Key>(ROW_QWERTY_MID.map { Key(it.code) }).also { withDummy(it, 1) })
+      rows.add(ArrayList<Key>().also {
+        it.add(Key(ACTION_SHIFT, 1.5f))
+        val letters = ArrayList<Key>(ROW_QWERTY_BOT.map { c -> Key(c.code) })
+        withDummy(letters, 2)
+        it.addAll(letters)
+        it.add(Key(ACTION_BACKSPACE, 1.5f))
+      })
+    } else {
+      rows.add(ArrayList<Key>(ROW_SYM_0.map { Key(it.code) }).also { withDummy(it, 4) })
+      rows.add(ArrayList<Key>(ROW_SYM_1.map { Key(it.code) }).also { withDummy(it, 0) })
+      rows.add(ArrayList<Key>(ROW_SYM_2.map { Key(it.code) }).also { withDummy(it, 1) })
+      rows.add(ArrayList<Key>().also {
+        val syms = ArrayList<Key>(ROW_SYM_3.map { c -> Key(c.code, 2f) })
+        withDummy(syms, 3)
+        it.addAll(syms)
+        it.add(Key(ACTION_BACKSPACE, 2f))
+      })
+    }
+    rows.add(listOf(Key(ACTION_TOGGLE, 1f), Key(ACTION_CLEAR, 1f), Key(ACTION_DONE, 1f)))
+    return rows
+  }
+
+  private fun layoutKeys() {
+    keyRects = ArrayList(48)
+    val w = width.toFloat()
+    val h = height.toFloat()
+    if (w <= 0f || h <= 0f) return
+
+    val rows = buildRows()
+    val rowH = (h - gap * (rows.size - 1)) / rows.size
+    var top = 0f
+    for (row in rows) {
+      val totalWeight = row.sumOf { it.weight.toDouble() }.toFloat()
+      val unit = (w - gap * (row.size - 1)) / totalWeight
+      var left = 0f
+      for (key in row) {
+        val kw = unit * key.weight
+        keyRects.add(Pair(RectF(left, top, left + kw, top + rowH), key))
+        left += kw + gap
+      }
+      top += rowH + gap
+    }
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    layoutKeys()
+  }
+
+  private fun labelFor(key: Key): String? = when (key.code) {
+    DUMMY -> null
+    ACTION_SHIFT -> "⇧"
+    ACTION_BACKSPACE -> "⌫"
+    ACTION_CLEAR -> "✕"
+    ACTION_DONE -> "⏎"
+    ACTION_TOGGLE -> if (layer == Layer.LETTERS) "!#1" else "abc"
+    else -> {
+      val c = key.code.toChar()
+      if (shift != ShiftState.OFF && c in 'a'..'z') c.uppercaseChar().toString() else c.toString()
+    }
+  }
+
+  // No background fill: see KeypadCanvasView.onDraw.
+  override fun onDraw(canvas: Canvas) {
+    textPaint.color = keyTextColor
+    textPaint.textSize = digitTextSizeDp * density * 0.6f
+    textPaint.typeface = EskFont.resolve(context, fontFamily)
+    actionPaint.textSize = digitTextSizeDp * density * 0.5f
+    val r = keyCornerRadiusDp * density
+
+    for ((index, entry) in keyRects.withIndex()) {
+      val (rect, key) = entry
+      val held = pressedHighlight && index == pressedIndex
+      keyPaint.color = pressedDim(keyColor, held)
+      canvas.drawRoundRect(rect, r, r, keyPaint)
+      val label = labelFor(key)
+      if (label != null) {
+        val paint = if (key.code >= 0) textPaint else actionPaint
+        // Shift shows as "armed" while one-shot or locked.
+        actionPaint.color = if (key.code == ACTION_SHIFT && shift != ShiftState.OFF) {
+          keyTextColor
+        } else {
+          actionTextColor
+        }
+        drawCentered(canvas, label, rect, paint)
+      }
+    }
+  }
+
+  /** Same tapjacking observation point as [KeypadCanvasView]. */
+  override fun onFilterTouchEventForSecurity(event: MotionEvent): Boolean {
+    val allowed = super.onFilterTouchEventForSecurity(event)
+    if (!allowed && event.actionMasked == MotionEvent.ACTION_DOWN) {
+      listener?.onObscuredTouch()
+    }
+    return allowed
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        pressedIndex = keyRects.indexOfFirst { it.first.contains(event.x, event.y) }
+        invalidate()
+        return true
+      }
+      MotionEvent.ACTION_CANCEL -> {
+        pressedIndex = -1
+        invalidate()
+        return true
+      }
+      MotionEvent.ACTION_UP -> {
+        pressedIndex = -1
+        invalidate()
+        val key = keyRects.firstOrNull { it.first.contains(event.x, event.y) }?.second
+        if (key != null) handleKey(key)
+        performClick()
+        return true
+      }
+      else -> return super.onTouchEvent(event)
+    }
+  }
+
+  private fun handleKey(key: Key) {
+    when (key.code) {
+      DUMMY -> {}
+      ACTION_SHIFT -> {
+        val now = android.os.SystemClock.uptimeMillis()
+        shift = when {
+          shift == ShiftState.OFF -> ShiftState.ONE_SHOT
+          shift == ShiftState.ONE_SHOT && now - lastShiftTapMs < 350L -> ShiftState.LOCK
+          else -> ShiftState.OFF
+        }
+        lastShiftTapMs = now
+        invalidate()
+      }
+      ACTION_BACKSPACE -> listener?.onBackspace()
+      ACTION_CLEAR -> listener?.onClear()
+      ACTION_DONE -> listener?.onDone()
+      ACTION_TOGGLE -> {
+        layer = if (layer == Layer.LETTERS) Layer.SYMBOLS else Layer.LETTERS
+        shift = ShiftState.OFF
+        layoutKeys()
+        invalidate()
+      }
+      else -> {
+        var c = key.code.toChar()
+        if (shift != ShiftState.OFF && c in 'a'..'z') c = c.uppercaseChar()
+        if (shift == ShiftState.ONE_SHOT) {
+          shift = ShiftState.OFF
+          invalidate()
+        }
+        listener?.onKeyPressed(c.code)
+        if (shuffleMode == KeypadCanvasView.ShuffleMode.PER_KEY) reshuffle()
+      }
+    }
+  }
+
+  override fun performClick(): Boolean {
+    super.performClick()
+    return true
+  }
+}

package/android/src/main/java/expo/modules/securekeypadjsi/KeypadCanvasView.kt

@@ -0,0 +1,183 @@
+// Copyright (c) 2026 expo-secure-keypad-jsi contributors. MIT License.
+package expo.modules.securekeypadjsi
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.view.MotionEvent
+import android.view.View
+
+/**
+ * Draws with [Canvas] and no child views, so digit glyphs never become
+ * scrapeable text. Touches resolve to a digit *value* here; the on-screen
+ * position never leaves this class.
+ */
+@SuppressLint("ViewConstructor")
+class KeypadCanvasView(context: Context) : View(context), ThemedKeypadView {
+
+  interface Listener {
+    fun onDigitPressed(digit: Int)
+    fun onBackspace()
+    fun onClear()
+    fun onObscuredTouch()
+  }
+
+  var listener: Listener? = null
+
+  enum class ShuffleMode { MOUNT, PER_KEY, OFF }
+
+  var shuffleMode: ShuffleMode = ShuffleMode.MOUNT
+
+  // Canvas draws in pixels, so every dimension below is stored in dp and scaled
+  // at draw time. Without that, a JS theme value would mean a different physical
+  // size than the identical value on iOS, which works in points.
+  private val density = context.resources.displayMetrics.density
+
+  override var keyColor: Int = Color.parseColor("#1C1C1E")
+  override var keyTextColor: Int = Color.WHITE
+  override var actionTextColor: Int = Color.parseColor("#8E8E93")
+  override var keyCornerRadiusDp: Float = 12f
+  override var digitTextSizeDp: Float = 32f
+  override var fontFamily: String? = null
+
+  override var pressedHighlight: Boolean = true
+
+  var layoutProvider: (() -> ByteArray)? = null
+
+  // 3 cols x 4 rows. Digits occupy 0..8 and 10; 9 = clear, 11 = backspace.
+  private val digitCells = intArrayOf(0, 1, 2, 3, 4, 5, 6, 7, 8, 10)
+  private val clearCell = 9
+  private val backspaceCell = 11
+
+  // Indexed by cell; -1 marks an action cell.
+  private val digitAtCell = IntArray(12) { -1 }
+
+  private val keyPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+  private val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { textAlign = Paint.Align.CENTER }
+  private val actionPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { textAlign = Paint.Align.CENTER }
+  private val rect = RectF()
+
+  private var pressedCell = -1
+
+  private var cellW = 0f
+  private var cellH = 0f
+  private val gap = 12f * density
+
+  init {
+    isClickable = true
+    filterTouchesWhenObscured = true  // tapjacking
+    reshuffle()
+  }
+
+  fun reshuffle() {
+    val layout = if (shuffleMode == ShuffleMode.OFF) {
+      identityLayout()
+    } else {
+      layoutProvider?.invoke() ?: identityLayout()
+    }
+    for (i in digitAtCell.indices) digitAtCell[i] = -1
+    for (slot in digitCells.indices) {
+      digitAtCell[digitCells[slot]] = layout[slot].toInt()
+    }
+    invalidate()
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    // Same guard as KeyboardCanvasView.layoutKeys: a 0-size pass (hidden tab,
+    // first layout) must not leave negative cell sizes behind.
+    if (w <= 0 || h <= 0) { cellW = 0f; cellH = 0f; return }
+    cellW = (w - gap * 2) / 3f
+    cellH = (h - gap * 3) / 4f
+  }
+
+  // No background fill: the host view's `style` carries it, so the gaps
+  // between keys show whatever is behind the keypad.
+  override fun onDraw(canvas: Canvas) {
+    textPaint.color = keyTextColor
+    textPaint.textSize = digitTextSizeDp * density
+    textPaint.typeface = EskFont.resolve(context, fontFamily)
+    actionPaint.textSize = digitTextSizeDp * density * 0.7f
+
+    for (cell in 0 until 12) {
+      val col = cell % 3
+      val row = cell / 3
+      val left = col * (cellW + gap)
+      val top = row * (cellH + gap)
+      rect.set(left, top, left + cellW, top + cellH)
+
+      val digit = digitAtCell[cell]
+      val held = pressedHighlight && cell == pressedCell
+      keyPaint.color = pressedDim(keyColor, held)
+      // Action cells have no key fill, so the glyph itself carries the dim.
+      actionPaint.color = pressedDim(actionTextColor, held)
+      when {
+        digit >= 0 -> {
+          val r = keyCornerRadiusDp * density
+          canvas.drawRoundRect(rect, r, r, keyPaint)
+          drawCentered(canvas, digit.toString(), rect, textPaint)
+        }
+        cell == backspaceCell -> drawCentered(canvas, "⌫", rect, actionPaint)
+        cell == clearCell -> drawCentered(canvas, "✕", rect, actionPaint)
+      }
+    }
+  }
+
+  /**
+   * The only place a tapjacking attempt is observable: filterTouchesWhenObscured
+   * drops the event before [onTouchEvent] runs. ACTION_DOWN only, or one gesture
+   * would emit a finding per event.
+   */
+  override fun onFilterTouchEventForSecurity(event: MotionEvent): Boolean {
+    val allowed = super.onFilterTouchEventForSecurity(event)
+    if (!allowed && event.actionMasked == MotionEvent.ACTION_DOWN) {
+      listener?.onObscuredTouch()
+    }
+    return allowed
+  }
+
+  private fun cellAt(x: Float, y: Float): Int {
+    val col = (x / (cellW + gap)).toInt().coerceIn(0, 2)
+    val row = (y / (cellH + gap)).toInt().coerceIn(0, 3)
+    return row * 3 + col
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        pressedCell = cellAt(event.x, event.y)
+        invalidate()
+        return true
+      }
+      MotionEvent.ACTION_CANCEL -> {
+        pressedCell = -1
+        invalidate()
+        return true
+      }
+      MotionEvent.ACTION_UP -> {
+        pressedCell = -1
+        invalidate()
+        val cell = cellAt(event.x, event.y)
+        when {
+          cell in 0..11 && digitAtCell[cell] >= 0 -> {
+            listener?.onDigitPressed(digitAtCell[cell])
+            if (shuffleMode == ShuffleMode.PER_KEY) reshuffle()
+          }
+          cell == backspaceCell -> listener?.onBackspace()
+          cell == clearCell -> listener?.onClear()
+        }
+        performClick()
+        return true
+      }
+      else -> return super.onTouchEvent(event)
+    }
+  }
+
+  override fun performClick(): Boolean {
+    super.performClick()
+    return true
+  }
+}

package/android/src/main/java/expo/modules/securekeypadjsi/PinSessionHandle.kt

@@ -0,0 +1,54 @@
+// Copyright (c) 2026 expo-secure-keypad-jsi contributors. MIT License.
+package expo.modules.securekeypadjsi
+
+/**
+ * Owns the native pointer for its lifetime — call [destroy] exactly once, on
+ * the UI thread. `external` names must match the symbols in JniBridge.cpp.
+ */
+class PinSessionHandle(minLength: Int, maxLength: Int, keypadType: Int = TYPE_DIGIT) {
+  companion object {
+    const val TYPE_DIGIT = 0
+    const val TYPE_FULL = 1
+
+    init {
+      System.loadLibrary("expo-secure-keypad-jsi")
+    }
+  }
+
+  private var ptr: Long = nativeCreate(minLength, maxLength, keypadType)
+
+  /** null on success, else an error-code string (e.g. "ERR_WEAK_KEY"). */
+  fun arm(pem: String): String? = if (ptr != 0L) nativeArm(ptr, pem) else "ERR_INTERNAL"
+
+  fun press(digit: Int): Int = if (ptr != 0L) nativePress(ptr, digit) else 0
+
+  /** Final ASCII char (view resolves shift/layer first). Out-of-charset is ignored. */
+  fun pressKey(asciiChar: Int): Int = if (ptr != 0L) nativePressKey(ptr, asciiChar) else 0
+  fun backspace(): Int = if (ptr != 0L) nativeBackspace(ptr) else 0
+  fun clear() { if (ptr != 0L) nativeClear(ptr) }
+
+  /** Envelope JSON starting with '{', or an "ERR_..." string. */
+  fun submit(): String = if (ptr != 0L) nativeSubmit(ptr) else "ERR_INTERNAL"
+
+  fun shuffledLayout(): ByteArray =
+    if (ptr != 0L) nativeShuffledLayout(ptr) else identityLayout()
+
+  fun onBackground() { if (ptr != 0L) nativeOnBackground(ptr) }
+
+  fun destroy() {
+    val p = ptr
+    ptr = 0L
+    if (p != 0L) nativeDestroy(p)
+  }
+
+  private external fun nativeCreate(minLength: Int, maxLength: Int, keypadType: Int): Long
+  private external fun nativeDestroy(ptr: Long)
+  private external fun nativeArm(ptr: Long, pem: String): String?
+  private external fun nativePress(ptr: Long, digit: Int): Int
+  private external fun nativePressKey(ptr: Long, asciiChar: Int): Int
+  private external fun nativeBackspace(ptr: Long): Int
+  private external fun nativeClear(ptr: Long)
+  private external fun nativeSubmit(ptr: Long): String
+  private external fun nativeShuffledLayout(ptr: Long): ByteArray
+  private external fun nativeOnBackground(ptr: Long)
+}

package/android/src/main/java/expo/modules/securekeypadjsi/SecureKeypadJsiModule.kt

@@ -0,0 +1,35 @@
+// Copyright (c) 2026 expo-secure-keypad-jsi contributors. MIT License.
+package expo.modules.securekeypadjsi
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class SecureKeypadJsiModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("SecureKeypadJsi")
+
+    // Runs on the UI thread when the host activity pauses. Views wipe their
+    // buffers here; iOS does the same from
+    // UIApplication.didEnterBackgroundNotification.
+    OnActivityEntersBackground {
+      SecureKeypadJsiView.onActivityEntersBackground()
+    }
+
+    View(SecureKeypadJsiView::class) {
+      Events("onDigitCountChanged", "onComplete", "onError")
+
+      Prop("publicKey") { view: SecureKeypadJsiView, pem: String -> view.setPublicKeyPem(pem) }
+      Prop("keypadType") { view: SecureKeypadJsiView, v: String -> view.setKeypadType(v) }
+      Prop("minLength") { view: SecureKeypadJsiView, v: Int -> view.setMinLength(v) }
+      Prop("maxLength") { view: SecureKeypadJsiView, v: Int -> view.setMaxLength(v) }
+      Prop("shuffle") { view: SecureKeypadJsiView, v: String -> view.setShuffle(v) }
+      Prop("autoSubmit") { view: SecureKeypadJsiView, v: Boolean -> view.setAutoSubmit(v) }
+      Prop("theme") { view: SecureKeypadJsiView, v: Map<String, Any?> -> view.setTheme(v) }
+
+      AsyncFunction("clear") { view: SecureKeypadJsiView -> view.clearPin() }
+      AsyncFunction("submit") { view: SecureKeypadJsiView -> view.submit() }
+
+      OnViewDestroys { view: SecureKeypadJsiView -> view.dispose() }
+    }
+  }
+}