DEV Community

Cover image for How to auto-read SMS/OTP in react native without permission?
Jyotishman Saikia
Jyotishman Saikia

Posted on

How to auto-read SMS/OTP in react native without permission?

Gone are those days when the entire SMS read permission is taken only just for getting the OTP for login or check purposes.

dev image

Google just released an API called SMS Retriever API that allows you to fetch the SMS without any permission from the app.

So, basically on android device permissions are categorized into 2 categories-

  1. Normal permission
  2. Dangerous permission

SMS permission like (READ_SMS, WRITE_SMS, SEND_SMS) comes under dangerous permission. That means whenever the app is asking for such dangerous permission the app gets rejected while publishing to play store. Hence the SMS Retriever API comes into the picture.
Instead of taking the entire SMS Permission only for a single OTP, it's great to use the API and get rid of app rejection from google play store. So, let's get started on how we build this feature on react native-

  1. The first step before starting is we should know the SMS rules for the API to work correctly. A valid verification message might look like the following: ```

<#> Your Example app code is: 123ABC78 /f8Escobih1Z


2. The last 11 digits alphanumeric character is the unique hash generated for the app. That 11 digits unique character is the main key where google play services listen for the SMS using the SMS Retriever API. 

3. If you don't know how to get the unique 11 digit hash of your app  [read this article.](https://dev.to/jyotishman/how-to-generate-11-char-hash-key-for-sms-retriever-2ag4)

4. Once we know the 11 digit hash and we have configured the SMS like the template mentioned on point 1 we are ready to listen to the OTP.

5. To start listening to our SMS/OTP we will need an npm package to perform the task. 
React Native SMS Retriever is the best plugin with clear documentation where we can detect the user phone as well as listen to SMS. To know more about how to use this package [read this article.](https://www.npmjs.com/package/react-native-sms-retriever)





Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
martinfulop2 profile image
Martin Fulop

What would be the iOS equivalent?

Collapse
 
jyotishman profile image
Jyotishman Saikia

ios doesn't allow auto read sms .

Collapse
 
martinfulop2 profile image
Martin Fulop

textContentType property on the TextField can be set to oneTimeCode to support this (iOS 12+)

Collapse
 
kdfemi profile image
MiniSoda

Will the hash code be hidden from the sms from the user?

Collapse
 
jyotishman profile image
Jyotishman Saikia

No unique hash will be there in the sms