I was getting an error trying to use the MSAL Quickstart for a Javascript single-page application (SPA) to sign in to Azure AD (Microsoft Identity Platform / msal) and then grab and use an access token from Microsoft Graph API. I am using Visual Studio to launch the Quickstart in Chrome. The error occurs after I am prompted to Sign In and enter my username:

We're unable to plete your request invalid_request: The provided value for the input parameter 'redirect_uri' is not valid. The expected value is a URI which matches a redirect URI registered for this client application.

This is what my msal config looks like:

    var msalConfig = {
        auth: {
            clientId: "194461f0-3d74-49db-a6f0-c7aa07f25ac8",
            authority: ""
        },
        cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
        }
    };

I was getting an error trying to use the MSAL Quickstart for a Javascript single-page application (SPA) to sign in to Azure AD (Microsoft Identity Platform / msal) and then grab and use an access token from Microsoft Graph API. I am using Visual Studio to launch the Quickstart in Chrome. The error occurs after I am prompted to Sign In and enter my username:

We're unable to plete your request invalid_request: The provided value for the input parameter 'redirect_uri' is not valid. The expected value is a URI which matches a redirect URI registered for this client application.

This is what my msal config looks like:

    var msalConfig = {
        auth: {
            clientId: "194461f0-3d74-49db-a6f0-c7aa07f25ac8",
            authority: "https://login.microsoftonline./mon"
        },
        cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
        }
    };

I verified that my settings in Azure Active Directory App Registrations are correct. These settings were automatically set (and correctly, it appears) by the "Option 1 (Express)" step in the Quickstart. Both the Implicit Flow settings and the redirectUri setttings are correct, when pared with the manual settings described in the Quickstart under "Option 2 (Manual)."

Based on the error, I was pretty sure there's something missing in my client config around redirectUri.

• javascript
• azure
• authentication
• single-page-application
• azure-ad-msal

1 Answer 1

I was able to resolve this error by adding the following line to my msalConfig under auth:

redirectUri: "http://localhost:30662/"

The new msalConfig looks like this:

    var msalConfig = {
        auth: {
            clientId: "194461f0-3d74-49db-a6f0-c7aa07f25ac8",
            authority: "https://login.microsoftonline./mon",
            redirectUri: "http://localhost:30662/"
        },
        cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
        }
    };

Now the flow accepts my Azure-associated username and prompts for my password. After entering my password, i get the expected response on screen:

Quickstart for MSAL JS expected response png

Hope this helps folks who are using this Quickstart and seeing the same behavior. :)

EDIT: I also forgot to add that prior to seeing this error, I was also not seeing popups in Chrome and had to go to the control in the upper right hand corner of Chrome to "Always allow popups from this site." I'm adding this here because the visual indicator for this issue in Chrome does not appear to be very obvious to me, so it took me a while to realize this was happening.