Barcode Generator not displaying QR Code on Individual Account pages

[Stephen Haines]

Hi Guys,

I'm trying to use the SFQRCodeGenerator Blazor component in a project using Individual Accounts auth.  I wish to use the QR on the Individual Accounts "Add Authenticator App" page.

The QR code displays as expected on a "normal" page, but fails on any Account page.  Please could you advise what to do.

Here's the code:

<SfQRCodeGenerator Width="400px" Height="300px" Value="1234567890" BackgroundColor="lightblue" ForeColor="black"></SfQRCodeGenerator>

Here's what it looks like on a "normal" page:

Here's what it looks like on an Account page:

Any ideas?

Many thanks,

Steve

[Sri Ram Tamil Vanan]

Hi Steve,

We understand that you're now working with the SfQRCodeGenerator component in a Blazor project that uses Individual Accounts authentication, and you're trying to display the QR code on the "Add Authenticator App" page. You've mentioned that the QR code renders correctly on standard pages but fails to appear on Identity-related pages. 

To resolve this issue, please ensure that the component page where the QR code is used includes the @rendermode InteractiveServer directive at the top. This directive is essential for enabling interactive rendering on Identity pages, which is required for the QR code to display properly in this context. 

For more details, please refer to our Knowledge Base article: How-to-generate-a-qr-code-in-2fa-application-in-blazor-diagram.

Regards,
Sri Ram T

[Stephen Haines]

Hi Sri Ram,

Thank you for your quick response.

I suspected that it may well be something to do with @rendermode InteractiveServer.

Microsoft insist for reasons of security that the Account pages are not run in InteractiveServer mode.  Please could you comment on this?  Does this mean that the Syncfusion QR code component is not suitable for use on the 2FA account page?

Best regards,

Steve

[Sri Ram Tamil Vanan]

Hi Stephen,

Thank you for your query.

The Identity (Account) pages are currently not configured to use @rendermode InteractiveServer. To ensure compatibility with the existing rendering mode, we recommend using the QRCodeGeneratorDisplayText component in combination with SfQRCodeGenerator.

Here’s an example of how to implement this:

<SfQRCodeGenerator Width="400px" Height="300px" Value="1234567890" BackgroundColor="lightblue" ForeColor="black">

    <QRCodeGeneratorDisplayText Text="1234567890"></QRCodeGeneratorDisplayText>

</SfQRCodeGenerator>

 

This approach ensures that the QR code is rendered correctly even on pages where interactive rendering is not enabled.

We’ve noted this limitation and are working on improving compatibility in future updates. We have also attached a sample for your reference.

Please let us know if you need any further assistance!

Regards,
Sri Ram

Attachment: SF197180_195c9115.zip

[Andrew Karpinski]

This still doesn't work on non-interactive pages, and when changing the page to an interactive render mode, it causes other errors. Are there any plans to update this to work on static serverside pages?

[Ramya Subramani]

Hi Andrew Karpinski,

We have identified the root cause of the issue. The static rendering is causing the QR code not to update properly in the source. We will share further details soon.

Regards,
Ramya

[Ramya Subramani]

Hi Andrew Karpinski,

Reported issue:

We have confirmed that the reported issue is a bug and have logged a defect report regarding it. We will fix the issue and include the fix in our upcoming weekly NuGet release, which is expected to be rolled out on "March 3, 2026". We appreciate your patience until then.

Meanwhile, you can track the status of the bug at the following link:

Feedback Link:  Investigation and Resolution Needed for Static Render Mode Issue in Syncfusion Blazor Components in…

 
Regards,
Ramya

[Ramya Subramani]

Hi Andrew Karpinski,

 

We have fixed the reported issue  “Qr code not display properly in static render mode” and included the fix in our weekly patch release(32.2.8). Please update the “Syncfusion.Blazor” package to the latest version in your application to resolve the reported issue. Please find the package link below.

https://www.nuget.org/packages/Syncfusion.Blazor.Diagram

Root cause:

This has been broke during resolving the net analyzer warnings. Updated the define constants wrongly with the lower casing.