# Identity & Access / Forgot Password Forgot password and account recovery patterns for government services. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-forgot-password--column ## Pattern variants - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-forgot-password--column - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-forgot-password--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-forgot-password--card ## When to use this pattern Use Identity & Access / Forgot Password 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 / Forgot Password. 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 IdentityAccessForgotPasswordExample1Demo = () => ( <>
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 IdentityAccessForgotPasswordExample1Demo; ``` Angular: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` ### 2. Card — Enter OTP - Active Timer HTML: ```html
arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessForgotPasswordExample2Demo = () => ( <>
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 IdentityAccessForgotPasswordExample2Demo; ``` Angular: ```html
arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

Powered by -
``` ### 3. Card — 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 IdentityAccessForgotPasswordExample3Demo = () => ( <>
arrow_back Back

Create new password

Your new password must be different from previous used password

visibility
visibility
{/* Footer Branding */}
Powered by -
); export default IdentityAccessForgotPasswordExample3Demo; ``` 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 IdentityAccessForgotPasswordExample4Demo = () => ( <>
done

Password reset successfully

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

{/* Footer Branding */}
Powered by -
); export default IdentityAccessForgotPasswordExample4Demo; ``` 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 IdentityAccessForgotPasswordExample5Demo = () => ( <>
arrow_back Back

Account recovery

Enter your registered email address to recover your account.

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

Account recovery

Enter your registered email address to recover your account.

Powered by -
``` ### 6. Column — Reset Password - Mobile Number 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 to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessForgotPasswordExample6Demo = () => ( <>
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 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 IdentityAccessForgotPasswordExample6Demo; ``` 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 to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` ### 7. Column — Enter OTP - 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
arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessForgotPasswordExample7Demo = () => ( <>
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

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 IdentityAccessForgotPasswordExample7Demo; ``` 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

Enter OTP

Sent to +91 98765 XXXXX

Powered by -
``` ### 8. Column — Create New Password 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

Create new password

Your new password must be different from previous used password

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessForgotPasswordExample8Demo = () => ( <>
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

Create new password

Your new password must be different from previous used password

visibility
visibility
{/* Footer Branding */}
Powered by -
); export default IdentityAccessForgotPasswordExample8Demo; ``` 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

Create new password

Your new password must be different from previous used password

Powered by -
``` ### 9. Column — Success - Password Reset 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

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 IdentityAccessForgotPasswordExample9Demo = () => ( <>
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

Password reset successfully

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

{/* Footer Branding */}
Powered by -
); export default IdentityAccessForgotPasswordExample9Demo; ``` 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

Password reset successfully

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

Powered by -
``` ### 10. Column — Account Recovery - Email 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

Account recovery

Enter your registered email address to recover your account.

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessForgotPasswordExample10Demo = () => ( <>
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

Account recovery

Enter your registered email address to recover your account.

{/* Footer Branding */}
Powered by -
); export default IdentityAccessForgotPasswordExample10Demo; ``` 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

Account recovery

Enter your registered email address to recover your account.

Powered by -
``` ### 11. Full Screen — 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 IdentityAccessForgotPasswordExample11Demo = () => ( <>
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 IdentityAccessForgotPasswordExample11Demo; ``` Angular: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` ### 12. Full Screen — Enter OTP - Active Timer HTML: ```html
arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessForgotPasswordExample12Demo = () => ( <>
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 IdentityAccessForgotPasswordExample12Demo; ``` Angular: ```html
arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

Powered by -
``` ### 13. Full Screen — 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 IdentityAccessForgotPasswordExample13Demo = () => ( <>
arrow_back Back

Create new password

Your new password must be different from previous used password

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

Create new password

Your new password must be different from previous used password

Powered by -
``` ### 14. Full Screen — 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 IdentityAccessForgotPasswordExample14Demo = () => ( <>
done

Password reset successfully

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

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

Password reset successfully

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

Powered by -
``` ### 15. Full Screen — 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 IdentityAccessForgotPasswordExample15Demo = () => ( <>
arrow_back Back

Account recovery

Enter your registered email address to recover your account.

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

Account recovery

Enter your registered email address to recover your account.

Powered by -
```