Prevent Auto-filling of Login credentials in Azure AD login form - MSAL ReactJS

Johnson Jayaraj 20 Reputation points
2023-03-14T10:30:36.7466667+00:00

Hi Everyone,

Greetings of the day.

My requirement is such that, I have to authenticate my Azure-AD users (strictly using credentials) in my application. I have configured my Azure Portal accordingly and I am currently using a ReactJs app that uses MSAL library to do the same. To forcefully ask the user for credentials, I just set 'prompt' property in my configuration file to 'login', and it works as expected.

Now the problem is that the browser is filling username / password automatically from its credentials store, which I don't want to happen. Both instance.loginRedirect() / instance.loginPopup() methods work the same way..

When I searched for solutions online, I see that I can prevent auto-fill using <input autocomplete="new-password">, but the problem is I don't have the HTML with me and I am only redirecting the user to Azure's Login page.

Should I ask the Developer's team at MSAL for a new feature or is there any workaround to solve the issue ?

Microsoft Security | Microsoft Entra | Microsoft Entra ID
0 comments No comments
{count} votes

Accepted answer
  1. Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator
    2023-03-16T08:10:05.88+00:00

    Hi @Johnson Jayaraj ,

    Thanks for reaching out.

    Unfortunately, you cannot control the auto-fill behavior of the browser when redirecting to the Azure login page.

    As you mentioned, the only way to prevent auto-fill in this case would be to modify the HTML or Javascript of the login page.

    export default function App() {
      return (
        <div>
          {/* disable autocomplete on input fields */}
          <input type="text" id="message" autoComplete="off" />
    
          <input type="password" id="password" autoComplete="new-password" />
    
    
          <form autoComplete="off">
            <input type="text" id="first" />
    
            <input type="text" id="last" />
          </form>
        </div>
      );
    }
    
    

    As mentioned before, unfortunately this feature is not supported using MSAL as of now.

    I would suggest you post this idea at the Azure Feedback Portal, which is monitored by the product team for feature enhancements.

    Thank you for your time and patience throughout this issue.

    Hope this will help.

    Thanks,

    Shweta

    Please remember to "Accept Answer" if answer helped you.

    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.