Azure Active Directory Redirect URI not working properly in React Application deployed in IIS - reactjs

I have a React application that uses Azure Active Directory and msal.js to authenticate.
I can run it in debug (after the user logs in, he is redirected to the URI I have defined in the Azure Portal as http://localhost:3000/authCallback and this does some work to set cookies and then redirects to a valid URL e.g /databases, that opens a real page of the application), but when I deploy the SPA in IIS (local server for testing), the callback redirect from azure does not work.
I can see that Azure returns the correct URI since the browser contains something like "http://localhost:3000/authCallback#id_token=a_valid_token...", but I get the error below that I couldn't understand why is happening.

I sorted it out after I've found this useful post on Medium
Basically, I was missing the web.config in the root of the React Application and I needed to install the URL Rewrite in the server, then restarted the IIS.

Related

Blazor WASM with Azure AD Login pop up flashing and disappearing

I have a Blazor WASM app with Azure AD Authentication. I use Visual Studio as IDE and use Browserlink to test before deploying to Azure App Service.
This morning (was fine yesterday) when I try to use the Browserlink "View in Browser", the website comes up properly in localhost, but when I click the Login button, the microsoft authentication window (pop up) flashes up and then disappears and I can't see it or get to it in any way.
I deployed the exact same current application to Azure App Service and the authentication window comes up as expected with no issues. I do have the localhost address in the Azure portal under the App registrations authentication section and am using https for all calls.
Not sure what else to check. Appreciate any help, thank you.
Please check if it was the issue with Internet explorer as there are known issues with pop-up windows on Internet Explorer.
During sign in, to acquire tokens using MSAL.js, the library first attempt a silent token request using the acquireTokenSilent method and checks the cache in browser storage to see if a valid token exists and returns it.See if it is not clearing the cache and has azure AD Session is found already which may not redirect or pop up for login.
If no valid token is in the cache, it sends a silent token request to Azure Active Directory (Azure AD) from a hidden iframe . However, if no valid Azure AD Session exists, silent token request fails and user can be either provided with a login popup or redirect.
In your case, at the first launch of the application, when no valid token in the cache or valid Azure AD Session is found, silent token request fails and you are presented with the login popup but subsequent logins work without login popup.
Pop up and redirect
I still have no idea what was going on. I had tried the hard refresh and empty cache option as well as a reboot.
It seems to have fixed itself as today was fine. Thank you for your responses.

Blazor server - Azure AD auth - fine in dev, deployed to Azure App not working

I'm struggling with Azure AD authentication on my Blazor Server app, but only when deployed to an Azure App service.
My app is presenting the login screen, and appears to authenticate me.
Every page appears to result in just a single line
"You do not have permission to view this directory or page."
After login, I get that line.
I attempt to go to /counter, same line....
I do not get this after login when running from my IIS Express dev machine, after authentication, I get the index page, can nav to counter, fetch data, etc.
I take it there is something different between development environment and production.
I tried to deploy my debug configuration, same result.
I don't see where this "You do not have permission to view this directory or page." message is coming from, at all.. I don't see it on any components or pages.
I'm using the V2 end points for MSAL, and again, they seem to work okay in development
Do I need to add an attribute to my page or component? Do I need to set up a specific role somewhere in Azure App?
What should I have in startup.cs or program.cs?
Again, I've put my actual app aside and just spun up a new one with just the default counter and fetch data demo stuff, used VS to add Microsoft Identity, run thru the config steps for it, all successfully. Run from dev machine, it asks me to log in, I log in, it shows I'm logged in on the login control, etc. All looks fine. Hit deploy and spin up an App Service for it, deploys without error, starts up, asks me to login, I do, and I get the You do not have permission line
Anyone else experience this?
If you are logging using user ID under Azure Active Directory (AAD), you have to modify in Settings:
Authentication / Authorization
App Service Authentication, "ON" =>> choose: Log in With Azure Active Directory
Select 'ActivityProvider', AAD.
Configured (Express: Existing APP)
Manage Azure Active Directory: Manage Permission & Manage Application
For Manage Permission ==>> Add, In Delegate Permission, choose: Sign in and read user profile and refresh your browser to login again.
Also, check all your web app files though KUDU Console.
Follow this link,
<your_web_app_name>.azurewebsites.net > Debug Console (from top menu) > CMD/PowerShell > Site > wwwroot.
That should contains all your files.

login.microsoftonline.com doesn't redirect to the specified Redirect URL

We are having problem with ADAL redirect authentication in MS Team Desktop client recently.
We have a custom Teams app package (Team Tab) to display a page on our application server. The page uses ADAL JS library to get Graph token to access One Drive. Since the page is displayed in iframe and will be used in Teams desktop client, we use page redirect authentication in ADAL. From debug console, we can see the issue happened when ADAL sent request to “login.microsoftonline.com”(login_hint parameter is used to specify current user account). The flow stopped with error saying the “login.microsoftonline.com” can’t be displayed in iframe. In the past, “login.microsoftonline.com” simply redirected the browser to the specified redirect URL and auth flow completed without any problem.
Our application server has implemented SSO with Azure. Implicit auth flow is used to get the token. The issue only happens in Teams desktop client, we use ADAL popup (not supported in desktop client) to get token in browser. The flow was working before April. Seems to me that something has changed recently at the Microsoft login page.
Just wondering if anybody has the same issue. Any suggestions will be appreciated.
Have you looked at using Teams SSO, which uses MSAL, instead of ADAL? See here for a sample: https://github.com/pnp/teams-dev-samples/tree/master/samples/tab-sso

ReactS Azure AD Authentication issue with redirect url appnding null

I am trying to integrate Azure AD Authentication using react-adal library.
But after successful authentication it is getting redirected to base-url/null and getting error requested resource does not exsist. This issue is only happening in the application deployed in appservice. And the redirection is working fine when running in localhost
In order to fix this issue we need to set the default page in the application settings. so that after authentication it will be redirected to the page mentioned in the app service and avoids adding null to the base URL. Please refer image Default page settings

Azure AD redirects to wrong location (localhost) after authentication

I have code working in development that authorizes against Azure AD in a multi-tenant setup using the MSAL library (with the Microsoft Angular wrapper for MSAL).
This code all works as expected when I am running it against localhost:5001.
My configuration contains a redirectUri for https://localhost:5001 and my application in Azure AD has its "Redirect URI" value set to the same.
However, when I move this to production, it is continuing to try to redirect me to localhost:5001 on a successful AD authentication, even though I have changed my redirectUri in my configuration, as well as the Azure B2C application "Redirect URI", to now be the production site at:
https://[mysite].azurewebsites.net
Where is it still getting localhost:5001 from? I searched my code/configuration and this value does not exist. It is not currently in Azure AD for the Application. I have stopped and restarted my App Service to no avail.
The redirection it is trying to make is to:
https://localhost:5001/#id_token=eyJ0eXAiOiJKV1Qi ...
I was able to work around this issue by deleting the Azure AD App Registration and creating a new one from scratch with the proper endpoints.
For some reason, it was not "holding" the change when the endpoint URLs were edited and saved. It showed the correct endpoints in the Azure AD control panel for the App Registration, but it was still redirecting to localhost.
When I deleted and re-created, it properly forwarded the replies to the production site.
I am unsure at this time if this is an issue on Microsoft's side or not, but this conclusively resolved the issue.
Registering a new application solved this issue.
No need to delete and register a new application. Simply update the replyUrlsWithType attribute on the Azure Active Directory app manifest file to point to the new domain, url or location:
"replyUrlsWithType": [
{
"url": "https://localhost:4400/services/office365/redirectTarget.html",
"type": "InstalledClient"
}
],
See this link for more information: https://learn.microsoft.com/en-gb/azure/active-directory/develop/reference-app-manifest?WT.mc_id=Portal-Microsoft_AAD_RegisteredApps

Resources