application screenshots

Author: mmacy

articles/active-directory/develop/media/tutorial-v2-javascript-spa/spa-01-signin-dialog.png

@@ -19,25 +19,23 @@ ms.custom: aaddev
 > [!IMPORTANT]
 > This feature is currently in preview. Previews are made available to you on the condition that you agree to the [supplemental terms of use](https://azure.microsoft.com/support/legal/preview-supplemental-terms/). Some aspects of this feature might change before general availability (GA).
 
-This tutorial shows you how to create a JavaScript single-page application (SPA) that uses the Microsoft Authentication Library (MSAL) for JavaScript v2.0 (preview) to:
+This tutorial shows you how to create a JavaScript single-page application (SPA) that uses the Microsoft Authentication Library (MSAL) for JavaScript v2.0 to:
 
 > [!div class="checklist"]
 > * Perform the OAuth 2.0 authorization code flow with PKCE
 > * Sign in personal Microsoft accounts as well as work and school accounts
 > * Acquire an access token
 > * Call Microsoft Graph or your own API that requires access tokens obtained from the Microsoft identity platform endpoint
 
-MSAL.js 2.0 (preview) improves on MSAL.js 1.0 by supporting the authorization code flow in the browser instead of using the implicit flow. MSAL.js 2.0 (preview) supports most features available in 1.0, but there are nuances to the authentication flow in both.
+MSAL.js 2.0 improves on MSAL.js 1.0 by supporting the authorization code flow in the browser instead of the implicit grant flow. MSAL.js 2.0 does **NOT** support the implicit flow.
 
-MSAL.js 2.0 (preview) does **NOT** support the implicit flow.
-
-## How the sample app generated by this guide works
+## How the tutorial app works
 
 ![Shows how the sample app generated by this tutorial works](media/active-directory-develop-guidedsetup-javascriptspa-introduction/javascriptspa-intro.svg)
 
-The sample application created by this guide enables a JavaScript SPA to query the Microsoft Graph API or a web API that accepts tokens from the Microsoft identity platform endpoint. In this scenario, after a user signs in, an access token is requested and added to HTTP requests through the authorization header. Token acquisition and renewal are handled by the Microsoft Authentication Library (MSAL).
+The application you create in this tutorial enables a JavaScript SPA to query the Microsoft Graph API by acquiring security tokens from the the Microsoft identity platform endpoint. In this scenario, after a user signs in, an access token is requested and added to HTTP requests in the authorization header. Token acquisition and renewal are handled by the Microsoft Authentication Library for JavaScript (MSAL.js).
 
-This guide uses the following library:
+This tutorial uses the following library:
 
 | | |
 |---|---|
@@ -61,7 +59,9 @@ To continue with the tutorial and build the application yourself, continue on to
 
 ## Create your project
 
-Once you have [Node.js](https://nodejs.org/en/download/) installed, create a folder to host your application. Then, implement a small [Express](https://expressjs.com/) web server to serve your *index.html* file.
+Once you have [Node.js](https://nodejs.org/en/download/) installed, create a folder to host your application, for example *msal-spa-tutorial*.
+
+Next, implement a small [Express](https://expressjs.com/) web server to serve your *index.html* file.
 
 1. First, change to your project directory in your terminal and then run the following `npm` commands:
     ```console
@@ -114,9 +114,20 @@ Once you have [Node.js](https://nodejs.org/en/download/) installed, create a fol
    console.log(`Listening on port ${port}...`);
     ```
 
-You now have a small webserver to serve your SPA. The folder structure you should have at the end of this tutorial is similar to the following:
+You now have a small webserver to serve your SPA. After completing the rest of the tutorial, the file and folder structure of your project should look similar to the following:
 
-![A text representation of the intended SPA folder structure](./media/tutorial-v2-javascript-spa/single-page-application-folder-structure.png)
+```
+msal-spa-tutorial/
+├── app
+│   ├── authConfig.js
+│   ├── authPopup.js
+│   ├── authRedirect.js
+│   ├── graphConfig.js
+│   ├── graph.js
+│   ├── index.html
+│   └── ui.js
+└── server.js
+```
 
 ## Create the SPA UI
 
@@ -130,7 +141,7 @@ You now have a small webserver to serve your SPA. The folder structure you shoul
       <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-        <title>Quickstart | MSAL.JS Vanilla JavaScript SPA</title>
+        <title>Tutorial | MSAL.js JavaScript SPA</title>
 
         <!-- IE support: add promises polyfill before msal.js  -->
         <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.min.js"></script>
@@ -142,15 +153,15 @@ You now have a small webserver to serve your SPA. The folder structure you shoul
       </head>
       <body>
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-          <a class="navbar-brand" href="/">MS Identity Platform</a>
+          <a class="navbar-brand" href="/">Microsoft identity platform</a>
           <div class="btn-group ml-auto dropleft">
               <button type="button" id="SignIn" class="btn btn-secondary" onclick="signIn()">
                 Sign In
               </button>
           </div>
         </nav>
         <br>
-        <h5 class="card-header text-center">Vanilla JavaScript SPA calling MS Graph API with MSAL.JS</h5>
+        <h5 class="card-header text-center">JavaScript SPA calling Microsoft Graph API with MSAL.js</h5>
         <br>
         <div class="row" style="margin:auto" >
         <div id="card-div" class="col-md-3" style="display:none">
@@ -163,7 +174,7 @@ You now have a small webserver to serve your SPA. The folder structure you shoul
             <button class="btn btn-primary" id="seeProfile" onclick="seeProfile()">See Profile</button>
             <br>
             <br>
-            <button class="btn btn-primary" id="readMail" onclick="readMail()">Read Mails</button>
+            <button class="btn btn-primary" id="readMail" onclick="readMail()">Read Mail</button>
           </div>
         </div>
         </div>
@@ -547,44 +558,47 @@ In the sample application created in this tutorial, the `callMSGraph()` method i
 
 You've completed creation of the application and are now ready to launch the Node.js web server and test the app's functionality.
 
-1. Start the Node.js web server by running the following commands from within the application folder:
+1. Start the Node.js web server by running the following command from within the root of your project folder:
 
    ```console
    npm start
    ```
-1. In your browser, enter `http://localhost:3000` or `http://localhost:<port>`, where `<port>` is the port that your web server is listening on. You should see the contents of your *index.html* file and the **Sign In** button.
+1. In your browser, navigate to `http://localhost:3000` or `http://localhost:<port>`, where `<port>` is the port that your web server is listening on. You should see the contents of your *index.html* file and the **Sign In** button.
 
 ### Sign in to the application
 
 After the browser loads your *index.html* file, select **Sign In**. You're prompted to sign in with the Microsoft identity platform endpoint:
 
-![The JavaScript SPA account sign-in window](media/active-directory-develop-guidedsetup-javascriptspa-test/javascriptspascreenshot1.png)
+:::image type="content" source="media/tutorial-v2-javascript-spa/spa-01-signin-dialog.png" alt-text="Web browser displaying sign-in dialog":::
 
 ### Provide consent for application access
 
-The first time that you sign in to your application, you're prompted to grant it access to your profile and sign you in:
+The first time you sign in to your application, you're prompted to grant it access to your profile and sign you in:
 
-![The "Permissions requested" window](media/active-directory-develop-guidedsetup-javascriptspa-test/javascriptspaconsent.png)
+:::image type="content" source="media/tutorial-v2-javascript-spa/spa-02-consent-dialog.png" alt-text="Content dialog displayed in web browser":::
 
-### View application results
+If you consent to the requested permissions, the web applications displays your user name, signifying a successful login:
 
-After you sign in, your user profile information is returned in the Microsoft Graph API response that's displayed:
+:::image type="content" source="media/tutorial-v2-javascript-spa/spa-03-signed-in.png" alt-text="Results of a successful sign-in in the web browser":::
 
-![Results from the Microsoft Graph API call](media/active-directory-develop-guidedsetup-javascriptspa-test/javascriptsparesults.png)
+### Call the Graph API
+
+After you sign in, select **See Profile** to view the user profile information returned in the response from the call to the Microsoft Graph API:
+
+:::image type="content" source="media/tutorial-v2-javascript-spa/spa-04-see-profile.png" alt-text="Profile information from Microsoft Graph displayed in the browser":::
 
 ### More information about scopes and delegated permissions
 
-The Microsoft Graph API requires the *user.read* scope to read a user's profile. By default, this scope is automatically added in every application that's registered in the Azure portal. Other APIs for Microsoft Graph, as well as custom APIs for your back-end server, might require additional scopes. For example, the Microsoft Graph API requires the *Mail.Read* scope in order to list the user's mails.
+The Microsoft Graph API requires the *user.read* scope to read a user's profile. By default, this scope is automatically added in every application that's registered in the Azure portal. Other APIs for Microsoft Graph, as well as custom APIs for your back-end server, might require additional scopes. For example, the Microsoft Graph API requires the *Mail.Read* scope in order to list the user's email.
 
-> [!NOTE]
-> The user might be prompted for additional consent as you add scopes.
+As you add scopes, your users might be prompted to provide additional consent for the added scopes.
 
-If a back-end API doesn't require a scope (not recommended), you can use *clientId* as the scope in the calls to acquire tokens.
+If a back-end API doesn't require a scope, which isn't recommended, you can use `clientId` as the scope in the calls to acquire tokens.
 
 [!INCLUDE [Help and support](../../../includes/active-directory-develop-help-support-include.md)]
 
 ## Next steps
 
 To learn more about the auth code flow, as well as the differences between the implicit and authorization code flows, see [Microsoft identity platform and OAuth 2.0 authorization code flow](v2-oauth2-auth-code-flow.md).
 
-If you'd like to dive deeper into JavaScript single-page application development on the Microsoft identity platform, the multi-part [Scenario: Single-page application](scenario-spa-overview.md) series of articles can help you get started.
+If you'd like to dive deeper into JavaScript single-page application development on the Microsoft identity platform, the multi-part [Scenario:      Single-page application](scenario-spa-overview.md) series of articles can help you get started.