title: Autoread OTP in web and copy paste OTP from clipboard in web not working for android/iOS
body: <p>I'm using <strong>Ionic React</strong> application and completely new to building ionic react apps.
  Currently I'm trying to autofill OTP(One Time Password) by fetching the <code>OTP</code> through message's of <strong>android/iOS</strong> during the login/signup of user.
  Currently the OTP is being sent to user on every new signup /login through <code>Twilio's</code> default SMS service. So when the OTP arrives to the user , then the user can either type the OTP manually or copy the OTP from messages and paste the same in the web application.
  So currently the user is able copy the OTP from message and paste ( there is <strong>handlePaste</strong> function which will get triggered ), but the</p>
  <p><strong>Issue what I'm facing</strong></p>
  <ul>
  <li>is when the OTP arrives , then the suggestion of OTP in keyboard of the mobile doesn't show up in android but working in iOS.</li>
  <li>When the user copies the OTP from messages and comes back to the application and clicks on input field , then the web keyboard shows the OTP copied in keyboard. Now if the user clicks on that OTP then <strong>only the 1st field of the input field gets populated and the other fields are left blank (using 4 separate input fields)</strong> and the <strong>handlePaste</strong> function doesn't gets triggered.</li>
  <li>I tried adding console/alert inside paste function , but nothing gets logged.</li>
  </ul>
  <p><strong>SMS FORMAT</strong></p>
  <pre><code>Your OTP is: 123456.
  
  @domain.com #123456
  
  </code></pre>
  <p><strong>Approaches tried so far :</strong></p>
  <ul>
  <li><p><strong>Added the HTML attributes</strong> <code>autocomplete='one-time-code'</code> to fetch the OTP from Messages .
  Reference link :
  <a href="https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element?language=objc" rel="nofollow noreferrer">https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element?language=objc</a></p>
  </li>
  <li><p>Used <code>clipboardData.getData</code> to achieve the same.</p>
  </li>
  <li><p><strong>Domain bound the codes</strong> and adding the file apple-app-site-association file ,
  Reference link :
  <a href="https://developer.apple.com/documentation/xcode/supporting-associated-domains" rel="nofollow noreferrer">https://developer.apple.com/documentation/xcode/supporting-associated-domains</a></p>
  </li>
  <li><p>Integrate <strong>webOTP</strong> API into the app.
  Reference link to integrate the same.
  <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API</a> and chrome docs
  <a href="https://developer.chrome.com/blog/cross-device-webotp/" rel="nofollow noreferrer">https://developer.chrome.com/blog/cross-device-webotp/</a></p>
  </li>
  <li><p>Used <code>navigator.getCredentials</code> to obtain OTP - didn't work.</p>
  </li>
  </ul>
  <p><strong>handlePaste</strong> function code :</p>
  <pre><code>const length = 6;
  const [activeInput, setActiveInput] = useState(0)
  const [otpValues, setOTPValues] = useState(Array&lt;string&gt;(length).fill(''))
  
  
      const handleOnPaste = 
      (e: React.ClipboardEvent&lt;HTMLInputElement&gt;) =&gt; {
          e.preventDefault()
          const pastedData = e.clipboardData
              .getData('text/plain')
              .trim()
              .slice(0, length - activeInput)
              .split('')
          if (pastedData) {
              let nextFocusIndex = 0
              const updatedOTPValues = [...otpValues]
              updatedOTPValues.forEach((val, index) =&gt; {
                  
                      console.log(pastedData)
                          nextFocusIndex = index
                      
                  
              })
              setActiveInput(Math.min(nextFocusIndex + 1, length - 1))
          }
      }
  </code></pre>
  <p><strong>Navigator credentials</strong> code which is used inside the function but didn't work :</p>
  <pre><code>navigator.credentials.get({
    otp: { transport:['sms'] },
    signal: ac.signal
  }).then((otp) =&gt; {
    console.log(otp)
    
  }).catch((err) =&gt; {
    console.error(err);
  });
  
  
  </code></pre>
  <p>I would really appreciate if someone could help me out :)</p>