<commit_before># Getting Started

1. [Initialization](#initialization)
1. [Determining whether a user is authenticated](#determining-whether-a-user-is-authenticated)
1. [Protecting Components](#protecting-components)
1. [Sign a user in using the login APIs provided by @azure/msal-browser](#sign-a-user-in-using-the-login-apis-provided-by-azure-msal-browser)
1. [Acquiring an access token](#acquiring-an-access-token)

## Initialization

`@azure/msal-react` is built on the [React context API](https://reactjs.org/docs/context.html) and all parts of your app that require authentication must be wrapped in the `MsalProvider` component. You will first need to [initialize](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md) an instance of `PublicClientApplication` then pass this to `MsalProvider` as a prop.

```javascript
import React from "react";
import ReactDOM from "react-dom";

import { MsalProvider } from "@azure/msal-react";
import { Configuration,  PublicClientApplication } from "@azure/msal-browser";

import App from "./app.jsx";

// MSAL configuration
const configuration: Configuration = {
    auth: {<commit_msg>Update getting-started.md<commit_after># Getting Started

1. [Initialization](#initialization)
1. [Determining whether a user is authenticated](#determining-whether-a-user-is-authenticated)
1. [Protecting Components](#protecting-components)
1. [Sign a user in using the login APIs provided by @azure/msal-browser](#sign-a-user-in-using-the-login-apis-provided-by-azuremsal-browser)
1. [Acquiring an access token](#acquiring-an-access-token)

## Initialization

`@azure/msal-react` is built on the [React context API](https://reactjs.org/docs/context.html) and all parts of your app that require authentication must be wrapped in the `MsalProvider` component. You will first need to [initialize](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md) an instance of `PublicClientApplication` then pass this to `MsalProvider` as a prop.

```javascript
import React from "react";
import ReactDOM from "react-dom";

import { MsalProvider } from "@azure/msal-react";
import { Configuration,  PublicClientApplication } from "@azure/msal-browser";

import App from "./app.jsx";

// MSAL configuration
const configuration: Configuration = {
    auth: {
{'fraction_non_alphanumeric': 0.12203248646397334, 'fraction_numerical': 0.004164931278633903, 'mean_word_length': 5.337730870712401, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2350508', 'n_tokens_mistral': 730, 'n_tokens_neox': 700, 'n_words': 207}