Add Auth0 Authentication to Blazor Web Apps

Thanks for the great article. There is so little information about how to configure the client components to use security when they are calling an API.

Are you able to do ‘Part 2’ of the article and show how we can extend this solution to call an API endpoint (maybe secured by Auth0 as well?), and use the access token to call an external API? This is the big missing piece to making Blazor .Net 8 apps useful!
Thanks!

Hey @ripteqdavid,
Thank you for appreciating my article and welcome to the Auth0 Community!

Actually, the topic of calling an API has been asked a number of times. I hope to cover this soon.
In the meantime, I invite you to take a look at my suggestions on calling “internal” and external APIs here and here

Hi Andrea,

Great article. And i am slowly digesting it.
My case looks like a bit different (as i understand your article). In my case I would like to have a .Net 8 Blazor WebApp in Interactive WASM Rendering mode which will call a serverless Azure function secured by OIDC identity provider.

What would you suggest in this case. My server calls are directly from browser to Azure function. Is there an example i can refer to ?

Sorry my bad. I did not see your reply here to another question. Looks like the same question.

"Thank you for appreciating my article and welcome to the Auth0 Community!

Actually, the topic of calling an API has been asked a number of times. I hope to cover this soon
"

Hi,

Thank’s for tutorial it’s interresting, but if i can expose my opinion, only show how to used in Blazor app is not enough, secure and after didn’t have a concret sample for calling API, it’s quite “useless” ? Sorry if words is too hard, but for some it’s blocking, because having API for data and cannot be call ?

For my part i’ve used :

 builder.Services
                .AddAuth0WebAppAuthentication(options =>
                {
                    options.Domain = builder.Configuration["Auth0:Domain"];
                    options.ClientId = builder.Configuration["Auth0:ClientId"];
                    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
                })
                .WithAccessToken(options =>
                {
                    options.Audience = builder.Configuration["Auth0:Audience"];
                });


app.MapForwarder("/{**catch-all}", "https://localhost:5000", transformBuilder =>
            {
                transformBuilder.AddRequestTransform(async transformContext =>
                {
                    var accessToken = await transformContext.HttpContext.GetTokenAsync("access_token");
                    transformContext.ProxyRequest.Headers.Authorization = new("Bearer", accessToken);
                });
            }).RequireAuthorization();

If i’ve connected and go manualy on /api/my-url it’s forward with AccessToken
If i try from HttpClient from Page it’s try to call auth flow :frowning:

Kr,

Hey @Hantse,
Writing a follow up of this article focused on calling protected APIs is in my plans.
In the meantime, I suggest using different approaches depending on whether the API is internal or external to your application.
See this answer for my suggestion for the two approaches.

I get the following error running my application and a cloned copy of yours from github with my auth0 credentials in.

InvalidOperationException: IDX20803: Unable to obtain configuration from: ‘https://https://dev-opynqcjq58yhxawc.us.auth0.com/.well-known/openid-configuration’.

Hey @brianrhody,
Looks like you assigned your tenant URL (https://dev-opynqcjq58yhxawc.us.auth0.com) instead of your tenant domain (dev-opynqcjq58yhxawc.us.auth0.com) to the Domain key in appsettings.json.