# Login with OTP

{% hint style="success" %}
**Prerequisites:**\
The resident is issued with a unique virtual ID for a country's foundation ID. In the below demo application, which is a health portal, the resident is registered with MOSIP and has a valid UIN or VID.
{% endhint %}

1\. On the portal, the resident clicks on the button ***Sign In with eSignet***.

<figure><img src="https://3349261888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylzvZHp30DQ3rNCClELV%2Fuploads%2Fgit-blob-bd9fb62fd90083b58552e802c88f3a41c61b58f0%2FHealth%20services%20home%20page.png?alt=media" alt=""><figcaption><p>Sign in with eSignet</p></figcaption></figure>

The login screen appears and the resident is displayed with the options they can choose for login.

2\. To get started with login with OTP authentication, the resident clicks on ***Login with OTP*** option.

<figure><img src="https://3349261888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylzvZHp30DQ3rNCClELV%2Fuploads%2Fgit-blob-4ff7f00ea50a1d0865f2b5e43995da837e14023d%2Flogin%20with%20otp.png?alt=media" alt=""><figcaption><p>Login with OTP</p></figcaption></figure>

3\. The resident needs to enter a valid VID in the ***Enter Your VID*** text field and check the box 'I'm not a robot'.

The OTP-based authentication is now secured with a captcha.

<figure><img src="https://3349261888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylzvZHp30DQ3rNCClELV%2Fuploads%2Fgit-blob-2f53d9de253d225368195b1c11a2dcfdd5b32a57%2Fenter%20your%20vid.png?alt=media" alt=""><figcaption><p>Enter your UIN/VID</p></figcaption></figure>

4\. Next, the resident clicks on the ***Get OTP*** button.

<figure><img src="https://3349261888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylzvZHp30DQ3rNCClELV%2Fuploads%2Fgit-blob-65ea8ad0d38fe707709421809498742b69a69513%2FEnter%20VID.png?alt=media" alt=""><figcaption><p>Get OTP Page</p></figcaption></figure>

5\. The resident receives the OTP on the registered channel (either by phone or email).

6\. The resident needs to enter the valid OTP received and click on the ***Verify*** button.

<figure><img src="https://3349261888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylzvZHp30DQ3rNCClELV%2Fuploads%2Fgit-blob-d0ad56dfb1fb6857065027e39ea8f06878e2d2b1%2FVerify%20OTP.png?alt=media" alt=""><figcaption><p>Verify OTP</p></figcaption></figure>

7\. The resident is then navigated to the Consent page. On this page, the **Essential** and **Voluntary** claims are displayed.

<figure><img src="https://3349261888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylzvZHp30DQ3rNCClELV%2Fuploads%2Fgit-blob-c7f74be90a97f8212289fffb7757a0c6a2fa900d%2Fvoluntary%20cliams.png?alt=media" alt=""><figcaption><p>Voluntary Claims page</p></figcaption></figure>

{% hint style="info" %}
The consent screen is presented solely to the resident if consent has not previously been obtained. Additionally, a timer is incorporated into the Consent screen, allowing the resident to respond within the designated time frame. If the allotted time elapses, residents will be redirected to the relying party user interface.
{% endhint %}

8\. The resident is given the option to choose from a list of Authorized scopes and Voluntary claims. The Essential claims are mandatory and cannot be modified. A **master toggle button** has been added to allow residents to select all the options at once if desired.

<figure><img src="https://3349261888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylzvZHp30DQ3rNCClELV%2Fuploads%2Fgit-blob-a4ebb25423637f74e7de71eb8226fae03aec9c9a%2FClaims.png?alt=media" alt=""><figcaption><p>Vlountary Claims page</p></figcaption></figure>

9\. The resident should now click the ***Allow*** button. The system navigates the resident to the **User Profile** page which displays all the personal information based on the consent provided.

<figure><img src="https://3349261888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylzvZHp30DQ3rNCClELV%2Fuploads%2Fgit-blob-376232d6c5ef6ee40520620848b495d9210474f6%2FProfile%20page.png?alt=media" alt=""><figcaption><p>Profile page</p></figcaption></figure>
