{"id":18111914,"url":"https://github.com/philnash/web-otp-input","last_synced_at":"2025-04-14T03:34:11.481Z","repository":{"id":64037833,"uuid":"556580707","full_name":"philnash/web-otp-input","owner":"philnash","description":"A custom element to make it really easy to use the WebOTP API","archived":false,"fork":false,"pushed_at":"2022-12-01T04:41:54.000Z","size":7,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T17:37:03.722Z","etag":null,"topics":["2fa","custom-element","two-factor-authentication","web-component","webotp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/philnash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-24T05:48:13.000Z","updated_at":"2025-02-27T12:36:35.000Z","dependencies_parsed_at":"2023-01-14T19:45:51.378Z","dependency_job_id":null,"html_url":"https://github.com/philnash/web-otp-input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philnash%2Fweb-otp-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philnash%2Fweb-otp-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philnash%2Fweb-otp-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philnash%2Fweb-otp-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/philnash","download_url":"https://codeload.github.com/philnash/web-otp-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248537136,"owners_count":21120709,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2fa","custom-element","two-factor-authentication","web-component","webotp"],"created_at":"2024-11-01T01:08:33.403Z","updated_at":"2025-04-14T03:34:11.457Z","avatar_url":"https://github.com/philnash.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv style=\"text-align:center\" align=\"center\"\u003e\n  \u003ch1\u003e📲 \u003ccode\u003e\u0026lt;web-otp-input\u0026gt;\u003c/code\u003e 💬\u003c/h1\u003e\n\n  \u003cp\u003e\u003cem\u003eA web component that implements the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API\"\u003eWebOTP API\u003c/a\u003e so you don't have to.\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n## About\n\nSending 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.\n\nWhen you include the `web-otp-input` script on your page, you can wrap a `\u003cweb-otp-input\u003e` custom element around the `\u003cinput\u003e` 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 `\u003cinput\u003e` and automatically submitting the form.\n\n## Browser support\n\nThis requires support for:\n\n* Custom elements - https://caniuse.com/custom-elementsv1\n* `OTPCredential` - https://developer.mozilla.org/en-US/docs/Web/API/OTPCredential\n\n## Usage\n\nIn 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:\n\n```\n@example.com #123456\n```\n\nThat 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.\n\nThen you need a space, a `#` symbol and then the one time code.\n\nOnce you have the message set up correctly, you can add the web component to the page.\n\n### Installation and import instructions\n\nIf you are using npm, you can install the component to your application with:\n\n```\nnpm i @philnash/web-otp-input\n```\n\nThen import the component with:\n\n```js\nimport { WebOTPInput } from \"@philnash/web-otp-input\";\n```\n\nThat will register the `\u003cweb-otp-input\u003e` element for the page.\n\nAlternatively, you can include the script on the page as an ES module, for example with unpkg:\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/@philnash/web-otp-input\"\u003e\u003c/script\u003e\n```\n\nOnce that is loaded, it will register the web component.\n\n### Using the web component\n\nYou should have a form on the page with an input element that is ready for the code. Wrap the `\u003cweb-otp-input\u003e` element around your input element and that is all you need to do.\n\n```html\n\u003cform action=\"/verification\" method=\"POST\"\u003e\n  \u003cdiv\u003e\n    \u003clabel for=\"otp\"\u003eEnter your code:\u003c/label\u003e\n    \u003cweb-otp-input\u003e\n      \u003cinput type=\"text\" autocomplete=\"one-time-code\" inputmode=\"numeric\" id=\"otp\" name=\"otp\" /\u003e\n    \u003c/web-otp-input\u003e\n  \u003c/div\u003e\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\nWhen 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.\n\n## License\n\nMIT (c) 2022 Phil Nash","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilnash%2Fweb-otp-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphilnash%2Fweb-otp-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilnash%2Fweb-otp-input/lists"}