The latest articles on DEV Community by cricCode (@criccode). https://dev.to/criccode https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F940740%2F19deb0aa-fe34-440e-aad5-ea87d941bc67.png https://dev.to/criccode en cricCode Fri, 22 Mar 2024 10:47:32 +0000 https://dev.to/criccode/web-otp-api-one-byte-explainer-50pm https://dev.to/criccode/web-otp-api-one-byte-explainer-50pm <p><em>This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.</em></p> <h2> Explainer </h2> <p>Accelerate and Simplify OTP sign in. Modify your SMS format to have <code>@{domain} #{otp}</code> on the last line. In JS invoke <code>navigator.credentials.get().then(otp)</code> with options for otp. On receiving sms, browser will prompt user for access and auto fill OTP. </p> <h2> Additional Context </h2> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API#sms_message_format">SMS format</a></li> <li>Permissions are needed to run it in iframes -&gt; <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API#controlling_access_to_the_api">Permissions</a> </li> <li>References <a href="https://developer.mozilla.org/en-US/docs/Web/API">MDN</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API">Chrome Docs</a> </li> <li>Working example from chrome docs -&gt; <a href="https://web-otp.glitch.me/">https://web-otp.glitch.me/</a> </li> </ul> frontendchallenge devchallenge javascript webdev