Getting Started with Blazor WASM App with Authentication Library

1 Jul 20267 minutes to read

This article provides step by step instructions for building and securing a Blazor WebAssembly Standalone App and integrate the Blazor components for authenticated users.

Create a new Blazor WASM App

To create a new Blazor WASM App, follow the Blazor getting started guide.

Create a Blazor WebAssembly App using Visual Studio via Microsoft Templates or the Blazor Extension.

  • Ensure the Configure for HTTPS option is enabled.
  • Select Individual Accounts as the authentication type.
    This enables authentication support without persisting user data in a local database.

Run the following command to create a new Blazor WASM App with authentication support.

dotnet new blazorwasm -o BlazorAppAuthentication --auth Individual
cd BlazorAppAuthentication
dotnet run

Alternatively, you can create the project using Microsoft Templates, the Blazor Extension, or the C# Dev Kit extension.

Run the following command to create and run a Blazor WASM App with authentication support.

dotnet new blazorwasm -o BlazorAppAuthentication --auth Individual
cd BlazorAppAuthentication
dotnet run

Configure the application with Google OAuth 2.0 (OIDC)

  • Set up Google OAuth 2.0 authentication. For more information, see the Google Cloud documentation.

  • Replace the appsettings.json file with the following content to configure the application with Google OAuth 2.0.

{
  "Local": {
    "Authority": "https://accounts.google.com/",
    "ClientId": "2...7-e...q.apps.googleusercontent.com", 
    "PostLogoutRedirectUri": "https://localhost:5001/authentication/logout-callback",  // Replace **5001** with your application’s actual HTTPS port number from launchSettings.json if different.
    "RedirectUri": "https://localhost:5001/authentication/login-callback",
    "ResponseType": "id_token"
  }
}
  • Replace the ClientId with the OAuth 2.0 client ID of your created project.

OAuth 2.0 client ID

  • The RedirectUri (https://localhost:5001/authentication/login-callback) must be registered in the Google APIs console as shown below.

OAuth RedirectUri

Integrating Blazor component

Blazor components can be integrated within the AuthorizeView component as shown in the following steps.

Install NuGet packages

Install the Syncfusion.Blazor.Grid and Syncfusion.Blazor.Themes NuGet packages. All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.

  1. Go to (Tools → NuGet Package Manager → Manage NuGet Packages for Solution).
  2. Search the required NuGet packages (Syncfusion.Blazor.Grid and Syncfusion.Blazor.Themes) and install them.

Alternatively, you can install the same packages using the Package Manager Console with the following commands.

Install-Package Syncfusion.Blazor.Grid -Version 34.2.2
Install-Package Syncfusion.Blazor.Themes -Version 34.2.2

Open the terminal and run the following commands.

dotnet add package Syncfusion.Blazor.Grid -v 34.2.2
dotnet add package Syncfusion.Blazor.Themes -v 34.2.2

Open the command prompt and run the following commands.

dotnet add package Syncfusion.Blazor.Grid -v 34.2.2
dotnet add package Syncfusion.Blazor.Themes -v 34.2.2

Register Blazor Service

Register the Blazor service in the Program.cs file of the Blazor Web App.

using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
....

Add required namespaces

Open the ~/_Imports.razor file and import the namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the wwwroot/index.html file.

<head>
    ....
    <!-- Theme stylesheet -->
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
    ....
</head>

<body>
    ....
    <!-- Blazor core script (required for UI components, including DataGrid) -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
    ....
</body>

Add Blazor component

Add the Blazor DataGrid component in the ~/Pages/Home.razor file within an AuthorizeView.

<AuthorizeView>
    <Authorized>
        <SfGrid DataSource="@Orders">
            <GridColumns>
                <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" />
                <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" Width="100" />
                <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="100" />
                <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
            </GridColumns>
        </SfGrid>
    </Authorized>
    <NotAuthorized>
        <h1>Authentication Failure!</h1>
        <p>You're not signed in.</p>
    </NotAuthorized>
</AuthorizeView>

@code {
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 12).Select(i => new Order
        {
            OrderID = 1000 + i,
            CustomerID = new[] { "ALFKI", "ANATR", "ANTON", "BLONP", "BOLID" }[Random.Shared.Next(5)],
            OrderDate = DateTime.Today.AddDays(-i),
            Freight = Math.Round(25 + 15 * Random.Shared.NextDouble(), 2)
        }).ToList();
    }

    public class Order
    {
        public int OrderID { get; set; }
        public string? CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
        public double Freight { get; set; }
    }
}

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application.

Alternatively, run the application using the following .NET CLI command from the project root directory.

dotnet run

Blazor WASM App with Blazor DataGrid Component

See Also