Skip to content
68 changes: 40 additions & 28 deletions blazor/common/authentication/blazor-aws-cognito.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
---
layout: post
title: Blazor with AWS Cognito Authentication | Syncfusion
description: Authenticate a Blazor Server app with AWS Cognito (OIDC Hosted UI) and secure Syncfusion components.
description: Authenticate a Blazor Server application using AWS Cognito (OIDC Hosted UI) and ensure secure access to components.
platform: Blazor
control: Common
documentation: ug
---

# Blazor Authentication with AWS Cognito using Syncfusion® Components
# Blazor Authentication with AWS Cognito using Blazor Components

This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with a [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). This enables you to implement secure authentication, control access to Syncfusion Blazor components based on user identity, and protect application data.
This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with [Blazor components](https://www.syncfusion.com/blazor-components). This enables you to implement secure authentication, control access to Blazor components based on user identity, and protect application data.

## Prerequisites

* [.NET SDK](https://dotnet.microsoft.com/en-us/download/visual-studio-sdks) 8.0 or later (this guide uses .NET 10)
* [.NET SDK](https://dotnet.microsoft.com/en-us/download/dotnet) 8.0 or later (this guide uses .NET 10)
* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension
* [AWS Account with permission to manage Cognito](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html)

## Integrating Cognito with Blazor
## Create a Blazor project

### Create a Blazor project

If you already have a Blazor project, proceed to the [Install required packages](#install-required-packages) section. Otherwise, create one using Syncfusion’s Blazor getting started guides.
If you already have a Blazor project, proceed to the [Install required packages](#install-required-packages) section. Otherwise, create one using below Blazor getting started guides.

* [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
* [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)

### Install required packages
N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).

## Install required packages

To enable authentication and use Syncfusion Blazor components, install the required packages through NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
To enable authentication and use Blazor components, install the required packages through NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.

**Syncfusion packages**

Expand All @@ -52,7 +52,7 @@ dotnet restore
{% endhighlight %}
{% endtabs %}

### Add required namespaces
## Add required namespaces

Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor`, `Syncfusion.Blazor.Grids` namespaces.

Expand All @@ -65,9 +65,9 @@ Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor`, `Syncfusion
{% endhighlight %}
{% endtabs %}

## Register Syncfusion® Blazor service
## Register Blazor service

Add the Syncfusion Blazor service to the `~/Program.cs` file to enable Syncfusion components in the application.
Add the Blazor service to the `~/Program.cs` file to enable Blazor components in the application.

{% tabs %}
{% highlight razor tabtitle="~/Program.cs" %}
Expand All @@ -81,7 +81,7 @@ builder.Services.AddSyncfusionBlazor();
{% endhighlight %}
{% endtabs %}

### Create a Cognito user pool
## Create a Cognito user pool

Before building the Blazor app, set up an AWS Cognito user pool:

Expand All @@ -90,7 +90,7 @@ Before building the Blazor app, set up an AWS Cognito user pool:
3. Choose application type as **Traditional Web Application** (even though this is a Blazor app, Cognito categorizes web-based apps here).
4. Set your application name.
5. Choose authentication method: **Email** or **Phone number** (or both).
6. Continue through the setup wizard and confirm your settings. Once ready, click the button to **Create User Directory**.
6. Continue through the setup wizard and confirm your settings. Once ready, click the **Create User Directory** button.
7. Go to **Amazon Cognito** > **User pools**. Note the **User pool ID** and **User pool name**.
8. Go to **App integration** > **App clients**.
9. Click **Create app client**:
Expand All @@ -99,13 +99,13 @@ Before building the Blazor app, set up an AWS Cognito user pool:
- **Authentication flows:** Ensure **Authorization code flow** is selected.
- Under **Allowed redirect URIs**, add: `https://localhost:7000/signin-oidc` (adjust port if different; check `Properties/launchSettings.json`).
- Under **Allowed sign-out URIs**, add: `https://localhost:7000/signout-callback-oidc`.
10. Verify that in **App integration** **hosted UI**:
10. Verify that in **App integration** > **Hosted UI**:
- "Hosted UI" is **enabled**.
- "Callback URLs" includes your app redirect URI.

You now have the values to add to `appsettings.json`.

### Update `appsettings.json` file
## Update `appsettings.json` file

This stores your Cognito hosted UI domain and app client ID so the app can read them at startup. The `Authority` is the base URL of your Cognito user pool domain, and `ClientId` identifies your web app in Cognito. Keep these out of code to simplify environment changes. Replace the placeholders with your actual Cognito values.

Expand All @@ -127,7 +127,7 @@ N> Replace **{REGION}** with your AWS region (e.g., `us-east-1`), and **YOUR_APP

N> This sample uses Authorization Code + PKCE with a public client (no client secret). If you created a confidential client, add ClientSecret to configuration and set `options.ClientSecret` in the OIDC options.

### Configure OIDC and Cookie authentication
## Configure OIDC and Cookie authentication

This wires OpenID Connect against Cognito’s hosted UI using the Authorization Code flow (PKCE) and uses cookies for the authenticated session. `SaveTokens = true` keeps ID/Access tokens available for downstream API calls. `RoleClaimType = "cognito:groups"` turns Cognito groups into ASP.NET Core roles.

Expand Down Expand Up @@ -300,33 +300,44 @@ app.Run();
{% endhighlight %}
{% endtabs %}

### Add Syncfusion® theme and script references
## Add theme and script references

Add the Syncfusion Blazor theme CSS and script references to your application's `App.razor` file (or `_Host.cshtml` depending on your project template).
Add the Blazor theme CSS and script references to your application's `App.razor` file (or `_Host.cshtml` depending on your project template).

{% tabs %}
{% highlight html tabtitle="App.razor" %}

<head>
...
<!-- Syncfusion® theme stylesheet -->
<!-- Blazor theme stylesheet -->
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
...
</head>
<body>
...
<!-- Syncfusion® Blazor core script (required for UI components, including DataGrid) -->
<!-- Blazor core script (required for UI components, including DataGrid) -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
...
</body>

{% endhighlight %}
{% endtabs %}

### Syncfusion® Blazor DataGrid on an authenticated page
## Blazor DataGrid on an authenticated page

This page demonstrates how to protect a [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component using ASP.NET Core authorization. When unauthenticated, a `Sign in` link is displayed. Once authenticated, the grid renders with sample data.

N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.

{% tabs %}
{% highlight razor %}

@* desired render mode define here *@
@rendermode InteractiveServer

{% endhighlight %}
{% endtabs %}

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}

Expand Down Expand Up @@ -388,7 +399,7 @@ This page demonstrates how to protect a [DataGrid](https://www.syncfusion.com/bl

N> In this example, sample data is defined inline for demonstration purposes. In production applications, load data from a secure API endpoint that validates the user's JWT token or authentication cookie.

### Run the application
## Run the application

Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application.

Expand All @@ -409,14 +420,15 @@ N> By default, the app runs on `https://localhost:7000` (or similar port defined
* Unauthenticated users see the **sign in** prompt.
* Clicking **Sign in with AWS Cognito** redirects to the Cognito hosted UI.
* After entering credentials, the user is redirected back to the app.
* The Syncfusion DataGrid appears with sample data.
* The Blazor DataGrid appears with sample data.
* Clicking **Sign out** clears the session and returns to the **sign in** page.

**Output:**

![Syncfusion Blazor DataGrid displaying order data after AWS Cognito authentication](./images/aws-cognito.webp)
![Blazor DataGrid displaying order data after AWS Cognito authentication](./images/aws-cognito.webp)

## See also

* [AWS Cognito user pools](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html)
* [ASP.NET Core authentication overview](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/)
* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app)
* [Getting started with AWS Cognito user pools](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html)
* [Overview of ASP.NET Core authentication](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/)
30 changes: 15 additions & 15 deletions blazor/common/deployment/blazor-deploying-github-pages.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
layout: post
title: Deploying Blazor WASM with Syncfusion Components to GitHub Pages
description: Guide to deploying Syncfusion Blazor Components to GitHub Pages with complete configuration and examples.
title: Deploy Blazor WASM with Components on GitHub Pages | Syncfusion
description: A comprehensive guide to deploying Blazor components to GitHub Pages with full configuration steps and practical examples.
platform: Blazor
control: Common
documentation: ug
---

# Deploying Syncfusion® Blazor Components to GitHub Pages
# Deploying Blazor Components to GitHub Pages

This guide demonstrates how to deploy [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) to [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) in a Blazor WebAssembly application. It includes steps for publishing the application, configuring client-side routing, and hosting the application.
This guide demonstrates how to deploy [Blazor components](https://www.syncfusion.com/blazor-components) to [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) in a Blazor WebAssembly application. It includes steps for publishing the application, configuring client-side routing, and hosting the application.

## Prerequisites

* [.NET SDK 10.0](https://dotnet.microsoft.com/en-us/download/visual-studio-sdks)
* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension
* [GitHub account](https://github.com/)

If you haven't created your Blazor app yet, follow the [Syncfusion® Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) to create a Blazor WebAssembly project.
If you haven't created your Blazor app yet, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) to create a Blazor WebAssembly project.

## Create GitHub repository

Expand All @@ -31,7 +31,7 @@ Follow the below steps to create GitHub repository for deploying Blazor applicat
* Select **Public** visibility.
* Click **Create Repository** button to create the repository.

## Configure Syncfusion® Blazor DataGrid component
## Configure Blazor DataGrid component

### Install required packages

Expand Down Expand Up @@ -65,9 +65,9 @@ Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor`, `Syncfusion
{% endhighlight %}
{% endtabs %}

### Register Syncfusion® Blazor service
### Register Blazor service

Add the Syncfusion Blazor service to the `~/Program.cs` file to enable Syncfusion components in the application.
Add the Blazor service to the `~/Program.cs` file to enable Blazor components in the application.

{% tabs %}
{% highlight cs tabtitle="~/Program.cs" %}
Expand All @@ -83,17 +83,17 @@ builder.Services.AddSyncfusionBlazor();

### Add stylesheet and script resources

Add the Syncfusion theme CSS and required scripts to the `~/wwwroot/index.html` file.
Add the Blazor theme CSS and required scripts to the `~/wwwroot/index.html` file.

{% tabs %}
{% highlight html tabtitle="index.html" %}

<head>
<!-- Syncfusion theme stylesheet -->
<!-- Blazor theme stylesheet -->
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>
<body>
<!-- Syncfusion Blazor core script (required for UI components, including DataGrid) -->
<!-- Blazor core script (required for UI components, including DataGrid) -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
<!-- Blazor WebAssembly script reference -->
<script src="_framework/blazor.webassembly.js"></script>
Expand All @@ -104,7 +104,7 @@ Add the Syncfusion theme CSS and required scripts to the `~/wwwroot/index.html`

### DataGrid component example

This sample demonstrates how to use the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component to display a list of orders. It also helps confirm that the DataGrid is correctly integrated and functioning as expected for deployment scenarios.
This sample demonstrates how to use the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component to display a list of orders. It also helps confirm that the DataGrid is correctly integrated and functioning as expected for deployment scenarios.

{% tabs %}
{% highlight razor tabtitle="Home.razor" %}
Expand Down Expand Up @@ -225,7 +225,7 @@ dotnet run

**Expected behavior:**
- The application loads without errors.
- Syncfusion components render with correct styles and fonts.
- Blazor components render with correct styles and fonts.
- Navigation between pages works as expected.
- No JavaScript console errors appear.

Expand Down Expand Up @@ -298,7 +298,7 @@ Your application will be live at a GitHub Pages within minutes.

## See Also

* [Getting started with Syncfusion WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
* [Getting started with Syncfusion DataGrid component](https://blazor.syncfusion.com/documentation/datagrid/getting-started)
* [Getting started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
* [Getting started with Blazor DataGrid component](https://blazor.syncfusion.com/documentation/datagrid/getting-started)
* [Blazor WebAssembly Hosting and Deployment](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly/github-pages?view=aspnetcore-10.0)
* [GitHub Pages Configuration](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages)
Loading