Blank Page with Custom Azure B2C Hosted Login Page in React App

Question

Blank Page with Custom Azure B2C Hosted Login Page in React App

Drew Stevens 40

Trying to implement Azure B2C with a custom hosted login page, which is also a React app, results in a blank page. A div with an ID of 'API' was created as per Azure documentation. The application is currently running on localhost for testing, and the specified URL has been set on Azure for styling. The main React app uses the login redirect method, which works with the default login page. However, the custom app displays a blank page with the following error in the console:

jQuery.Deferred exception: Cannot read properties of undefined (reading 'attributes') TypeError: Cannot read properties of undefined (reading 'attributes')

Any guidance on resolving this issue would be appreciated.

Akhilesh Vallamkonda 15,320 Reputation points Microsoft External Staff Moderator

2025-03-25T21:26:20.3066667+00:00

Hi @Drew Stevens
could please check the Guidelines for using custom page content and see if this fixes the issue.
Reference: Customize the user interface with HTML templates in Azure Active Directory B2C
Kancharla Saiteja 5,890 Reputation points Microsoft External Staff Moderator

2025-03-26T10:36:19.7333333+00:00
Hi @Drew Stevens,

Could you please share us more information on the following details:

Documents followed to configure the application.

Css styling used to URL and the document used to perform it.

Screenshot of the error and confirm where the issue has been persisted.

Based on the error, I have identified this might be a code issue and found these articles of stack over flow: https://stackoverflow.com/questions/38533771/jquery-deferred-exception-cannot-read-property

https://stackoverflow.com/questions/51480400/jquery-deferred-exception-cannot-read-property-on-of-undefined-typeerror-can

Based on these documents, we have observed this might be an exception issue occurred from the code for the development of the application.

Please check the above documents and let me know if you have any further questions.
Akhilesh Vallamkonda 15,320 Reputation points Microsoft External Staff Moderator

2025-03-26T21:16:06.94+00:00

@Drew Stevens
We haven’t heard from you on the last response and was just checking back to see if you have a resolution yet. In case if you have any resolution please do share that same with the community as it can be helpful to others. Otherwise, will respond with more details and we will try to help.
Drew Stevens 40 Reputation points

2025-03-27T15:18:51.55+00:00

Sorry, still no solution for us. We are just going to not use custom html and go through and apply company branding.
Akhilesh Vallamkonda 15,320 Reputation points Microsoft External Staff Moderator

2025-03-28T18:11:58.2833333+00:00

@Drew Stevens
Could you elaborate what is your end goal and what are the steps you have taken, please share if there any reference article you followed.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Akhilesh Vallamkonda 15,320 Reputation points Microsoft External Staff Moderator

2025-03-31T08:54:11.5466667+00:00

@Drew Stevens
We haven’t heard from you on the last response please respond with more details and we will try to help.