DEV Community

maphaba
maphaba

Posted on

My Journey Fixing Authentication and Customizing UI in Blazor

#aspnet #csharp #api #blazor

Over the past few weeks, I’ve been deep in a Blazor project, and let me tell you — it’s been a mix of “Yoh! and Aha!!!” moments and head-scratching errors. Between getting authentication working, fixing endless 401 Unauthorized issues, and making the UI look less “default template,” I’ve learned quite a bit. I thought I’d share my experience here for anyone going through the same challenges.

Setting Up Authentication

The first hurdle I faced was authentication. Blazor gives you two models — Server and Web-Assembly and each one handles authentication differently. I was working with Blazor Server, which meant I could lean on ASP.NET Core Identity.

Here’s how I wired it up:

builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

builder.Services.AddAuthorization();

builder.Services.AddIdentityApiEndpoints<IdentityUser>()
    .AddEntityFrameworkStores<ApplicationDbContext>();
Enter fullscreen mode Exit fullscreen mode

With this setup, I was able to bring in Identity and start protecting parts of my app. In my .razor files, I used AuthorizeView to make certain sections only visible to logged-in users:

<AuthorizeView>
    <Authorized>
        <p>Welcome, authenticated user!</p>
    </Authorized>
    <NotAuthorized>
        <p>Please log in to continue.</p>
    </NotAuthorized>
</AuthorizeView>
Enter fullscreen mode Exit fullscreen mode

Sounds simple, right? Well… not quite.

Battling 401 Unauthorized Errors

This was probably my biggest roadblock. At first, no matter what I tried, I kept hitting 401 Unauthorized responses. Eventually, I learned a few lessons:

My API and Blazor app needed to share the same authentication scheme.

CORS had to be properly configured (especially when testing locally).

Cookies or JWT tokens had to be consistently passed between the client and server.

It took me a while to get all of this lined up, but once I did, things started working smoothly.

Discovering AuthenticationStateProvider

Once I got users logged in, I wanted to make the UI more personal. That’s where AuthenticationStateProvider came in.

By injecting it into my Blazor components, I could pull in details about the current user and display them right in the interface:

@inject AuthenticationStateProvider AuthenticationStateProvider

<AuthorizeView>
    <Authorized>
        <h3>Hello, @context.User.Identity.Name!</h3>
    </Authorized>
</AuthorizeView>
Enter fullscreen mode Exit fullscreen mode

This was a small change, but it made the app feel much more polished.

Customizing the Look and Feel

While working through authentication, I also started tweaking the UI. The default Blazor template is functional, but I wanted something that looked more professional.

I replaced the navigation bar, added some logos, and updated colors. For example, in my NavMenu.razor, I changed the navbar to use my own branding:

<div class="top-row ps-3 navbar navbar-dark bg-primary">
    <div class="container-fluid">
        <a class="navbar-brand" href="">My Blazor App</a>
        <button class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

And in another section, I added custom logos side by side:

<div class="top-section d-flex justify-content-between align-items-center">
    <img src="/Images/Logo_DPME.jpeg" alt="Department Logo" class="department-logo" />
    <img src="/Images/flag.jpeg" alt="CodeOfArms Logo" class="code-logo" />
</div>
Enter fullscreen mode Exit fullscreen mode

It might seem minor, but these little changes made the app feel like my own.

What I Learned

Looking back, here are the main takeaways from my Blazor journey so far:

Authentication is easier with Identity, but don’t be surprised if you wrestle with 401 errors.

AuthenticationStateProvider is incredibly handy for making your UI dynamic and user-specific.

Customizing the UI early helps the app feel less “template-like” and more like a real product.

Blazor can definitely be frustrating at times, but once the pieces click, it’s a powerful framework that lets me stay in C# for both backend and frontend.

Top comments (0)