Adding a link to the #AzureAD Password Reset web site in your #ADFS forms-based sign-in pages

Implementing Azure Active Directory Password Reset?  Want to make it a bit easier for your users who logon to Azure AD using federated identities to get to the self-service password reset and/or unlock portal?

Take the following customised forms-based authentication (FBA) sign-in page in Active Directory Federation Services (AD FS) 2012 R2, a.k.a. “AD FS 3.0” – typically accessed by users outside of the corporate network, hitting the FS-P (Web Application Proxy, WAP) but also by corpnet users with devices that are not capable of performing Integrated Windows Authentication (IWA, sometimes referred to as WIA).


When a user gets their password wrong, the page changes to include the bad username/password verbiage, like so:


A requirement that has cropped up, for me at least, a few times is to allow users to navigate to the password reset workflow from here – particularly those customers that have enabled the ~updatepassword endpoint that allows for the neat in-line password change experience.

The result of this requirement is therefore something like this – the FBA sign-in page after a bad password is entered.


See how I’ve added “Forgotten your password?  Reset it here”?  Click that URL results in you hitting the Azure Active Directory Password Reset portal and the user ID input box being automatically populated with your username, as entered in the AD FS FBA user name input box:


The solution to this requirement is quite neat and easy.  Firstly, the generic Azure AD SSPR portal takes a query string called username to facilitate pre-populating the User ID input.  The client-side JavaScript therefore needs to: look for the error text on the page, and if it’s there, add a new paragraph with an anchor that contains the username already input in the form.

Here’s some proof-of-concept JS to do this:

// Code to look for bad password
var badPasswordError = document.getElementById('errorText');
if (badPasswordError) {
    if (badPasswordError.innerText.startsWith('Incorrect user ID or password')) {
        var introductionDiv = document.getElementById('introduction');
        var userNameAreaDiv = document.getElementById('userNameInput');
        var userNameFromInputBox = userNameAreaDiv.value
        if (userNameFromInputBox != userNamePlaceHolder) {
            introductionDiv.innerHTML = introductionDiv.innerHTML +
                'Forgotten your password?  Reset it <a href="' + userNameFromInputBox + '">here</a>.';

To deploy the code you will need to export the current theme and modify the OnLoad.js script and then update AD FS with the modified script.  This process is documented here:


The above code snippet has a dependency on a var called userNamePlaceHolder.  You can remove this check or you can implement the placeholder customisation with the following block of additional JS.

// Code to change the placeholder
var userNamePlaceHolder = document.getElementById('userNameInput');
if (userNamePlaceHolder) {
    if ("" == userNamePlaceHolder.getAttribute("placeholder")) {
        userNamePlaceHolder.setAttribute('placeholder', '');

What the above is doing is replacing the out-of-box with


About Paul Williams

IT consultant working for Microsoft specialising in Identity Management and Directory Services.
This entry was posted in AD FS and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s