# Identity & Access / Operator-Assisted Verification Operator-assisted Aadhaar verification flow where a certified VLE operator conducts authentication on behalf of the citizen. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-operator-assisted-verification--column ## Pattern variants - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-operator-assisted-verification--column - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-operator-assisted-verification--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-operator-assisted-verification--card ## When to use this pattern Use Identity & Access / Operator-Assisted 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 / Operator-Assisted Verification. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Operator-Assisted Authentication HTML: ```html
← Back

Operator-Assisted Authentication

A certified VLE operator will conduct this Aadhaar verification on your behalf with your consent.

``` React: ```jsx import React from 'react'; const IdentityAccessOperatorAssistedVerificationExample1Demo = () => ( <> {/* Aadhaar Operator-Assisted Verification */}
{/* Back button link */} ← Back

Operator-Assisted Authentication

A certified VLE operator will conduct this Aadhaar verification on your behalf with your consent.

{/* VLE Operator Details Card */}
VLE Operator Ramesh Kumar ID: VLE-MH-2024-00387 · Certified by MeitY
{/* Checkbox Consent */}
{/* Form actions: Cancel & Proceed with Consent */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOperatorAssistedVerificationExample1Demo; ``` Angular: ```html
← Back

Operator-Assisted Authentication

A certified VLE operator will conduct this Aadhaar verification on your behalf with your consent.

``` ### 2. Column — Operator-Assisted Authentication HTML: ```html

Operator-Assisted Verification

A certified VLE operator will assist with your Aadhaar verification.

← Back

Operator-Assisted Authentication

A certified VLE operator will conduct this Aadhaar verification on your behalf with your consent.

``` React: ```jsx import React from 'react'; const IdentityAccessOperatorAssistedVerificationExample2Demo = () => ( <> {/* Aadhaar Operator-Assisted Verification */}
{/* Left Panel (Sidebar - hidden on Mobile) */}
{/* Top section */}

Operator-Assisted Verification

A certified VLE operator will assist with your Aadhaar verification.

{/* Right Panel (Form panel) */}
{/* Back button link */} ← Back

Operator-Assisted Authentication

A certified VLE operator will conduct this Aadhaar verification on your behalf with your consent.

{/* VLE Operator Details Card */}
VLE Operator Ramesh Kumar ID: VLE-MH-2024-00387 · Certified by MeitY
{/* Checkbox Consent */}
{/* Form actions: Cancel & Proceed with Consent */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOperatorAssistedVerificationExample2Demo; ``` Angular: ```html

Operator-Assisted Verification

A certified VLE operator will assist with your Aadhaar verification.

← Back

Operator-Assisted Authentication

A certified VLE operator will conduct this Aadhaar verification on your behalf with your consent.

``` ### 3. Full Screen — Operator-Assisted Authentication HTML: ```html
← Back

Operator-Assisted Authentication

A certified VLE operator will conduct this Aadhaar verification on your behalf with your consent.

``` React: ```jsx import React from 'react'; const IdentityAccessOperatorAssistedVerificationExample3Demo = () => ( <> {/* Aadhaar Operator-Assisted Verification */}
{/* Main Panel (Centered) */}
{/* Back button link */} ← Back

Operator-Assisted Authentication

A certified VLE operator will conduct this Aadhaar verification on your behalf with your consent.

{/* VLE Operator Details Card */}
VLE Operator Ramesh Kumar ID: VLE-MH-2024-00387 · Certified by MeitY
{/* Checkbox Consent */}
{/* Form actions: Cancel & Proceed with Consent */}
{/* Footer Branding */}
Powered by -
); export default IdentityAccessOperatorAssistedVerificationExample3Demo; ``` Angular: ```html
← Back

Operator-Assisted Authentication

A certified VLE operator will conduct this Aadhaar verification on your behalf with your consent.

```