How to generate a QR Code in (2FA) Application in Blazor Diagram?

In a Blazor Diagram, we can render a QR code in a two-factor authentication (2FA) application within a .NET 8 project.

Reference link: https://learn.microsoft.com/en-us/aspnet/core/blazor/security/server/?view=aspnetcore-8.0&tabs=visual-studio

Project Setup
In a .NET 8 project with the following settings:

Authentication Type: Individual Accounts
Interactivity Render Mode: Server
Interactivity Location: Per Page/Component

You can create and render a QR code in a 2FA application. This requires creating a new Razor page with the render mode set to InteractiveServer. The QR code can then be rendered on that page and added to the EnableAuthenticator page.

Code Snippet

   <h3>Configure authenticator app</h3>
   <div>
       <p>To use an authenticator app go through the following steps:</p>
       <ol class="list">
           <li>
               <p>
                   Download a two-factor authenticator app like Microsoft Authenticator for
                   <a href="https://go.microsoft.com/fwlink/?Linkid=825072">Android</a> and
                   <a href="https://go.microsoft.com/fwlink/?Linkid=825073">iOS</a> or
                   Google Authenticator for
                   <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en">Android</a> and
                   <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">iOS</a>.
               </p>
           </li>*
           <li>
               <div>

                   <Component></Component>

               </div>
               <p>Scan the QR Code or enter this key <kbd>@sharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.</p>
               <div class="alert alert-info">Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</a>.</div>
               <div></div>
               <div data-url="@authenticatorUri"></div>
           </li>

Component.Razor:

@using Syncfusion.Blazor.BarcodeGenerator

@rendermode InteractiveServer
<SfQRCodeGenerator Width="200px" Height="150px" Value="Syncfusion"></SfQRCodeGenerator> 

Addressing Text Alignment Issues

When navigating to the page, you might encounter an issue where the text alignment in the barcode changes to right alignment. To resolve this, set data-enhance-nav=“false” for the Account/Manage page in the NavMenu.razor file.

<div class="nav-item px-3">
     <NavLink class="nav-link" data-enhance-nav="false" href="Account/Manage">
         <span class="bi bi-person-fill-nav-menu" aria-hidden="true"></span> @context.User.Identity?.Name
     </NavLink>
</div> 

You can download the complete working sample from here.

Conclusion

I hope you enjoyed learning about how to generate a QR Code in (2FA) Application in Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!