Port update

README.md

@@ -11,7 +11,7 @@ Example
 const AAD = {
     clientId: '532607b1-ce64-4fd3-b48f-5d7d803e0774',
     tenantId: 'c26906ba-01b0-48ec-afd2-ad8a55b1b0fb',
-    redirect: 'http://localhost:3000'
+    redirect: 'http://localhost:4002'
 }
 ```
 Once this step is completed, build the app and run. This is a one time update and you will only need to redo this if you change or create a new AAD application.
@@ -30,14 +30,15 @@ npm run build
 
 ## Run
 From a command line
+
 ```
-npm run app
+node server.js
 ````
 
 ## Usage
 After running the app, visit the following site in a browser
 ```
-http://localhost:3000
+http://localhost:4002
 ````
 
 ### __Instructions__
@@ -67,7 +68,7 @@ When you connect the device using the option in the tool, you will be able to re
 You will need to provide parameters on the URL so that the tool has the correct context. Use the standard URL pattern to delimit parameters i.e.
 
 ```
-http://localhost:3000?deviceId=<myDeviceId>&appId=<myAppId>
+http://localhost:4002?deviceId=<myDeviceId>&appId=<myAppId>
 ```
 
 | Parameter | Description                                     | Mandatory | Type   | Default

package-lock.json

@@ -4467,6 +4467,14 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "requires": {
+        "cross-spawn": "^7.0.1"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

package.json

@@ -12,6 +12,7 @@
     "azure-iothub": "^1.13.1",
     "body-parser": "^1.19.0",
     "cra-build-watch": "^3.4.0",
+    "cross-env": "^7.0.3",
     "express": "^4.17.1",
     "jsoneditor": "^9.1.9",
     "react": "^17.0.1",
@@ -22,7 +23,7 @@
   },
   "scripts": {
     "app": "node server.js",
-    "start": "react-scripts start",
+    "start": "cross-env PORT=4002 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

server.js

@@ -4,7 +4,7 @@ var Registry = require('azure-iothub').Registry;
 const bodyParser = require('body-parser');
 
 var app = express()
-var port = 3000
+var port = 4002
 
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());

src/config.js

@@ -0,0 +1,6 @@
+export const Config = {
+    AADLoginServer: 'https://login.microsoftonline.com',
+    AADClientID: '<YOUR AAD APPLICATION CLIENT ID HERE>',
+    AADDirectoryID: '<YOUR ADD APPLICATION DIRECTORY ID HERE>',
+    AADRedirectURI: 'http://localhost:4002',
+}

src/shared/authContext.js

@@ -1,16 +1,22 @@
+import { Config } from '../config';
 import * as msal from '@azure/msal-browser';
 import * as React from 'react';
 
-const AAD = {
-    clientId: '',
-    tenantId: '',
-    redirect: 'http://localhost:3000'
-}
-
 const Scopes = {
     Central: 'https://apps.azureiotcentral.com/user_impersonation',
 }
 
+export const MsalConfig = {
+    auth: {
+        clientId: Config.AADClientID,
+        authority: Config.AADLoginServer + '/' + Config.AADDirectoryID,
+        redirectUri: Config.AADRedirectURI
+    },
+    cache: {
+        cacheLocation: 'localStorage'
+    }
+}
+
 export const AuthContext = React.createContext({});
 
 export class AuthProvider extends React.PureComponent {
@@ -19,16 +25,7 @@ export class AuthProvider extends React.PureComponent {
 
     constructor(props) {
         super(props);
-        this.msalInstance = new msal.PublicClientApplication({
-            auth: {
-                clientId: AAD.clientId,
-                authority: 'https://login.microsoftonline.com/' + AAD.tenantId,
-                redirectUri: 'http://localhost:3000'
-            },
-            cache: {
-                cacheLocation: 'localStorage'
-            }
-        });
+        this.msalInstance = new msal.PublicClientApplication(MsalConfig);
     }
 
     signIn = () => {
@@ -38,7 +35,7 @@ export class AuthProvider extends React.PureComponent {
         this.msalInstance.handleRedirectPromise()
             .then((res) => {
                 loginAccount = res ? res.data.value[0] : this.msalInstance.getAllAccounts()[0];
-                return getAccessTokenForScope(this.msalInstance, Scopes.Central, loginAccount, AAD.redirect);
+                return getAccessTokenForScope(this.msalInstance, Scopes.Central, loginAccount, Config.AADRedirectURI);
             })
             .then(() => {
                 this.setState({ loginAccount, authenticated: true })