This sample demonstrates how to use MSAL Angular v2 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 Angular concepts:

• Configuration
• Login
• Logout
• Protecting a route
• Acquiring an access token and calling Microsoft Graph

Note: This sample's structure was generated with the Angular CLI.

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-angular-spa.git
3. Open the /src/app/app.module.ts file and provide the required configuration values.
   1. Replace the string "Enter_the_Application_Id_Here" with your app/client ID on AAD Portal.
   2. Replace the string "Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here" with "https://login.microsoftonline.com/common/"

   ℹ️ if you would like to sign-in users with your tenant only, use your tenant ID instead of common.

   1. Replace the string "Enter_the_Redirect_Uri_Here" with the redirect uri you setup on AAD Portal.
   2. Replace the string "Enter_the_Graph_Endpoint_Herev1.0/me" with "https://graph.microsoft.com/v1.0/me"
4. Open the /src/app/profile/profile.component.ts file and provide the required configuration value.
   1. Replace the string "Enter_the_Graph_Endpoint_Herev1.0/me" with "https://graph.microsoft.com/v1.0/me"
5. On the command line, navigate to the root of the repository, and run npm install to install the project dependencies via npm.

ℹ️ To configure this app for tenants on Sovereign/National clouds, see: Use MSAL in a national cloud environment

1. Start the sample application with npm start.
2. In your browser, navigate to http://localhost:4200.

If you'd like to contribute to this sample, see CONTRIBUTING.MD.

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.