Phone Auth Login Block for React

Everything. Sending waits 700 ms and shows the code step; no text arrives, and the six digits that pass are printed on the page (482 913). In a product, post the dial code and digits to your server where the code says so, which asks an SMS provider to deliver a one-use code that expires in minutes and limits how often one number can ask. Check the typed code on the server, never in the page.

Each country has a typed pattern, with a # for each digit and its own punctuation, a number of digits it implies and a real-looking example. Typing keeps only digits, cuts them to the country's length and pours them into the pattern, adding punctuation only once a digit follows it. Changing the country keeps the digits you typed and lays them out again. It formats national numbers only for five countries as an example: use a library such as libphonenumber for the real list, which has many more rules than a pattern per country.

Pressing Text me a code with nothing typed asks for a number; with too few digits it says how many the country's numbers have and how many you typed; for countries that dial a leading 0 at home, such as the United Kingdom, it says numbers start with 0. The message sits under the field in a line that is always reserved, the field is marked invalid and focus moves there. The button is never disabled, so keyboard users can always reach it and learn what is missing.

In international form, which drops the leading 0 that is dialled only at home: 07400 123456 becomes +44 7400 123456, and (415) 555-0132 becomes +1 (415) 555-0132. Store numbers that way (E.164, without the punctuation) so one number never appears in two forms.

The text and layout mirror, but the field, its addon, the number in the sentence and the code slots stay left to right, because digits and dial codes read that way in every language. The country names sit inside isolates so they don't reorder around the code.

The code form has a Verify code button and that is the way to submit it. Typing the sixth digit doesn't submit by itself here; if you want that, call your verify function when the last slot fills.