MS Graph Toolkit in React with Azure App Service EasyAuth

This project is a demo/sample of passing an access token retrieved from EasyAuth to an MS Graph Toolkit component running in a React site that doesn't have it's own authentication. In most scenarios the React app would have it's own auth with something like msal.js, but this demo covers the sitation where that's not in place.

High level steps to get this working. (More detail for the special steps below.)

1. Create an Azure App Service
2. Setup EasyAuth (use the Authentication/Authorization option in the menu in the portal and pick the Express method)
3. Grant your site access to MS Graph API
4. Tweak some auth settings using Azure Resource Explorer in order to configure the access token to allow access to MS Graph API.
5. Get the access token from EasyAuth
6. Provide the token to the MS Graph Toolkit

The source code for the .net core backend and react front end are in the src folder with the interesting bits in Home.js and UserController.cs.

There are plenty of tutorials around configuring your site to use MS Graph API so I'm picking up with more detail at step 4.

#4 Once your EasyAuth is configured you need to do a little more configuration to get a useful Access Token.

1. Navigate to Azure Resource Explorer: https://resources.azure.com/
2. Ensure the correct AAD is selected in the drop down box in the top row.
3. Use the left hand tree to navigate to your App Service > config > authsettings
4. Click Read/Write button
5. Click Edit button
6. Update additonal Login Params to have: "additionalLoginParams": ["response_type=code id_token", "resource=https://graph.microsoft.com"],
7. Review/Verify
8. Click Put button
9. Click Read Only button

Note that once you've made this change you need a fresh login session to get the correct token, so you can't just refresh the page. (Using an In Private window is a good way to test.)

#5 EasyAuth provides the id token, access token, expiration date, and refreshtoken to your code in two ways. In the .NET Core back end site these are in Request Headers. Client JavaScript code can call /.auth/me to retrieve the same information. In my example I used the request headers and a web api to retrieve just the access token, but you can call /.auth/me directly. See https://docs.microsoft.com/en-us/azure/app-service/app-service-authentication-how-to#retrieve-tokens-in-app-code for more information.

You can see the related code in UserController.GetAccessToken and in Home.js getAccessToken.

UserController.cs

    [HttpGet("accesstoken")]
    public IActionResult GetAccessToken()
    {
        return Ok(this.Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"][0]);
    }

Home.js

    async getAccessToken(scopes) {
        const response = await fetch('user/accesstoken');    
        return response.text();
    }

#6 After we have the token we then need to give it to the MS Graph Toolkit. I've done this using a SimpleProvider. You can see this code in Home.js hookupMgtProvider.

Home.js

    async hookupMgtProvider() {    
        let myProvider = new SimpleProvider(this.getAccessToken);
        Providers.globalProvider = myProvider;
        myProvider.setState(ProviderState.SignedIn);
    }

Links/Resources

• Retreive tokens from EasyAuth
  https://docs.microsoft.com/en-us/azure/app-service/app-service-authentication-how-to#retrieve-tokens-in-app-code

• Refresh tokens
  https://docs.microsoft.com/en-us/azure/app-service/app-service-authentication-how-to#refresh-identity-provider-tokens

• Azure Resource Explorer
  https://resources.azure.com/

• Graph Tookit
  https://docs.microsoft.com/en-us/graph/toolkit/get-started

• React wrapper for MS Graph Toolkit
  https://github.com/nmetulev/mgt-react

• MS Graph Toolkit Custom Provider
  https://docs.microsoft.com/en-us/graph/toolkit/providers/custom

• General reference
  https://docs.microsoft.com/en-us/azure/active-directory/develop/access-tokens
  https://jwt.ms/