Easy Steps to Create a Blazor Server-Side App with Authentication
Tags: csharp, dotnet, webdev, security
Published: 2021-04-22 11:34:39

---
title: Easy Steps to Create a Blazor Server-Side App with Authentication
published: true
date: 2021-04-22 10:46:15 UTC
tags: csharp, dotnet, webdev, security
canonical_url: https://www.syncfusion.com/blogs/post/easy-steps-create-a-blazor-server-side-app-with-authentication.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m43hz1tzr3rrwstaknqt.png
---
In this article, we are going to see how to create a new [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor "Link to Microsoft Blazor") server-side application with authentication. We will use the built-in **AuthenticationStateProvider** service to enable authentication. Then, we will obtain the authentication state data from the ASP.NET Core **HttpContext.User** property.

Let’s see about them along with code examples!

## Prerequisites

- [Visual Studio 2019](https://visualstudio.microsoft.com/vs/ "Link to download Visual Studio 2019")
- [.NET Core 3.1](https://dotnet.microsoft.com/download/dotnet/3.1 "Link to download .NET Core 3.1")

## Create a Blazor server-side application

Follow these steps to create a Blazor server-side app with authentication.

**Step 1:**   First, open the  **Visual Studio 2019** and click the **Create a new project** option as shown in the following screenshot.  
![Open Visual Studio 2019 and click the Create a new project option](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Open-Visual-Studio-2019-and-click-the-Create-a-new-project-option.png)

**Step 2:** Next, choose the **Blazor App** option and click **Next**.  
![Choose the Blazor App option](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Choose-the-Blazor-App-option-and-click-Next.png)

**Step 3:**  Select **Blazor Server App** from the list. To enable authentication for the Blazor server-side app, select the **Configure for HTTPS** check box in the **Advanced** section.  Then, click the **Change** link in the **Authentication** section.

**![Select Blazor Server App option, Configure for HTTPS check box in the Advanced section and click the Change link in the Authentication section](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Select-Blazor-Server-App-option-Configure-for-HTTPS-check-box-in-the-Advanced-section-and-click-the-Change-link-in-the-Authentication-section.png)Step 4:** A new dialog will appear.  In that, select the **Individual User Accounts** option and then click **OK**.  
 ![Select the Individual User Accounts option and then click OK](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Select-the-Individual-User-Accounts-option-and-then-click-OK.png)

**Step 5:** Click the **C**** reate **button to create the Blazor server-side application. Once the Blazor application is created, run the project. Now, click the** Register** button in the header section.

Refer to the following screenshot.  
 ![Click the Register button in the header section](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Click-the-Register-button-in-the-header-section.png)

**Step 6:** Enter your authentication details in the appropriate fields. Then, click **Register**.  
 ![Enter your authentication details in the appropriate fields and then click Register](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Enter-your-authentication-details-in-the-appropriate-fields-and-then-click-Register.png)

**Step 7:** After successfully registering the email ID and password, select **Apply Migrations** to set up the account details based on the database.  
![Select Apply Migrations](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Select-Apply-Migrations.png)

**Step 8:** Now, the home page will open. Refresh the page to see the home page of your application with a logged-in user’s details. The **Register** link will be replaced with the user’s mail ID. The  **Login** link will be replaced with the **Log out** link in the header section.  
![Home Page of your Blazor server-side application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Home-Page-of-your-application.png)

## AuthorizeView component

We’ll use the built-in AuthorizeView component in the Blazor application to show the user authentication state in the UI. We can also use the AuthorizeView to get the user details.

This component provides the following two child components:

- Authorized: Denotes the user is authorized (logged in).
- NotAuthorized:Denotes the user is not authorized (logged out).

Refer to the following code.

```html
<AuthorizeView>
<Authorized>
<span> Hello, @context.Employee.Identity.Name!</span>
<form method="post">
<button type="submit">Sign out</button>
</form>
</Authorized>
<NotAuthorized>
<span> Welcome! Please sign up below </span>
<a href="Employee/Register">Register</a>
<a href="Employee/Signin">Sign in</a>
</NotAuthorized>
</AuthorizeView>
```

## Custom AuthenticationStateProvider

Also, Blazor provides a built-in custom **AuthenticationStateProvider** service. You can implement this class and override the **GetAuthenticationStateAsync** method to implement custom authentication.

Refer to the following code.

```csharp
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Authorization;

public class CustomAuthStateProvider : AuthenticationStateProvider
{
    public override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var identity = new ClaimsIdentity(new[]
        {
            new Claim(ClaimTypes.Name, "exampleuser"),
        }, "user authentication type");

        var user = new ClaimsPrincipal(identity);

        return Task.FromResult(new AuthenticationState(user));
    }
}
```

## Difference between authentication and authorization

**Authentication:** Authentication is done before authorization. It is the process of validating that the users are who they claim to be. It determines whether the person is a registered user.

**Authorization:** Authorization is done after authentication. It is the process of giving permission to the user to access a resource.

## References

For more details, refer to our [Blazor server-side app with authentication demo](https://github.com/SyncfusionExamples/blazor-authentication/ "Link to Blazor server-side app with authentication demo on GitHub") and [Blazor server authentication documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-5.0#blazor-server-authentication "Link to Blazor server authentication documentation").

## Conclusion

Thanks for reading! In this post, we explained with a demo how to create a new Blazor server-side app with authentication using the built-in AuthenticationStateProvider service. Try out the steps provided in this blog post and leave your feedback in the comments section below!

Essential Studio for [Blazor](https://www.syncfusion.com/blazor-components "Link to Blazor UI components") offers the largest selection of components for the Blazor platform. It has popular components like [Charts](https://www.syncfusion.com/blazor-components/blazor-charts "Link to Blazor Charts"), [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Link to Blazor DataGrid"), [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Link to Blazor Scheduler"), [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram "Link to Blazor Diagram"), [Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor "Link to Blazor Document Editor"), and [Maps](https://www.syncfusion.com/blazor-components/blazor-maps "Link to Blazor Maps"). It also includes unique file-format libraries for manipulating [Excel](https://www.syncfusion.com/excel-framework/blazor "Link to Blazor Excel Library"), [Word](https://www.syncfusion.com/word-framework/blazor "Link to Blazor Word Library"), [PDF](https://www.syncfusion.com/pdf-framework/blazor "Link to Blazor PDF Library"), and [PowerPoint](https://www.syncfusion.com/powerpoint-framework/blazor "Link to Blazor PowerPoint Library") files. Use them to build world-class applications!

Try our Blazor components by downloading a [free 30-day trial](https://www.syncfusion.com/account/manage-trials/downloads "Link to the free evaluation of the Syncfusion Essential Studio"), or check out our [NuGet package](https://www.nuget.org/packages/Syncfusion.Blazor "Link to the Syncfusion Blazor NuGet Packages"). Feel free to peruse our [online examples](https://blazor.syncfusion.com/ "Link to the Syncfusion Blazor demos") and [documentation](https://blazor.syncfusion.com/documentation/introduction/ "Link to the Syncfusion Blazor documentation") to explore other available features.

You can also contact us through our [feedback portal](https://www.syncfusion.com/feedback/blazor-components "Link to Syncfusion Feedback Portal"), [support forums](https://www.syncfusion.com/forums/blazor-components "Link to the Syncfusion Blazor support forum"), or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/newincident "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [Blazor WebAssembly: An Overview](https://dev.to/sureshmohan/blazor-webassembly-an-overview-26go-temp-slug-7783870 "Link to the article Blazor WebAssembly: An Overview")
- [Lazy Loading Syncfusion Blazor Assemblies in a Blazor WebAssembly Application](https://dev.to/syncfusion/lazy-loading-syncfusion-blazor-assemblies-in-a-blazor-webassembly-application-444e "Link to the article Lazy Loading Syncfusion Blazor Assemblies in a Blazor WebAssembly Application")
- [How to Authenticate a Blazor WebAssembly-Hosted App with Azure Active Directory](https://dev.to/syncfusion/how-to-authenticate-a-blazor-webassembly-hosted-app-with-azure-active-directory-224l "Link to the article How to Authenticate a Blazor WebAssembly-Hosted App with Azure AD")
- [How to Deploy a Blazor Application in Azure App Service](https://dev.to/syncfusion/how-to-deploy-a-blazor-application-in-azure-app-service-26j9 "Link to the article How to Deploy a Blazor Application in Azure App Service")