Call Protected APIs from a Blazor Web App

Calling a protected API from a .NET 8 Blazor Web App can be a bit tricky. Let’s see what the problems are and how to solve them.
Read more…

:writing_hand:t2: Brought to you by @andrea.chiarelli

Your feedback and questions are important – feel free to express them!

After <<the configured access token liftime>> minutes, the api-calls fails, with “token expired”.
If i log out and login in the blazor server app, it starts working again.

How can I instead do access-token refresh for active sessions?

It thought this should do it for me automatically:
_httpContextAccessor.HttpContext!.GetTokenAsync("access_token");

But no, that just keeps returning the same (expired) token as long as the user is logged in…

update:

I found the UseRefreshTokens in the docs. Why this isnt true by default, who know?

    
    .WithAccessToken(options =>
    {
        options.Audience = builder.Configuration["Auth0:Audience"];
        options.UseRefreshTokens = true;
    });

The problem is, still not working. Access tokens are not refreshed.

Update 2:
I verified that “use refresh tokens” , “allow offline access” is checkd in the settings.
I have also added the scope “offline_access”.

Still not working.

@robertino.calcaterra please advice.

Hey @sebastian4,
With options.UseRefreshTokens = true; you don’t need to specify the offline_access scope. The SDK does it for you.
As far as I can see, with the setup you described, refresh tokens should work.
Make sure to log out and log in again after you make your settings on your Auth0 dashboard.
This article explains how to use refresh tokens in an ASP.NET Core application and includes a working sample project, but basically it does what you already did.
Have you had a chance to take a look at the HTTP requests exchanged between your application and your Auth0 tenant to see if actually a refresh token is requested and obtained?

Hello,

Thank you very much for the tutorial. I retrieve your project and understand main steps. However, sometimes the first call of the external API returns 404. With the classic yellow message on the bottom of the page. And clicking to reload, everything works. I stop the debug mode of my blazor web app, restart and all seems to work.

I add a polly retry policy but it doesn’t work. If I restart the external API project, same behavior, the first call of the API returns 404 from Blazor project.

Is there any problem with the httpclient or you think it’s the render mode?

Hey @alpachinois,
Thank you for appreciating my tutorial and welcome to the Auth0 Community!

To be honest, I’m not able to reproduce the issue you are experiencing. All my requests to the external API are successful.
I have no evidence to say that it depends on the render mode, although I doubt it, or on the HttpClient.

Are you running the sample project or did you apply the implementation steps to another project?
Have you tried to capture the HTTP requests and debugging the API in the Blazor project?

Hello,

Great tutorial series!

Locally, on my PC, everything works perfectly.
If the API is not started, I get a 404 error.
However, when my API is hosted by Ionos, I systematically get a 404 error.
According to my research, only the site [ASP.NET] Ionos Windows Hosting Proxy for Auth0 attempts to answer it.
Do you have an idea ?

Hello @fabien.lemore,
I’m glad you appreciate these tutorials. Thanks!

I don’t know Ionos infrastructure and constraints. However, from what you are saying (i.e., accessing the external API hosted on Ionos gives you a 404 status code), I don’t think that the document you shared applies. You are just calling an API endpoint. Auth0 is not involved in this step at all.

I suggest the following test: call the remote API endpoint with a browser or with cURL, even without an access token. If you still get a 404 status code, the problem is on the API hosting (no idea about the specific problem). If you get a 401 status code, then the API is hosted correctly and the problem is in your Blazor app.

Make sure you have changed the value of the ExternalApiBaseUrl key in the appsettings.json file. If it’s correct, try to capture the HTTP request sent by your Blazor app to the remote API and see if it’s as expected.

Side note: If the document about the proxy is valid, I’m afraid you need to apply it to the remote API. While the issue you are experiencing right now is not related to this, once you solve it, you’ll find that the API needs to access Auth0 to validate the access token, and it seems that Ionos does not allow outbound calls.