OTPMan is an all-in-one solution which automatically reads and inserts OTP (One-Time Password) codes received via SMS. This library functions without requiring SMS permissions, leveraging the Android OTP API for secure and easy OTP handling within your app’s UI. It automatically manages animation, state and data on every situation with customizable colors, shapes and animation.
- Automatic OTP Handling: Reads and inserts OTP codes directly into the app UI.
- Automatic animation and user input handling: Just put the composable in your screen and you're good to go
- Automatic change device configuration handling: Don't worry about screen rotation, device theme changing, etc.
- Generate hash key: You don’t need to put up with annoying CLI or open source Python tools to generate hash key, OTPMan can generate the hash key inside Android Studio by simply running your app, even in emulator
- Permission-Free: Automatic SMS Verification with the SMS Retriever API.
- Jetpack Compose Compatible: Designed to work seamlessly with Jetpack Compose, Android's modern UI toolkit.
1: add it to settings.gradle.kts
maven { url = uri("https://jitpack.io") }
2: add it to your app's build.gradle.kts
dependencies (take the latest release version from the release section at the right)
implementation("com.github.masooddalman:OTPMan:latest_release_version")
3: sync it 😁
1: create an instance of OTPManViewModel
in an Activity or Fragment and define how many digits your OTP code has
class MainActivity : ComponentActivity() {
private val otpManViewModel by viewModels<OTPManViewModel>{
object : ViewModelProvider.Factory {
override fun <T : ViewModel> create(modelClass: Class<T>): T {
return OTPManViewModel(
count = 5
) as T
}
}
}
override fun onCreate(savedInstanceState: Bundle?) {
2: add OTPMan composable in the UI and pass the ViewModel to it
OTPMan(modifier = Modifier,
viewModel = otpManViewModel,
onComplete = {
Log.v("tag", "input code is $it")
})
3: that's it, OnComplete callback will trigger when the code completely filled, either by the user or auto-reading from the SMS
To let the library automatically read the OTP code, you have to generate app hash key for your application, it is a unique an 11-character string based on your app package name and signing info. please follow steps below:
- Generating app hash key
Write the code below in the
onCreate
function of the first Activity of the application
generateAppHashKey(this)
- Search for the generated hash key in the Logcat to find the hash key easier, add this to logcat filter
otpman
generated hash key for DEBUG | generated hash key for RELEASE |
---|---|
-
Removing the code
ATTENTION 1 : you can test your app with the DEBUG hash key, but don't forget to use the RELEASE one on production
ATTENTION 2 : Don't forget to remove the code above from your App before building a release, it's only for generating the hash key
-
dding the Hash key in your OTP SMS Construct a verification message
- Be no longer than 140 bytes
- Contain a one-time code that the client sends back to your server to complete the verification flow
- Include an 11-character hash string that identifies your app
Otherwise, the contents of the verification message can be whatever you choose. It is helpful to create a message from which you can easily extract the one-time code later on. For example, a valid verification message might look like the following: examples:
welcome to my app
verification code is 35467
bpqiJ6uwmGi
or
Your ExampleApp code is: 123456
FA+9qCX9VSu
The library animation for showing failed and success result. after sending the OTP code to your server, you can call one of these based on it.
otpManViewModel.makeItFailed()
or
otpManViewModel.makeItSuccess()
you can also change the animation type in the OTPManViewModel construction like below(default is Normal):
animationType = AnimationType.Normal
or
animationType = AnimationType.Shake
or
animationType = AnimationType.None
it automatically removes the success or failed UI by any changes in the inserted code
normal | shake | None |
---|---|---|
you can change style (background and border) of the fields in the OTPManViewModel construction using DataModelChip
class.
DataModelChip(
val size: Int,
val backColor: List<Color>,
val borderColor: List<Color>,
val angle:Float = 0f,
val borderWidth: Int,
val cornerRadius: Int,
val textStyle: TextStyle = TextStyle(fontWeight = FontWeight.Bold, fontSize = 30.sp)
)
size
: size of each input field.backColor
: input fields background color (list of one color means solid color and list of tow colors means gradient)borderColor
: input fields border color (list of one color means solid color and list of tow colors means gradient)angle
: angle of background and border gradient
borderWidth
: input fields border widthcornerRadius
: input fields corner radiustextStyle
: input field text stye
the OTPManViewModel construction has 4 different states like below:
OTPManViewModel(
count = 5,
mode = ChipMode.Square,
animationType = AnimationType.Shake,
normal = DataModelChip(...),
selected = DataModelChip(...),
verified = DataModelChip(...),
error = DataModelChip(...)
)
normal
: when the input field is emptyselected
: when the input field is filledverified
: input field style in success modeerror
: input field style in failed mode
Mode:
in the piece of code above you can see mode
parameter
you can pass 3 different type of mode like below (default : Square):
ChipMode.Square | ChipMode.Line | ChipMode.None |
---|---|---|
Bonus: The library comes with a class named Gradients which has different type of gradients ready to use.
Gradients.gradeGray
or if you need to add opacity to these gradients, use it like below (e.g. 50% opacity) :
Gradients.gradeGray(0.5f)
OTPMan composable itself has some configurations like below:
space
: space between each input fields (default = 8dp)showRippleEffect
: show ripple effect on user touch (default = false)inputAnimationSpec
: insert and delete character animation (default : null)onValueChange
: it triggers on every changes in fields (either adding or removing a character)onAnimationDone
: it triggers after success or failed animation was doneonComplete
: it triggers when the code completely filled, either by the user or auto-reading from the SMS
Input Animation:
There is a class named InputAnimations
which contains a few example of animation for OTPMan
inputAnimationSpec
field. you can use it directly like below:
InputAnimations.slideInBottomSlideOutTop
InputAnimations.slideInBottomSlideOutBottom
InputAnimations.fadeInFadeOut
InputAnimations.fadeInSlideOutTop
InputAnimations.fadeInSlideOutBottom
InputAnimations.slideInBottomFadeOut
InputAnimations.slideInTopFadeOut
or you can make your own animation and pass it to the composable
Every screen with verification code input needs a count-down timer. you can use OTPManCountDown composable in the app's UI like below:
OTPManCountDown()
the configuration will be:
secondsInFuture
: timer in seconds (default : 120 seconds)mode
: count-down 3 different formats (default: Minute)
Seconds | Minutes | MinutesThenSeconds |
---|---|---|
- animationType: 3 different animations (default: None)
None | Fade | Slide | SlideInverse |
---|---|---|---|
prefixContent
: a String to show before the count-downpostFixContent
: a String to show after the count-downtextStyle
: style of the count-downonFinished
: it triggers when the count-down is finishedonTick
: it triggers on each secondonResend
: it triggers when the user interacts with the Resend buttonresendContent
: the content of resend button