# Identity & Access / Sign In Sign-in patterns for government services with mobile OTP, username/password, and Aadhaar-based authentication options. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-sign-in--column ## Pattern variants - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-sign-in--column - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-sign-in--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-sign-in--card ## When to use this pattern Use Identity & Access / Sign In 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 / Sign In. 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

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample1Demo = () => ( <>

arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

{/* Footer Branding */}

); export default IdentityAccessSignInExample1Demo; ``` Angular: ```html

arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

``` ### 2. Card — Reset Password - OTP Entry HTML: ```html

arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample2Demo = () => ( <>

arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

{/* Footer Branding */}

); export default IdentityAccessSignInExample2Demo; ``` Angular: ```html

arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

``` ### 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

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample3Demo = () => ( <>

arrow_back Back

Create new password

Your new password must be different from previous used password

{/* Footer Branding */}

); export default IdentityAccessSignInExample3Demo; ``` Angular: ```html

arrow_back Back

Create new password

Your new password must be different from previous used password

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

done

Password reset successfully

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

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample4Demo = () => ( <>

done

Password reset successfully

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

{/* Footer Branding */}

); export default IdentityAccessSignInExample4Demo; ``` Angular: ```html

done

Password reset successfully

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

``` ### 5. Card — Account Recovery - Email HTML: ```html

arrow_back Back

Account recovery

Enter your registered email address to recover your account.

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample5Demo = () => ( <>

arrow_back Back

Account recovery

Enter your registered email address to recover your account.

{/* Footer Branding */}

); export default IdentityAccessSignInExample5Demo; ``` Angular: ```html

arrow_back Back

Account recovery

Enter your registered email address to recover your account.

``` ### 6. Card — Warning - Mobile Number HTML: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample6Demo = () => ( <>

{/* Reusable Component: Navbar Header */}

{/* Centered White Card Form Box */}

Sign in to your account

Access your government services securely

{/* Bottom Link */}

New user? Register here

{/* Footer Branding */}

); export default IdentityAccessSignInExample6Demo; ``` Angular: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` ### 7. Card — Error - Username Not Found HTML: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample7Demo = () => ( <>

{/* Reusable Component: Navbar Header */}

{/* Centered White Card Form Box */}

Sign in to your account

Access your government services securely

{/* Bottom Link */}

New user? Register here

{/* Footer Branding */}

); export default IdentityAccessSignInExample7Demo; ``` Angular: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` ### 8. Card — OTP Entry - Active Timer HTML: ```html

arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample8Demo = () => ( <>

{/* Reusable Component: Navbar Header */}

{/* Centered White Card Form Box */}

{/* Back navigation link */} arrow_back Back {/* OTP Verification Header details */}

Enter OTP

Sent to +91 98765 XXXXX

{/* Footer Branding */}

); export default IdentityAccessSignInExample8Demo; ``` Angular: ```html

arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

``` ### 9. Card — Sign In with Aadhaar HTML: ```html

arrow_back Back

Sign in with Aadhaar

Enter your 12-digit Aadhaar number

Aadhaar Number

Choose Authentication Method

Send OTP phone

Face Auth fingerprint

lock Your Aadhaar details are encrypted and secure

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample9Demo = () => ( <>

{/* Reusable Component: Navbar Header */}

{/* Centered White Card Form Box */}

{/* Back navigation link */} arrow_back Back {/* Heading and Subheading for Aadhaar Verification */}

Sign in with Aadhaar

Enter your 12-digit Aadhaar number

{/* Aadhaar Number Input Field */}

Aadhaar Number

{/* Choose Authentication Method selector */}

Choose Authentication Method

Send OTP phone

Face Auth fingerprint

{/* Continue action button and Encryption badge/warning */}

lock Your Aadhaar details are encrypted and secure

{/* Footer Branding */}

); export default IdentityAccessSignInExample9Demo; ``` Angular: ```html

arrow_back Back

Sign in with Aadhaar

Enter your 12-digit Aadhaar number

Aadhaar Number

Choose Authentication Method

Send OTP phone

Face Auth fingerprint

lock Your Aadhaar details are encrypted and secure

``` ### 10. Card — Success - Signed In HTML: ```html

done

Signed in successfully!

You are being redirected to your service

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample10Demo = () => ( <>

{/* Reusable Component: Navbar Header */}

{/* Centered White Card Form Box */}

{/* Top spacer for vertical balance of the center success content */}

{/* Success Central Content */}

{/* Success Badge Checkmark */}

done

{/* Success Heading & Subtext */}

Signed in successfully!

You are being redirected to your service

{/* 3-dot Redirect Progress Loader */}

{/* foter branding */}

); export default IdentityAccessSignInExample10Demo; ``` Angular: ```html

done

Signed in successfully!

You are being redirected to your service

``` ### 11. Column — Error - Unregistered Mobile Number HTML: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample11Demo = () => ( <>

{/* Left Panel (Sidebar - hidden on Mobile) */}

{/* Top section */}

Secure Digital Access to Government Services

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

{/* Bottom section */}

TRUSTED BY 800M+ Citizens

AVAILABLE SERVICES 5000+ Integrated

{/* Decorative rings/circles in background */}

{/* Right Panel (Form panel) */}

Sign in to your account

Access your government services securely

{/* Bottom Link */}

New user? Register here

{/* Footer Branding */}

); export default IdentityAccessSignInExample11Demo; ``` Angular: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` ### 12. Column — Error - Username Not Found HTML: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample12Demo = () => ( <>

{/* Left Panel (Sidebar - hidden on Mobile) */}

{/* Top section */}

Secure Digital Access to Government Services

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

{/* Bottom section */}

TRUSTED BY 800M+ Citizens

AVAILABLE SERVICES 5000+ Integrated

{/* Decorative rings/circles in background */}

{/* Right Panel (Form panel) */}

Sign in to your account

Access your government services securely

{/* NEW in this screen: Dual-field Username & Password layout instead of single Mobile Number with prefix */} {/* Username Input Field */}

Username

{/* Password Input Field */}

Password

{/* NEW in this screen: Error Alert Block message "Username not found" and link "Take action" */} {/* Error Alert Block */}

error

Username not found.

Take action Attempt 1 of 5

{/* Reusable: Actions layout with primary and secondary button actions */} {/* Actions */}

{/* Reusable: Bottom registration link & powered branding */} {/* Bottom Link */}

New user? Register here

{/* Footer Branding */}

); export default IdentityAccessSignInExample12Demo; ``` Angular: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` ### 13. Column — OTP Entry - Active Timer HTML: ```html

arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample13Demo = () => ( <>

{/* Left Panel (Sidebar - hidden on Mobile) */}

{/* Top section */}

Secure Digital Access to Government Services

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

{/* Bottom section */}

TRUSTED BY 800M+ Citizens

AVAILABLE SERVICES 5000+ Integrated

{/* Decorative rings/circles in background */}

{/* Right Panel (Form panel) */}

{/* NEW in this screen: Back navigation link */} arrow_back Back {/* NEW in this screen: OTP Verification Header details */}

Enter OTP

Sent to +91 98765 XXXXX

{/* Reusable: Bottom DIC Branding footer */}

); export default IdentityAccessSignInExample13Demo; ``` Angular: ```html

arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

``` ### 14. Column — Sign In with Aadhaar HTML: ```html

arrow_back Back

Sign in with Aadhaar

Enter your 12-digit Aadhaar number

Aadhaar Number

Choose Authentication Method

Send OTP phone

Face Auth fingerprint

lock Your Aadhaar details are encrypted and secure

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample14Demo = () => ( <>

{/* Left Panel (Sidebar - hidden on Mobile) */}

{/* Top section */}

Secure Digital Access to Government Services

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

{/* Bottom section */}

TRUSTED BY 800M+ Citizens

AVAILABLE SERVICES 5000+ Integrated

{/* Decorative rings/circles in background */}

{/* Right Panel (Form panel) */}

{/* Reusable: Back navigation link */} arrow_back Back {/* NEW in this screen: Heading and Subheading for Aadhaar Verification */}

Sign in with Aadhaar

Enter your 12-digit Aadhaar number

{/* NEW in this screen: Aadhaar Number Input Field */}

Aadhaar Number

{/* NEW in this screen: Choose Authentication Method selector */}

Choose Authentication Method

Send OTP phone

Face Auth fingerprint

{/* NEW in this screen: Continue action button and Encryption badge/warning */}

lock Your Aadhaar details are encrypted and secure

{/* Reusable: Bottom DIC Branding footer */} {/* Footer Branding */}

); export default IdentityAccessSignInExample14Demo; ``` Angular: ```html

arrow_back Back

Sign in with Aadhaar

Enter your 12-digit Aadhaar number

Aadhaar Number

Choose Authentication Method

Send OTP phone

Face Auth fingerprint

lock Your Aadhaar details are encrypted and secure

``` ### 15. Column — Success - Signed In HTML: ```html

done

Signed in successfully!

You are being redirected to your service

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample15Demo = () => ( <>

{/* Left Panel (Sidebar - hidden on Mobile) */}

{/* Top section */}

Secure Digital Access to Government Services

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

{/* Bottom section */}

TRUSTED BY 800M+ Citizens

AVAILABLE SERVICES 5000+ Integrated

{/* Decorative rings/circles in background */}

{/* Right Panel (Form panel) */}

{/* Top spacer for vertical balance of the center success content */}

{/* NEW in this screen: Success Central Content */}

{/* NEW in this screen: Success Badge Checkmark */}

done

{/* NEW in this screen: Success Heading & Subtext */}

Signed in successfully!

You are being redirected to your service

{/* NEW in this screen: 3-dot Redirect Progress Loader */}

{/* Reusable: Bottom DIC Branding footer */}

{/* Footer Branding */}

); export default IdentityAccessSignInExample15Demo; ``` Angular: ```html

done

Signed in successfully!

You are being redirected to your service

``` ### 16. Full Screen — Error - Unregistered Mobile Number HTML: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample16Demo = () => ( <>

{/* Main Panel (Centered) */}

Sign in to your account

Access your government services securely

{/* Bottom Link */}

New user? Register here

{/* Footer Branding */}

); export default IdentityAccessSignInExample16Demo; ``` Angular: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` ### 17. Full Screen — Error - Username Not Found HTML: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample17Demo = () => ( <>

{/* Main Panel (Centered) */}

Sign in to your account

Access your government services securely

{/* Bottom Link */}

New user? Register here

{/* Footer Branding */}

); export default IdentityAccessSignInExample17Demo; ``` Angular: ```html

Sign in to your account

Access your government services securely

New user? Register here

``` ### 18. Full Screen — OTP Entry - Active Timer HTML: ```html

arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample18Demo = () => ( <>

{/* Main Panel (Centered) */}

{/* Back navigation link */} arrow_back Back {/* OTP Verification Header details */}

Enter OTP

Sent to +91 98765 XXXXX

{/* Footer Branding */}

); export default IdentityAccessSignInExample18Demo; ``` Angular: ```html

arrow_back Back

Enter OTP

Sent to +91 98765 XXXXX

``` ### 19. Full Screen — Sign In with Aadhaar HTML: ```html

arrow_back Back

Sign in with Aadhaar

Enter your 12-digit Aadhaar number

Aadhaar Number

Choose Authentication Method

Send OTP phone

Face Auth fingerprint

lock Your Aadhaar details are encrypted and secure

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample19Demo = () => ( <>

{/* Main Panel (Centered) */}

{/* Back navigation link */} arrow_back Back {/* Heading and Subheading for Aadhaar Verification */}

Sign in with Aadhaar

Enter your 12-digit Aadhaar number

{/* Aadhaar Number Input Field */}

Aadhaar Number

{/* Choose Authentication Method selector */}

Choose Authentication Method

Send OTP phone

Face Auth fingerprint

{/* Continue action button and Encryption badge/warning */}

lock Your Aadhaar details are encrypted and secure

{/* Footer Branding */}

); export default IdentityAccessSignInExample19Demo; ``` Angular: ```html

arrow_back Back

Sign in with Aadhaar

Enter your 12-digit Aadhaar number

Aadhaar Number

Choose Authentication Method

Send OTP phone

Face Auth fingerprint

lock Your Aadhaar details are encrypted and secure

``` ### 20. Full Screen — Success - Signed In HTML: ```html

done

Signed in successfully!

You are being redirected to your service

``` React: ```jsx import React from 'react'; const IdentityAccessSignInExample20Demo = () => ( <>

{/* Main Panel (Centered) */}

{/* Top spacer for vertical balance of the center success content */}

{/* Success Central Content */}

{/* Success Badge Checkmark */}

done

{/* Success Heading & Subtext */}

Signed in successfully!

You are being redirected to your service

{/* 3-dot Redirect Progress Loader */}

{/* Footer Branding */}

); export default IdentityAccessSignInExample20Demo; ``` Angular: ```html

done

Signed in successfully!

You are being redirected to your service

```