Server-side Application

This page contains the required client-side configuration for the RecroGrid Framework Server-side Application model.

The application uses an ASP.NET Core Blazor host together with an interactive .Client project. The host owns OpenID Connect authentication, the authenticated session, SessionAuth endpoints, and API proxying. The interactive Client runs with WebAssembly interactivity and communicates through the host origin. This architecture keeps the client and server-side integration aligned while preserving the full Blazor component model and RecroGrid Framework runtime automation.

Project structure

A typical solution contains these client-facing projects:

• Host project - ASP.NET Core Blazor application that owns authentication, SessionAuth endpoints, proxy endpoints, server-side rendering, static assets, and application startup.
• Client project - Interactive Blazor WebAssembly project referenced by the host and used for client-rendered routes and RecroGrid Framework UI components.

The backend RecroGrid Framework API, identity provider, and database initialization are configured separately.

Required packages

Host project

Add:

dotnet add package Recrovit.RecroGridFramework.Client.Blazor.Host.OpenIdConnect

The host package integrates the required RecroGrid Framework Blazor host, SessionAuth SSR, OpenID Connect, Razor Components, interactive render modes, proxy, and static asset infrastructure.

The host project also references the Client project.

Client project

Add:

dotnet add package Recrovit.RecroGridFramework.Client.Blazor.SessionAuth
dotnet add package Recrovit.RecroGridFramework.Client.Blazor.UI

The Client project uses the Microsoft.NET.Sdk.BlazorWebAssembly SDK.

Configure the host Program.cs

Register Recrovit component routing, the RecroGrid Framework Razor Components integration, and the OpenID Connect host integration.

using Recrovit.AspNetCore.Components.Routing.Configuration;
using Recrovit.AspNetCore.Components.Routing.Models;
using Recrovit.RecroGridFramework.Client.Blazor;
using Recrovit.RecroGridFramework.Client.Blazor.Host.OpenIdConnect.Configuration;
using Recrovit.RecroGridFramework.Client.Blazor.UI;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRecrovitComponentRouting(options =>
{
    options.AddRouteAssembly(typeof(App).Assembly);
    options.AddRouteAssembly(typeof(BlazorApp.Client._Imports).Assembly);
    options.DefaultLayout = typeof(MainLayout);
    options.SetNotFoundPage(
        RecrovitRoutesKind.Host,
        typeof(BlazorApp.Client.Pages.NotFound));
});

builder.AddRgfBlazorServerProxyOpenIdConnectRazorComponents();
builder.AddRgfBlazorServerProxyOpenIdConnectHost();

var app = builder.Build();

app.UseHttpsRedirection();

app.MapRgfBlazorServerProxyOpenIdConnectEndpoints("/not-found");

await app.Services.InitializeRgfBlazorServerAsync();
await app.Services.InitializeRgfUIAsync(loadResources: false);

app.MapRgfBlazorServerProxyOpenIdConnectComponents<App>(
    typeof(BlazorApp.Client._Imports).Assembly);

await app.RunAsync();

Replace BlazorApp with the host project namespace and BlazorApp.Client with the Client project namespace.

The integration methods register and map the Razor Components, interactive server/WebAssembly render modes, SessionAuth SSR services, OpenID Connect host infrastructure, RecroGrid Framework proxy endpoints, static assets, and authentication state serialization required by this application model.

Configure the host App.razor

The root component resolves the route mode and selects the matching top-level render mode.

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web
@using Recrovit.AspNetCore.Components.Routing
@using Recrovit.AspNetCore.Components.Routing.Models
@using Recrovit.AspNetCore.Components.Routing.Resolution

<head>
    <HeadOutlet @rendermode="CurrentRenderMode" />
</head>

<body>
    @if (CurrentPageDefinition.RouteMode is RecrovitRouteMode.StaticServer or RecrovitRouteMode.InteractiveServer)
    {
        <RecrovitRoutes @rendermode="CurrentRenderMode"
                       Kind="RecrovitRoutesKind.Host" />

        @if (CurrentPageDefinition.RouteMode == RecrovitRouteMode.InteractiveServer)
        {
            <ReconnectModal />
        }
    }
    else
    {
        <BlazorApp.Client.Routes @rendermode="CurrentRenderMode" />
    }

    <script src="@Assets["_framework/blazor.web.js"]"></script>
</body>

@inject RecrovitRouteModeResolver RecrovitRouteModeResolver

@code {
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }

    private RecrovitPageRouteDefinition CurrentPageDefinition
        => RecrovitRouteModeResolver.Resolve(HttpContext?.Request.Path.Value);

    private IComponentRenderMode? CurrentRenderMode
        => RecrovitRouteModeMapper.GetDefaultTopLevelRenderMode(CurrentPageDefinition.RouteMode);
}

Replace BlazorApp.Client with the Client project namespace.

Configure the Client Program.cs

Register SessionAuth-aware RecroGrid Framework services and use the host base address as the API base-address override.

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Recrovit.AspNetCore.Components.Routing.Configuration;
using Recrovit.RecroGridFramework.Client.Blazor;
using Recrovit.RecroGridFramework.Client.Blazor.SessionAuth;
using Recrovit.RecroGridFramework.Client.Blazor.UI;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddRgfBlazorSessionAuthClientServices(
    builder.Configuration,
    apiBaseAddressOverride: builder.HostEnvironment.BaseAddress);

builder.Services.AddRecrovitComponentRouting(options =>
{
    options.AddRouteAssembly(typeof(Program).Assembly);
});

var host = builder.Build();

await host.Services.InitializeRgfBlazorAsync();
await host.Services.InitializeRgfUIAsync();

await host.RunAsync();

builder.HostEnvironment.BaseAddress makes the host origin the effective RecroGrid Framework API address for the interactive Client. Requests then flow through the host-side proxy infrastructure.

Configure the Client Routes.razor

Use RecrovitRoutes for the interactive Client route shell.

@using Recrovit.AspNetCore.Components.Routing
@using Recrovit.AspNetCore.Components.Routing.Models

<RecrovitRoutes Kind="RecrovitRoutesKind.Client"
                AppAssembly="typeof(_Imports).Assembly"
                DefaultLayout="typeof(MainLayout)"
                NotFoundPage="typeof(Pages.NotFound)" />

The Client uses the built-in SessionAuth endpoint configuration together with the host base address supplied in Program.cs.

Configure the host appsettings.json

For local development, use the same address layout as the RecroGrid Framework demo application:

• Identity provider: https://localhost:11900
• Backend API: https://localhost:11913
• Blazor host: https://localhost:44316

For a new local solution, use the Duende IdentityServer development project provided in RGF.Demo.IDP. Its predefined client, redirect URI, API resource, and scope match the local configuration shown below.

The host requires an active OpenID Connect provider, the RgfApi downstream API registration, and its own origin for the RecroGrid Framework server-proxy runtime.

{
  "Recrovit": {
    "OpenIdConnect": {
      "Provider": "Duende",
      "Providers": {
        "Duende": {
          "Authority": "https://localhost:11900", // Production example: https://identity.example.com
          "ClientId": "RGF.DemoApp",
          "ClientSecret": "rgf-demoapp-duende-secret",
          "Scopes": [
            "openid",
            "profile",
            "offline_access"
          ]
        }
      },
      "DownstreamApis": {
        "RgfApi": {
          "BaseUrl": "https://localhost:11913/", // Production example: https://api.example.com/
          "Scopes": [
            "api://RgfDemo.Api/API.Access"
          ]
        }
      }
    },
    "RecroGridFramework": {
      "API": {
        "ProxyBaseAddress": "https://localhost:44316" // Production example: https://app.example.com
      }
    }
  }
}

These local values match the RGF.DemoApp client and api://RgfDemo.Api API resource configured by RGF.Demo.IDP. For another OpenID Connect provider, replace the provider-specific client, authority, credential, and scope values with those registered by that provider.

Recrovit:OpenIdConnect:Provider

Selects the provider entry used by the host.

Recrovit:OpenIdConnect:Providers:<name>:Authority

Specifies the identity provider authority URL.

Recrovit:OpenIdConnect:Providers:<name>:ClientId

Specifies the OpenID Connect client identifier.

Recrovit:OpenIdConnect:Providers:<name>:ClientSecret

Supplies the client credential used by the default client authentication mode.

Recrovit:OpenIdConnect:Providers:<name>:Scopes

Supplies the OpenID Connect scopes required by the host authentication flow. The downstream RgfApi scopes are added to the effective login scopes automatically.

Recrovit:OpenIdConnect:DownstreamApis:RgfApi

RgfApi is the downstream API name used by the RecroGrid Framework proxy endpoints. Configure its BaseUrl and the scopes required by the backend RecroGrid Framework API.

Recrovit:RecroGridFramework:API:ProxyBaseAddress

ProxyBaseAddress is required by the host-side SessionAuth SSR configuration. For local development, set it to the Blazor host origin:

"ProxyBaseAddress": "https://localhost:44316" // Production example: https://app.example.com

This value lets server-rendered RecroGrid Framework code call the same host-side proxy endpoints that the browser uses.

Runtime initialization order

The host startup sequence is:

1. Register component routing.
2. Register RecroGrid Framework Razor Components and host OpenID Connect services.
3. Build the application.
4. Map RecroGrid Framework OpenID Connect and proxy endpoints.
5. Initialize the server-side RecroGrid Framework runtime.
6. Initialize the RecroGrid Framework UI with loadResources: false.
7. Map the shared root component and Client assembly.
8. Run the application.

The Client startup sequence is:

1. Register SessionAuth Client services with the host base address.
2. Register Client component routing.
3. Build the WebAssembly host.
4. Initialize the RecroGrid Framework Blazor runtime.
5. Initialize the RecroGrid Framework UI resources.
6. Run the Client.

Configuration checklist

A Server-side Application client configuration is complete when:

• The host references the Client project.
• The host registers both AddRgfBlazorServerProxyOpenIdConnectRazorComponents() and AddRgfBlazorServerProxyOpenIdConnectHost().
• The host maps MapRgfBlazorServerProxyOpenIdConnectEndpoints(...) and MapRgfBlazorServerProxyOpenIdConnectComponents<App>(...).
• The host initializes RecroGrid Framework before RunAsync().
• The Client registers AddRgfBlazorSessionAuthClientServices(...) with builder.HostEnvironment.BaseAddress.
• The Client initializes RecroGrid Framework and the UI runtime.
• App.razor resolves the current route mode and render mode.
• Routes.razor uses RecrovitRoutesKind.Client.
• The host selects an OpenID Connect provider and supplies its required provider values.
• The host defines Recrovit:OpenIdConnect:DownstreamApis:RgfApi.
• The host defines Recrovit:RecroGridFramework:API:ProxyBaseAddress.

Related documentation

• Server-side Application Get Started
• SessionAuth
• Proxy-based API Access