invalid_request: The provided value for the input parameter 'redirect_uri' is not valid

I am developing an app to read the calendar and render it with fullcalendar, the error comes when logging in and the redirect uri gives an error

I am working on localhost and this is my url that I am working on:

http://localhost/newdocu/calendarOutlook

and I have that url as a redirect in the azure portal and the following error screen appears after entering the email and clicking continue.

I have also tried with the url ending in .php (In the test I did before adding the functionality to the entire application the redirect ended in '.html' since that was the file extension), entering the folder path to the file, redirecting to another file and the error still appears

This is the code where i put the redirect Uri:

const msalConfig = {
    auth: {
        clientId: "...",
        authority: "...",                    
        redirectUri: "http://localhost/newdocu/calendarOutlook",
        popUp: true
    }
};

Thank you very much!!

The error "invalid_request: The provided value for the input parameter 'redirect_uri' is not valid'" usually occurs if the redirect URL is not matching the URL registered in Microsoft Entra ID application.

Initially I got the similar error:

Hence to resolve the error, make sure to configure Redirect URL as http://localhost/newdocu/calendarOutlook like below:

And make sure that you are passing the correct ClientID, that is the client of this application only:

Now, I am able to sign in successfully after above changes:

https://login.microsoftonline.com/TenantID/oauth2/v2.0/authorize? 
&client_id=ClientID
&response_type=code
&redirect_uri=http://localhost/newdocu/calendarOutlook
&response_mode=query
&scope=https://graph.microsoft.com/.default
&state=12345
&code_challenge=xxx
&code_challenge_method=S256