Skip to content

Fixed broken links in READMEs #7858

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: msal-v5
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions lib/msal-node/docs/caching.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions lib/msal-node/docs/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
58 changes: 41 additions & 17 deletions lib/msal-react/docs/class-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -43,14 +48,16 @@ class App extends React.Component {
<MsalProvider instance={pca}>
<AuthenticatedTemplate>
<span>This will only render for authenticated users</span>
</ AuthenticatedTemplate>
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<span>This will only render for unauthenticated users</span>
</ UnauthenticatedTemplate>
<MsalAuthenticationTemplate interactionType={InteractionType.Popup}>
</UnauthenticatedTemplate>
<MsalAuthenticationTemplate
interactionType={InteractionType.Popup}
>
<span>This will only render for authenticated users.</span>
</ MsalAuthenticationTemplate>
</ MsalProvider>
</MsalAuthenticationTemplate>
</MsalProvider>
);
}
}
Expand All @@ -73,8 +80,8 @@ class App extends React.Component {
render() {
return (
<MsalProvider instance={pca}>
<YourClassComponent/>
</ MsalProvider>
<YourClassComponent />
</MsalProvider>
);
}
}
Expand All @@ -85,7 +92,12 @@ class YourClassComponent extends React.Component {
render() {
const isAuthenticated = this.context.accounts.length > 0;
if (isAuthenticated) {
return <span>There are currently {this.context.accounts.length} users signed in!</span>
return (
<span>
There are currently {this.context.accounts.length} users
signed in!
</span>
);
}
}
}
Expand All @@ -106,7 +118,12 @@ class YourClassComponent extends React.Component {
render() {
const isAuthenticated = this.props.msalContext.accounts.length > 0;
if (isAuthenticated) {
return <span>There are currently {this.props.msalContext.accounts.length} users signed in!</span>
return (
<span>
There are currently {this.props.msalContext.accounts.length}{" "}
users signed in!
</span>
);
}
}
}
Expand All @@ -118,7 +135,7 @@ class App extends React.Component {
return (
<MsalProvider instance={pca}>
<YourWrappedComponent />
</ MsalProvider>
</MsalProvider>
);
}
}
Expand All @@ -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.

Expand All @@ -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 <button onClick={() => msalInstance.logout()}>Logout</button>
return (
<button onClick={() => msalInstance.logout()}>Logout</button>
);
} else {
return <button onClick={() => msalInstance.loginPopup()}>Login</button>
return (
<button onClick={() => msalInstance.loginPopup()}>Login</button>
);
}
}
}
Expand All @@ -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();
}
}
Expand All @@ -179,11 +203,11 @@ class ProtectedComponent extends React.Component {
componentDidUpdate() {
this.callLogin();
}

render() {
const isAuthenticated = this.props.msalContext.accounts.length > 0;
if (isAuthenticated) {
return <span>User is authenticated</span>
return <span>User is authenticated</span>;
} else {
return <span>Authentication in progress</span>;
}
Expand Down
Loading