# tomaafloen/eeidtestappvcc architecture

> Architecture diagram of the GitHub repository tomaafloen/eeidtestappvcc, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tomaafloen/eeidtestappvcc
- Repository: https://github.com/tomaafloen/eeidtestappvcc

## Overview

This is a small browser-based Entra External ID authentication test app. Users sign in through an OIDC authorization-code flow with PKCE, view account details and ID-token claims, and can request and view an access token; sign-out and error display are also supported. The main runtime is in app.js, with MSAL settings and scopes in config.js and the page UI in index.html. The source excerpts show the app’s MSAL calls and UI updates; README statements support the documented flow and page capabilities.

Main entry points: [`app.js`](https://github.com/tomaafloen/eeidtestappvcc/blob/main/app.js) (Auth and UI logic), [`index.html`](https://github.com/tomaafloen/eeidtestappvcc/blob/main/index.html) (Application page), [`config.js`](https://github.com/tomaafloen/eeidtestappvcc/blob/main/config.js) (MSAL settings)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Browser UI"]
  node_page["Application page<br/>[index.html]"]
  node_claims["Claims display<br/>[app.js]"]
  node_token["Token display<br/>[app.js]"]
  node_errors["Error display<br/>[app.js]"]
end

subgraph group_auth["Authentication"]
  node_runtime["Auth and UI logic<br/>[app.js]"]
  node_settings["MSAL settings<br/>[config.js]"]
end

subgraph group_identity["Entra Identity"]
  node_msal["MSAL Browser"]
  node_entra{{"Entra External ID"}}
end

node_user(("User"))

node_user -->|"uses"| node_page
node_page -->|"hosts UI for"| node_runtime
node_runtime -->|"uses settings"| node_settings
node_runtime -->|"calls"| node_msal
node_msal -.->|"uses configuration"| node_settings
node_msal -->|"authenticates with"| node_entra
node_runtime -->|"renders claims"| node_claims
node_runtime -->|"renders token info"| node_token
node_runtime -->|"renders errors"| node_errors

click node_page "https://github.com/tomaafloen/eeidtestappvcc/blob/main/index.html"
click node_runtime "https://github.com/tomaafloen/eeidtestappvcc/blob/main/app.js"
click node_settings "https://github.com/tomaafloen/eeidtestappvcc/blob/main/config.js"
click node_claims "https://github.com/tomaafloen/eeidtestappvcc/blob/main/app.js"
click node_token "https://github.com/tomaafloen/eeidtestappvcc/blob/main/app.js"
click node_errors "https://github.com/tomaafloen/eeidtestappvcc/blob/main/app.js"

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_page,node_claims,node_token,node_errors,node_user toneBlue
class node_runtime,node_settings toneAmber
class node_msal,node_entra toneMint
```

## Components

### Browser UI

- [Application page](https://github.com/tomaafloen/eeidtestappvcc/blob/main/index.html): `index.html`
- [Claims display](https://github.com/tomaafloen/eeidtestappvcc/blob/main/app.js): `app.js`
- [Token display](https://github.com/tomaafloen/eeidtestappvcc/blob/main/app.js): `app.js`
- [Error display](https://github.com/tomaafloen/eeidtestappvcc/blob/main/app.js): `app.js`

### Authentication

- [Auth and UI logic](https://github.com/tomaafloen/eeidtestappvcc/blob/main/app.js): `app.js`
- [MSAL settings](https://github.com/tomaafloen/eeidtestappvcc/blob/main/config.js): `config.js`

### Entra Identity

- **MSAL Browser**
- **Entra External ID**

### Other components

- **User**

## Connections

- User → Application page: uses (evidence: `README.md`)
- Application page → Auth and UI logic: hosts UI for (evidence: `README.md`)
- Auth and UI logic → MSAL settings: uses settings (evidence: `app.js`)
- Auth and UI logic → MSAL Browser: calls (evidence: `app.js`)
- MSAL Browser → MSAL settings: uses configuration
- MSAL Browser → Entra External ID: authenticates with (evidence: `README.md`)
- Auth and UI logic → Claims display: renders claims (evidence: `app.js`)
- Auth and UI logic → Token display: renders token info (evidence: `app.js`)
- Auth and UI logic → Error display: renders errors (evidence: `app.js`)