https://github.com/philnash/web-otp-input
A custom element to make it really easy to use the WebOTP API
https://github.com/philnash/web-otp-input
2fa custom-element two-factor-authentication web-component webotp
Last synced: 6 months ago
JSON representation
A custom element to make it really easy to use the WebOTP API
- Host: GitHub
- URL: https://github.com/philnash/web-otp-input
- Owner: philnash
- License: mit
- Created: 2022-10-24T05:48:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-01T04:41:54.000Z (almost 3 years ago)
- Last Synced: 2025-03-27T17:37:03.722Z (6 months ago)
- Topics: 2fa, custom-element, two-factor-authentication, web-component, webotp
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## About
Sending one time password codes over SMS is one way to implement two factor authentication in order to improve user account security. But it is a process that adds friction to the sign in experience. The Web OTP allows developers to request access to one time passwords contained within incoming SMS messages and use them, turning SMS two factor authentication into a one click/touch process.
When you include the `web-otp-input` script on your page, you can wrap a `` custom element around the `` for your OTP code. If your user is on a device that supports the WebOTP API, then when an SMS message with the verification code arrives, the user will be prompted to enter the code from the SMS with a single permissions acceptance. The custom element handles entering the code into the `` and automatically submitting the form.
## Browser support
This requires support for:
* Custom elements - https://caniuse.com/custom-elementsv1
* `OTPCredential` - https://developer.mozilla.org/en-US/docs/Web/API/OTPCredential
## Usage
In order to use the WebOTP API, you first need to update the text of the SMS message you use to send the one time password. You need to add an extra line at the end of the message that looks like this:
```
@example.com #123456
```
That is, you need an `@` symbol followed by the domain that the user will be signing in to. This helps reduce phishing of two factor authentication messages by only showing this permissions dialog on domains that are also contained within the message like this.
Then you need a space, a `#` symbol and then the one time code.
Once you have the message set up correctly, you can add the web component to the page.
### Installation and import instructions
If you are using npm, you can install the component to your application with:
```
npm i @philnash/web-otp-input
```
Then import the component with:
```js
import { WebOTPInput } from "@philnash/web-otp-input";
```
That will register the `` element for the page.
Alternatively, you can include the script on the page as an ES module, for example with unpkg:
```html
```
Once that is loaded, it will register the web component.
### Using the web component
You should have a form on the page with an input element that is ready for the code. Wrap the `` element around your input element and that is all you need to do.
```html
Enter your code:
Submit
```
When the user comes to this page, if their browser supports it and an OTP code arrives, they will be prompted to read the code from the message and if they approve, the code will be autofilled in the input and the form will be submitted. Slick two factor authentication with one extra web component.
## License
MIT (c) 2022 Phil Nash