Defining a valid redirect_uri causing major problems when trying to get a live (msal) React app working with Microsoft Identity Platform at Azure (App Service)

Question

I have developed further a small React application originating from the MS msal example. The app is working locally and as I use https://localhost:3000/ as redirect_uri (defined also in the app registration) the autentication/authorization are working just fine.

After I deployed the application to Azure ( https:/{exampleapp}.azurewebsites.com ) the redirection won't work as I expect but I get an error message: 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."

I have tried numerous variations but the problem remains. I even created a web.config file, but that file is likely not used anywhere.

Please ask me if you need any detailed information to solve this kind of problem. Thank you in advance.

Answer 1

Hello, to avoid getting "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" error you need to ensure your React application is configured to use one of the reply URLs configured in your Azure AD app registration. Web.config files are used for ASP.NET and ASP.NET applications but not for React. React applications usually bring settings embbeded within its compiled/transpiled/minized code, so it's important to ensure environment specific values are being set before build.

• To take a look to whare replys URL are configured for your Azure AD application take a look at Configure platform settings.
• To find what reply URL is being sent during authentication request Collect a network trace in the browser (Browser-based apps only) and look for entries sent to the authorization endpoint (https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize)
• To find how to make your React application target multiple environments take a look to How To Correctly Build a Multi-Environment React App?

Let us know if you need additional assistance. If the answer was helpful, please accept it and complete the quality survey so that others can find a solution.

Answer 2

I have problems getting the release pipeline working from Azure DevOps. An artifact doesn't work automatically for some reason. The artifact is present in the app service but won't work. I've been trying to configurate it for at least three working days, but it just doesn't work. Deploying the App Service code from the VS Code, on the other hand, did work just in few seconds but that had these redirect_uri issues.

I tried to do a simple set up by just inserting an index.html file to wwwroot but authorization module...

...And let's cut the text above to that as some thoughts raised when I was writing the text. I had configured an Authentication in my app service and that was causing most of my troubles. I removed that configuration and transferred my React app by using FTP. Now it worked like a dream. Most likely it went so, that I managed to get the correct redirect uri in its place but also to configure that Authentication setting at the same time about and everything went bad after that. I was getting 403.71 error from EasyAuthModule_32bit.

So, should I use "Virtual applications and directories" to configure the correct path to index.html if the artifact is e.g. a Visual Studio 2022 solution> 'ReactApp/ReactApp/build/index.html' [i.e. the index.html is not directly in wwwroot]?

So now the site seems to work. Thank you for your reply! After I read about web.config it somehow helped me to realize to think the Authorization again.