public class PhoneVerification

The two stages of verifying that a user holds a phone number: enter the number, then enter the code that arrives by SMS.

The application supplies both server calls. This component owns everything around them: the number entry, the code entry, the wait before a resend is offered, the way back to a mistyped number, and the errors either call reports.

Example

PhoneVerification verify = new PhoneVerification();
verify.setCodeSender((number, response) -> myServer.sendSms(number, response));
verify.setCodeVerifier((number, code, response) -> myServer.check(number, code, response));
verify.addVerifiedListener(e -> showMainScreen());
form.add(verify);

A sender is handed the number and a Response, and calls exactly one of Response#succeeded() or Response#failed(String) when its server answers – from any thread. Until then the button it came from stays disabled, so a second tap cannot send a second message.

The code is offered by the platform

The code field is an OtpField, so it carries the one-time-code hint and the platform offers the arriving code on the keyboard or through autofill. Nothing here reads messages, and no messaging permission is involved.

Styling

The component uses the UIID “PhoneVerification”, its explanatory lines “PhoneVerificationText”, its error line “PhoneVerificationError” and its buttons “PhoneVerificationButton” – except the resend and change-number buttons, which use “PhoneVerificationLink”.