I am working on auto reading a login OTP on a mobile browser. My web application is built in javascript.
This is an example of the code that always worked for me (documentation of https://web.dev/web-otp/):
<form action="/post.html">
<input autocomplete="one-time-code" required />
<input type="submit" />
</form>
<script>
if ("OTPCredential" in window) {
window.addEventListener("DOMContentLoaded", (e) => {
const input = document.querySelector(
'input[autocomplete="one-time-code"]'
);
if (!input) return;
const ac = new AbortController();
const form = input.closest("form");
if (form) {
form.addEventListener("submit", (e) => {
ac.abort();
});
}
navigator.credentials
.get({
otp: { transport: ["sms"] },
signal: ac.signal,
})
.then((otp) => {
input.value = otp.code;
if (form) form.submit();
})
.catch((err) => {
alert(err);
});
});
}
</script>
But now I applied it on a landing page that works in a test port and the permission message to copy text from google comes out but it does not autocomplete. the url of the landing: https://example.com:1443/traffic/landing/
the sms message is
Your PIN is: 12345.
@ example.com # 12345
Note: I already did other work with OPT in url with port 8080 and never had this problem in CHROME browser. Example: https://example.com/traffic/landing/