How to interact with Windows Authentication and Users group using React.js .Net - windows-authentication

Question

I am curious how one would interact with Windows Authentication using React.js.
We have a little internal portal we are trying to set up, we already have predefined users groups and users that are in them. We are looking for a way to get those Authenticated credentials to the view using React.js. There are a couple of good links on how to get started with Reactjs.net but I don't see any tutorials on passing credentials to Reactjs.
Any suggested reading? Tutorials or maybe you know yourself and can provide direction?
enter link description here

Answer 1

I've found this really cool tutorial!
It says:
Here’s a minimal setup for React and Webpack based on what we did in this article. Now that you understand the steps, you can copy-paste this to your heart’s content.
package.json
Note: agentkeepalive is only needed for fixing a Windows authentication error with Hot Module Replacement.
{
"name": "ReactWebPackMVC5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server –open –hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"agentkeepalive": "^3.5.1",
"babel-loader": "^8.0.2",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"webpack": "^4.18.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}
webpack.config.js
Again, agentkeepalive is only needed for fixing a Windows authentication error with Hot Module Replacement. The same is true for the agent and onProxyRes properties.
const path = require("path"); const agent = require("agentkeepalive")
module.exports = { mode: "development", entry: "./Scripts/react/app.js", //or app.jsx output: { path: path.resolve(__dirname, "./Scripts/react/dist"), filename: "bundle.js", publicPath: "Scripts/react/dist" }, resolve: { extensions: ["*", ".js", ".jsx"] }, module: { rules: [ { test: /\.(js|jsx)/, exclude: /node_modules/, use: { loader: "babel-loader", options: { “presets”: [“#babel/preset-env”, “#babel/preset-react”] } } } ] }, devServer: { proxy: { "*": { target: "http://localhost:59829", changeOrigin: true, agent: new agent({ maxSockets: 100, keepAlive: true, maxFreeSockets: 10, keepAliveMsecs: 100000, timeout: 6000000, keepAliveTimeout: 90000 // free socket keepalive for 90 seconds }), onProxyRes: (proxyRes) => { var key = "www-authenticate"; proxyRes.headers[key] = proxyRes.headers[key] && proxyRes.headers[key].split(","); }, }, port: 8080, host: "0.0.0.0", hot: true, }, } };