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

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, }, } };