New msal-browser sample enabling version switching at runtime (#7922)

Adds a new sample that includes the ability to switch versions at
runtime (both local development builds and any published version). This
will be used to test upgrade and downgrade scenarios both manually and
in CI.

---------

Co-authored-by: Copilot <[email protected]>

Author: tnorling

package-lock.json

@@ -0,0 +1,5 @@
+CLIENT_ID=ENTER_CLIENT_ID_HERE
+AUTHORITY=https://login.microsoftonline.com/ENTER_TENANT_ID_HERE
+REDIRECT_URI=http://localhost:3000
+POST_LOGOUT_REDIRECT_URI=http://localhost:3000
+CACHE_LOCATION=localStorage

samples/msal-browser-samples/ExpressSample/.env

@@ -0,0 +1,61 @@
+# Environment variables
+.env
+.env.local
+.env.development
+.env.production
+
+# Node modules
+node_modules/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

samples/msal-browser-samples/ExpressSample/.gitignore

@@ -0,0 +1,76 @@
+# MSAL.js for Express Sample - Authorization Code Flow in Single-Page Applications
+
+## About this sample
+
+This developer sample demonstrates how to use MSAL.js with an Express.js server to implement authentication and authorization in a single-page application.
+
+## Notable files and what they demonstrate
+
+### Core Application Files
+1. `./server.js` - Express server setup with routes and static file serving
+1. `./public/js/app.js` - Main application entry point
+1. `./public/js/authConfig.js` - Configuration options for `PublicClientApplication` and token requests
+1. `./public/js/auth.js` - **Authentication module** - MSAL instance management, login/logout flows, token handling
+1. `./public/js/ui.js` - **UI module** - UI updates, dropdown management, authentication state display
+1. `./public/js/account.js` - **Account module** - Account picker modal, account switching functionality
+1. `./public/js/navigation.js` - **Navigation module** - SPA routing, protected route handling, page transitions
+1. `./public/js/utils.js` - **Utility module** - Error handling, success messages, common utilities
+1. `./public/js/graph.js` - MS Graph API calls with access token handling
+
+## How to run the sample
+
+### Pre-requisites
+
+- Ensure [all pre-requisites](../../../lib/msal-browser/README.md#prerequisites) have been completed to run `@azure/msal-browser`.
+- Install node.js if needed (<https://nodejs.org/en/>).
+
+### Configure the application
+
+- Create a `.env` file in this directory and add the following variables:
+  ```
+  CLIENT_ID=ENTER_CLIENT_ID_HERE
+  AUTHORITY=https://login.microsoftonline.com/ENTER_TENANT_ID_HERE
+  REDIRECT_URI=http://localhost:3000
+  POST_LOGOUT_REDIRECT_URI=http://localhost:3000
+  CACHE_LOCATION=localStorage
+  ```
+
+- Replace `ENTER_CLIENT_ID_HERE` with the Application (client) ID from the portal registration.
+- Replace `ENTER_TENANT_ID_HERE` with the tenant ID from the portal registration.
+- Optionally, you may replace any of the other parameters, or you can remove them and use the default values.
+
+#### Install npm dependencies for sample
+
+```bash
+# Install dev dependencies for msal-browser from root of repo
+npm install
+
+# Change directory to sample directory
+cd samples/msal-browser-samples/ExpressSample
+
+# Install sample dependencies
+npm install
+
+# Build packages locally
+npm run build:package
+```
+
+#### Running the sample development server
+
+1. In a command prompt, run `npm start` or `npm run dev` (for auto-restart on changes).
+1. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+1. Open [http://localhost:3000/profile](http://localhost:3000/profile) to see an example of a protected route. If you are not yet signed in, signin will be invoked automatically.
+
+#### Using the sample
+
+- In the web page, click on the "Sign In" button in the navigation to begin the auth flow.
+- You can choose between popup or redirect authentication methods.
+- Once authenticated, navigate to different pages to see how authentication state is preserved.
+- **Use the account switcher** by clicking the user account dropdown and selecting "Switch Account" to see the account picker modal.
+- The Profile page will automatically fetch and display your user information from MS Graph.
+
+## Learn more
+
+- [MSAL.js documentation](../../../lib/msal-browser/README.md)
+- [Express.js documentation](https://expressjs.com/)
+- [Microsoft Graph documentation](https://docs.microsoft.com/en-us/graph/)

samples/msal-browser-samples/ExpressSample/README.md

@@ -0,0 +1,30 @@
+{
+  "name": "express-sample",
+  "version": "1.0.0",
+  "description": "Express sample app demonstrating MSAL.js authentication with routing",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js",
+    "build:package": "npm run build:all --workspace=lib/msal-browser"
+  },
+  "dependencies": {
+    "@azure/msal-browser": "^4.0.0",
+    "express": "^4.18.2",
+    "express-handlebars": "^7.0.7",
+    "morgan": "^1.10.0",
+    "dotenv": "^16.0.3"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.22"
+  },
+  "keywords": [
+    "msal",
+    "azure",
+    "authentication",
+    "express",
+    "spa"
+  ],
+  "author": "Microsoft",
+  "license": "MIT"
+}