How To: Modifing the tab order in Azure B2C login Screen
Published: 2024-02-02 18:36:24

---
title: How To: Modifing the tab order in Azure B2C login Screen
published: true
date: 2024-02-02 12:47:52 UTC
tags: 
canonical_url: https://blog.bajonczak.com/modifing-tab-order-in-azure-b2c-login-screen/
---

 ![How To: Modifing the tab order in Azure B2C login Screen](https://blog.bajonczak.com/content/images/2024/01/pexels-cottonbro-studio-3584967.jpg)

Azure B2C is a very cool tool to integrate external users into your organization. But it comes up sometimes with small bugs. One of them is the reordering of the Tab-flow.

This article will introduce you to the problem and how I solved this.

# The Problem 

The Problem is the tab-flow. Look here

<video src="https://blog.bajonczak.com/content/media/2023/10/20231003-1545-41.4844275.mp4" poster="https://img.spacergif.org/v1/436x282/0a/spacer.png" width="436" height="282" playsinline preload="metadata" style="background: transparent url('https://blog.bajonczak.com/content/media/2023/10/20231003-1545-41.4844275_thumb.jpg') 50% 50% / cover no-repeat;"></video>
<button aria-label="Play video">
                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                            <path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"></path>
                        </svg>
                    </button>

<button aria-label="Play video">
                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                                <path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"></path>
                            </svg>
                        </button><button aria-label="Pause video">
                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                                <rect x="3" y="1" width="7" height="22" rx="1.5" ry="1.5"></rect>
                                <rect x="14" y="1" width="7" height="22" rx="1.5" ry="1.5"></rect>
                            </svg>
                        </button>0:00
 /0:05
<input type="range" max="100" value="0"><button aria-label="Adjust playback speed">1×</button><button aria-label="Unmute">
                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                                <path d="M15.189 2.021a9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1.794a.249.249 0 0 1 .221.133 9.73 9.73 0 0 0 7.924 4.85h.06a1 1 0 0 0 1-1V3.02a1 1 0 0 0-1.06-.998Z"></path>
                            </svg>
                        </button><button aria-label="Mute">
                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                                <path d="M16.177 4.3a.248.248 0 0 0 .073-.176v-1.1a1 1 0 0 0-1.061-1 9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h.114a.251.251 0 0 0 .177-.073ZM23.707 1.706A1 1 0 0 0 22.293.292l-22 22a1 1 0 0 0 0 1.414l.009.009a1 1 0 0 0 1.405-.009l6.63-6.631A.251.251 0 0 1 8.515 17a.245.245 0 0 1 .177.075 10.081 10.081 0 0 0 6.5 2.92 1 1 0 0 0 1.061-1V9.266a.247.247 0 0 1 .073-.176Z"></path>
                            </svg>
                        </button><input type="range" max="100" value="100">

Now our mission is to fix this on our own :)

# Identify the Components to reorder

The very first step is to identify which fields to reorder. For this, I open up the F12 Developer toolbar and search for the id's the controls

![How To: Modifing the tab order in Azure B2C login Screen](https://blog.bajonczak.com/content/images/2023/10/image-3.png)

So in my case I got the following controls

- email
- password
- forgotPassword
- next

# Write the Javascript to do the magic

Any magic will be done via JavaScript in the web world. So here the Javascript that I generated to achieve my goal:

```
<script>
        document.getElementById("email").tabIndex = "1";
        document.getElementById("password").tabIndex="2";
        document.getElementById("forgotPassword").tabIndex="3";
        document.getElementById("next").tabIndex="4"; 
</script>
```

# Integrate JavaScript

In your custom Page HTML you can add the script to the bottom of the HTML, before the </body> tag

```
<!DOCTYPE html>
<html>

<head>

    <title>Sign up or sign in</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="background_branding_container" class="background-gh" data-tenant-branding-background-color="true">
    </div>
    <div class="container unified_container" role="presentation">
        <div class="row">
            <div class="col-lg-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img class="companyLogo" data-tenant-branding-logo="true"
                            src="https://abc.de.fg/b2cdev/BrandLogoSmall.jpg" alt="Company Logo">
                        <div id="api" role="main">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    document.getElementById("email").tabIndex = "1";
    document.getElementById("password").tabIndex="2";
    document.getElementById("forgotPassword").tabIndex="3";
    document.getElementById("next").tabIndex="4"; 
</script>

</html>
```

Please pay attention to putting it into the last segment of the HTML, otherwise, the script will be executed before the page is rendered and it will not work.

After you navigate to the login page, you will see... no change. But why?

# Enabling JavaScript

As per default, the JavaScript is not allowed to execute on the login page. But in this scenario, you must be able to execute some scripts. So there you must enable this feature in the properties tab of your flow

![How To: Modifing the tab order in Azure B2C login Screen](https://learn.microsoft.com/en-us/azure/active-directory-b2c/media/javascript-and-page-layout/javascript-settings.png)

# The result

Now reload the page and you will see that the tab order is now in the correct order

<video src="https://blog.bajonczak.com/content/media/2023/10/20231003-1608-24.3519573.mp4" poster="https://img.spacergif.org/v1/406x254/0a/spacer.png" width="406" height="254" playsinline preload="metadata" style="background: transparent url('https://blog.bajonczak.com/content/media/2023/10/20231003-1608-24.3519573_thumb.jpg') 50% 50% / cover no-repeat;"></video>
<button aria-label="Play video">
                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                            <path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"></path>
                        </svg>
                    </button>

<button aria-label="Play video">
                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                                <path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"></path>
                            </svg>
                        </button><button aria-label="Pause video">
                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                                <rect x="3" y="1" width="7" height="22" rx="1.5" ry="1.5"></rect>
                                <rect x="14" y="1" width="7" height="22" rx="1.5" ry="1.5"></rect>
                            </svg>
                        </button>0:00
 /0:04
<input type="range" max="100" value="0"><button aria-label="Adjust playback speed">1×</button><button aria-label="Unmute">
                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                                <path d="M15.189 2.021a9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1.794a.249.249 0 0 1 .221.133 9.73 9.73 0 0 0 7.924 4.85h.06a1 1 0 0 0 1-1V3.02a1 1 0 0 0-1.06-.998Z"></path>
                            </svg>
                        </button><button aria-label="Mute">
                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                                <path d="M16.177 4.3a.248.248 0 0 0 .073-.176v-1.1a1 1 0 0 0-1.061-1 9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h.114a.251.251 0 0 0 .177-.073ZM23.707 1.706A1 1 0 0 0 22.293.292l-22 22a1 1 0 0 0 0 1.414l.009.009a1 1 0 0 0 1.405-.009l6.63-6.631A.251.251 0 0 1 8.515 17a.245.245 0 0 1 .177.075 10.081 10.081 0 0 0 6.5 2.92 1 1 0 0 0 1.061-1V9.266a.247.247 0 0 1 .073-.176Z"></path>
                            </svg>
                        </button><input type="range" max="100" value="100">

# Final Words

You'll see this is a simple approach to get the possibility to modify the behavior of the login screen. In fact, you are not limited to the tab order. You can do way more, for example, you can now execute some web requests before the login button is hit to track telemetry or s.th. Just let me know what are our approches for using the insertion of the javascript?