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

Last month I came out with a video tutorial on Blazor WebAssembly and I thought it would be good to follow up with a written tutorial as well.

Because of the JS Interop, Blazor WASM has some key differences in the world of OAuth. Instead of thinking of this as a normal .NET back end application, you have to think of what Blazor resolves to in the browser - and that’s Javascript. Therefore, all of the security vulnerabilities that come along with browser-based languages apply here. Many have been handled by the team that built Blazor WebAssembly already, but they cannot code for you and make decisions about how to handle your token. We can help with that!

For this tutorial, we will focus on a Blazor WASM Progressive Web App (PWA) because it can be hooked up to a previously-built back end API that can handle the token validation with Okta - this way, we can learn what is required for the Blazor WASM front end website by itself. The ASP.NET Core Hosted option will be addressed in a future post and you can check out the official Okta .NET Blazor samples to see some samples in the meantime.

Requirements:

• Visual Studio 2019, Visual Studio 2019 for Mac (see the comparison here) or Visual Studio Code (we will be using VS Code for the samples in this article since it runs on everything including Linux)
• .NET Core 3.0 SDK
• An Okta Developer Account (free forever, to handle your OAuth needs)

Ready to go blazing fast through hooking up external authentication? Start your engines and don’t blink - here we go!

Build a Blazor WASM Progressive Web App Project

Let’s start from the beginning with a fresh application. You can also use the .NET CLI and Okta CLI to create your app, but for this tutorial, I will walk you through the IDE and portal steps.

In Visual Studio, select Create a new project. Then, select Blazor App and click Next.

Set the Project name to “Okta Blazor WASM” and click Create.

Select Blazor WebAssembly App and check Progressive Web Application. We are starting with a PWA because this way you can hook it up to your own, previously-built back end API leaving Configure for HTTPS checked as well.

Under the Authentication section, “No Authentication” will be set as the default option. Click Change.

Select Individual User Accounts to store user accounts in-app. Click OK.

Note: This option will automatically add the configurations your Blazor application needs to handle authentication and cuts down on having to add some files manually.

Click Create.

Build and run your new project to ensure there aren’t any updates to the Visual Studio templates needed. You should see the placeholder Blazor site!

#blazor #webassembly #security #aspdotnet #developer