Migrate to cascading auth state services

aspnetcore/blazor/security/includes/app-component.md

@@ -1,12 +1,23 @@
 The `App` component (`App.razor`) is similar to the `App` component found in Blazor Server apps:
 
+:::moniker range=">= aspnetcore-8.0"
+
+* The <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> component makes sure that the current user is authorized to access a given page or otherwise renders the `RedirectToLogin` component.
+* The `RedirectToLogin` component manages redirecting unauthorized users to the login page.
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-8.0"
+
 * The <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> component manages exposing the <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationState> to the rest of the app.
 * The <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> component makes sure that the current user is authorized to access a given page or otherwise renders the `RedirectToLogin` component.
 * The `RedirectToLogin` component manages redirecting unauthorized users to the login page.
 
+:::moniker-end
+
 Due to changes in the framework across releases of ASP.NET Core, Razor markup for the `App` component (`App.razor`) isn't shown in this section. To inspect the markup of the component for a given release, use ***either*** of the following approaches:
 
 * Create an app provisioned for authentication from the default Blazor WebAssembly project template for the version of ASP.NET Core that you intend to use. Inspect the `App` component (`App.razor`) in the generated app.
-* Inspect the `App` component (`App.razor`) in [reference source](https://github.com/dotnet/aspnetcore/blob/release/7.0/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/App.razor).
+* Inspect the `App` component (`App.razor`) in [reference source](https://github.com/dotnet/aspnetcore). Select the version from the branch selector, and search for the component in the `ProjectTemplates` folder of the repository because it has moved over the years.
 
   [!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)]

aspnetcore/blazor/security/index.md

@@ -96,8 +96,18 @@ For more information, see <xref:blazor/security/webassembly/index>.
 
 ## `AuthenticationStateProvider` service
 
+:::moniker range=">= aspnetcore-8.0"
+
+<xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider> is the underlying service used by the <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeView> component and cascading authentication services to obtain the authentication state for a user.
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-8.0"
+
 <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider> is the underlying service used by the <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeView> component and <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> component to obtain the authentication state for a user.
 
+:::moniker-end
+
 You don't typically use <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider> directly. Use the [`AuthorizeView` component](#authorizeview-component) or [`Task<AuthenticationState>`](#expose-the-authentication-state-as-a-cascading-parameter) approaches described later in this article. The main drawback to using <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider> directly is that the component isn't notified automatically if the underlying authentication state data changes.
 
 > [!NOTE]
@@ -291,6 +301,32 @@ If authentication state data is required for procedural logic, such as when perf
 
 If `user.Identity.IsAuthenticated` is `true`, claims can be enumerated and membership in roles evaluated.
 
+:::moniker range=">= aspnetcore-8.0"
+
+Set up the `Task<`<xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationState>`>` [cascading parameter](xref:blazor/components/cascading-values-and-parameters) using the <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> and cascading authentication state services.
+
+When you create a Blazor app from one of the Blazor project templates with authentication enabled, the app includes the <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> and the call to <xref:Microsoft.Extensions.DependencyInjection.CascadingAuthenticationStateServiceCollectionExtensions.AddCascadingAuthenticationState%2A> shown in the following example. A client-side Blazor app includes the required service registrations as well. Additional information is presented in the [Customize unauthorized content with the Router component](#customize-unauthorized-content-with-the-router-component) section.
+
+```razor
+<Router ...>
+    <Found ...>
+        <AuthorizeRouteView RouteData="@routeData" 
+            DefaultLayout="@typeof(Layout.MainLayout)" />
+        ...
+    </Found>
+</Router>
+```
+
+In the `Program` file, register cascading authentication state services:
+
+```csharp
+builder.Services.AddCascadingAuthenticationState();
+```
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-8.0"
+
 Set up the `Task<`<xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationState>`>` [cascading parameter](xref:blazor/components/cascading-values-and-parameters) using the <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> and <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> components.
 
 When you create a Blazor app from one of the Blazor project templates with authentication enabled, the app includes the <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> and <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> components shown in the following example. A client-side Blazor app includes the required service registrations as well. Additional information is presented in the [Customize unauthorized content with the Router component](#customize-unauthorized-content-with-the-router-component) section.
@@ -307,6 +343,8 @@ When you create a Blazor app from one of the Blazor project templates with authe
 </CascadingAuthenticationState>
 ```
 
+:::moniker-end
+
 :::moniker range="= aspnetcore-5.0"
 
 [!INCLUDE[](~/blazor/includes/prefer-exact-matches.md)]
@@ -615,6 +653,36 @@ The <xref:Microsoft.AspNetCore.Components.Routing.Router> component, in conjunct
 * The user fails an [`[Authorize]`](xref:Microsoft.AspNetCore.Authorization.AuthorizeAttribute) condition applied to the component. The markup of the [`<NotAuthorized>`](xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView.NotAuthorized?displayProperty=nameWithType) element is displayed. The [`[Authorize]`](xref:Microsoft.AspNetCore.Authorization.AuthorizeAttribute) attribute is covered in the [`[Authorize]` attribute](#authorize-attribute) section.
 * Asynchronous authorization is in progress, which usually means that the process of authenticating the user is in progress. The markup of the [`<Authorizing>`](xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView.Authorizing?displayProperty=nameWithType) element is displayed.
 
+:::moniker range=">= aspnetcore-8.0"
+
+```razor
+<Router ...>
+    <Found ...>
+        <AuthorizeRouteView ...>
+            <NotAuthorized>
+                ...
+            </NotAuthorized>
+            <Authorizing>
+                ...
+            </Authorizing>
+        </AuthorizeRouteView>
+    </Found>
+</Router>
+```
+
+The content of `<NotAuthorized>` and `<Authorizing>` tags can include arbitrary items, such as other interactive components.
+
+> [!NOTE]
+> The preceding requires cascading authentication state services registration in the app's `Program` file:
+>
+> ```csharp
+> builder.Services.AddCascadingAuthenticationState();
+> ```
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-8.0"
+
 ```razor
 <CascadingAuthenticationState>
     <Router ...>
@@ -632,14 +700,6 @@ The <xref:Microsoft.AspNetCore.Components.Routing.Router> component, in conjunct
 </CascadingAuthenticationState>
 ```
 
-:::moniker range=">= aspnetcore-8.0"
-
-The content of `<NotAuthorized>` and `<Authorizing>` tags can include arbitrary items, such as other interactive components.
-
-:::moniker-end
-
-:::moniker range="< aspnetcore-8.0"
-
 The content of `<NotFound>`, `<NotAuthorized>`, and `<Authorizing>` tags can include arbitrary items, such as other interactive components.
 
 :::moniker-end
@@ -772,7 +832,9 @@ Common errors:
 
 * **`null` value is received for `authenticationStateTask`**
 
-It's likely that the project wasn't created using a server-side Blazor template with authentication enabled. Wrap a `<CascadingAuthenticationState>` around some part of the UI tree, for example around the Blazor router:
+It's likely that the project wasn't created using a server-side Blazor template with authentication enabled.
+
+In .NET 7 or earlier, wrap a `<CascadingAuthenticationState>` around some part of the UI tree, for example around the Blazor router:
 
 ```razor
 <CascadingAuthenticationState>
@@ -782,7 +844,23 @@ It's likely that the project wasn't created using a server-side Blazor template
 </CascadingAuthenticationState>
 ```
 
-The <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> supplies the `Task<`<xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationState>`>` cascading parameter, which in turn it receives from the underlying <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider> dependency injection service.
+In .NET 8 or later, don't use the <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> component:
+
+```diff
+- <CascadingAuthenticationState>
+      <Router ...>
+          ...
+      </Router>
+- </CascadingAuthenticationState>
+```
+
+Instead, add cascading authentication state services to the service collection in the `Program` file:
+
+```csharp
+builder.Services.AddCascadingAuthenticationState();
+```
+
+The <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> component (.NET 7 or earlier) or services provided by <xref:Microsoft.Extensions.DependencyInjection.CascadingAuthenticationStateServiceCollectionExtensions.AddCascadingAuthenticationState%2A> (.NET 8 or later) supplies the `Task<`<xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationState>`>` cascading parameter, which in turn it receives from the underlying <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider> dependency injection service.
 
 ## Additional resources
 

aspnetcore/blazor/security/server/index.md

@@ -229,7 +229,22 @@ public class CustomAuthenticationStateProvider : AuthenticationStateProvider
 }
 ```
 
-:::moniker range=">= aspnetcore-6.0"
+:::moniker range=">= aspnetcore-8.0"
+
+The `CustomAuthenticationStateProvider` service is registered in the `Program` file:
+
+```csharp
+using Microsoft.AspNetCore.Components.Authorization;
+
+...
+
+builder.Services.AddScoped<AuthenticationStateProvider, 
+    CustomAuthenticationStateProvider>();
+```
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0"
 
 The `CustomAuthenticationStateProvider` service is registered in the `Program` file ***after*** the call to <xref:Microsoft.Extensions.DependencyInjection.ComponentServiceCollectionExtensions.AddServerSideBlazor%2A>:
 
@@ -267,6 +282,35 @@ services.AddScoped<AuthenticationStateProvider,
 
 :::moniker-end
 
+:::moniker range=">= aspnetcore-8.0"
+
+Confirm or add an <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> for the Blazor router.
+
+In the `Routes` component (`Components/Routes.razor`):
+
+```razor
+<Router ...>
+    <Found ...>
+        <AuthorizeRouteView RouteData="@routeData" 
+            DefaultLayout="@typeof(Layout.MainLayout)" />
+        ...
+    </Found>
+</Router>
+```
+
+Add cascading authentication state services to the service collection in the `Program` file:
+
+```csharp
+builder.Services.AddCascadingAuthenticationState();
+```
+
+> [!NOTE]
+> When you create a Blazor app from one of the Blazor project templates with authentication enabled, the app includes the <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> and call to <xref:Microsoft.Extensions.DependencyInjection.CascadingAuthenticationStateServiceCollectionExtensions.AddCascadingAuthenticationState%2A>. For more information, see <xref:blazor/security/index#expose-the-authentication-state-as-a-cascading-parameter> with additional information presented in the article's [Customize unauthorized content with the Router component](xref:blazor/security/index#customize-unauthorized-content-with-the-router-component) section.
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-8.0"
+
 Confirm or add an <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> and <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> for the Blazor router:
 
 ```razor
@@ -284,6 +328,8 @@ Confirm or add an <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeR
 > [!NOTE]
 > When you create a Blazor app from one of the Blazor project templates with authentication enabled, the app includes the <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> and <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> components shown in the preceding example. For more information, see <xref:blazor/security/index#expose-the-authentication-state-as-a-cascading-parameter> with additional information presented in the article's [Customize unauthorized content with the Router component](xref:blazor/security/index#customize-unauthorized-content-with-the-router-component) section.
 
+:::moniker-end
+
 An <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeView> demonstrates the authenticated user's name in any component:
 
 ```razor

aspnetcore/blazor/security/webassembly/hosted-with-azure-active-directory-b2c.md

@@ -385,7 +385,18 @@ For more information, see the following sections of the *Additional scenarios* a
 
 *This section pertains to the solution's **:::no-loc text="Client":::** app.*
 
-[!INCLUDE[](~/blazor/security/includes/app-component.md)]
+The `App` component (`App.razor`) is similar to the `App` component found in Blazor Server apps:
+
+* The <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> component manages exposing the <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationState> to the rest of the app.
+* The <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> component makes sure that the current user is authorized to access a given page or otherwise renders the `RedirectToLogin` component.
+* The `RedirectToLogin` component manages redirecting unauthorized users to the login page.
+
+Due to changes in the framework across releases of ASP.NET Core, Razor markup for the `App` component (`App.razor`) isn't shown in this section. To inspect the markup of the component for a given release, use ***either*** of the following approaches:
+
+* Create an app provisioned for authentication from the default Blazor WebAssembly project template for the version of ASP.NET Core that you intend to use. Inspect the `App` component (`App.razor`) in the generated app.
+* Inspect the `App` component (`App.razor`) in [reference source](https://github.com/dotnet/aspnetcore). Select the version from the branch selector, and search for the component in the `ProjectTemplates` folder of the repository because it has moved over the years.
+
+  [!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)]
 
 ### RedirectToLogin component
 

aspnetcore/blazor/security/webassembly/hosted-with-identity-server.md

@@ -300,7 +300,18 @@ By default, configuration for the app is loaded by convention from `_configurati
 
 *This section pertains to the solution's **:::no-loc text="Client":::** app.*
 
-[!INCLUDE[](~/blazor/security/includes/app-component.md)]
+The `App` component (`App.razor`) is similar to the `App` component found in Blazor Server apps:
+
+* The <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> component manages exposing the <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationState> to the rest of the app.
+* The <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> component makes sure that the current user is authorized to access a given page or otherwise renders the `RedirectToLogin` component.
+* The `RedirectToLogin` component manages redirecting unauthorized users to the login page.
+
+Due to changes in the framework across releases of ASP.NET Core, Razor markup for the `App` component (`App.razor`) isn't shown in this section. To inspect the markup of the component for a given release, use ***either*** of the following approaches:
+
+* Create an app provisioned for authentication from the default Blazor WebAssembly project template for the version of ASP.NET Core that you intend to use. Inspect the `App` component (`App.razor`) in the generated app.
+* Inspect the `App` component (`App.razor`) in [reference source](https://github.com/dotnet/aspnetcore). Select the version from the branch selector, and search for the component in the `ProjectTemplates` folder of the repository because it has moved over the years.
+
+  [!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)]
 
 ### `RedirectToLogin` component
 

aspnetcore/blazor/security/webassembly/hosted-with-microsoft-entra-id.md

@@ -395,7 +395,18 @@ For more information, see the following sections of the *Additional scenarios* a
 
 *This section pertains to the solution's **:::no-loc text="Client":::** app.*
 
-[!INCLUDE[](~/blazor/security/includes/app-component.md)]
+The `App` component (`App.razor`) is similar to the `App` component found in Blazor Server apps:
+
+* The <xref:Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState> component manages exposing the <xref:Microsoft.AspNetCore.Components.Authorization.AuthenticationState> to the rest of the app.
+* The <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeRouteView> component makes sure that the current user is authorized to access a given page or otherwise renders the `RedirectToLogin` component.
+* The `RedirectToLogin` component manages redirecting unauthorized users to the login page.
+
+Due to changes in the framework across releases of ASP.NET Core, Razor markup for the `App` component (`App.razor`) isn't shown in this section. To inspect the markup of the component for a given release, use ***either*** of the following approaches:
+
+* Create an app provisioned for authentication from the default Blazor WebAssembly project template for the version of ASP.NET Core that you intend to use. Inspect the `App` component (`App.razor`) in the generated app.
+* Inspect the `App` component (`App.razor`) in [reference source](https://github.com/dotnet/aspnetcore). Select the version from the branch selector, and search for the component in the `ProjectTemplates` folder of the repository because it has moved over the years.
+
+  [!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)]
 
 ### RedirectToLogin component