This sample demonstrates how to use MSAL React to login, logout, conditionally render components to authenticated users, and acquire an access token for a protected resource such as Microsoft Graph.

This sample demonstrates the following MSAL React concepts:

• Configuration
• Login
• Logout
• Conditionally rendering components for authenticated or unauthenticated users
• Acquiring an access token and calling Microsoft Graph

Note: This sample was bootstrapped using Create React App.

Node.js must be installed to run this sample.

1. Register a new application in the Azure Portal. Ensure that the application is enabled for the authorization code flow with PKCE. This will require that you redirect URI configured in the portal is of type SPA.
2. Clone this repository git clone https://github.com/Azure-Samples/ms-identity-javascript-react-spa.git
3. Open the /src/authConfig.js file and provide the required configuration values.
4. On the command line, navigate to the root of the repository, and run npm install to install the project dependencies via npm.

1. Configure authentication and authorization parameters:
   1. Open src/authConfig.js
   2. Replace the string "Enter_the_Application_Id_Here" with your app/client ID on AAD Portal.
   3. Replace the string "Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here" with "https://login.microsoftonline.com/common/" (note: This is for multi-tenant applications located on the global Azure cloud. For more information, see the documentation).
   4. Replace the string "Enter_the_Redirect_Uri_Here" with the redirect uri you setup on AAD Portal.
2. Configure the parameters for calling MS Graph API: 2. Replace the string "Enter_the_Graph_Endpoint_Herev1.0/me" with "https://graph.microsoft.com/v1.0/me" (note: This is for MS Graph instance located on the global Azure cloud. For more information, see the documentation)
3. To start the sample application, run npm start.
4. Finally, open a browser and navigate to http://localhost:3000.

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.