{"id":57744,"date":"2023-07-18T16:28:46","date_gmt":"2023-07-18T10:58:46","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=57744"},"modified":"2023-08-01T16:34:29","modified_gmt":"2023-08-01T11:04:29","slug":"using-webotp-api-in-nextjs-react","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/using-webotp-api-in-nextjs-react\/","title":{"rendered":"Using WebOtp API in Nextjs \/ React"},"content":{"rendered":"<p>In today&#8217;s applications, we have observed that when logging in or performing sensitive tasks online, we receive One time passwords on our registered phone numbers to secure this activity. But as a user, it is a bit vexing to remember that code and then type that into the required fields. At the same time, we may be able to auto-detect these SMS on native apps for Android or ios, Web-based applications users do not. But this is now possible with the help of WebOTP API; it gives websites the ability to programmatically obtain the one-time password from an SMS message and automatically fill the form for users with just one tap without switching apps.<\/p>\n<h3>How does it work?<\/h3>\n<p>Using the WebOTP API consists of three parts:<\/p>\n<ul>\n<li>A properly annotated &lt;input&gt; tag<\/li>\n<li>JavaScript in your web app<\/li>\n<li>Formatted message text sent via SMS.<\/li>\n<\/ul>\n<h3>A Properly Annotated Input Tag<\/h3>\n<p>&gt; Add <code>autocomplete=\"one-time-code\"<\/code>\u00a0to the\u00a0<code>&lt;input&gt;<\/code> tag where the OTP should be entered.<\/p>\n<pre>Example: &lt;input autocomplete='one-time-code' \/&gt;<\/pre>\n<h4>Javascript Code<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-57741 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/07\/Screenshot-from-2023-07-11-11-19-04.png\" alt=\"Useeffect code\" width=\"741\" height=\"374\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/07\/Screenshot-from-2023-07-11-11-19-04.png 741w, \/blog\/wp-ttn-blog\/uploads\/2023\/07\/Screenshot-from-2023-07-11-11-19-04-300x151.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/07\/Screenshot-from-2023-07-11-11-19-04-624x315.png 624w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/><\/p>\n<p>Make sure to use ac.abort() after completion of the login process \/ running out of Otp entering time.<\/p>\n<p>We can wrap our code with if (&#8216;OTPCredential&#8217; in window){ \/* Code *\/} to use feature detection of WebOTP API.<\/p>\n<h2>SMS Format<\/h2>\n<p>&gt; The message begins with (optional) human-readable text that contains a four to ten-character alphanumeric string with at least one number leaving the last line for the URL and the OTP.<br \/>\n&gt; The domain part of the URL of the website that invoked the API must be preceded by @.<br \/>\n&gt; The URL must contain a pound sign (&#8216;#&#8217;) followed by the OTP.<\/p>\n<p>Example :<\/p>\n<p>Your OTP is: 123456.<\/p>\n<p>@www.yourdomain.com #123456<\/p>\n<p>Now that our code is ready, Let&#8217;s say you have entered the correct login details; you will receive an OTP on your registered SMS. To test this code, you can send an SMS from another phone to the phone where you are testing.<\/p>\n<p>Make sure that:<\/p>\n<ol>\n<li>RCS is off.<\/li>\n<li>That phone number should not be on your contacts list.<\/li>\n<li>The SMS format should be valid with the correct domain name.<\/li>\n<\/ol>\n<p class=\"c-mrkdwn__hex\">Once you receive the SMS, You will get a popup asking you to allow the web app to read your received SMS, If the SMS format is correct, your business logic should work as expected.<\/p>\n<p>Comment down in the comment section if you have any questions related to the process.<\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>In today&#8217;s applications, we have observed that when logging in or performing sensitive tasks online, we receive One time passwords on our registered phone numbers to secure this activity. But as a user, it is a bit vexing to remember that code and then type that into the required fields. At the same time, we [&hellip;]<\/p>\n","protected":false},"author":1540,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":215},"categories":[3429,3038],"tags":[5282],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57744"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1540"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=57744"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57744\/revisions"}],"predecessor-version":[{"id":57880,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57744\/revisions\/57880"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=57744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=57744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=57744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}