OTPVerificationKMP

Lightweight, customizable OTP/PIN input component with features like auto SMS reading, animations, and styling control. Supports cross-platform use and smart states for seamless integration.

#ui
#maven
#desktop
#compose-multiplatform
#compose
#apple
#animation

Suggest an edit

Android JVMJVMKotlin/NativeWasm

GitHub stars3

Authorsatharvyadav22

Open issues0

Creation date6 months ago

Last activity5 months ago

Latest release1.2.0 (5 months ago)

GitHub repository Wiki page

🔑 OTP Verification KMP

A lightweight & customizable OTP/PIN input component for Kotlin Multiplatform (Android, iOS, Desktop, JVM) built with Jetpack Compose.
✨ Features auto SMS reading on Android, animations, adaptive spacing, box sizing, and full styling control.

✨ Features

🎨 Customizable UI → RoundedBox, Circle, Underline shapes
📏 Adaptive layout → Supports default evenly spaced boxes or custom spacing & box size
🤖 Android Auto SMS Reading → via Google SMS User Consent API
🔄 Smart States → Success ✅ / Error ❌ / Loading ⏳ with shake animation
📱 Cross-Platform → Android, iOS, Desktop, JVM with a single codebase
⚡ Plug & Play → Drop in OtpTextField and connect to your backend

📦 Installation

Step 1 — Add Maven Central

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
    }
}

Step 2 — Add the dependency

commonMain {
    dependencies {
        implementation("io.github.atharvyadav22:otp-verification-kmp:1.1.0")
    }
}

⚡ Prefer the common otp-verification-kmp in KMP projects. Use platform-specific only if your project is not multiplatform.

🚀 Usage Example

var otpValue by remember { mutableStateOf("") }

OtpTextField(
    otpValue = otpValue,
    onOtpValueChange = { otpValue = it },
    otpLength = 6,
    shape = OtpShape.RoundedBox,
    spacing = 16.dp, // optional: custom spacing, null for default even spacing
    verifyOtp = { enteredOtp -> enteredOtp == "123456" },
    onSuccess = { /* ✅ OTP verified - perform navigation */ },
    onError = { /* ❌ Wrong OTP - show error or resend */ }
)

👉 See full demo with multiple styles here: LibraryPreview.kt

🛠️ API Reference

Parameter	Type	Description
`otpValue`	`String`	Current OTP input.
`onOtpValueChange`	`(String) -> Unit`	Called on OTP input change.
`otpLength`	`Int`	Total number of OTP digits.
`verifyOtp`	`suspend (String) -> Boolean`	Verification logic (backend/local).
`onSuccess`	`() -> Unit`	Triggered when OTP is correct.
`onError`	`() -> Unit`	Triggered when OTP is invalid.
`shape`	`OtpShape`	UI shape → `RoundedBox`, `Circle`, `Underline`.
`textStyle`	`TextStyle`	Custom font style.
`borderSize`	`Dp`	Border thickness of each OTP box.
`boxSize`	`Dp`	Width & height of each OTP box (optional, default 40.dp).
`spacing`	`Dp?`	Optional horizontal spacing between boxes; defaults to evenly distributed if null.
`shakeMagnitude`	`Float`	Magnitude of shake animation on OTP verification failure (optional).
`shakeDuration`	`Int`	Duration of each shake animation movement in milliseconds (optional).
`shakeIterations`	`Int`	Number of shake repetitions when OTP verification fails (optional).

📌 Versioning

We follow Semantic Versioning (SemVer):

MAJOR = Breaking changes
MINOR = New features (backward compatible)
PATCH = Bug fixes

Check latest version →

👉 All release tags & changelogs are available on GitHub Releases.

📜 License

Copyright 2025 Atharv Yadav

Licensed under the Apache License, Version 2.0