updated sample

1-Authentication/1-sign-in/App/authConfig.js

@@ -5,40 +5,39 @@
  */
 
 const msalConfig = {
-  auth: {
-    clientId: "Enter_the_Application_Id_Here", // This is the ONLY mandatory field that you need to supply.
-    authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", // Defaults to "https://login.microsoftonline.com/common"
-    redirectUri: "Enter_the_Redirect_Uri_Here", // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href
-    postLogoutRedirectUri: "Enter_the_Redirect_Uri_Here/signout", // Simply remove this line if you would like navigate to index page after logout.
-    navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
-  },
-  cache: {
-    cacheLocation: "localStorage", // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
-    storeAuthStateInCookie: false, // If you wish to store cache items in cookies as well as browser cache, set this to "true".
-  },
-  system: {
-    loggerOptions: {
-      loggerCallback: (level, message, containsPii) => {
-        if (containsPii) {
-          return;
-        }
-        switch (level) {
-          case msal.LogLevel.Error:
-            console.error(message);
-            return;
-          case msal.LogLevel.Info:
-            console.info(message);
-            return;
-          case msal.LogLevel.Verbose:
-            console.debug(message);
-            return;
-          case msal.LogLevel.Warning:
-            console.warn(message);
-            return;
-        }
-      }
-    }
-  }
+    auth: {
+        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
+        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Defaults to "https://login.microsoftonline.com/common"
+        redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href e.g. http://localhost:3000/
+        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
+    },
+    cache: {
+        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
+        storeAuthStateInCookie: false, // set this to true if you have to support IE
+    },
+    system: {
+        loggerOptions: {
+            loggerCallback: (level, message, containsPii) => {
+                if (containsPii) {
+                    return;
+                }
+                switch (level) {
+                    case msal.LogLevel.Error:
+                        console.error(message);
+                        return;
+                    case msal.LogLevel.Info:
+                        console.info(message);
+                        return;
+                    case msal.LogLevel.Verbose:
+                        console.debug(message);
+                        return;
+                    case msal.LogLevel.Warning:
+                        console.warn(message);
+                        return;
+                }
+            },
+        },
+    },
 };
 
 /**
@@ -64,6 +63,7 @@ const loginRequest = {
 // exporting config object for jest
 if (typeof exports !== 'undefined') {
   module.exports = {
-    msalConfig: msalConfig,
+      msalConfig: msalConfig,
+      loginRequest: loginRequest,
   };
 }

1-Authentication/1-sign-in/App/authPopup.js

@@ -84,10 +84,12 @@ function signOut() {
 
     // Choose which account to logout from by passing a username.
     const logoutRequest = {
-        account: myMSALObj.getAccountByUsername(username)
+        account: myMSALObj.getAccountByUsername(username),
+        mainWindowRedirectUri: 'http://localhost:3000/signout',
+        redirectUri: 'http://localhost:3000/redirect.html',
     };
 
-    myMSALObj.logout(logoutRequest);
+    myMSALObj.logoutPopup(logoutRequest);
 }
 
 selectAccount();

1-Authentication/1-sign-in/App/authRedirect.js

@@ -91,8 +91,10 @@ function signOut() {
 
     // Choose which account to logout from by passing a username.
     const logoutRequest = {
-        account: myMSALObj.getAccountByUsername(username)
+        account: myMSALObj.getAccountByUsername(username),
+        postLogoutRedirectUri: 'http://localhost:3000/signout', // Simply remove this line if you would like navigate to index page after logout.
+
     };
 
-    myMSALObj.logout(logoutRequest);
+    myMSALObj.logoutRedirect(logoutRequest);
 }

1-Authentication/1-sign-in/App/index.html

@@ -6,26 +6,22 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
   <title>Microsoft identity platform</title>
   <link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">
+  <link rel="stylesheet" href="./styles.css">
+
 
   <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
-  <script id="load-msal" src="https://alcdn.msauth.net/browser/2.15.0/js/msal-browser.js"
-    integrity="sha384-dFzMiVGB5HpWZ+5w5VSif6jhWfNeplSw9ACYmQKZcY2azuT9kCxVWVI9HyfGdkHV"
+  <script id="load-msal" src="https://alcdn.msauth.net/browser/2.31.0/js/msal-browser.js"
+    integrity="sha384-BO4qQ2RTxj2akCJc7t6IdU9aRg6do4LGIkVVa01Hm33jxM+v2G+4q+vZjmOCywYq"
     crossorigin="anonymous"></script>
-
-    <!-- To help ensure reliability, Microsoft provides a second CDN -->
-  <script type="text/javascript">
-    if (typeof Msal === 'undefined') document.write(unescape("%3Cscript src='https://alcdn.msftauth.net/browser/2.15.0/js/msal-browser.js' type='text/javascript' crossorigin='anonymous' %3E%3C/script%3E"));
-  </script>
 
-  <!-- adding Bootstrap 4 for UI components  -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <!-- adding Bootstrap 5 for UI components  -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
 </head>
 
 <body>
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary navbarStyle">
     <a class="navbar-brand" href="/">Microsoft identity platform</a>
-    <div class="btn-group ml-auto dropleft">
+    <div class="collapse navbar-collapse justify-content-end">
       <button type="button" id="signIn" class="btn btn-secondary" onclick="signIn()">Sign-in</button>
       <button type="button" id="signOut" class="btn btn-success d-none" onclick="signOut()">Sign-out</button>
     </div>
@@ -53,15 +49,13 @@ <h5 id="welcome-div" class="card-header text-center d-none"></h5>
   </div>
 
   <!-- importing bootstrap.js and supporting js libraries -->
-  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
-    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
-    crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-    crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
-    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
-    crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
+  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
+
 
   <!-- importing app scripts (load order is important) -->
   <script type="text/javascript" src="./authConfig.js"></script>

1-Authentication/1-sign-in/App/redirect.html

@@ -0,0 +1,7 @@
+<!-- 
+    Blank page for redirect purposes. When using popup and silent APIs,
+    we recommend setting the redirectUri to a blank page or a page that does not implement MSAL.
+    For more information, please follow this link: 
+    https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/login-user.md#redirecturi-considerations 
+-->
+<h1>MSAL Redirect</h1>

1-Authentication/1-sign-in/App/styles.css

@@ -0,0 +1,3 @@
+.navbarStyle {
+    padding: .5rem 1rem !important;
+}

1-Authentication/1-sign-in/AppCreationScripts/AppCreationScripts.md

@@ -1,45 +1,35 @@
-# Registering the sample apps with the Microsoft identity platform and updating the configuration files using PowerShell
+# Registering sample apps with the Microsoft identity platform and updating configuration files using PowerShell
 
 ## Overview
 
 ### Quick summary
 
-1. On Windows run PowerShell as **Administrator** and navigate to the root of the cloned directory
+1. On Windows, run PowerShell as **Administrator** and navigate to the root of the cloned directory
 1. In PowerShell run:
 
    ```PowerShell
    Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process -Force
    ```
 
-1. Run the script to create your Azure AD application and configure the code of the sample application accordingly. (Other ways of running the scripts are described below)
+1. Run the script to create your Azure AD application and configure the code of the sample application accordingly.
 
    ```PowerShell
    cd .\AppCreationScripts\
-   .\Configure.ps1
+   .\Configure.ps1 -TenantId "your test tenant's id" -AzureEnvironmentName "[Optional] - Azure environment, defaults to 'Global'"
    ```
 
-1. Open the Visual Studio solution and click start
-
 ### More details
 
-The following paragraphs:
-
-- [Registering the sample apps with the Microsoft identity platform and updating the configuration files using PowerShell](#registering-the-sample-apps-with-the-Microsoft-identity-platform-and-updating-the-configuration-files-using-PowerShell)
-  - [Overview](#overview)
-    - [Quick summary](#quick-summary)
-    - [More details](#more-details)
-  - [Goal of the provided scripts](#goal-of-the-provided-scripts)
-    - [Presentation of the scripts](#presentation-of-the-scripts)
-    - [Usage pattern for tests and DevOps scenarios](#usage-pattern-for-tests-and-DevOps-scenarios)
-  - [How to use the app creation scripts?](#how-to-use-the-app-creation-scripts)
-    - [Pre-requisites](#pre-requisites)
-    - [Run the script and start running](#run-the-script-and-start-running)
-    - [Four ways to run the script](#four-ways-to-run-the-script)
-      - [Option 1 (interactive)](#option-1-interactive)
-      - [Option 2 (non-interactive)](#option-2-non-interactive)
-      - [Option 3 (Interactive, but create apps in a specified tenant)](#option-3-Interactive-but-create-apps-in-a-specified-tenant)
-      - [Option 4 (non-interactive, and create apps in a specified tenant)](#option-4-non-interactive-and-create-apps-in-a-specified-tenant)
-    - [Running the script on Azure Sovereign clouds](#running-the-script-on-Azure-Sovereign-clouds)
+- [Goal of the provided scripts](#goal-of-the-provided-scripts)
+  - [Presentation of the scripts](#presentation-of-the-scripts)
+  - [Usage pattern for tests and DevOps scenarios](#usage-pattern-for-tests-and-DevOps-scenarios)
+- [How to use the app creation scripts?](#how-to-use-the-app-creation-scripts)
+  - [Pre-requisites](#pre-requisites)
+  - [Run the script and start running](#run-the-script-and-start-running)
+  - [Four ways to run the script](#four-ways-to-run-the-script)
+    - [Option 1 (interactive)](#option-1-interactive)
+    - [Option 2 (Interactive, but create apps in a specified tenant)](#option-3-Interactive-but-create-apps-in-a-specified-tenant)
+  - [Running the script on Azure Sovereign clouds](#running-the-script-on-Azure-Sovereign-clouds)
 
 ## Goal of the provided scripts
 
@@ -50,14 +40,14 @@ This sample comes with two PowerShell scripts, which automate the creation of th
 These scripts are:
 
 - `Configure.ps1` which:
-  - creates Azure AD applications and their related objects (permissions, dependencies, secrets),
-  - changes the configuration files in the C# and JavaScript projects.
+  - creates Azure AD applications and their related objects (permissions, dependencies, secrets, app roles),
+  - changes the configuration files in the sample projects.
   - creates a summary file named `createdApps.html` in the folder from which you ran the script, and containing, for each Azure AD application it created:
     - the identifier of the application
     - the AppId of the application
     - the url of its registration in the [Azure portal](https://portal.azure.com).
 
-- `Cleanup.ps1` which cleans-up the Azure AD objects created by `Configure.ps1`. Note that this script does not revert the changes done in the configuration files, though. You will need to undo the change from source control (from Visual Studio, or from the command line using, for instance, git reset).
+- `Cleanup.ps1` which cleans-up the Azure AD objects created by `Configure.ps1`. Note that this script does not revert the changes done in the configuration files, though. You will need to undo the change from source control (from Visual Studio, or from the command line using, for instance, `git reset`).
 
 ### Usage pattern for tests and DevOps scenarios
 
@@ -75,22 +65,23 @@ The `Configure.ps1` will stop if it tries to create an Azure AD application whic
     Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
     ```
 
-1. ### (Optionally) install AzureAD PowerShell modules
+### (Optionally) install Microsoft.Graph.Applications PowerShell modules
+
+The scripts install the required PowerShell module (Microsoft.Graph.Applications) for the current user if needed. However, if you want to install if for all users on the machine, you can follow the following steps:
 
-The scripts install the required PowerShell module (AzureAD) for the current user if needed. However, if you want to install if for all users on the machine, you can follow the following steps:
+1. If you have never done it already, in the PowerShell window, install the Microsoft.Graph.Applications PowerShell modules. For this:
 
-1. If you have never done it already, in the PowerShell window, install the AzureAD PowerShell modules. For this:
-   1. Open PowerShell as admin (On Windows, Search Powershell in the search bar, right click on it and select Run as administrator).
+   1. Open PowerShell as admin (On Windows, Search Powershell in the search bar, right click on it and select **Run as administrator**).
    2. Type:
 
       ```PowerShell
-      Install-Module AzureAD
+      Install-Module Microsoft.Graph.Applications
       ```
 
       or if you cannot be administrator on your machine, run:
 
       ```PowerShell
-      Install-Module AzureAD -Scope CurrentUser
+      Install-Module Microsoft.Graph.Applications -Scope CurrentUser
       ```
 
 ### Run the script and start running
@@ -105,44 +96,29 @@ The scripts install the required PowerShell module (AzureAD) for the current use
 1. Open the Visual Studio solution, and in the solution's context menu, choose **Set Startup Projects**.
 1. select **Start** for the projects
 
-You're done. this just works!
+You're done!
 
-### Four ways to run the script
+### Two ways to run the script
 
 We advise four ways of running the script:
 
 - Interactive: you will be prompted for credentials, and the scripts decide in which tenant to create the objects,
-- non-interactive: you will provide credentials, and the scripts decide in which tenant to create the objects,
-- Interactive in specific tenant:  you will provide the tenant in which you want to create the objects and then you will be prompted for credentials, and the scripts will create the objects,
-- non-interactive in specific tenant: you will provide tenant in which you want to create the objects and credentials, and the scripts will create the objects.
+- Interactive in specific tenant: you will provide the tenant in which you want to create the objects and then you will be prompted for credentials, and the scripts will create the objects,
 
 Here are the details on how to do this.
 
 #### Option 1 (interactive)
 
-- Just run ``. .\Configure.ps1``, and you will be prompted to sign-in (email address, password, and if needed MFA).
+- Just run ``.\Configure.ps1``, and you will be prompted to sign-in (email address, password, and if needed MFA).
 - The script will be run as the signed-in user and will use the tenant in which the user is defined.
 
 Note that the script will choose the tenant in which to create the applications, based on the user. Also to run the `Cleanup.ps1` script, you will need to re-sign-in.
 
-#### Option 2 (non-interactive)
-
-When you know the identity and credentials of the user in the name of whom you want to create the applications, you can use the non-interactive approach. It's more adapted to DevOps. Here is an example of script you'd want to run in a PowerShell Window
-
-```PowerShell
-$secpasswd = ConvertTo-SecureString "[Password here]" -AsPlainText -Force
-$mycreds = New-Object System.Management.Automation.PSCredential ("[login@tenantName here]", $secpasswd)
-. .\Cleanup.ps1 -Credential $mycreds
-. .\Configure.ps1 -Credential $mycreds
-```
-
-Of course, in real life, you might already get the password as a `SecureString`. You might also want to get the password from KeyVault.
-
-#### Option 3 (Interactive, but create apps in a specified tenant)
+#### Option 2 (Interactive, but create apps in a specified tenant)
 
   if you want to create the apps in a particular tenant, you can use the following option:
 
-- open the [Azure portal](https://portal.azure.com)
+- Open the [Azure portal](https://portal.azure.com)
 - Select the Azure Active directory you are interested in (in the combo-box below your name on the top right of the browser window)
 - Find the "Active Directory" object in this tenant
 - Go to **Properties** and copy the content of the **Directory Id** property
@@ -154,32 +130,19 @@ $tenantId = "yourTenantIdGuid"
 . .\Configure.ps1 -TenantId $tenantId
 ```
 
-#### Option 4 (non-interactive, and create apps in a specified tenant)
-
-This option combines option 2 and option 3: it creates the application in a specific tenant. See option 3 for the way to get the tenant Id. Then run:
-
-```PowerShell
-$secpasswd = ConvertTo-SecureString "[Password here]" -AsPlainText -Force
-$mycreds = New-Object System.Management.Automation.PSCredential ("[login@tenantName here]", $secpasswd)
-$tenantId = "yourTenantIdGuid"
-. .\Cleanup.ps1 -Credential $mycreds -TenantId $tenantId
-. .\Configure.ps1 -Credential $mycreds -TenantId $tenantId
-```
-
 ### Running the script on Azure Sovereign clouds
 
-All the four options listed above, can be used on any Azure Sovereign clouds. By default, the script targets `AzureCloud`, but it can be changed using the parameter `-AzureEnvironmentName`.
+All the four options listed above can be used on any Azure Sovereign clouds. By default, the script targets `AzureCloud`, but it can be changed using the parameter `-AzureEnvironmentName`.
 
 The acceptable values for this parameter are:
 
 - AzureCloud
 - AzureChinaCloud
 - AzureUSGovernment
-- AzureGermanyCloud
 
 Example:
 
  ```PowerShell
- . .\Cleanup.ps1 -AzureEnvironmentName "AzureGermanyCloud"
- . .\Configure.ps1 -AzureEnvironmentName "AzureGermanyCloud"
+ . .\Cleanup.ps1 -AzureEnvironmentName "AzureUSGovernment"
+ . .\Configure.ps1 -AzureEnvironmentName "AzureUSGovernment"
  ```