One-time passcode
A text field paired with CTAs enabling users to a request single-use code to authenticate a transaction or session.
Task flows refer to the steps users progress through when interacting with patterns. They’re based on specific scenarios and demonstrate how users can successfully perform tasks within each pattern layout. To find prototypes for the task flow examples shown on this page, visit our Task flows (internal only).
Verification task flows
In verification flows, users are either completing the initial setup of their account information or using their verification method after setup. User success in this flow type is illustrated by the following scenarios.
Registering verification method
To verify their identity, the user must first set up a verification method. This initiates the verification process for their account and may follow account setup, recovery, or security settings for 2-step authentication.
Verifying identity with verification method
After setting up at least one verification method, the user can initiate the flow to verify their identity. They will be prompted with a step up to verify their account or identity with an OTP.
Selecting verification method
If the user has set up multiple verification methods, they can select which one they wish to use to verify their account. Verification methods may vary depending on the product.
Resend task flows
In resend flows, users are requesting a new verification code to be sent to them. User success in this flow type is illustrated by the following scenarios.
30s timer countdown after Resend was initiated. Debounce when the user requests new OTP through “Resend.” Disable “Resend” after press.
Resending code through same method
The user chooses to have a new code sent through the same method they used the first time.
Resending code through alternate method
The user chooses to have a new code sent through a different method.
Validation task flows
Validation flows illustrate user attempts to verify their identities and error pathways preventing success. To learn more about client-side validation and server-side validation, refer to Forms.
Client-side validation
Tabbing out of input field
When tabbing out of the input field before attempting to confirm the code, the user receives feedback stating that they didn’t enter all 6 digits.
Submitting incomplete form
After entering an incomplete code or no code at all and attempting to submit, the user receives feedback instructing them to properly fill out the erroneous field.
Server-side validation
Submitting incorrect code
The user submitted the incorrect code and is instructed to re-enter it correctly.
Submitting expired code
The user submits an expired code and receives feedback instructing them to request a new OTP.
Maxing out code entry attempts
The user entered the code incorrectly and reached the maximum number of attempts with the current code. They can verify their identity with a new code.
Maxing out identity verification attempts
The user has reached the maximum number of attempts to confirm their identity after entering mismatched data on three different codes. They can no longer confirm their identity on that device.
