Tutorial built with ASP.NET Core Blazor WebAssembly 3.2.1

The following is a custom JWT authentication example and tutorial showing how to setup a simple login page in ASP.NET Core Blazor WebAssembly (WASM).

The blazor app runs with a fake backend by default to enable it to run completely in the browser without a real backend api (backend-less), to switch to a real api you just have to change the "fakeBackend" setting to "false" in the app settings file (/wwwroot/appsettings.json). You can build your own api or hook it up with the ASP.NET Core api or Node.js api available (instructions below).

Styling of the example app is all done with Bootstrap 4.5 CSS, for more info about Bootstrap see https://getbootstrap.com/docs/4.5/getting-started/introduction/.

The example project is available on GitHub at https://github.com/cornflourblue/blazor-webassembly-jwt-authentication-example.

Tools required to run the Blazor JWT Example Locally

To develop and run ASP.NET Core Blazor applications locally, download and install the following:

• .NET Core SDK - includes the .NET Core runtime and command line tools
• Visual Studio Code - code editor that runs on Windows, Mac and Linux
• C## extension for Visual Studio Code - adds support to VS Code for developing .NET Core applications

For detailed instructions see ASP.NET Core - Setup Development Environment.

Running the Blazor JWT Auth Example Locally

1. Download or clone the tutorial project code from https://github.com/cornflourblue/blazor-webassembly-jwt-authentication-example
2. Start the app by running dotnet run from the command line in the project root folder (where the BlazorApp.csproj file is located)
3. Open a new browser tab and navigate to the URL http://localhost:5000

NOTE: To enable hot reloading during development so the app automatically restarts when a file is changed, start the app with the command dotnet watch run.

Running the Blazor WebAssembly App with an ASP.NET Core 3.1 API

For full details about the example ASP.NET Core API see the post ASP.NET Core 3.1 - JWT Authentication Tutorial with Example API. But to get up and running quickly just follow the below steps.

1. Download or clone the project source code from https://github.com/cornflourblue/aspnet-core-3-jwt-authentication-api
2. Start the api by running dotnet run from the command line in the project root folder (where the WebApi.csproj file is located), you should see the message Now listening on: http://localhost:4000.
3. Back in the Blazor WebAssembly app, change the "fakeBackend" setting to "false" in the app settings file (/wwwroot/appsettings.json), then start the Blazor app and it should now be hooked up with the ASP.NET Core API.

Running the Blazor App with a Node.js API

For full details about the example Node.js API see the post NodeJS - JWT Authentication Tutorial with Example API. But to get up and running quickly just follow the below steps.

1. Install NodeJS and NPM from https://nodejs.org.
2. Download or clone the project source code from https://github.com/cornflourblue/node-jwt-authentication-api
3. Start the api by running npm start from the command line in the project root folder, you should see the message Server listening on port 4000.
4. Back in the Blazor WebAssembly app, change the "fakeBackend" setting to "false" in the app settings file (/wwwroot/appsettings.json), then start the Blazor app and it should now be hooked up with the Node.js API.

Blazor WebAssembly Project Structure

The .NET Core CLI (dotnet) was used to generate the base project structure with the command dotnet new blazorwasm -o BlazorApp, the CLI is also used to build and serve the application. For more info about the .NET Core CLI see https://docs.microsoft.com/en-us/dotnet/core/tools/.

The tutorial project is organised into the following folders:

Pages

ASP.NET Core Razor components that contain the pages for the Blazor application. Each component specifies which route it is bound to with a @page directive at the top of the file (e.g. @page "/login" in the login component).

Shared

ASP.NET Core Razor components that can be used in multiple areas of the application and are not bound to a specific route.

Services

Contain the core logic for the application and handles most of the heavy lifting so page components can be kept as lean and simple as possible. The services layer encapsulates all http communication with backend apis and interaction with local storage, and exposes a simple set of interfaces for the rest of the app to use.

Models

Represent the model data handled by the Blazor application and transferred between components and services, including data received in api responses and sent in requests.

Helpers

Anything that doesn’t fit into the above folders.

wwwroot

The Blazor project “web root” folder that contains static files including the root index.html file or host page (/wwwroot/index.html), css stylesheets, images and app settings (/wwwroot/appsettings.json). Everything in the wwwroot folder is publicly accessible via a web request so make sure you only include static files that should be public.

docs

You can ignore this folder, it just contains a compiled demo of the code hosted on GitHub Pages at https://cornflourblue.github.io/blazor-webassembly-jwt-authentication-example/.

#blazor #webassembly #security #jwt #developer