# Phone Number Input 

The [Phone Number Input](https://developer.incode.com/docs/phone-number-input) module verifies a user's mobile number using either [Silent Network Authentication (SNA)](https://developer.incode.com/docs/silent-network-authentication) or an SMS-based one-time password (OTP). It ensures that the user has access to a valid phone number, which can be used for identity verification, account recovery, or two-factor authentication workflows.


<Image src="https://files.readme.io/f841560df1704741d08b69bcda8909d910251206634cc67714830a44a8516567-OTPphonenumber.gif" align="center" caption="OTP Verification" />


When available, Silent Network Authentication validates the phone number directly through the user's mobile network operator, without requiring the user to enter a code. If SNA is unavailable or unsuccessful, the system automatically falls back to SMS OTP verification.


<Image src="https://files.readme.io/ed4a3ff57751f7863d0ba6b0f9142ef417f2282768f889ecf409f3576a51cd82-sna-verification.gif" align="center" caption="SNA Verification" />


This ensures both a frictionless experience and maximum verification coverage.

***

## Where it fits in the flow

Phone Number Input typically appears early in the onboarding or verification flow, often before ID and Selfie Capture modules.

Once the phone number is successfully verified (via Silent Network Authentication or SMS OTP), the user proceeds to the next step. This may include biometric verification, document capture, or additional compliance checks depending on configuration.

***

## User Flow

The sections below walk through each verification path: Silent Network Authentication first, then SMS OTP.

### Silent Network Authentication

When SNA is enabled, verification begins automatically after the user enters their phone number. If the user's carrier and device support SNA, the number is verified silently in the background. If not, the flow falls back to SMS OTP.

1. The user enters their phone number and confirms.
2. The system initiates verification.


<Image src="https://files.readme.io/9948c3ee1e85f7b8968f155e5581bdfa1e8319df2d8d6d73dabb4cc903bd20dd-user-flow.png" align="center" />


If supported by the user's carrier and device:

- A background network validation is triggered.
- No SMS is sent.
- The user does not need to enter a code.

If validation succeeds, verification completes automatically. If SNA is unavailable or unsuccessful, the flow falls back to SMS OTP.

### OTP Verification

The Phone Number Input experience guides the user from entering their phone number to completing verification via OTP.

1. The user enters their phone number and confirms.
2. The system sends a verification code via SMS.
3. The user inputs the received code to complete verification.

If the code is incorrect or expired, the flow provides clear retry options, including resending the code or editing the phone number. Once the number is successfully verified, the user advances automatically to the next module.


<Image src="https://files.readme.io/a4d6715d84d0d2b761aa8b7b0019e7f6de6be0a5355f6f121c9dd7071cbb65c1-user-flow-OTP.png" align="center" />


***

## Full Flow Map SNA

This diagram presents the full sequence of screens involved in the **Phone Number Input module**, including:

- Phone number input and country code selection
- Silent Network Authentication attempt
- SMS OTP entry (if required)
- Successful verification
- Error handling and retry paths

It visually represents both the ideal path and alternative fallback scenarios, helping teams understand all possible user interactions and system states within the module.


<Image src="https://files.readme.io/469c2bfc387877cd480c84a96be0a2416ee9fd4755a45b825e717f423c639f44-_Web_1.png" align="center" />


## Full Flow Map OTP

This diagram presents the full sequence of screens involved in the **Phone Number Input** module, from initial input, country code selection, and OTP entry, to successful verification or error handling.

It visually represents both the ideal path and alternative error or retry paths, helping teams understand all possible user interactions and system states within the module.


<Image src="https://files.readme.io/3ca6b58c961c4ef5f09ab7e8d7254dee572458029d9e03658fb1cbeb5aca1799-_iOS.png" align="center" />


***

## Happy Path (Light & Dark) SNA

When Silent Network Authentication is available, the happy path is fully automatic. The user enters their phone number and advances without entering a code.


<Image src="https://files.readme.io/4a696c82f0b63696be0096d6cd86e392c1a088b2bc3b77e9d9ed6dd019d320e0-happy-path-light.png" alt="Phone Number Input module - Happy Path in Light mode" align="center" caption="Light mode" />


<br />


<Image src="https://files.readme.io/6aa2c7156f0dbf8fbf5a03a59be66d6cf3daa86b2a856ffad93b8267142a8e21-happy-path-dark.png" alt="Phone Number Input module - Happy Path in Dark mode" align="center" caption="Dark mode" />


## Happy Path (Light & Dark) OTP

The ideal user journey when the phone number is entered and verified successfully with no interruptions.

The happy path represents the smoothest experience: the user inputs a valid phone number, receives the SMS code instantly, enters it correctly, and proceeds without retries.

Both light and dark mode previews are included so design, product, and engineering teams can validate visual consistency and accessibility across themes.


<Image src="https://files.readme.io/029fa9884a417dc19e5c74080cb368a19020d2395cd5100ac5a75461b3c93693-happy-path-lightOTP.png" alt="Phone Number Input module - Happy Path in Light mode" align="center" caption="Light mode" />


<br />


<Image src="https://files.readme.io/018c04c8a39d564432759c0d197e2ac5ac2ec7e757502d132d657c5c820b49dc-happy-path-darkOTP.png" alt="Phone Number Input module - Happy Path in Dark mode" align="center" caption="Dark mode" />


***

## Best Practices

Recommended guidelines for designing and implementing the **Phone Number Input** experience.

**✅ Do**

- Keep validation instant and informative.
- Provide clear feedback after OTP code submission (success or error).
- Provide a resend option and allow time buffer for delivery.
- Clearly communicate progress during background verification for SNA.

**❌ Don't**

- Avoid long delays or silent failures.
- Create long loading states without user feedback.

<br />
