# Identity & Access / Auth Pattern Authentication error and lockout flows for secure digital access to government services. Includes OTP error states, attempt counters, account lockout, auto unlock, and suspicious activity detection across Column, Fullscreen, and Card layouts. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-auth-pattern--column-layout ## Pattern variants - Column Layout: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-auth-pattern--column-layout - Fullscreen Layout: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-auth-pattern--fullscreen-layout - Card Layout: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-auth-pattern--card-layout ## When to use this pattern Use Identity & Access / Auth Pattern 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 / Auth Pattern. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — OTP Verification (Error) HTML: ```html

arrow_back Back

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

arrow_back Back

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

arrow_back Back

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 2. Card — First Attempt (Error) HTML: ```html

arrow_back Back

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

arrow_back Back

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

arrow_back Back

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 3. Card — Final Attempt (Critical Error) HTML: ```html

arrow_back Back

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

arrow_back Back

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

arrow_back Back

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 4. Card — Locked HTML: ```html

Too many incorrect attempts

Need help? Call 1800-XXX-XXXX

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

lock

Too many incorrect attempts

Need help? Call 1800-XXX-XXXX

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

Too many incorrect attempts

Need help? Call 1800-XXX-XXXX

``` ### 5. Card — Auto Unlock HTML: ```html

arrow_back Back

You can now try signing in again.

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

arrow_back Back

check_circle

You can now try signing in again.

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

arrow_back Back

You can now try signing in again.

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 6. Card — Suspicious Activity HTML: ```html

Suspicious activity detected We detected a sign-in from a new device. Please verify your identity before continuing.

arrow_back Back

Suspicious activity detected

We detected a sign-in from a new device. Please verify your identity before continuing.

OTP Verification

A verification code has been sent to your registered number for security verification.

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

{/* Variant: Fluid Layout - Warning */}

warning

Suspicious activity detected We detected a sign-in from a new device. Please verify your identity before continuing.

arrow_back Back {/* Warning Alert Block */}

error

Suspicious activity detected

We detected a sign-in from a new device. Please verify your identity before continuing.

OTP Verification

A verification code has been sent to your registered number for security verification.

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

Suspicious activity detected We detected a sign-in from a new device. Please verify your identity before continuing.

arrow_back Back

Suspicious activity detected

We detected a sign-in from a new device. Please verify your identity before continuing.

OTP Verification

A verification code has been sent to your registered number for security verification.

``` ### 7. Column — OTP Verification (Error) HTML: ```html

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 8. Column — First Attempt (Error) HTML: ```html

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 9. Column — Final Attempt (Critical Error) HTML: ```html

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 10. Column — Locked HTML: ```html

Too many incorrect attempts

Need help? Call 1800-XXX-XXXX

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

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

lock

Too many incorrect attempts

Need help? Call 1800-XXX-XXXX

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

Too many incorrect attempts

Need help? Call 1800-XXX-XXXX

``` ### 11. Column — Auto Unlock HTML: ```html

You can now try signing in again.

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

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

check_circle

You can now try signing in again.

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

You can now try signing in again.

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 12. Column — Suspicious Activity HTML: ```html

Suspicious activity detected We detected a sign-in from a new device. Please verify your identity before continuing.

Suspicious activity detected

We detected a sign-in from a new device. Please verify your identity before continuing.

OTP Verification

A verification code has been sent to your registered number for security verification.

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

{/* Variant: Fluid Layout - Warning */}

warning

Suspicious activity detected We detected a sign-in from a new device. Please verify your identity before continuing.

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

{/* Warning Alert Block */}

error

Suspicious activity detected

We detected a sign-in from a new device. Please verify your identity before continuing.

OTP Verification

A verification code has been sent to your registered number for security verification.

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

Suspicious activity detected We detected a sign-in from a new device. Please verify your identity before continuing.

Suspicious activity detected

We detected a sign-in from a new device. Please verify your identity before continuing.

OTP Verification

A verification code has been sent to your registered number for security verification.

``` ### 13. Full Screen — OTP Verification (Error) HTML: ```html

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 14. Full Screen — First Attempt (Error) HTML: ```html

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 15. Full Screen — Final Attempt (Critical Error) HTML: ```html

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 16. Full Screen — Locked HTML: ```html

Too many incorrect attempts

Need help? Call 1800-XXX-XXXX

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

lock

Too many incorrect attempts

Need help? Call 1800-XXX-XXXX

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

Too many incorrect attempts

Need help? Call 1800-XXX-XXXX

``` ### 17. Full Screen — Auto Unlock HTML: ```html

You can now try signing in again.

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

check_circle

You can now try signing in again.

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

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

You can now try signing in again.

OTP Verification

Enter the 6-digit code sent to +91 98XXX XXXXX

``` ### 18. Full Screen — Suspicious Activity HTML: ```html

Suspicious activity detected We detected a sign-in from a new device. Please verify your identity before continuing.

Suspicious activity detected

We detected a sign-in from a new device. Please verify your identity before continuing.

OTP Verification

A verification code has been sent to your registered number for security verification.

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

{/* Variant: Fluid Layout - Warning */}

warning

Suspicious activity detected We detected a sign-in from a new device. Please verify your identity before continuing.

{/* Warning Alert Block */}

error

Suspicious activity detected

We detected a sign-in from a new device. Please verify your identity before continuing.

OTP Verification

A verification code has been sent to your registered number for security verification.

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

Suspicious activity detected We detected a sign-in from a new device. Please verify your identity before continuing.

Suspicious activity detected

We detected a sign-in from a new device. Please verify your identity before continuing.

OTP Verification

A verification code has been sent to your registered number for security verification.

```