Iframe is blank despite being present in the source code



I’m attempting to integrate the ASP.NET Web SDK Duo code into an application that has a ReactJS front-end. The back-end is successfully signing the request and providing the host value from the project configuration. I can see that the iframe is in fact receiving the correct values.

But the front end doesn’t render anything except for a blank spot where the iframe should be. When I inspect the element, I can see that there is in fact an iframe there. The iframe seems to have accurate values for the data-host and data-sig-request values.

Please advise. I confirmed that my keys are all correct. The code matches what is in the demo project. If I hard code the data-host value and an invalid data-sig-request value, the iframe actually appears but has a warning along the lines of “Access denied. The server may be out of sync.”


It seems like if I hardcode the data-host and data-sig-request values, the iframe works as expected. But if I try to wait for the back-end to populate some variables and then use the variables as the parameter values, the iframe renders as a blank. Any reason for that? Can’t the iframe component accept variables for parameters?


This text will be blurred