I am working on a login process using OTP for a PWA built-in using react.
I want to auto-fill my OTP. I was wondering if anyone knew something that could lead me in the right direction about this.
3 Answers
There is a draft specification for a Web OTP API.
The Web OTP API lets your app receive specially-formatted messages bound to your app's origin. From this, you can programmatically obtain an OTP from an SMS message and verify a phone number for the user more easily.
Just to be sure sms should be in correct format. Below is the code which i put into componentDidMount and it works.
import "./styles.css";
import React from "react";
export default class App extends React.Component {
state = {
otp: ""
};
componentDidMount() {
if ("OTPCredential" in window) {
const ac = new AbortController();
navigator.credentials
.get({
otp: { transport: ["sms"] },
signal: ac.signal
})
.then((otp) => {
this.setState({ otp: otp.code });
ac.abort();
})
.catch((err) => {
ac.abort();
console.log(err);
});
}
}
render() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Your OTP is: {this.state.otp}</h2>
</div>
);
}
}
It always prompt whenever a sms received.
And will display otp on screen.
Open the CodeSandbox link in chrome mobile browser and send the below sms to your device
Hi this is a login otp: 9299
@t0hj4.csb.app #9299
Yes, this is possible now. Chrome release this feature in version 84 and above. With the help of WEBOTP API, we can detect OTP on the web for mobile devices.
Here is the example of Angular PWA: Here is a Web-OTP integrated code with Angular PWA Apps: https://github.com/Rohit3230/webOtpAutoReadByAngular
Go for live working URL for angular PWA app. https://rohit3230.github.io/webOtpAutoReadByAngular/
Related