# tomaafloen/eeidtestapp architecture

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

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

## Overview

This is a small browser-based OIDC test application. A user signs in through the page, MSAL handles the redirect-based authentication with Entra External ID, and the app displays account details and ID-token claims. The user can separately request an access token; the app tries silent acquisition first and falls back to an interactive redirect. The README identifies the HTML page as the UI and documents the Entra integration. The page’s exact event-wiring details and the loading relationship between files were not sampled, so those connections are not asserted.

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

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Browser interface"]
  node_page["Application page<br/>[index.html]"]
end

subgraph group_auth["Authentication"]
  node_app["Authentication logic<br/>[app.js]"]
  node_config["MSAL settings<br/>[config.js]"]
  node_msal["MSAL.js"]
end

subgraph group_presentation["Results"]
  node_claims["Account and claims display<br/>[app.js]"]
  node_token["Access token display<br/>[app.js]"]
end

node_user(("User"))
node_entra{{"Entra External ID"}}

node_user -->|"uses"| node_page
node_user -->|"requests sign-in"| node_app
node_app -->|"calls"| node_msal
node_msal -->|"redirects for auth"| node_entra
node_config -->|"sets authority"| node_entra
node_app -->|"renders"| node_claims
node_app -->|"renders"| node_token
node_user -->|"requests token"| node_app
node_app -->|"acquires token"| node_msal

click node_page "https://github.com/tomaafloen/eeidtestapp/blob/main/index.html"
click node_app "https://github.com/tomaafloen/eeidtestapp/blob/main/app.js"
click node_config "https://github.com/tomaafloen/eeidtestapp/blob/main/config.js"
click node_claims "https://github.com/tomaafloen/eeidtestapp/blob/main/app.js"
click node_token "https://github.com/tomaafloen/eeidtestapp/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_user toneBlue
class node_app,node_config,node_msal toneAmber
class node_claims,node_token toneMint
class node_entra toneIndigo
```

## Components

### Browser interface

- [Application page](https://github.com/tomaafloen/eeidtestapp/blob/main/index.html): `index.html`

### Authentication

- [Authentication logic](https://github.com/tomaafloen/eeidtestapp/blob/main/app.js): `app.js`
- [MSAL settings](https://github.com/tomaafloen/eeidtestapp/blob/main/config.js): `config.js`
- **MSAL.js**

### Results

- [Account and claims display](https://github.com/tomaafloen/eeidtestapp/blob/main/app.js): `app.js`
- [Access token display](https://github.com/tomaafloen/eeidtestapp/blob/main/app.js): `app.js`

### Other components

- **User**
- **Entra External ID**

## Connections

- User → Application page: uses (evidence: `README.md`)
- User → Authentication logic: requests sign-in (evidence: `README.md`)
- Authentication logic → MSAL.js: calls (evidence: `app.js`)
- MSAL.js → Entra External ID: redirects for auth
- MSAL settings → Entra External ID: sets authority (evidence: `config.js`)
- Authentication logic → Account and claims display: renders (evidence: `app.js`)
- Authentication logic → Access token display: renders (evidence: `app.js`)
- User → Authentication logic: requests token (evidence: `README.md`)
- Authentication logic → MSAL.js: acquires token (evidence: `app.js`)