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.
To develop and run ASP.NET Core Blazor applications locally, download and install the following:
For detailed instructions see ASP.NET Core - Setup Development Environment.
dotnet run
from the command line in the project root folder (where the BlazorApp.csproj file is located)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
.
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.
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
."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.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.
npm start
from the command line in the project root folder, you should see the message Server listening on port 4000
."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.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:
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).
ASP.NET Core Razor components that can be used in multiple areas of the application and are not bound to a specific route.
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.
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.
Anything that doesn’t fit into the above folders.
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.
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