EasyAuth with a SPA and AzureFunction on different hosts

Question

I'm trying to use EasyAuth (aad) with a SPA, which is on "localhost:8080" at the moment, and an Azure Function which is hosted in Azure ({function-app}.azurewebsites.net. The intent is for the SPA to call a secured endpoint on the Azure Function. So, I have the Azure Function Registered as an application in AD, and the authentication redirect in the SPA to the Azure Function EasyAuth endpoint appears to be working, but the redirect back to the localhost SPA via the post_login_redirect_url is not.

I added http://localhost:8080 to the AAD registered application as an allowed redirect URI. However, if I fully qualify the URL I am redirected back to {function-host}/.auth/login/done. Is there an expectation that the SPA runs under the same hostname as the azure function, or is there a way to configure the setup to allow any URL for the SPA host?

Behavior

In terms of HTTP data during behavior, once login succeeds .auth/login/aad/callback is loaded with the following prior to redirecting to the default done page and stopping.

• Response Header
  • Location = {function-host}/.auth/login/done
• Form Data:
  • state = http://localhost:8080
  • code = auth code
  • id_token = auth token

How I called it from the SPA

function processAuthCheck(xmlhttp) {
    if (xmlhttp.status == 401) {
        url = "https://{function-app}.azurewebsites.net/.auth/login/aad?"
        + "post_login_redirect_url=" + encodeURI("http://localhost:8080");
        window.location = url;
    } else if (xmlhttp.status != 200) {
        alert("There is an error with this service!");
        return;
    }
    var result = JSON.parse(xmlhttp.responseText);
    console.log(JSON.stringify(result));
    return;
};

Answer 1

Regarding the issue, please refer to the following steps

1. Register Azure AD application to protect azure function with easy auth

2. Register client-side application

   a. Register single-page application

   b. In the Implicit grant and hybrid flows section, select ID tokens and Access tokens.

   c. Configure API permissions

3. Enable CORS in Azure function

4. Code

   a. Integrate Azure AD auth in your spa application with Implicit grant flow. After doing that, when users access your application, they need to enter their AD account to get access token

   b. Client exchanges this accessToken for an 'App Service Token'. It does this by making a POST to https://{app}.azurewebsites.net/.auth/login/aad with the content { "access_token" : "{token from Azure AD}" }. This will return back an authenticationToken

   c. Use that authenticationToken in a header named x-zumo-auth. Make all requests to your function app using that header.

For more details, please refer to here and here. Regarding how to implement Azure AD in spa, please refer to here.