
## A new journey
Like you can see, I've created this website/blog/playground new with a fresh design and a fancy bottom menu, which I personally like enjoy. I had created a blog in 2020 with Next.js and Notion as my CMS, but I never really used it to write except my <Link href="/blog/role-based-authentication-with-hosted-blazor-template"><a>Role-based authentication with hosted Blazor template</a></Link> post.

But why didn't I wrote more on my older blog?

### Next.js + Notion
When I created my previous blog with Next.js and Notion as my CMS, it worked well for couple weeks. Then everything started to fall into each other. My Notion token expired all the time, the Notion app on iOS kept logging me out, build times took a long time and it was not fun always replacing the Notion token via Vercel website.

### Moving out
In 2020 my wife and I found a house that we really liked where it was located, how the floor plan was and it was affordable for us. 
So we decided to buy it. And if you've ever bought a house in Austria, you'll know that this process can take **months**.
In September everyone was ready for us to sign the contract of our house. Of course, it wasn&apos;t fully finished,
so we had to wait another couple months until we could move in. In Febuary 2021 we got the keys and 3 weeks later, 
we started to sleep in our new home.


Telling you more about why I've chosen to create a new website and a new blog, what was wrong with the old one and maybe a little bit more.

New year, new blog ... (again? ... again!)


## First of all, we're going to create a new project:

![Create a new project with Visual Studio](/assets/role-based-authentication-with-hosted-blazor-template/1.png)

If you prefer CLI:
```csharp
dotnet new blazorwasm --auth Individual --hosted
```

![Create a new project in the terminal](/assets/role-based-authentication-with-hosted-blazor-template/2.png)
Next, we'll run `dotnet ef database update` in the console inside the Server projects folder so EntityFramework can run the database migrations.
```csharp
dotnet new blazorwasm --auth Individual --hosted
```

![New project created in the terminal](/assets/role-based-authentication-with-hosted-blazor-template/3.png)

## Backend
Then we need to make some changes in the `Startup.cs` class in the Server project:

You'll find a line inside
the `ConfigureServices` method which adds the default Identity to our server:
```csharp
dotnet new blazorwasm --auth Individual --hosted
```

We need to add one line to add our roles to the Identity:
```csharp
services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
    .AddRoles<IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>();
```

Now we need to make some changes to the following code:
```csharp
services.AddIdentityServer()
    .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();
```

We'll expand it, so our Server always adds the role to the JWT token when the user requests his/her token:
```csharp
services
    .AddIdentityServer()
    .AddApiAuthorization<ApplicationUser, ApplicationDbContext>(options =>
        {
            options.IdentityResources["openid"].UserClaims.Add("role");
            options.ApiResources.Single().UserClaims.Add("role");
        }
    );
System.IdentityModel.Tokens.Jwt.JwtSecurityTokenHandler
      .DefaultInboundClaimTypeMap.Remove("role");
```

I've also created a small helper method to create an admin Account, create all
Roles from an Enum and assigned the Administrator role to the admin Account.

Create a new enum inside the Shared project:
```csharp
// Role.cs
using System.ComponentModel;

namespace Shared
{
    public enum Role
    {
        [Description("Administrator")]
        Administrator,
        [Description("Free")]
        Free,
        [Description("Paid")]
        Paid
    }
}
```

Helper method inside `Startup.cs` of the Server project:
```csharp
private void CreateRoles(IServiceProvider serviceProvider)
{
    var roleManager = serviceProvider.GetRequiredService<RoleManager<IdentityRole>>();
    var userManager = serviceProvider.GetRequiredService<UserManager<ApplicationUser>>();
    Task<IdentityResult> roleResult;
    string email = "admin@domain.com";
    string securePassword = "Pa$$w0rd!";

    foreach (var role in Enum.GetValues(typeof(Role)))
    {
        Task<bool> roleExists = roleManager.RoleExistsAsync(role.ToString());
        roleExists.Wait();

        if (!roleExists.Result)
        {
            roleResult = roleManager.CreateAsync(new IdentityRole(role.ToString()));
            roleResult.Wait();
        }
    }

    Task<ApplicationUser> adminUser = userManager.FindByEmailAsync(email);
    adminUser.Wait();

    if (adminUser.Result == null)
    {
        var admin = new ApplicationUser();
        admin.Email = email;
        admin.UserName = email;

        Task<IdentityResult> newUser = userManager.CreateAsync(admin, securePassword);
        newUser.Wait();
    }

    var createdAdminUser = userManager.FindByEmailAsync(email);
    createdAdminUser.Wait();
    createdAdminUser.Result.EmailConfirmed = true; // confirm email so we can login
    Task<IdentityResult> newUserRoleAssignment = userManager.AddToRoleAsync(createdAdminUser.Result, Role.Administrator.ToString());
    newUserRoleAssignment.Wait();
}
```

Now we need to call this helper method from the `Configure` method inside the `Startup.cs`. But first, we need to change our method signature (we need `IServiceProvider` inside this class, so we'll expect it from .NET Core's built in Dependency Injection:
```csharp
public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IServiceProvider serviceProvider)
```

Now we can add the following line at the bottom of the Configure method:
```csharp
public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IServiceProvider serviceProvider)
{
	...
	CreateRoles(serviceProvider);
}
```

This change will create our 3 defined Roles inside the database: Administrator, Free and Paid.

After running the app with `dotnet run` you can see, that all 3 roles and our admin user have been created:

(I'm using VSCode with the SQLite extension to view data from the SQLite Database file)

Roles:

![Roles table from the SQLite database with SQLite Extension inside of Visual Studio Code](/assets/role-based-authentication-with-hosted-blazor-template/4.png)

Admin User:

![Admin user from the database with SQLite Extension inside of Visual Studio Code](/assets/role-based-authentication-with-hosted-blazor-template/5.png)

And the "Administrator" role assignment:

![Administrator role assignment from the database with SQLite Extension inside of Visual Studio Code](/assets/role-based-authentication-with-hosted-blazor-template/6.png)

Now, our server knows about Roles and will also send the roles back via the JWT token.


## Frontend
To read and show all Claims from our Blazor frontend, we can expand the `Index.razor` inside our Client project with the following (look for the tag):
```csharp
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<AuthorizeView>
    <ul>
        @foreach (var item in context.User.Claims)
        {
            <li>Type: @item.Type, Value: @item.Value</li>
        }
    </ul>
</AuthorizeView>
```

This will show us all the claims (and roles) after we've signed in. Let's run the app with `dotnet run` or `dotnet watch run` from inside the Server folder.

We're able to login with our Admin User and as you can see from the image below, our Role is exposed through the token to our Blazor frontend.

![Blazor frontend showing the current role through the token](/assets/role-based-authentication-with-hosted-blazor-template/7.png)

To test this out, we'll make 2 changes to the following files:

NavMenu.razor: wrap the last menu point "Fetch data" with an AuthorizeView component (built into Blazor) and a defined role:
```razor
// NavMenu.razor
...
<AuthorizeView Roles="Administrator">
    <li class="nav-item px-3">
        <NavLink
            class="nav-link"
            href="fetchdata"
        >
            <span
                class="oi oi-list-rich"
                aria-hidden="true"
            ></span> Fetch data
        </NavLink>
    </li>
</AuthorizeView>
...
```

That means, that any user who has not the Role "Administrator" defined and exposed via the token, won't be able to see this menu element:

![Navigation menu is hidden because user has not the administrator role defined](/assets/role-based-authentication-with-hosted-blazor-template/8.png)

After logging in with the admin user, we can see the menu element again:

![User is logged in, so the navigation menu shows the new entry](/assets/role-based-authentication-with-hosted-blazor-template/9.png)

So, we've secured the frontend part, but we also need to secure our `WeatherForecastController` and allow only users with the Administrator role assigned to call all endpoints from this controller:
```csharp
namespace BlazorAuth.Server.Controllers
{
    [Authorize] // replace this line
    [Authorize(Roles = "Administrator")] // with this line
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        ...
    }
}
```

With this last change, we've secured our Fetch data page on the frontend only for users in the Administrator role and our Controller too. That means, when a user does not have this role, any call to this endpoint (Controller) or the page via the browser, won't get any data back.


In this tutorial I'll show you how you can add role-based authentication with the Blazor Hosted template.

Blog