DOCSEARCHbyAlgolia
Submit Docs

dotnet/blazor-samples

repository·main·Indexed 22 days ago

https://github.com/dotnet/blazor-samples

Sample applications and code snippets accompanying official Microsoft Blazor documentation. Includes practical references for Blazor, .NET MAUI Blazor Hybrid, and web technologies, featuring implementations for ASP.NET Core SignalR, Static SSR in ASP.NET Core 8.0 and 9.0, Auto render mode API calls, and secure architectures using Microsoft Entra ID, OIDC, YARP, and .NET Aspire.

Tokens
18.1K
Snippets
51
Records
105
Agent score
75%

What's inside dotnet-blazor-samples

  1. Overview of Blazor Web App with OIDC, YARP, and Aspire

    main

    This sample demonstrates a secure Blazor Web App architecture using the Backend-for-Frontend (BFF) pattern. Key features include:

    • Global Auto Interactivity: Uses PersistingAuthenticationStateProvider (server-side) and PersistentAuthenticationStateProvider (client-side) to synchronize authentication state between server and client.
    • OIDC Authentication: Implements OpenID Connect (OIDC) with Microsoft Entra using standard OIDC protocols rather than Entra-specific packages.
    • Minimal API Backend: A backend that uses JwtBearerHandler to validate JWT tokens stored within the Blazor app's sign-in cookie.
    • BFF Pattern with YARP & Aspire: Uses Aspire for service discovery and YARP (Yet Another Reverse Proxy) to proxy requests (e.g., to /weatherforecast) to the backend, automatically attaching the access_token from the cookie.
    • Token Refresh: Implements automatic non-interactive token refresh via a custom CookieOidcRefresher.

  2. Overview of Blazor Web App with OIDC (without YARP and Aspire)

    main

    This sample demonstrates a Blazor Web App using global Auto interactivity mode with OpenID Connect (OIDC) authentication. It is designed to be a starting point for any OIDC authentication flow (such as Microsoft Entra) without relying on provider-specific packages.

    Key features include:

    • Authentication State Synchronization: Uses PersistingAuthenticationStateProvider (server-side) and PersistentAuthenticationStateProvider (client-side) to capture and flow authentication state between server and client.
    • Token Management: Implements automatic non-interactive token refresh via a custom CookieOidcRefresher.
    • Secure API Communication: Demonstrates making secure web API calls to a separate project. The access token is retrieved from the server-side HttpContext and attached to outgoing requests using a custom DelegatingHandler.

  3. Overview of Blazor Web App with OIDC, YARP, and Aspire Sample

    main

    This sample demonstrates a secure Blazor Web App architecture using the Backend-for-Frontend (BFF) pattern. Key features include:

    • Global Auto Interactivity: Uses PersistingAuthenticationStateProvider (server) and PersistentAuthenticationStateProvider (client) to synchronize authentication state between server and client.
    • OIDC Authentication: Implements OpenID Connect (OIDC) with Microsoft Entra using standard OIDC protocols rather than Entra-specific packages.
    • Minimal API Backend: A backend that uses JwtBearerHandler to validate JWT tokens stored within the Blazor app's sign-in cookie.
    • BFF Pattern with YARP & Aspire: Uses Aspire service discovery and YARP (Yet Another Reverse Proxy) to proxy requests (e.g., to /weatherforecast) to the backend, automatically including the access_token from the cookie.
    • Token Refresh: Implements a custom CookieOidcRefresher to handle automatic, non-interactive token refreshes.

  4. Overview of Blazor Web App with Entra (without YARP and Aspire)

    main

    This sample demonstrates a Blazor Web App utilizing global Auto interactivity mode, secured with Microsoft Entra ID. It implements the Backend-for-Frontend (BFF) pattern to manage authentication and API communication securely.

    Key architectural components include:

    • Authentication State Flow: Uses PersistingAuthenticationStateProvider (server-side) and PersistentAuthenticationStateProvider (client-side) to capture and synchronize authentication state between the server and the client.
    • Microsoft Entra Integration: Leverages Microsoft.Identity.Web packages for authentication.
    • Minimal API Backend: A backend service that uses JwtBearerHandler to validate JWT tokens. It utilizes an in-memory token store for access tokens.
    • BFF Pattern: Implements the BFF pattern using MapGet and HttpClient. The web app forwards requests (e.g., to /weatherforecast) to the backend by attaching an access token generated on behalf of the user's claims.

  5. Overview of Blazor Web App with OpenID Connect (OIDC)

    main

    This sample demonstrates a Blazor Web App using global Server interactivity secured with OpenID Connect (OIDC) authentication. It is designed to work with Microsoft Entra (or any OIDC provider) without requiring provider-specific packages.

    Key architectural features include:

    • OIDC Authentication: A generic implementation suitable for any OIDC flow.
    • Automatic Token Refresh: Uses a custom CookieOidcRefresher to perform non-interactive token refreshes.
    • Secure Web API Integration: Demonstrates how to call a separate Web API project securely. The access token is retrieved from the server-side HttpContext and attached to outgoing requests using a custom DelegatingHandler service.

  6. Overview of Blazor Web App with Entra, YARP, and Aspire

    main

    This sample demonstrates a secure Blazor Web App architecture using the following components:

    • Blazor Web App: Uses global Auto interactivity. It implements PersistingAuthenticationStateProvider and PersistentAuthenticationStateProvider services to capture and flow authentication state between the server and client.
    • Microsoft Entra Authentication: Uses Microsoft Identity Web packages for authentication.
    • Minimal API Backend: A backend that uses JwtBearerHandler to validate JWT tokens. Access tokens are managed via an in-memory token store.
    • BFF (Backend for Frontend) Pattern: Utilizes Aspire service discovery and YARP to proxy requests (e.g., to /weatherforecast) to the backend. The proxy uses an access token generated on behalf of the user's claims.

  7. Overview of Blazor Web App with Entra (BFF pattern)

    main

    This sample demonstrates a secure Blazor Web App architecture using the Backend for Frontend (BFF) pattern. Key features include:

    • Global Auto Interactivity: Uses PersistingAuthenticationStateProvider (server-side) and PersistentAuthenticationStateProvider (client-side) to capture and flow authentication state between server and client.
    • Microsoft Entra Authentication: Implemented using Microsoft.Identity.Web packages.
    • Minimal API Backend: A backend service that uses JwtBearerHandler to validate JWT tokens. Tokens are managed via an in-memory token store.
    • BFF Pattern with YARP and Aspire: Uses .NET Aspire for service discovery and YARP (Yet Another Reverse Proxy) to proxy requests (e.g., to /weatherforecast) to the backend. The proxy uses an access token generated on behalf of the user to maintain claims during the request.

  8. Overview of Blazor Web App with OIDC (BFF Pattern) Sample

    main

    This sample demonstrates how to secure a Blazor Web App using the Backend-for-Frontend (BFF) pattern with OpenID Connect (OIDC). It is designed to be a starting point for any OIDC authentication flow, specifically using Microsoft Entra without Entra-specific packages.

    Key architectural features include:

    • Global Auto Interactivity: Uses PersistingAuthenticationStateProvider and PersistentAuthenticationStateProvider to synchronize authentication state between server and client Blazor apps.
    • OIDC Authentication: Implements standard OIDC flows.
    • Minimal API Backend: Uses JwtBearerHandler to validate JWT tokens stored in the sign-in cookie.
    • BFF Pattern: Utilizes Aspire service discovery and YARP (Yet Another Reverse Proxy) to proxy requests (e.g., to /weatherforecast) to the backend, attaching the access_token from the cookie.
    • Token Refresh: Implements automatic non-interactive token refresh via a custom CookieOidcRefresher.

  9. Project structure of the .NET/React integration sample

    main

    The sample is organized into three main parts:

    • app: The target React application which uses rollup for the JavaScript build process.
    • qrlibrary: A reusable npm library for QR generation, split into:
      • dotnet: The core .NET implementation of the QR generator.
      • react: A React component for displaying QR code images, bundled using Rollup.

  10. Blazor Web App with Entra (without YARP and Aspire)

    main
    This sample application demonstrates how to secure an ASP.NET Core Blazor Web App using Microsoft Entra ID. It is designed to work without the use of YARP (Yet Another Reverse Proxy) or .NET Aspire. This implementation follows the patterns described in the official Microsoft documentation for securing Blazor Web Apps with Entra ID.

  11. Key features of the Blazor Web App with OIDC sample

    main

    This sample demonstrates a complete security pattern for Blazor Web Apps using OpenID Connect:

    • Global Auto Interactivity: Uses the Blazor Web App model with both Server and WebAssembly interactivity.
    • Authentication State Persistence: Uses PersistingAuthenticationStateProvider (server-side) and PersistentAuthenticationStateProvider (client-side) to synchronize authentication state between the server and the client.
    • Generic OIDC Authentication: Implements OIDC with Microsoft Entra without relying on Entra-specific libraries, making it a template for any OIDC flow.
    • Automatic Token Refresh: Implements a custom CookieOidcRefresher to handle non-interactive token refreshes.
    • Secure API Communication: Demonstrates how to call a separate Web API securely. It retrieves the access token from the server-side HttpContext and attaches it to outgoing requests using a custom DelegatingHandler.

  12. Core features of the MauiBlazorWeb sample

    main

    The MauiBlazorWeb sample implements a pattern for sharing authentication between a Blazor Web App and a .NET MAUI Blazor Hybrid client. Key capabilities include:

    • Conditional UI: Showing or hiding pages based on the user's authentication state.
    • Identity Endpoints: Setting up ASP.NET Identity endpoints to serve remote clients (like the MAUI app).
    • Token Management: Logging users in/out and refreshing tokens directly from the MAUI client.
    • Secure Storage: Saving and retrieving authentication tokens using secure device storage.
    • Secure API Consumption: Calling protected endpoints (e.g., /api/weather) from the MAUI client using the managed tokens.