diff --git a/lib/msal-node/docs/caching.md b/lib/msal-node/docs/caching.md index e8d7a44ee0..7ca061a694 100644 --- a/lib/msal-node/docs/caching.md +++ b/lib/msal-node/docs/caching.md @@ -68,7 +68,7 @@ MSAL Node fires events when the in-memory cache is accessed and apps can choose 1. Load the cache from persistence to MSAL's memory before accessing the cache 2. If the in-memory cache has changed since last access, save the cache back to persistence -For persisting the cache, MSAL accepts a custom cache plugin in [configuration](./configuration.md). This plugin should implement the [ICachePlugin](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_common.icacheplugin.html) interface: +For persisting the cache, MSAL accepts a custom cache plugin in [configuration](./configuration.md). This plugin should implement the [ICachePlugin](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_common.ICachePlugin.html) interface: ```typescript interface ICachePlugin { @@ -123,10 +123,10 @@ On confidential client apps that handle users (web apps that sign in users and c ### Web apps -Since web apps are user-facing and often rely on sessions to keep track of each user, the appropriate partition key for caching is often stored within the session data, and needs to be retrieved before the cache lookup can take place. To help with this, MSAL Node provides the [DistributedCachePlugin](https://azuread.github.io/microsoft-authentication-library-for-js/ref/classes/_azure_msal_node.distributedcacheplugin.html) class, which implements the [ICachePlugin](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_common.icacheplugin.html). An instance of `DistributedCachePlugin` requires: +Since web apps are user-facing and often rely on sessions to keep track of each user, the appropriate partition key for caching is often stored within the session data, and needs to be retrieved before the cache lookup can take place. To help with this, MSAL Node provides the [DistributedCachePlugin](https://azuread.github.io/microsoft-authentication-library-for-js/ref/classes/_azure_msal_node.distributedcacheplugin.html) class, which implements the [ICachePlugin](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_common.ICachePlugin.html). An instance of `DistributedCachePlugin` requires: -- a **client interface** ([ICacheClient](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_node.icacheclient.html)), which implements `get` and `set` operations on the persistence server (Redis, MySQL etc.). -- a **partition manager** ([IPartitionManager](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_node.ipartitionmanager.html)), for reading from and writing to cache with respect to a given **session ID**. +- a **client interface** ([ICacheClient](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_node.ICacheClient.html)), which implements `get` and `set` operations on the persistence server (Redis, MySQL etc.). +- a **partition manager** ([IPartitionManager](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_node.IPartitionManager.html)), for reading from and writing to cache with respect to a given **session ID**. Please refer to the [Web app using DistributedCachePlugin](../../../samples/msal-node-samples/auth-code-distributed-cache/README.md) for a sample implementation. diff --git a/lib/msal-node/docs/faq.md b/lib/msal-node/docs/faq.md index ee267ed964..cd39143dc1 100644 --- a/lib/msal-node/docs/faq.md +++ b/lib/msal-node/docs/faq.md @@ -68,11 +68,11 @@ MSAL Node supports self-service sign-up in the auth code flow. Please see our do ### Why doesn't my app function correctly when it's running behind a proxy? -Developers can provide a `proxyUrl` string in the system config options as detailed [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md#system-config-options). Developers can also implement their own NetworkManager by instantiating an [INetworkModule](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_common.inetworkmodule.html) and building proxy support in it. +Developers can provide a `proxyUrl` string in the system config options as detailed [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md#system-config-options). Developers can also implement their own NetworkManager by instantiating an [INetworkModule](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_common.INetworkModule.html) and building proxy support in it. ### How do I implement a custom http(s) agent in MSAL Node? -Developers can use a custom http(s) agent by providing a `customAgentOptions` object in the system config options as detailed [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md#system-config-options). Developers can also implement their own NetworkManager by instantiating an [INetworkModule](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_common.inetworkmodule.html) and building custom http(s) agent support in it. +Developers can use a custom http(s) agent by providing a `customAgentOptions` object in the system config options as detailed [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md#system-config-options). Developers can also implement their own NetworkManager by instantiating an [INetworkModule](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_common.INetworkModule.html) and building custom http(s) agent support in it. ## B2C diff --git a/lib/msal-react/docs/class-components.md b/lib/msal-react/docs/class-components.md index 6edfbf06c7..3a755bd865 100644 --- a/lib/msal-react/docs/class-components.md +++ b/lib/msal-react/docs/class-components.md @@ -32,7 +32,12 @@ Just like when using function components you can use the `AuthenticatedTemplate` ```javascript import React from "react"; -import { MsalProvider, AuthenticatedTemplate, UnauthenticatedTemplate, MsalAuthenticationTemplate } from "@azure/msal-react"; +import { + MsalProvider, + AuthenticatedTemplate, + UnauthenticatedTemplate, + MsalAuthenticationTemplate, +} from "@azure/msal-react"; import { PublicClientApplication, InteractionType } from "@azure/msal-browser"; const pca = new PublicClientApplication(config); @@ -43,14 +48,16 @@ class App extends React.Component { This will only render for authenticated users - + This will only render for unauthenticated users - - + + This will only render for authenticated users. - - + + ); } } @@ -73,8 +80,8 @@ class App extends React.Component { render() { return ( - - + + ); } } @@ -85,7 +92,12 @@ class YourClassComponent extends React.Component { render() { const isAuthenticated = this.context.accounts.length > 0; if (isAuthenticated) { - return There are currently {this.context.accounts.length} users signed in! + return ( + + There are currently {this.context.accounts.length} users + signed in! + + ); } } } @@ -106,7 +118,12 @@ class YourClassComponent extends React.Component { render() { const isAuthenticated = this.props.msalContext.accounts.length > 0; if (isAuthenticated) { - return There are currently {this.props.msalContext.accounts.length} users signed in! + return ( + + There are currently {this.props.msalContext.accounts.length}{" "} + users signed in! + + ); } } } @@ -118,7 +135,7 @@ class App extends React.Component { return ( - + ); } } @@ -128,7 +145,7 @@ For a working example, see [ProfileWithMsal.jsx](../../../samples/msal-react-sam ## 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](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. The following examples will show how to login using the `withMsal` HOC approach but you can quickly adapt to the other approach if needed. @@ -145,9 +162,13 @@ class LoginButton extends React.Component { const isAuthenticated = this.props.msalContext.accounts.length > 0; const msalInstance = this.props.msalContext.instance; if (isAuthenticated) { - return + return ( + + ); } else { - return + return ( + + ); } } } @@ -168,7 +189,10 @@ class ProtectedComponent extends React.Component { const msalInstance = this.props.msalContext.instance; // If a user is not logged in and authentication is not already in progress, invoke login - if (!isAuthenticated && this.props.msalContext.inProgress === InteractionStatus.None) { + if ( + !isAuthenticated && + this.props.msalContext.inProgress === InteractionStatus.None + ) { msalInstance.loginPopup(); } } @@ -179,11 +203,11 @@ class ProtectedComponent extends React.Component { componentDidUpdate() { this.callLogin(); } - + render() { const isAuthenticated = this.props.msalContext.accounts.length > 0; if (isAuthenticated) { - return User is authenticated + return User is authenticated; } else { return Authentication in progress; } diff --git a/samples/msal-browser-samples/vue3-sample-app/README.md b/samples/msal-browser-samples/vue3-sample-app/README.md index 983fb7055f..6625a9e63e 100644 --- a/samples/msal-browser-samples/vue3-sample-app/README.md +++ b/samples/msal-browser-samples/vue3-sample-app/README.md @@ -10,14 +10,14 @@ This sample demonstrates one way you can integrate the `@azure/msal-browser` pac ### Pre-requisites -- Ensure [all pre-requisites](../../../lib/msal-browser/README.md#prerequisites) have been completed to run `@azure/msal-browser`. -- Install node.js if needed (). +- Ensure [all pre-requisites](../../../lib/msal-browser/README.md#prerequisites) have been completed to run `@azure/msal-browser`. +- Install node.js if needed (). ### Configure the application -- Open `./src/authConfig.js` in an editor. -- Replace client id with the Application (client) ID from the portal registration, or use the currently configured lab registration. - - Optionally, you may replace any of the other parameters, or you can remove them and use the default values. +- Open `./src/authConfig.js` in an editor. +- Replace client id with the Application (client) ID from the portal registration, or use the currently configured lab registration. + - Optionally, you may replace any of the other parameters, or you can remove them and use the default values. ### Install npm dependencies for sample @@ -36,8 +36,8 @@ npm start The page will reload if you make edits. You will also see any lint errors in the console. -- In the web page, hover over the "Sign In" button and select either `Sign in using Popup` or `Sign in using Redirect` to begin the auth flow. -- Navigate directly to one of the example pages (/profile or /profilenoguard) to invoke a login on page load and see your profile information using the Microsoft Graph API +- In the web page, hover over the "Sign In" button and select either `Sign in using Popup` or `Sign in using Redirect` to begin the auth flow. +- Navigate directly to one of the example pages (/profile or /profilenoguard) to invoke a login on page load and see your profile information using the Microsoft Graph API ## How this sample works @@ -47,24 +47,25 @@ This sample demonstrates how you can integrate `@azure/msal-browser` into your V You'll find the MSAL configuration and `PublicClientApplication` instantiation in `authConfig.ts`. It's very important that `PublicClientApplication` is initialized only once per pageload and as such should not be initialized inside any Vue components, but rather outside the context of Vue and passed in. -- The `clientId` is the most important, and only required parameter, as it maps to your app registration in the Microsoft Entra admin center. -- The `authority` represents the Microsoft Entra ID instance and tenant that MSAL.js will use the sign users in. This parameter controls the audience of your app. +- The `clientId` is the most important, and only required parameter, as it maps to your app registration in the Microsoft Entra admin center. +- The `authority` represents the Microsoft Entra ID instance and tenant that MSAL.js will use the sign users in. This parameter controls the audience of your app. > :information_source: If you need to sign users in with Azure Active Directory B2C, this parameter should be set to the [B2C tenanted authority](../../../lib/msal-common/docs/authority.md#azure-ad-b2c) with the default user-flow/custom policy that will be used for sign-ins and token acquisitions. To learn more about how to handle B2C user-flows and/or custom policies with MSAL.js, please refer to [react-b2c-sample](../../msal-react-samples/b2c-sample/) and/or [angular-b2c-sample](../../msal-angular-v2-samples/angular-b2c-sample-app/). -- The `redirectUri` and `postLogoutRedirectUri` represent where Microsoft Entra ID will redirect you back to after logging in and must be registered on your app registration as type "SPA". If you do not provide these, MSAL.js will use the current page by default. +- The `redirectUri` and `postLogoutRedirectUri` represent where Microsoft Entra ID will redirect you back to after logging in and must be registered on your app registration as type "SPA". If you do not provide these, MSAL.js will use the current page by default. The `cacheLocation` configures where you want your tokens to be stored. SessionStorage is the default, if this option is not provided. ```javascript const msalConfig = { - auth: { - clientId: 'ENTER_YOUR_CLIENT_ID_HERE', - authority: 'https://login.microsoftonline.com/ENTER_YOUR_TENANT_ID_HERE', - redirectUri: '/', // Must be registered as a SPA redirectURI on your app registration - postLogoutRedirectUri: '/' // Must be registered as a SPA redirectURI on your app registrationregistration - }, - cache: { - cacheLocation: 'localStorage' // Options are localStorage, sessionStorage, memoryStorage - }, + auth: { + clientId: "ENTER_YOUR_CLIENT_ID_HERE", + authority: + "https://login.microsoftonline.com/ENTER_YOUR_TENANT_ID_HERE", + redirectUri: "/", // Must be registered as a SPA redirectURI on your app registration + postLogoutRedirectUri: "/", // Must be registered as a SPA redirectURI on your app registrationregistration + }, + cache: { + cacheLocation: "localStorage", // Options are localStorage, sessionStorage, memoryStorage + }, }; export const msalInstance = new PublicClientApplication(msalConfig); @@ -79,14 +80,14 @@ MSAL.js integration with Vue all starts with the `msalPlugin` defined in `src/pl In `main.ts` you'll find the instantiation of the Vue app and installation of plugins. The most important part, with regards to MSAL.js, is to instruct Vue to "use" the `msalPlugin`. ```javascript -import { createApp } from 'vue'; -import App from './App.vue'; // Your root component +import { createApp } from "vue"; +import App from "./App.vue"; // Your root component import { msalPlugin } from "./plugins/msalPlugin"; import { msalInstance } from "./authConfig"; const app = createApp(App); app.use(msalPlugin, msalInstance); -app.mount('#app'); +app.mount("#app"); ``` ### Composition APIs @@ -99,9 +100,9 @@ This API will call `handleRedirectPromise` if it has not yet been called. This i This API also returns: -- The `PublicClientApplication` instance which you can use to call any of the [MSAL APIs](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_browser.ipublicclientapplication.html) -- A `ref` indicating what type of interaction is currently in progress. -- A `ref` of the array of accounts currently signed in +- The `PublicClientApplication` instance which you can use to call any of the [MSAL APIs](https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_browser.IPublicClientApplication.html) +- A `ref` indicating what type of interaction is currently in progress. +- A `ref` of the array of accounts currently signed in Basic examples of how this can be used can be found in each of the vue components located in `src/components` @@ -113,12 +114,12 @@ One example of how this could be used can be found in `src/components/NavBar.vue ```vue