This developer sample is used to run basic B2C use cases (user-flows) for the MSAL library. You can also alter the configuration in ./src/authConfig.js to execute other behaviors. This sample was bootstrapped with Create React App.

Implementing B2C user-flows is a matter of initiating authorization requests against the corresponding authorities. This sample demonstrates the sign-up/sign-in user-flow with self-service password reset.

1. ./src/App.js - Shows implementation of MsalProvider, all children will have access to @azure/msal-react context, hooks and components. Also shows how to handle edit profile user-flow.
2. ./src/index.js - Shows intialization of the PublicClientApplication that is passed to App.js
3. ./src/pages/Home.jsx - 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.jsx - 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.js - Configuration options for PublicClientApplication and B2C policies.
6. ./src/ui-components/SignInSignOutButton.jsx - Example of how to conditionally render a Sign In or Sign Out button using the useIsAuthenticated hook.
7. ./src/ui-components/SignInButton.jsx - Example of how to get the PublicClientApplication instance using the useMsal hook and invoking a login function.
8. ./src/ui-components/SignOutButton.jsx - Example of how to get the PublicClientApplication instance using the useMsal hook and invoking a logout function.
9. ./src/utils/MsGraphApiCall.js - Example of how to call the MS Graph API with an access token.

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

This sample comes with a pre-registered application for demo purposes. If you would like to use your own Azure AD B2C tenant and application, follow the steps below:

1. Create an Azure Active Directory B2C tenant
2. Register a single-page application in Azure Active Directory B2C
3. Create user-flows in Azure Active Directory B2C

• Open ./src/authConfig.js in an editor.
• Replace clientId 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.
• Replace names, authorities and authorityDomain fields in b2cPolicies object with the parameters you've obtained after creating your own user-flows.
  • Optionally, replace the uri and scopes fields in apiConfig object if you would like to call your own web API registered on Azure AD B2C (see: Register a web API on Azure AD B2C)

These parameters are taken in during runtime to initialize MSAL in ./src/index.js.

// Install dev dependencies for msal-react and msal-browser from root of repo
npm install
// Change directory to sample directory
cd samples/msal-react-samples/b2c-sample
// Build packages locally
npm run build:package

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

The page will reload if you make edits. You will also see any lint errors in the console.

• In the web page, click on the "Login" button and select either Sign in using Popup or Sign in using Redirect to begin the auth flow.

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

• React documentation.
• Create React App documentation
• React Router documentation
• Material-UI documentation