How to secure static client side blazor application with Azure Functions backend?
So I wanted to take a look at the whole serverless and static web application topic that is currently going on.
My plan is to create a C# client application that is hosted as a static website with C# Azure Functions doing the backend work. So far so good. The code that handles all my functions seems straightforward.
Authentication, on the other hand, is another story. I'm a little lost as to how to properly secure my app and only allow people in after logging in.
However, after doing some reading on how to do security, I still have some questions that remain unanswered.
How to do authentication and security in the application? I'm reading the following article: https://docs.microsoft.com/de-de/archive/blogs/stuartleeks/azure-functions-and-app-service-authentication which describes how to use an authentication provider like Facebook , Google et al. However, coming from an Asp.Net authentication background, how can I actually use custom identity settings? For example, I want to provide a way to register and log in in a client-side blazor app, I hope I can find something similar to Identity here, for user management etc.
If I've done the authentication part correctly, how should my client application reflect the login state? Given that there is no server behind, I can't dispatch a 'logged in' view or a 'logged in' view based on the client's authentication status like an MVC controller can.
It would be great if someone could give me some guidance here.
This is way too broad for StackOverflow, but let me break down this question differently and explain how to do it.
You have three main requirements here:
- Manage users (login, register, etc.)
- On the server side, determine if the user is logged in.
- On the client side, determine if the user is logged in.
So let's see what to do in each case.
Manage users (login, register, etc.)
The first thing you have to remember is that ASP.NET Core Identity does not require the use of the razor web UI that comes with it. You don't even have to use anything that was originally scaffolded. There is nothing stopping you from using functions/events/endpoints/etc that pass username/password and authenticate user. Same with registration and other identity frameworks.
If you don't want to repeat the same mistakes, and since this is a security framework, of course you should, you can use ASP.NET Core Identity.
On the server side, determine if the user is logged in.
There are multiple ways to do this. Since your client is a web based client, you can choose between a token such as JSON Web Token (JTW ) and a cookie. However, since you're using a SPA, the recommendation today is to use JWT. You have at least two ways to achieve this:
- You can generate the token yourself using the package provided by Microsoft and verify it using Microsoft.AspNetCore.Authentication.JwtBearer ,
- If you think more clients will be added in the future (such as mobile apps), you might want to look into giving IdentityServer an opportunity. There is a new package that abstracts most of IdentityServer4 in templates using ASP.NET Core Identity. However, if you only plan on using a single Blazor app, this can be overkill.
Obviously you can also look at 3rd party frameworks, but before considering them you need to make sure their code is properly validated from a security perspective.
On the client side, determine if the user is logged in.
I can't give you too much information in this regard as I'm not working with Blazor. However, most likely there is some authorization attribute or a way to authorize a given route, which can be done for example in Angular and React. I suggest you check it out here: ASP.NET Core Blazor Authentication and Authorization .
The main point to remember is that the login endpoint will return the JWT generated client (a mix of the first two points), and you can easily see the value of the JWT (like username) in the client.