react work part 1

Author: cilwerner

msal-javascript-conceptual/node/accounts.md

@@ -15,8 +15,6 @@ ms.reviewer: dmwendia,cwerner, owenrichards, kengaderdus
 
 # Accounts in MSAL Node
 
-> This is the platform-specific Accounts documentation for `msal-node`. For the general documentation of the `AccountInfo` object structure, please visit the `msal-common` [Accounts document](../../msal-common/docs/Accounts.md).
-
 ## Usage
 
 The `msal-node` library provides the following different APIs to access cached accounts:

msal-javascript-conceptual/react/class-components.md

@@ -1,6 +1,6 @@
 ---
 title: Using MSAL React with class components
-description: Learn how to use MSAL React with class components. covering initialization, protecting components, accessing MSAL React context and logging in.
+description: Learn how to use MSAL React with class components, covering initialization, protecting components, accessing MSAL React context and logging in.
 author: EmLauber
 manager: CelesteDG
 
@@ -12,13 +12,19 @@ ms.reviewer: dmwendia,cwerner, owenrichards, kengaderdus
 
 # Using MSAL React with class components
 
-MSAL React supports both function components and class components. However, you will not be able to use `@azure/msal-react` hooks inside your class components so if you need access to authentication state inside your class component you will need to use `@azure/msal-browser` directly to obtain similar functionality.
+MSAL React supports both function components and class components. This article provides guidance on using MSAL React with class components, enabling you to initialize, protect and access MSAL React context in your class components.
+
+It's important to note that you won't be able to use `@azure/msal-react` hooks inside your class components. If you need access to authentication state inside your class component, you'll need to use `@azure/msal-browser` directly to obtain similar functionality.
+
+## Prerequisites
+
 
-For a working example, see [react-router-sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react-router-sample).
 
 ## Initialization
 
-Just like when using function components you will need an [`MsalProvider`](/javascript/api/@azure/msal-react/#@azure-msal-react-msalprovider) component at the top level of the component tree that requires access to authentication state.
+Initialization with class components with MSAL React works very similarly to to function components. Similar to when using function components, you'll need an [`MsalProvider`](/javascript/api/@azure/msal-react/#@azure-msal-react-msalprovider) component at the top level of the component tree that requires access to authentication state.
+
+In the following snippet, the `MsalProvider` component is used to wrap the entire application, making the MSAL instance available to all child components. This enables child components to use MSAL for user authentication, acquiring tokens, and calling protected APIs.
 
 ```javascript
 import React from "react";
@@ -40,7 +46,13 @@ class App extends React.Component {
 
 ## Protecting Components
 
-Just like when using function components you can use the `AuthenticatedTemplate`, `UnauthenticatedTemplate` and `MsalAuthenticationTemplate` to conditionally render your components.
+In MSAL React, you can protect your components and conditionally render then based on the authentication state of the user. This works similarly to using function components. The main examples are: 
+
+* [`AuthenticatedTemplate`](/javascript/api/@azure/msal-react/#@azure-msal-react-authenticatedtemplate) - This component will only render its children if the user is authenticated. If the user is not authenticated, it will not render anything.
+* [`UnauthenticatedTemplate`](/javascript/api/@azure/msal-react/#@azure-msal-react-unauthenticatedtemplate) - This component will only render its children if the user is not authenticated. If the user is authenticated, it will not render anything.
+* [`MsalAuthenticationTemplate`](/javascript/api/@azure/msal-react/#@azure-msal-react-msalauthenticationtemplate) - This component attempts to authenticate the user before rendering its children. You can specify the interaction type (redirect or popup) as a prop. If the user is not authenticated, it will initiate the authentication process.
+
+The following snippet shows how to use `AuthenticatedTemplate`, `UnauthenticatedTemplate`, and `MsalAuthenticationTemplate` to protect your React components. Note how `MSAL Provider` wraps around the child components.
 
 ```javascript
 import React from "react";
@@ -70,10 +82,12 @@ class App extends React.Component {
 
 ## Accessing MSAL React context in a class component
 
-Since you can't use the `useMsal` hook to access the MSAL React context in a class component you have 2 other options. You can either use the raw context directly or you can use the `withMsal` higher order component to inject the context into your component's props. <!--IMsalContext?-->
+The `useMsal` hook can't be used to access the MSAL React context in a class component. This is because hooks can only be used in function components where you can use features without an instance. Because class components have instances, you have 2 other options. You can either use the raw context directly or you can use the `withMsal` higher order component to inject the context into your component's props. <!--IMsalContext?-->
 
 ### Accessing raw context
 
+The following snippet shows how to use the `MsalContext` to access the raw context in a class component.
+
 ```javascript
 import React from "react";
 import { MsalProvider, MsalContext } from "@azure/msal-react";
@@ -103,10 +117,12 @@ class YourClassComponent extends React.Component {
 }
 ```
 
-For a working example, see [ProfileRawContext.jsx](../../../samples/msal-react-samples/react-router-sample) in [react-router-sample](../../../samples/msal-react-samples/react-router-sample/src/pages/ProfileRawContext.jsx).
+For a working example, refer to [*ProfileRawContext.jsx*](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react-router-sample/src/pages/ProfileRawContext.jsx) in our [react-router-sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react-router-sample).
 
 ### Accessing via withMsal HOC
 
+The alternative is to use the `withMsal` higher order component to inject the context into your component's props. The following snippet shows how to use the `withMsal` HOC to access the MSAL React context in a class component.
+
 ```javascript
 import React from "react";
 import { MsalProvider, withMsal } from "@azure/msal-react";
@@ -136,18 +152,21 @@ class App extends React.Component {
 }
 ```
 
-For a working example, see [ProfileWithMsal.jsx](../../../samples/msal-react-samples/react-router-sample) in [react-router-sample](../../../samples/msal-react-samples/react-router-sample/src/pages/ProfileWithMsal.jsx).
+For a working example, refer to [*ProfileWithMsal.jsx*](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react-router-sample/src/pages/ProfileWithMsal.jsx) in [react-router-sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react-router-sample).
 
 ## Logging in using a class component
 
-Regardless of which approach you take to get the `MSAL React` context the usage will be the same. Once you have the context object you can invoke [any of the APIs](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_browser.ipublicclientapplication.html) on `PublicClientApplication`, inspect the accounts signed in, or determine if authentication is currently in progress.
+Regardless of which approach you take to get the `MSAL React` context, the usage will be the same. Once you have the context object you can invoke [any of the APIs](/javascript/api/@azure/msal-browser/publicclientapplication) on `PublicClientApplication`, inspect the accounts signed in, or determine if authentication is currently in progress.
 
 The following examples will show how to login using the `withMsal` HOC approach but you can quickly adapt to the other approach if needed.
 
-**Note**: By now you should be aware that an `MsalProvider` component must be rendered at any level above any component that uses context, the examples below will assume there is a provider and will not demonstrate this.
+> [!NOTE]
+> It's important to remember that an `MsalProvider` component must be rendered at any level above any component that uses context. The following examples assume there is a provider and won't demonstrate this.
 
 ### Logging in as a result of clicking a button
 
+The following snippet defines a React class component `LoginButton` that uses the `withMsal` higher-order component. It renders a button that either triggers a login popup if the user is not authenticated, or logs out the user if they are authenticated.
+
 ```javascript
 import React from "react";
 import { withMsal } from "@azure/msal-react";
@@ -169,6 +188,8 @@ export default YourWrappedComponent = withMsal(LoginButton);
 
 ### Logging in on page load
 
+The following snippet defines a React class component `ProtectedComponent` that uses the `withMsal` higher-order component. It attempts to authenticate the user upon mounting and updating, and displays whether the user is authenticated or if authentication is in progress on the loading page.
+
 ```javascript
 import React from "react";
 import { withMsal } from "@azure/msal-react";
@@ -204,3 +225,7 @@ class ProtectedComponent extends React.Component {
 
 export default YourWrappedComponent = withMsal(ProtectedComponent);
 ```
+
+## See also
+
+- Check out our [react-router-sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react-router-sample).

msal-javascript-conceptual/react/errors.md

@@ -1,5 +1,5 @@
 ---
-title: Handle errors and exceptions in MSAL.js
+title: Handle errors and exceptions in MSAL Node
 description: Learn how to handle use MSAL React with class components. covering initialization, protecting components, accessing MSAL React context and logging in.
 author: EmLauber
 manager: CelesteDG
@@ -10,31 +10,19 @@ ms.author: emilylauber
 ms.reviewer: dmwendia,cwerner, owenrichards, kengaderdus
 ---
 
-# Handle errors and exceptions in MSAL.js
+# Handle errors and exceptions in MSAL Node
 
-***
-
-**[BrowserConfigurationAuthErrors](#Browserconfigurationautherrors)**
-
-1. [stubbed_public_client_application_called](#stubbed_public_client_application_called)
-
-**[BrowserAuthErrors](#browserautherrors)**
-
-1. [interaction_in_progress](#interaction_in_progress)
-
-**[Additional Errors](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/errors.md)**
-
-***
+This article covers how to handle some of the errors and exceptions that can be thrown by MSAL React. We'll cover BrowserConfigurationAuthErrors, and BrowserAuthErrors and provide some troubleshooting steps to help you resolve them.
 
 ## BrowserConfigurationAuthErrors
 
-### stubbed_public_client_application_called
+BrowserConfigurationAuthErrors are used to represent errors that occur due to incorrect configuration of the MSAL authentication parameters, and can occur when initializing a `PublicClientApplication` or `ConfidentialClientApplication` instance. If the configuration object passed to the constructor does not meet the library's requirements, you don't provide a valid client ID or authority, or if you provide an invalid redirect URI, you might encounter this type of error
 
-**Error Message**: Stub instance of Public Client Application was called. If using `@azure/msal-react`, please ensure context is not used without a provider.
+### `stubbed_public_client_application_called`
 
-When using `@azure/msal-react` this error is thrown when you try to use an msal component or hook without an `MsalProvider` higher up in the component tree. All hooks and components make use of the [React Context API](https://reactjs.org/docs/context.html) and require a provider.
+This error means that a method has been called on a `PublicClientApplication` instance that has been stubbed out or incorrectly initialized, when you try to use an msal component or hook without an `MsalProvider` higher up in the component tree. All hooks and components make use of the [React Context API](https://reactjs.org/docs/context.html) and require a provider. You may get a message similar to `Stub instance of PublicClientApplication was called. If using @azure/msal-react, please ensure context is not used without a provider`.
 
-❌ The following example will throw this error because the `useMsal` hook is used outside the context of `MsalProvider`:
+The following snippet will throw this error because the `useMsal` hook is used outside the context of `MsalProvider`.
 
 ```javascript
 import { useMsal, MsalProvider } from "@azure/msal-react";
@@ -53,7 +41,7 @@ function App() {
 }
 ```
 
-✔️ To resolve the error you should refactor the code above so that the `useMsal` hook is called in a component underneath `MsalProvider`:
+To resolve the error you should refactor the preceding snippet so that the `useMsal` hook is called in a component underneath `MsalProvider`. The correct implementation is shown in the following snippet.
 
 ```javascript
 import { useMsal, MsalProvider } from "@azure/msal-react";
@@ -78,18 +66,18 @@ function App() {
 
 ## BrowserAuthErrors
 
-### Interaction_in_progress
+BrowserAuthErrors are used to represent errors that occur during the authentication process in a browser environment. Such occurrences can be when a user tries to initiate a new login request while a previous request is still being processed. To resolve these errors, you should ensure that each interaction has completed before starting a new one.
 
-**Error Message**: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.
+### `Interaction_in_progress`
 
-This error is thrown when an interactive API (`loginPopup`, `loginRedirect`, `acquireTokenPopup`, `acquireTokenRedirect`) is invoked while another interactive API is still in progress. The login and acquireToken APIs are async so you will need to ensure that the resulting promises have resolved before invoking another one.
+This error is thrown when an interactive API (`loginPopup`, `loginRedirect`, `acquireTokenPopup`, `acquireTokenRedirect`) is invoked while another interactive API is still in progress. The login and acquireToken APIs are async so you will need to ensure that the resulting promises have resolved before invoking another one. You may get an error message similar to `Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.`
 
 In `@azure/msal-react` there are 2 scenarios when this can happen:
 
-1. Your application is calling one of the above APIs outside of the context where you do not have access to the `inProgress` state. For more about context see the [FAQ](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/FAQ.md#what-can-i-do-outside-of-msal-react-context)
-1. Your application is calling one of the above APIs without first checking if interaction is already in progress elsewhere.
+1. Your application is calling one of the APIs outside of the context where you do not have access to the `inProgress` state. For more about context see the [FAQ](./faq.md#what-can-i-do-outside-of-msal-react-context)
+1. Your application is calling one of the APIs without first checking if interaction is already in progress elsewhere.
 
-❌ The following example will throw this error when another component has already invoked an interactive API that is in progress:
+The following snippet throws the error when another component has already invoked an interactive API that is in progress:
 
 ```javascript
 import { useMsal, useIsAuthenticated } from "@azure/msal-react";
@@ -108,7 +96,7 @@ export function exampleComponent() {
 }
 ```
 
-✔️ To fix the previous example, check that no other interaction is in progress before invoking `loginPopup`:
+To fix the previous snippet, check that no other interaction is in progress before invoking `loginPopup`:
 
 ```javascript
 import { useMsal, useIsAuthenticated } from "@azure/msal-react";
@@ -129,11 +117,15 @@ export function exampleComponent() {
 
 #### Troubleshooting Steps
 
-- [Enable verbose logging](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md#using-the-config-object) and trace the order of events. Verify that an interactive API is not invoked before another has resolved. If using the redirect flow make sure `handleRedirectPromise` has resolved (done in the `MsalProvider`).
+- [Enable verbose logging](../browser/configuration.md#using-the-config-object) and trace the order of events. Verify that an interactive API is not invoked before another has resolved. If using the redirect flow make sure `handleRedirectPromise` has resolved (done in the `MsalProvider`).
 
 If you are unable to figure out why this error is being thrown please [open an issue](https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/new/choose) and be prepared to share the following information:
 
 - Verbose logs
 - A sample app and/or code snippets that we can use to reproduce the issue
 - Refresh the page. Does the error go away?
 - Open your application in a new tab. Does the error go away?
+
+## See also
+
+There are additional errors that can be thrown by MSAL.js. You can refer to the [full list of errors](../browser/errors.md) covered in MSAL Browser.