Javascript not working on Azure AD B2C custom signin

Question

Javascript not working on Azure AD B2C custom signin

Sean Jolly 20

I am trying to get javascript to run on an Azure AD B2C signin page, but it's not working and I'm not sure what I'm missing.

I'm using user flows with a custom signin page. To keep it as simple as possible, my custom page HTML is:

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
    <script>
    function displayText() {
      var welcomeText = document.getElementById('welcomeText');
        welcomeText.textContent = 'Welcome to the login page!';
    }
    </script> 

</head>
<body onload="displayText()">
    <p id="welcomeText"></p> 
    <div id="api"></div>
</body>
</html>

It is hosted in an Azure Blob Storage Container, and the custom page loads correctly when I test the signin, only the javascript doesn't seem to be working.

When I open the page from blob storage it works as expected: CwY4I

However when loading the sign in page the welcome text is missing: B2CPage

Things I have confirmed:

Javascript is enabled in my browser
Script is in the head tag
Javascript is enabled:

JSEnabled

I'm using version 2.1.12 of page layout (and have tried other versions with no luck):

PageLayout

Am I missing something that is stopping the javascript from running on the sign in page?

Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator

2023-07-07T09:06:05.1033333+00:00

Hi @Sean Jolly ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept Answer" which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

Accepted answer

1 additional answer

Your answer

Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator

2023-07-07T09:06:05.1033333+00:00

Hi @Sean Jolly ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept Answer" which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

Answer 1

Shweta Mathur 30,296 Microsoft Employee Moderator

Hi @Sean Jolly ,

Thanks for reaching out.

I tried to addAs a workaround, you can create a label and add Text to it.

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
   <script>
		var label = document.createElement('label');
         label.appendChild(document.createTextNode('Welcome to the Login page @')); 
         document.body.appendChild(label);
	</script>
</head>
<body>
<div id="api"></div>         
</body>
</html>

which shows javacSript label on your customized page.

User's image

Hope this will help.

Thanks,

Shweta

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

Sean Jolly 20 Reputation points

2023-07-08T23:06:08.83+00:00

Great thanks this worked for me

Answer 2

Hammed Abdulazeez 0 MVP

this is not working for me. the JS not even working at all

not sure what is wrong

Share via

Javascript not working on Azure AD B2C custom signin

1 additional answer

Your answer