Angular Single-page Application built with MSAL Angular and Microsoft identity platform

This sample demonstrates how to use MSAL Angular to login, logout, protect a route, and acquire an access token for a protected resource such as Microsoft Graph.

Note: A quickstart guide covering this sample can be found here.

Note: A more detailed tutorial covering this sample can be found here.

Key concepts

This sample demonstrates the following MSAL Angular concepts:

• Configuration
• Login
• Logout
• Protecting a route
• Acquiring an access token and attaching it to http calls

Contents

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

Prerequisites

Node.js must be installed to run this sample.

Setup

1. Register a new application in the Azure Portal. Ensure that the application is enabled for the implicit flow.

2. Open src/app/app.module.ts and provide the required configuration parameters:

    MsalModule.forRoot({
      auth: {
        clientId: 'Enter_the_Application_Id_Here',
        authority: 'Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here',
        redirectUri: 'Enter_the_Redirect_Uri_Here',
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // set to true for IE 11
      },
    },
    {
      popUp: !isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        ['Enter_the_Graph_Endpoint_Herev1.0/me', ['user.read']]
      ],
      extraQueryParameters: {}
    })

ℹ️ In order to support sign-ins with work and school accounts as well as personal Microsoft accounts, set your authority to use the common endpoint i.e. https://login.microsoftonline.com/common. Read more about msal.js configuration options.

1. Install project dependencies from the command line by navigating to the root of the repository and running npm install.

Run the sample

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

How did we do? Consider taking a moment to share your experience with us.

Contributing

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

Code of Conduct

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.