add-out-of-repo-snippet

Author: OwenRichards1

articles/active-directory/develop/quickstart-single-page-app-javascript-sign-in.md

@@ -9,7 +9,7 @@ ms.service: active-directory
 ms.subservice: develop
 ms.topic: quickstart
 ms.workload: identity
-ms.date: 09/13/2023
+ms.date: 09/25/2023
 ms.author: henrymbugua
 ms.reviewer: OwenRichards1
 ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-track-js
@@ -57,85 +57,14 @@ To obtain the sample application, you can either clone it from GitHub or downloa
     ```console
     git clone https://github.com/Azure-Samples/ms-identity-javascript-tutorial
     ```
-
-- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-javascript-tutorial/archive/refs/heads/main.zip).
+- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-javascript-tutorial/archive/refs/heads/main.zip). Extract it to a file path where the length of the name is fewer than 260 characters.
 
 ## Configure the project
 
 1. In your IDE, open the project folder, *ms-identity-javascript-tutorial/angular-spa*, containing the sample.
 1. Open *1-Authentication/1-sign-in/App/authConfig.js* and replace the file contents with the following snippet:
 
-    ```javascript
-        /**
-     * Configuration object to be passed to MSAL instance on creation. 
-     * For a full list of MSAL.js configuration parameters, visit:
-     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
-     */
-    
-    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: '/', // 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;
-                    }
-                },
-            },
-        },
-    };
-    
-    /**
-     * Scopes you add here will be prompted for user consent during sign-in.
-     * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
-     * For more information about OIDC scopes, visit: 
-     * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
-     */
-    const loginRequest = {
-      scopes: ["openid", "profile"],
-    };
-    
-    /**
-     * An optional silentRequest object can be used to achieve silent SSO
-     * between applications by providing a "login_hint" property.
-     */
-    
-    // const silentRequest = {
-    //   scopes: ["openid", "profile"],
-    //   loginHint: "[email protected]"
-    // };
-    
-    // exporting config object for jest
-    if (typeof exports !== 'undefined') {
-      module.exports = {
-          msalConfig: msalConfig,
-          loginRequest: loginRequest,
-      };
-    }
-    ```
+    :::code language="csharp" source="~/ms-identity-docs-code-javascript/js-spa/App/authConfig.js":::
 
     * `TenantId` - The identifier of the tenant where the application is registered. Replace the text in quotes with the **Directory (tenant) ID** that was recorded earlier from the overview page of the registered application.
     * `ClientId` - The identifier of the application, also referred to as the client. Replace the text in quotes with the **Directory (tenant) ID** value that was recorded earlier from the overview page of the registered application.