rci — A clever React Component for One-Time Passwords (OTP)

This content originally appeared on Bram.us and was authored by Bramus!

rci is a React component that ask for a one time password, in a pretty clever way.

rci uses a single DOM input element, overlayed on top of plain divs for styling.

Most other implementations of this pattern are based on multiple inputs. Using multiple inputs gives out-of-the-box style consistency, but comes with the disadvantage of JavaScript hacks to deal with focus shifting and pasting, and accessibility issues.

By starting from one input, rci can also make use of autocomplete="one-time-code" to autocomplete one-time passwords.

rci — better code inputs for the web →
rci Demo →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2022-01-07T16:44:49+00:00) rci — A clever React Component for One-Time Passwords (OTP). Retrieved from https://www.scien.cx/2022/01/07/rci-a-clever-react-component-for-one-time-passwords-otp/

MLA

" » rci — A clever React Component for One-Time Passwords (OTP)." Bramus! | Sciencx - Friday January 7, 2022, https://www.scien.cx/2022/01/07/rci-a-clever-react-component-for-one-time-passwords-otp/

HARVARD

Bramus! | Sciencx Friday January 7, 2022 » rci — A clever React Component for One-Time Passwords (OTP)., viewed ,<https://www.scien.cx/2022/01/07/rci-a-clever-react-component-for-one-time-passwords-otp/>

VANCOUVER

Bramus! | Sciencx - » rci — A clever React Component for One-Time Passwords (OTP). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/07/rci-a-clever-react-component-for-one-time-passwords-otp/

CHICAGO

" » rci — A clever React Component for One-Time Passwords (OTP)." Bramus! | Sciencx - Accessed . https://www.scien.cx/2022/01/07/rci-a-clever-react-component-for-one-time-passwords-otp/

IEEE

" » rci — A clever React Component for One-Time Passwords (OTP)." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2022/01/07/rci-a-clever-react-component-for-one-time-passwords-otp/. [Accessed: ]

rf:citation

» rci — A clever React Component for One-Time Passwords (OTP) | Bramus! | Sciencx | https://www.scien.cx/2022/01/07/rci-a-clever-react-component-for-one-time-passwords-otp/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.