Skip to content

Add browser-based login form example using Entra ID and MSAL.js#160

Merged
oto-macenauer-absa merged 4 commits intomasterfrom
feature/example-login-form
Apr 22, 2026
Merged

Add browser-based login form example using Entra ID and MSAL.js#160
oto-macenauer-absa merged 4 commits intomasterfrom
feature/example-login-form

Conversation

@oto-macenauer-absa
Copy link
Copy Markdown
Collaborator

@oto-macenauer-absa oto-macenauer-absa commented Apr 21, 2026

Summary

Adds a self-contained browser UI example at examples/ui/login-form/ demonstrating the complete Entra ID → Login Service token-exchange flow.

Changes

  • src/auth.js — MSAL authentication module (login, silent token acquisition, logout)
  • src/login-service-client.js — HTTP client for the Login Service /token/generate endpoint
  • src/ui.js — all DOM manipulation helpers (status, loading state, token display, copy-to-clipboard)
  • src/app.js — entry point wiring the modules together and registering event listeners
  • index.html — single-page UI; loads config.js then dist/bundle.js (defer)
  • config.js — runtime configuration template (tenantId, clientId, scopes, loginServiceHost)
  • server.js — minimal Express static server (required for MSAL redirect URIs)
  • package.json — build + start scripts; esbuild bundles src/app.jsdist/bundle.js (IIFE); prepare hook auto-builds on npm install
  • README.md — project structure, module responsibilities, prerequisites, config and running instructions
  • .gitignore — excludes node_modules/ and dist/

How to run

cd examples/ui/login-form
npm install   # installs deps and builds dist/bundle.js
npm start     # serves on http://localhost:3000

Release notes:

  • Include an example login form to demonstrate Login Service integration with entra

Closes #159

Comment thread examples/ui/login-form/package.json Outdated
Copy link
Copy Markdown
Collaborator

@dk1844 dk1844 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for this!

Comment thread examples/ui/login-form/README.md Outdated
Comment thread examples/ui/login-form/src/app.js
oto-macenauer-absa and others added 3 commits April 22, 2026 10:10
- @azure/msal-browser: ^2.38.3 → ^5.8.0 (v2.x EOL, security fixes in v3+)
- express: ^4.18.2 → ^5.2.1 (CVE-2024-29041 open redirect, now stable v5)
- esbuild: ^0.21.0 → ^0.28.0 (dev dep, latest stable)

Verified clean via Trivy CVE scan (no MEDIUM/HIGH/CRITICAL findings).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
… diagram

Replaces unicode box-drawing / ASCII art flow with a proper
sequenceDiagram block that renders correctly on GitHub.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
… label

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@oto-macenauer-absa oto-macenauer-absa merged commit 80a1fca into master Apr 22, 2026
4 checks passed
@dk1844 dk1844 mentioned this pull request Apr 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add browser-based login form example using Entra ID and MSAL.js

3 participants