How to Build Securely with Blazor WebAssembly (WASM)

How to Build Securely with Blazor WebAssembly (WASM)

Learn how to securely build front end WebAssembly sites in .NET’s Blazor WASM and C# - no Javascript required.

William Shaw

The tutorial instructions worked well for the demo app.
However, when I built a second prototype following the same instructions and adding a new app to Okta the sign-in failed with a 400. How do you specify in the Blazor app which app Okta should respond to?

Fixed it – I didn’t realize that the Client Id was different for each app.

Angela

Where do you obtain the accesstoken… so you can send that on the header to the web api for data requests?

Richard Corkery

I got this to work so Thanks!!!
But, I didn’t see a step to assign the user (yourself) to the Okta app. Did I miss it? Maybe not all okta sites need this but I know I have to do it. Maybe this note will remind someone else who does this exercise.

Steven Archibald

If I put this in appsettings.json in wwwroot, as suggested

{
“Okta”: {
“Authority”: “https://{yourOktaOrg}.okta.com/oauth2/default”,
“ClientId”: “{yourClientId}”
}
}

doesn’t this expose my Okta clientid to the world? How is that secure? What am I missing?

Steven Archibald

I’m trying to follow the demo. As of today (4/4/2021) it seems that the Okta UI has changed. In addition, the Blazor WASM app template has changed somewhat (no option for "local storage of user accounts). When I try to build/run after making the changes in the video (& associated blog page), I get the following error when I try to login:

“There was an error trying to log you in: ‘Invalid response Content-Type: text/html, from URL: dev-<xxxxx>.okta.com/oauth2/default/.well-known/openid-configuration’” where I have replaced my developer url number with “<xxxxx>” for security reasons…

Matt Goldman

This is super helpful, thank you! Worked for me.

Hi,
We also use this approach. However, I realized that due to the OKta signin the redirect triggers a reload of the WASM application which is taking unnecessarily long. Is tehere away to prevent the restart of the WASM app? E.g. open the okta urls in an iFrame or such?

Thank
Steffen

This is for PWA. is there any sample how to authenticate with OKTA with .net core hosted blazor webassembly project?