Building : Interactive Microsoft Authenticator Setup Guide

Recently, I needed to help our organization's users update their Microsoft Authenticator configurations after some changes to our security policies. Rather than sending another lengthy email that users might skim through, I decided to create an interactive HTML guide that would walk them through the process step by step.

The Challenge

I identified that many users had inactive or misconfigured Microsoft Authenticator entries that were preventing seamless authentication, or even worse they had a company entry in Authenticator but were still using SMS OTP codes as it has not setup correctly,  I needed users to:

1. Check their current setup status
2. Remove any inactive authenticator entries
3. Re-add the authenticator properly
4. Optionally enable passwordless sign-in

The traditional approach of sending detailed email instructions often resulted in confusion and increased support tickets. I wanted to create something more user-friendly and interactive.

Visual Images

This is the welcome screen with an outline of the goals and a timeframe:

Then we move onto the check section :

If you get the experience from the steps above, you are done and no more steps are required as you can see below:

If not you need to continue with the steps and use the next button when you choose "No":

We then need to remove the "faulty" or "misconfigured" Authentication option:

Then we need to add the new Authenticator method with these instructions from the desktop device:

We then need return to the iOS device for this:

Then finally you have the option to enabled "Passwordless Sign-in" for a easier login:

The Solution: An Interactive Step-by-Step Guide

I built a single-page HTML application that presents the setup process as a series of guided steps with visual confirmations. Here's how I approached it:

Core Structure

The application uses a simple JavaScript array to define each step:

const steps = [
  {
    title: "Before You Begin",
    image: "",
    content: [
      "Have your iPhone with the Microsoft Authenticator app ready",
      "Allow approximately 10 minutes to complete this process",
      "We recommend using a computer or another device alongside your phone"
    ],
    hasConfirmation: false
  },
  {
    title: "Step 1: Check Your Current Setup",
    image: "mfaenabled.png",
    content: [
      "Visit https://myaccount.microsoft.com/?ref=MeControl",
      "Click on 'Security Options'",
      "If prompted for an authenticator or login code (not SMS), your setup is already complete",
      "If asked for SMS or phone verification, continue to the next step"
    ],
    hasConfirmation: true,
    yesMessage: "Great! Your Microsoft Authenticator is already set up correctly. You can skip the remaining steps.",
    noMessage: "No problem! Please continue to the next step to complete your setup."
  }
  // Additional steps...
];

This structure allows me to easily maintain and update the guide content without touching the presentation logic.

Navigation Logic

The navigation system is straightforward but effective:

let currentStep = 0;

function nextStep() {
  if (currentStep < steps.length - 1) {
    currentStep++;
    renderStep();
  }
}

function previousStep() {
  if (currentStep > 0) {
    currentStep--;
    renderStep();
  }
}

I disable the navigation buttons appropriately to prevent users from going outside the valid step range:

document.getElementById("prevBtn").disabled = currentStep === 0;
document.getElementById("nextBtn").disabled = currentStep === steps.length - 1;

Interactive Confirmation Feature

One of the key features I implemented was the ability for users to confirm whether what they see matches the instructions. This is particularly useful for the setup verification step:

function handleConfirmation(answer) {
  const step = steps[currentStep];
  const confirmationResult = document.getElementById("confirmation-result");
  const confirmationMessage = document.getElementById("confirmation-message");
  
  // Update button states
  document.getElementById("btn-yes").classList.remove("selected");
  document.getElementById("btn-no").classList.remove("selected");
  document.getElementById(`btn-${answer}`).classList.add("selected");
  
  // Show result message
  confirmationResult.classList.remove("yes", "no");
  confirmationResult.classList.add("show", answer);
  
  if (answer === "yes") {
    confirmationMessage.innerText = step.yesMessage;
  } else {
    confirmationMessage.innerText = step.noMessage;
  }
}

This feature helps identify users who might already have the correct setup, saving them time and reducing unnecessary configuration changes.

Styling for Corporate Environment

I used CSS that aligns with Microsoft's design language to make the guide feel familiar to users already working with Microsoft products:

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f4f6f9;
}

.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

button {
  background-color: #003a8f;
  color: white;
}

Dynamic Content Rendering

The renderStep() function dynamically updates all page content based on the current step:

function renderStep() {
  const step = steps[currentStep];

  document.getElementById("step-title").innerText = step.title;

  const list = document.getElementById("step-content");
  list.innerHTML = "";
  step.content.forEach(text => {
    const li = document.createElement("li");
    li.innerText = text;
    list.appendChild(li);
  });

  // Handle image display
  const imgContainer = document.getElementById("step-image-container");
  const img = document.getElementById("step-image");
  if (step.image) {
    img.src = step.image;
    imgContainer.style.display = "block";
  } else {
    imgContainer.style.display = "none";
  }

  // Handle confirmation section
  const confirmationContainer = document.getElementById("confirmation-container");
  if (step.hasConfirmation) {
    confirmationContainer.classList.remove("hidden");
    // Reset confirmation state
    confirmationResult.classList.remove("show", "yes", "no");
    document.getElementById("btn-yes").classList.remove("selected");
    document.getElementById("btn-no").classList.remove("selected");
  } else {
    confirmationContainer.classList.add("hidden");
  }
}

Technical Considerations

Browser Compatibility

I kept the JavaScript vanilla and avoided modern features that might not work in older browsers our enterprise users might have. The guide works in IE11 and above, which was a requirement for our environment.

Making It Reusable

The structure I created is easily adaptable for other setup guides. Here's a template for adding new guides:

const guideTemplate = {
  title: "Your Guide Title",
  image: "optional-image.png",
  content: [
    "Step instruction 1",
    "Step instruction 2"
  ],
  hasConfirmation: false,
  yesMessage: "Positive confirmation message",
  noMessage: "Negative confirmation message"
};

Conclusion

Creating an interactive guide instead of sending traditional email instructions significantly improved our users' experience with the Microsoft Authenticator setup process. The key was making the process visual, interactive, and self-paced while providing immediate feedback.

The entire solution fits in a single HTML file under 10KB, making it extremely portable and easy to distribute. Sometimes the simplest solutions are the most effective, especially when dealing with security configurations that users might find intimidating.