# energywebfoundation/iam-client-examples architecture

> Architecture diagram of the GitHub repository energywebfoundation/iam-client-examples, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/energywebfoundation/iam-client-examples
- Repository: https://github.com/energywebfoundation/iam-client-examples

## Overview

This repository is a set of IAM client examples: users authenticate with wallet-backed DIDs and identity proofs, then receive validated roles from an Express backend. React and Angular demonstrate the browser flow; delegate-auth demonstrates asset registration and delegated proof; jwt-authentication demonstrates manual token creation and login. The README documents backend role checks and optional enrolment. Some wiring is inferred only from documentation because server passport and several UI sources were not sampled.

Main entry points: [`server/express/index.js`](https://github.com/energywebfoundation/iam-client-examples/blob/master/server/express/index.js) (Express API), [`client/delegate-auth/delegate-auth-script.ts`](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/delegate-auth/delegate-auth-script.ts) (Delegate workflow), [`client/react-dapp/src/App.tsx`](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/react-dapp/src/App.tsx) (React demo), [`client/angular-dapp/src/app/services/login/login.service.ts`](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/angular-dapp/src/app/services/login/login.service.ts) (Angular login)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_clients["Web clients"]
  node_react["React demo<br/>[App.tsx]"]
  node_angular["Angular login<br/>[login.service.ts]"]
  node_angularroles["Role display<br/>[roles.service.ts]"]
  node_enrolment["Enrolment link<br/>[config.ts]"]
end

subgraph group_backend["Auth backend"]
  node_server["Express API<br/>[index.js]"]
  node_passport["DID/JWT auth<br/>[passport.js]"]
  node_cookieopts["Cookie policy<br/>[cookies.js]"]
end

subgraph group_delegate["Delegate example"]
  node_delegate["Delegate workflow"]
  node_asset["Registered asset"]
end

subgraph group_manual["JWT example"]
  node_jwtlogin["JWT login example<br/>[jwt-login.ts]"]
  node_generator["Identity token generator"]
end

node_user(("User"))
node_wallet["Wallet provider"]
node_iamlib["IAM client library"]
node_roleclaims["Role claims"]
node_blockchain["Chain RPC"]
node_cache["Identity cache"]

node_user -->|"uses demo"| node_react
node_user -->|"uses demo"| node_angular
node_react -->|"selects provider"| node_wallet
node_angular -->|"selects provider"| node_wallet
node_react -->|"creates identity proof"| node_iamlib
node_angular -->|"creates identity proof"| node_iamlib
node_react -->|"posts proof; requests roles"| node_server
node_angular -->|"posts proof"| node_server
node_angularroles -->|"requests roles"| node_server
node_server -->|"authenticates requests"| node_passport
node_server -->|"sets production cookies"| node_cookieopts
node_passport -->|"validates role claims"| node_roleclaims
node_passport -.->|"verifies DID"| node_blockchain
node_passport -.->|"resolves identity"| node_cache
node_react -->|"offers enrolment link"| node_enrolment
node_delegate -->|"initializes IAM; creates proof"| node_iamlib
node_delegate -->|"registers asset; adds key"| node_asset
node_delegate -->|"submits delegate proof"| node_server
node_delegate -->|"uses configured RPC"| node_blockchain
node_delegate -->|"configures cache"| node_cache
node_jwtlogin -->|"generates identity token"| node_generator
node_jwtlogin -.->|"submits login token"| node_server

click node_react "https://github.com/energywebfoundation/iam-client-examples/blob/master/client/react-dapp/src/App.tsx"
click node_angular "https://github.com/energywebfoundation/iam-client-examples/blob/master/client/angular-dapp/src/app/services/login/login.service.ts"
click node_angularroles "https://github.com/energywebfoundation/iam-client-examples/blob/master/client/angular-dapp/src/app/services/roles/roles.service.ts"
click node_enrolment "https://github.com/energywebfoundation/iam-client-examples/blob/master/client/react-dapp/src/config.ts"
click node_server "https://github.com/energywebfoundation/iam-client-examples/blob/master/server/express/index.js"
click node_passport "https://github.com/energywebfoundation/iam-client-examples/blob/master/server/express/passport.js"
click node_cookieopts "https://github.com/energywebfoundation/iam-client-examples/blob/master/server/express/cookies.js"
click node_delegate "https://github.com/energywebfoundation/iam-client-examples/blob/master/client/delegate-auth/delegate-auth-script.ts"
click node_asset "https://github.com/energywebfoundation/iam-client-examples/blob/master/client/delegate-auth/delegate-auth-script.ts"
click node_jwtlogin "https://github.com/energywebfoundation/iam-client-examples/blob/master/client/jwt-authentication/jwt-login.ts"
click node_generator "https://github.com/energywebfoundation/iam-client-examples/blob/master/client/jwt-authentication/generate-identity.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_react,node_angular,node_angularroles,node_enrolment,node_user,node_iamlib toneBlue
class node_server,node_passport,node_cookieopts,node_cache toneAmber
class node_delegate,node_asset toneMint
class node_jwtlogin,node_generator toneRose
class node_wallet,node_roleclaims,node_blockchain toneIndigo
```

## Components

### Web clients

- [React demo](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/react-dapp/src/App.tsx): `client/react-dapp/src/App.tsx`
- [Angular login](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/angular-dapp/src/app/services/login/login.service.ts): `client/angular-dapp/src/app/services/login/login.service.ts`
- [Role display](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/angular-dapp/src/app/services/roles/roles.service.ts): `client/angular-dapp/src/app/services/roles/roles.service.ts`
- [Enrolment link](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/react-dapp/src/config.ts): `client/react-dapp/src/config.ts`

### Auth backend

- [Express API](https://github.com/energywebfoundation/iam-client-examples/blob/master/server/express/index.js): `server/express/index.js`
- [DID/JWT auth](https://github.com/energywebfoundation/iam-client-examples/blob/master/server/express/passport.js): `server/express/passport.js`
- [Cookie policy](https://github.com/energywebfoundation/iam-client-examples/blob/master/server/express/cookies.js): `server/express/cookies.js`

### Delegate example

- [Delegate workflow](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/delegate-auth/delegate-auth-script.ts): `client/delegate-auth/delegate-auth-script.ts`
- [Registered asset](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/delegate-auth/delegate-auth-script.ts): `client/delegate-auth/delegate-auth-script.ts`

### JWT example

- [JWT login example](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/jwt-authentication/jwt-login.ts): `client/jwt-authentication/jwt-login.ts`
- [Identity token generator](https://github.com/energywebfoundation/iam-client-examples/blob/master/client/jwt-authentication/generate-identity.ts): `client/jwt-authentication/generate-identity.ts`

### Other components

- **User**
- **Wallet provider**
- **IAM client library**
- **Role claims**
- **Chain RPC**
- **Identity cache**

## Connections

- User → React demo: uses demo
- User → Angular login: uses demo
- React demo → Wallet provider: selects provider
- Angular login → Wallet provider: selects provider
- React demo → IAM client library: creates identity proof
- Angular login → IAM client library: creates identity proof
- React demo → Express API: posts proof; requests roles
- Angular login → Express API: posts proof
- Role display → Express API: requests roles
- Express API → DID/JWT auth: authenticates requests
- Express API → Cookie policy: sets production cookies
- DID/JWT auth → Role claims: validates role claims
- DID/JWT auth → Chain RPC: verifies DID
- DID/JWT auth → Identity cache: resolves identity
- React demo → Enrolment link: offers enrolment link
- Delegate workflow → IAM client library: initializes IAM; creates proof
- Delegate workflow → Registered asset: registers asset; adds key
- Delegate workflow → Express API: submits delegate proof
- Delegate workflow → Chain RPC: uses configured RPC
- Delegate workflow → Identity cache: configures cache
- JWT login example → Identity token generator: generates identity token
- JWT login example → Express API: submits login token