MSAL.js - Authorization Code Flow in Single-Page Applications

Configuration in ./src/authConfig.js.

Application Screenshot

Notable files and what they demonstrate

1. ./src/App.tsx - Shows implementation of MsalProvider, all children will have access to @azure/msal-react context, hooks and components.
2. ./src/index.tsx - Shows intialization of the PublicClientApplication that is passed to App.tsx
3. ./src/pages/Home.tsx - Homepage, shows how to conditionally render content using AuthenticatedTemplate and UnauthenticatedTemplate depending on whether or not a user is signed in.
4. ./src/pages/Profile.tsx - Example of a protected route using MsalAuthenticationTemplate. If a user is not yet signed in, signin will be invoked automatically. If a user is signed in it will acquire an access token and make a call to MS Graph to fetch user profile data.
5. ./src/authConfig.ts - Configuration options for PublicClientApplication and token requests.
6. ./src/ui-components/SignInSignOutButton.tsx - Example of how to conditionally render a Sign In or Sign Out button using the useIsAuthenticated hook.
7. ./src/ui-components/SignInButton.tsx - Example of how to get the PublicClientApplication instance using the useMsal hook and invoking a login function.
8. ./src/ui-components/SignOutButton.tsx - Example of how to get the PublicClientApplication instance using the useMsal hook and invoking a logout function.
9. ./src/utils/MsGraphApiCall.ts - Example of how to call the MS Graph API with an access token.
10. ./src/utils/NavigationClient.ts - Example implementation of INavigationClient which can be used to override the default navigation functions MSAL.js uses

How to run the sample

Pre-requisites

• Ensure all pre-requisites have been completed to run @azure/msal-react.
• Install node.js if needed (https://nodejs.org/en/).

Configure the application

• Open ./src/authConfig.ts 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.

Running the sample development server

1. In a command prompt, run npm start.
2. Open http://localhost:3000 to view it in the browser.
3. Open http://localhost:3000/profile to see an example of a protected route. If you are not yet signed in, signin will be invoked automatically.

Running the sample production server

1. npm run build to create a production build (buil;d folder created).
2. npm run serve to serve it at http://localhost:3000.