Securing Blazor WebAssembly Apps

Blog Discussions
, , ,
197

Console

image
image1436Ɨ1364 138 KB

198

Hell0 @lucasflr14,
Welcome to the Auth0 Community! :wave:

Looking at the code you shared, two things come to my mind:

  1. Make sure that the audience you specify in the Blazor WASM app and the API code is the same as the one you defined in the Auth0 dashboard. It must match every single character.
    For example, I see that you specify https://localhost:7097/ in your Blazor app. It should be the same in the API and in the Auth0 dashboard, including the trailing slash.
    By the way, why did you choose the base address of your Blazor app as the audience? :thinking: Itā€™s not a problem per se, but looks strange. Usually people choose the API base URL.

  2. The ValidIssuer in the API configuration should be a URL (i.e., it should include the https://. See the code in the article)

Beyond these notes, I suggest taking a look at the logs in the Auth0 dashboard. You may be able to find additional info to solve your problem.

199

Iā€™m using localhost because Iā€™m running both locally. Could this be a problem? Iā€™m suspecting that could be it.

200

Absolutely not. This is not a problem.
Please, ignore my observation about the Blazor app base address in my previous comment. I was wrong looking at your code

201

Iā€™ve enabled Google Login for my Blazor Web Assembly Application. Until now, I was using Auth0 dev keys for this. Now I want that keys to be replaced by my keys.

So I went to dashboard / Authentication / Social and in that replaced the client id and client secret, which I obtained from Google console

Now when I try to test the application by clicking on the button ā€œTry Connectionā€ I get the error

ā€œError 400: redirect_uri_mismatchā€

Can you please help with what is wrong with the configuration?

202

Hey @goldytech,
Have you registered the correct authorized redirect URI in Google? It should be https://<YOUR_AUTH0_DOMAIN>/login/callback.
See this doc for more info.

For other possible reasons, please take a look at the following:

I hope this helps.

203

We are building a Blazor WASM app. We have Auth0 working just fine. What we would like to do is be able to bypass Auth0 by mocking it somehow during development to make development/debugging faster. Are there any docs on how to do this?

I see there are three callsā€¦openid-configuration, token and userinfo. I would assume we would. need to mimic these in dev somehow and provide a token, etc.

Any help is appreciated.

204

Hello @president,
Basically, you should mock the OIDC authentication flow.
In the Blazor WASM specific case, you should mock the Authorization Code Flow with PKCE.

You can build your own Auth0 mock server from scratch or you can use a lightweight OIDC server, such as oidc-provider (Disclaimer: this is not an Auth0 tool).

Keep in mind that if you use Auth0-specific features such as Actions, Rules, Hooks, etc., your mock may not reflect the actual Auth0 behavior.

205

Are you aware of a walkthrough/tutorial anywhere?

206

Unfortunately, Iā€™m not aware of any tutorial on building an OIDC mock server.
Anyway, I would suggest using the oidc-provider so that you should only focus on setup and configuration

207

Goodnight!
After many attempts and many things accomplished hahaha I couldnā€™t make my blazor application talk to my API authenticating in Auth0, I come to ask for help, for those who can help me, I can send the Link of the projects, both the API and the Blazor Wasm.

Blazor: GitHub - lferlr/mywallet
API: GitHub - lferlr/mywalletapi

208

Hey @lucasflr14,
Unlike the sample project described in my article, which implements an ASP.NET Core hosted Blazor application, you are implementing a standalone Blazor application that calls an API published on a different address.

According to the BaseAddressAuthorizationMessageHandler class documentation, ā€œaccess tokens will only be added when the request URI is within the applicationā€™s base URI.ā€

This is the reason why your calls always fail. Your Blazor app is not providing the access token.
If you want to keep this architecture, you need to implement a custom AuthorizationMessageHandler class.

I hope everything is clear.

209

Hi,

I tested the ASP.NET Core MVC and Core Blazor Server from the e-Book ā€œ.NET Identity with Auth0ā€ repository and they worked really well :slight_smile:

But running the ASP.NET Core Blazor WebAssembly example from that repository or from this ( Securing Blazor WebAssembly Apps ), with .NET 6, generates the following error:

There was an error trying to log you in:
ā€˜Invalid response Content-Type: null,
from URL: https://localhost:7123/.well-known/openid-configurationā€™

I even created a dummy file but did not work either :slight_smile:

{
ā€œissuerā€: ā€œhttps://localhost:7123/ā€
}

There are some references to this error in old messages:

Any solution?

Actually, I really need to use Auth0 with Standalone Blazor ( NOT Server Hosted )
Is there any example with Standalone Blazor available in any BLOG?

I found a BLOG about authentication with Azure that It uses a custom AuthenticationStateProvider:

My current Standalone Blazor application does already implement two AuthenticationStateProvider classes, for REST and gRPC authentication in my own backend API.
May I connect directly to Auth0 from a custom AuthenticationStateProvider?
Or ( less nice ) from my own backend API?
Without any Auth0 login form?

Thanks

210

Hi,

I guess I found the answer to the last question of my former topic by myselfā€¦
I could keep my current AuthenticateStateProvider class to call my own API ( with REST or gRPC ), and my API could authenticate with Auth0 using Resource Owner Password Flow:

https://auth0.com/docs/get-started/authentication-and-authorization-flow/call-your-api-using-resource-owner-password-flow#example-post-to-token-url

The only drawback is that this Flow Type ( Grant Type ) is less secure and is not even defined in OAuth 2.1 Grant Types.
Any other suggestions?

Thanks

211

There are a lot of questions in your post. Letā€™s start from the beginning :slightly_smiling_face:

The error you report is unusual. It looks like you are using your applicationā€™s domain (localhost:7123) as the authorization server (issuer) domain. This should be your Auth0 domain. Have you configured your Blazor app as described here?

Actually, I really need to use Auth0 with Standalone Blazor ( NOT Server Hosted )
Is there any example with Standalone Blazor available in any BLOG?

A standalone Blazor WASM application is the same as the Server Hosted one. The only difference is the hosting server. In particular, it must take care of HTTP redirections, like for any SPA, but basically the application works the same.
What is your hosting server/service? Azure SWA?

P.S. Talking of HTTP redirections, I wonder if that error comes from the missing route redirection on the server side :thinking:

212

Honestly, itā€™s not clear to me what is your architecture and what you are trying to do :thinking:

Resource Owner Password Flow is not recommended. Itā€™s in OAuth 2.1 specification for legacy reasons, and itā€™s deprecated in OAuth 2.1

213

Iā€™ve used this guide with Blazor WebAssembly hosted with ASP.NET API.
We are looking at migrating to .NET 8, keeping the WebAssembly model (rendering).
@andrea.chiarelli, is there an upgrade guide for this one? Are there any changes to the code, or should it work as-is with bumped-up dependencies? Thank you.

214

Hey @sean.feldman,
If you want to keep the ASP.NET Core hosted model, you can simply target .NET 8 and it should work. You may not leverage some of the new model benefits, but it should work with little effort.
If you want to embrace the new .NET 8 model, things are more complicated. See here for more details.

215

To confirm - Auth0 works w/o any modifications. This is not the case for ASP.NET Core hosted Blazor WebAssembly.

216

Hey @sean.feldman , can you clarify please? Do you mean that Auth0 authentication works but you found other problems with the support of ASP.NET Core hosted Blazor WebAssembly in .NET 8?