# Identity & Access / OTP Verification OTP verification patterns for secure identity confirmation in government services. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-otp-verification--column ## Pattern variants - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-otp-verification--column - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-otp-verification--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-otp-verification--card ## When to use this pattern Use Identity & Access / OTP Verification when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Identity & Access / OTP Verification. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Reset Password - Mobile Number HTML: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample1Demo = () => ( <>
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

+91
OR
error_outline
Most services use OTP login so you may not need a password.
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample1Demo; ``` Angular: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` ### 2. Card — Reset Password - OTP Entry HTML: ```html
arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample2Demo = () => ( <>
arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

Didn't receive OTP? Resend in 00:17
OTP is valid for 10 minutes
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample2Demo; ``` Angular: ```html
arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

Powered by -
``` ### 3. Card — Reset Password - Create New Password HTML: ```html
arrow_back Back

Create new password

Your new password must be different from previous used password

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample3Demo = () => ( <>
arrow_back Back

Create new password

Your new password must be different from previous used password

visibility
visibility
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample3Demo; ``` Angular: ```html
arrow_back Back

Create new password

Your new password must be different from previous used password

Powered by -
``` ### 4. Card — Success - Password Reset HTML: ```html
done

Password reset successfully

Your password has been changed successfully. Use your new password to log in.

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample4Demo = () => ( <>
done

Password reset successfully

Your password has been changed successfully. Use your new password to log in.

{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample4Demo; ``` Angular: ```html
done

Password reset successfully

Your password has been changed successfully. Use your new password to log in.

Powered by -
``` ### 5. Card — Account Recovery - Email HTML: ```html
arrow_back Back

Account recovery

Enter your registered email address to recover your account.

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample5Demo = () => ( <>
arrow_back Back

Account recovery

Enter your registered email address to recover your account.

{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample5Demo; ``` Angular: ```html
arrow_back Back

Account recovery

Enter your registered email address to recover your account.

Powered by -
``` ### 6. Card — OTP Entry - Active Timer HTML: ```html

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample6Demo = () => ( <>
{/* Centered White Card Form Box */}

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots) */}
Didn't receive OTP? Resend in 00:17
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample6Demo; ``` Angular: ```html

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 7. Card — OTP Expired - Resend Available HTML: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample7Demo = () => ( <>
{/* Centered White Card Form Box */}
{/* Back navigation link */} arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots, active Resend OTP link) */}
Didn't receive OTP? Resend OTP
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample7Demo; ``` Angular: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 8. Card — Error - Incorrect OTP (Attempt 1) HTML: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample8Demo = () => ( <>
{/* Centered White Card Form Box */}
{/* Back navigation link */} arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots, error state) */}
{/* Warning Alert Block */}
error
Incorrect OTP
1 more incorrect entry before 30-min lockout Attempt 1 of 3
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample8Demo; ``` Angular: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 9. Card — Error - Incorrect OTP (Last Attempt) HTML: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample9Demo = () => ( <>
{/* Centered White Card Form Box */}
{/* Back navigation link */} arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots, error state) */}
{/* Warning Alert Block */}
error
Incorrect OTP
This is your last attempt before a 30-min lockout Attempt 2 of 3
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample9Demo; ``` Angular: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 10. Card — Locked - Too Many Attempts HTML: ```html
arrow_back Back
lock

Too many incorrect attempts

Locked for 28:43 Resend OTP
error
Account locked. Please wait for the countdown to complete
Need help? Call 1800-XXX-XXXX
Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample10Demo = () => ( <>
{/* Centered White Card Form Box */}
{/* Back navigation link */} arrow_back Back
{/* Circular Red Badge with Lock */}
lock

Too many incorrect attempts

{/* OTP Input Block Component (6 slots, disabled state) */}
lock Locked for 28:43 Resend OTP
{/* Error Alert Block */}
error
Account locked. Please wait for the countdown to complete
{/* Help Link */}
Need help? Call 1800-XXX-XXXX
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample10Demo; ``` Angular: ```html
arrow_back Back
lock

Too many incorrect attempts

Locked for 28:43 Resend OTP
error
Account locked. Please wait for the countdown to complete
Need help? Call 1800-XXX-XXXX
Powered by -
``` ### 11. Card — Success - Verified HTML: ```html
done

Verified!

Redirecting you to your dashboard...

Verification successful
Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample11Demo = () => ( <>
{/* Centered White Card Form Box */}
{/* Circular Green Badge with checkmark */}
done

Verified!

Redirecting you to your dashboard...

{/* OTP Input Block Component (6 slots, success state) */}
done Verification successful
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample11Demo; ``` Angular: ```html
done

Verified!

Redirecting you to your dashboard...

Verification successful
Powered by -
``` ### 12. Column — OTP Entry - Active Timer HTML: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample12Demo = () => ( <>
{/* Left Panel (Sidebar - hidden on Mobile) */}
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
{/* Right Panel (Form panel) */}

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots) */}
Didn't receive OTP? Resend in 00:17
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample12Demo; ``` Angular: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 13. Column — OTP Expired - Resend Available HTML: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample13Demo = () => ( <>
{/* Left Panel (Sidebar - hidden on Mobile) */}
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
{/* Right Panel (Form panel) */}
{/* Back navigation link */} arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots, active Resend OTP link) */}
Didn't receive OTP? Resend OTP
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample13Demo; ``` Angular: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 14. Column — Error - Incorrect OTP (Attempt 1) HTML: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample14Demo = () => ( <>
{/* Left Panel (Sidebar - hidden on Mobile) */}
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
{/* Right Panel (Form panel) */}
{/* Back navigation link */} arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots, error state) */}
{/* Warning Alert Block */}
error
Incorrect OTP
1 more incorrect entry before 30-min lockout Attempt 1 of 3
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample14Demo; ``` Angular: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 15. Column — Error - Incorrect OTP (Last Attempt) HTML: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample15Demo = () => ( <>
{/* Left Panel (Sidebar - hidden on Mobile) */}
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
{/* Right Panel (Form panel) */}
{/* Back navigation link */} arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots, error state) */}
{/* Warning Alert Block */}
error
Incorrect OTP
This is your last attempt before a 30-min lockout Attempt 2 of 3
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample15Demo; ``` Angular: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 16. Column — Locked - Too Many Attempts HTML: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
arrow_back Back
lock

Too many incorrect attempts

Locked for 28:43 Resend OTP
error
Account locked. Please wait for the countdown to complete
Need help? Call 1800-XXX-XXXX
Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample16Demo = () => ( <>
{/* Left Panel (Sidebar - hidden on Mobile) */}
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
{/* Right Panel (Form panel) */}
{/* Back navigation link */} arrow_back Back
{/* Circular Red Badge with Lock */}
lock

Too many incorrect attempts

{/* OTP Input Block Component (6 slots, disabled state) */}
lock Locked for 28:43 Resend OTP
{/* Error Alert Block */}
error
Account locked. Please wait for the countdown to complete
{/* Help Link */}
Need help? Call 1800-XXX-XXXX
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample16Demo; ``` Angular: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
arrow_back Back
lock

Too many incorrect attempts

Locked for 28:43 Resend OTP
error
Account locked. Please wait for the countdown to complete
Need help? Call 1800-XXX-XXXX
Powered by -
``` ### 17. Column — Success - Verified HTML: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
done

Verified!

Redirecting you to your dashboard...

Verification successful
Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample17Demo = () => ( <>
{/* Left Panel (Sidebar - hidden on Mobile) */}
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
{/* Right Panel (Form panel) */}
{/* Circular Green Badge with checkmark */}
done

Verified!

Redirecting you to your dashboard...

{/* OTP Input Block Component (6 slots, success state) */}
done Verification successful
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample17Demo; ``` Angular: ```html
UX4G Logo

Secure Digital Access to Government Services

Access certificates, documents, and identity verification seamlessly across all government platforms through a unified citizen login.

TRUSTED BY 800M+ Citizens
AVAILABLE SERVICES 5000+ Integrated
done

Verified!

Redirecting you to your dashboard...

Verification successful
Powered by -
``` ### 18. Full Screen — OTP Entry - Active Timer HTML: ```html

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample18Demo = () => ( <>
{/* Main Panel (Centered) */}

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots) */}
Didn't receive OTP? Resend in 00:17
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample18Demo; ``` Angular: ```html

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 19. Full Screen — OTP Expired - Resend Available HTML: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample19Demo = () => ( <>
{/* Main Panel (Centered) */}
{/* Back navigation link */} arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots, active Resend OTP link) */}
Didn't receive OTP? Resend OTP
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample19Demo; ``` Angular: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 20. Full Screen — Error - Incorrect OTP (Attempt 1) HTML: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample20Demo = () => ( <>
{/* Main Panel (Centered) */}
{/* Back navigation link */} arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots, error state) */}
{/* Warning Alert Block */}
error
Incorrect OTP
1 more incorrect entry before 30-min lockout Attempt 1 of 3
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample20Demo; ``` Angular: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 21. Full Screen — Error - Incorrect OTP (Last Attempt) HTML: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample21Demo = () => ( <>
{/* Main Panel (Centered) */}
{/* Back navigation link */} arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

{/* OTP Input Block Component (6 slots, error state) */}
{/* Warning Alert Block */}
error
Incorrect OTP
This is your last attempt before a 30-min lockout Attempt 2 of 3
{/* Actions */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample21Demo; ``` Angular: ```html
arrow_back Back

Verify your mobile number

OTP sent to +91 98765 XXXXX

Powered by -
``` ### 22. Full Screen — Locked - Too Many Attempts HTML: ```html
arrow_back Back
lock

Too many incorrect attempts

Locked for 28:43 Resend OTP
error
Account locked. Please wait for the countdown to complete
Need help? Call 1800-XXX-XXXX
Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample22Demo = () => ( <>
{/* Main Panel (Centered) */}
{/* Back navigation link */} arrow_back Back
{/* Circular Red Badge with Lock */}
lock

Too many incorrect attempts

{/* OTP Input Block Component (6 slots, disabled state) */}
lock Locked for 28:43 Resend OTP
{/* Error Alert Block */}
error
Account locked. Please wait for the countdown to complete
{/* Help Link */}
Need help? Call 1800-XXX-XXXX
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample22Demo; ``` Angular: ```html
arrow_back Back
lock

Too many incorrect attempts

Locked for 28:43 Resend OTP
error
Account locked. Please wait for the countdown to complete
Need help? Call 1800-XXX-XXXX
Powered by -
``` ### 23. Full Screen — Success - Verified HTML: ```html
done

Verified!

Redirecting you to your dashboard...

Verification successful
Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessOTPVerificationExample23Demo = () => ( <>
{/* Main Panel (Centered) */}
{/* Circular Green Badge with checkmark */}
done

Verified!

Redirecting you to your dashboard...

{/* OTP Input Block Component (6 slots, success state) */}
done Verification successful
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOTPVerificationExample23Demo; ``` Angular: ```html
done

Verified!

Redirecting you to your dashboard...

Verification successful
Powered by -
```