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.

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.

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)

Accepted answer

Alfredo Revilla - Senior Freelance SWE, SWA, IAM 26,936 Reputation points

2023-03-17T03:41:05.3433333+00:00
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.
Please sign in to rate this answer.
Jussi Rantapere 20 Reputation points

2023-03-19T15:28:00.19+00:00

"Web.config files are used for ASP.NET and ASP.NET applications but not for React." I have earlier understood that web.config file would be an IIS's way to provide similar tool as Apache's htaccess file. At least rewrite rules etc can be set there. It seems that I have more problems understanding the app service configuration than I originally thought.

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.

My React app seemed to have:

export const msalConfig = { auth: { authority: "https://login.microsoftonline.com/common", redirectUri: "https://{appserviceName}.azurewebsites.net", // ...other configuration details },

Alfredo Revilla - Senior Freelance SWE, SWA, IAM 26,936 Reputation points

2023-03-21T13:00:24.1333333+00:00

Thaanks for letting us know. Unless powered by server rendering, React apps are usually just a bunch of static files that will run by themselves. No runtime needed. "Virtual applications and directories" sounds like you're seeting up/targetting a backend like runtime such as .NET or Node. If you need extra help just let us know.
Sign in to comment

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)

1 additional answer