C#•2y ago

Blazor Pages rendering before async methods finish, breaking the page?

The below code is crashing my app because

applicationUser

applicationUser

applicationUser

applicationUser is null when it's referenced in the HTML. This is a common issue I keep facing, how are you meant to handle it?

    protected override async Task OnInitializedAsync()
    {
        while(userId == null)
        {
            var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
            var user = authState.User;
            userId = user.FindFirst(ClaimTypes.NameIdentifier)?.Value;
        }

        transactions = DataService.GetAllTransactions(userId);
        mostExpensiveTransactions = transactions.OrderByDescending(t => t.Amount).Take(5).ToList();

        while(applicationUser == null)
        {
            applicationUser = await UserManager.FindByIdAsync(userId);
        }
    }

    protected override async Task OnInitializedAsync()
    {
        while(userId == null)
        {
            var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
            var user = authState.User;
            userId = user.FindFirst(ClaimTypes.NameIdentifier)?.Value;
        }

        transactions = DataService.GetAllTransactions(userId);
        mostExpensiveTransactions = transactions.OrderByDescending(t => t.Amount).Take(5).ToList();

        while(applicationUser == null)
        {
            applicationUser = await UserManager.FindByIdAsync(userId);
        }
    }

    protected override async Task OnInitializedAsync()
    {
        while(userId == null)
        {
            var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
            var user = authState.User;
            userId = user.FindFirst(ClaimTypes.NameIdentifier)?.Value;
        }

        transactions = DataService.GetAllTransactions(userId);
        mostExpensiveTransactions = transactions.OrderByDescending(t => t.Amount).Take(5).ToList();

        while(applicationUser == null)
        {
            applicationUser = await UserManager.FindByIdAsync(userId);
        }
    }

    protected override async Task OnInitializedAsync()
    {
        while(userId == null)
        {
            var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
            var user = authState.User;
            userId = user.FindFirst(ClaimTypes.NameIdentifier)?.Value;
        }

        transactions = DataService.GetAllTransactions(userId);
        mostExpensiveTransactions = transactions.OrderByDescending(t => t.Amount).Take(5).ToList();

        while(applicationUser == null)
        {
            applicationUser = await UserManager.FindByIdAsync(userId);
        }
    }

I thought the while loop would ensure that it can never continue but I guess it continues because it's returning a

Task

Task

Task

Task?

ChatGPT suggests I added a Delay of 200ms after the command but it doesn't really feel like it would guarantee the issue is solved.

Thanks!

mg•2/12/24, 9:03 PM

it won't, and that's why you shouldn't be using chatgpt

mg•2/12/24, 9:03 PM

you need to conditionally render based on your state

mg•2/12/24, 9:03 PM

check if it's null in your markup and only render the stuff that depends on it if it's not null

DarylOP•2/12/24, 9:04 PM

Ahhh so in the HTML itself put the @if(applicationUser == null)@if(applicationUser == null) bit to ensure it can never do it?

mg•2/12/24, 9:04 PM

yep

mg•2/12/24, 9:05 PM

my components are full of if (not null) { stuff } else { loading icon }

mg•2/12/24, 9:05 PM

if you want you could make a wrapper component for that

mg•2/12/24, 9:05 PM

maybe there's one built in idk

DarylOP•2/12/24, 9:05 PM

Perfect thank you! I should've thought of that, it was a demo in the Weather Forecast class...

Something I don't quite understand is how it realises the variable is now no longer null so re-runs the page/component?

mg•2/12/24, 9:06 PM

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-8.0

ASP.NET Core Razor component lifecycle

Learn about the ASP.NET Core Razor component lifecycle and how to use lifecycle events.

mg•2/12/24, 9:06 PM

this could help

DarylOP•2/12/24, 9:06 PM

Thanks, will give it a read

DarylOP•2/12/24, 9:06 PM

Thank you!

Jimmacle•2/12/24, 9:07 PM

also that DB access should definitely be async

DarylOP•2/12/24, 9:08 PM

I was hoping if I didn't have them async I would be able to avoid this issue. However, there doesn't seem to be a UserManager.FindById()UserManager.FindById(), it has to be aysnc.

Jimmacle•2/12/24, 9:08 PM

if they aren't async your page is going to freeze while it's talking to the database

mg•2/12/24, 9:08 PM

if you overrode the sync oninitialized method I think it would fix the problem

mg•2/12/24, 9:08 PM

but you don't want that

mg•2/12/24, 9:09 PM

because it introduces a much worse problem

Jimmacle•2/12/24, 9:09 PM

there is no reason not to use async options for web stuff, especially blazor

DarylOP•2/12/24, 9:09 PM

You're right, freezing the page when it's talking to the DB isn't a great idea. I'll sort that out.

DarylOP•2/12/24, 9:10 PM

One more question - and this may be a very stupid one - But is there any easy way to get data from the Server to the Client?

For example, I wanted the Server to query the DB, get a list of bank transactions and then send them to the client so the client can manipulate them locally and push them back to the server when complete. That way the strain on the server is minimal.

The only thing I could find was to create an API endpoint and somehow get the auth token to the Client but it seemed over kill

Angius•2/12/24, 9:10 PM

Also, don't try to "avoid the issue" of async code. It's not an issue.

Angius•2/12/24, 9:11 PM

so the client can manipulate them locally

You want the user to be able to just do anything?

DDaryl One more question - and this may be a very stupid one - But is there any easy wa...

Jimmacle•2/12/24, 9:11 PM

if you have a server and client you'll need an API for them to communicate and some kind of authorization to protect it

AAngius > so the client can manipulate them locally You want the user to be able to just...

DarylOP•2/12/24, 9:12 PM

My thought process would be:
User signs in, server downloads the transactions for that user to the client. User can then edit the data in their browser, hit submit and it'll push the changes to the server which can then update the DB.

Jimmacle•2/12/24, 9:12 PM

but i suspect you're using blazor server considering you're accessing the DB directly from your components

Angius•2/12/24, 9:12 PM

Browser has exactly zero security, just FYI

Angius•2/12/24, 9:12 PM

If you let the user edit data however, they will be able to edit it however

Angius•2/12/24, 9:13 PM

Send a request to the backend that describes the changes

Angius•2/12/24, 9:13 PM

Validate that the changes are... valid

Angius•2/12/24, 9:13 PM

Perform them if so

AAngius If you let the user edit data however, they will be able to edit it however

DarylOP•2/12/24, 9:13 PM

That's fine, the server could validate the changes before pushing to the database, that wouldn't really be an issue.

To be honest I've gone off the idea anyway because I see how smooth these websockets will make stuff but I'm still curious to know how you'd do it

JJimmacle if you have a server and client you'll need an API for them to communicate and s...

DarylOP•2/12/24, 9:15 PM

This is the bit I was struggling with:

I could get the user to sign in using the server side and I could access the API in the browser which would print out lots of json output. However, if I tried to do any sort of HttpClient request from the client side it failed because it didn't seem to have access to the auth token.

DarylOP•2/12/24, 9:16 PM

Since I've had that issue I don't really know why I would want client side things anymore if I can't get my db data to it... Again, could be me doing something stupid!

Jimmacle•2/12/24, 9:16 PM

that will depend on how your authentication system works

DarylOP•2/12/24, 9:17 PM

When I created the project I set up Identity and then configured Microsoft SSO, if that helps at all

Jimmacle•2/12/24, 9:17 PM

you're most likely doing it wrong because that's how plenty of SPAs do it

DarylOP•2/12/24, 9:17 PM

What's an SPA sorry?

Jimmacle•2/12/24, 9:17 PM

single page application

Jimmacle•2/12/24, 9:17 PM

the kind of webapp that needs access to the token itself

DarylOP•2/12/24, 9:19 PM

Any ideas where I may have gone wrong?

I read somewhere I should just create a HttpClient on the client side. I realise it's usually best practice but they said the browser would be managing the ports anyway. So I did that but then obviously it doesn't naturally emed the tokens.

At the time I couldn't for the life of me get the server-side httpclient to inject into the client side one. The site would load but when I tried to do things it would error saying the HttpClient I had injected was null.

Jimmacle•2/12/24, 9:26 PM

it really depends on your setup, whether you have cross site cookies, http only cookies, cors issues, etc

DarylOP•2/12/24, 9:26 PM

No worries, I gave up in the end and started again anyway!

Jimmacle•2/12/24, 9:26 PM

not something i personally have a lot of experience with other than doing it wrong myself

DarylOP•2/12/24, 9:26 PM

Fair enough!

Thank you though! I appreciate it

DDaryl My thought process would be: User signs in, server downloads the transactions fo...

mg•2/12/24, 11:16 PM

you can modify the database in the same way that you query it

mg•2/12/24, 11:16 PM

unless I'm misunderstanding something

mg•2/12/24, 11:17 PM

just like you have some code in your initialization method to get the data, you can have a form or something with a handler that updates the data

Mmg just like you have some code in your initialization method to get the data, you ...

DarylOP•2/13/24, 7:52 AM

Sorry i went to bed.

So the idea was the user would make changes locally, submit it to the server which would rub some validation and submit it if ok.

The problem I had was I couldn't even get the data to the client. It just didn't seem to have any knowledge that I was authenticated