Aspnetcore.docs: Update Blazor prerender with auth for 5.0
... or merely find out why there's a regression here. It might not be a 5.0-related problem.
cc: @christianweyer ... I probably won't reach this until after 🦃 T-bird Day holiday 🦃 ..... I'll get to this as soon as I can.
Document Details
⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.
- ID: 53f3209c-2414-9b35-6245-383c9b7c6338
- Version Independent ID: cc8dfcd6-8d93-5aa3-c381-2b613e88cdbe
- Content: ASP.NET Core Blazor WebAssembly additional security scenarios
- Content Source: aspnetcore/blazor/security/webassembly/additional-scenarios.md
- Product: aspnet-core
- Technology: aspnetcore-blazor
- GitHub Login: @guardrex
- Microsoft Alias: riande
guardrex
All 15 comments
@ChristianWeyer ... Is the non-working behavior an error :boom: or no-op in nature?
... and are you merely claiming it doesn't work for 5.0 or both 5.0 and 3.x?
guardrex
on 20 Nov 2020
@guardrex I tested it with 5.0 only.
See the demo video here:
When not doing prerendering, everything works fine and as expected.
I followed the docs here:
https://docs.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-5.0#support-prerendering-with-authentication
The demo code is here:
https://github.com/thinktecture/blazor-webassembly-demo/tree/prerender
ChristianWeyer
on 20 Nov 2020
Thanks for that @ChristianWeyer ... Given that you're getting an error, there wouldn't be anything wrong with you opening a companion product unit issue and showing that ... and put the error message out in the issue comment, which is probably faster for them to consume than watching the GIF.
https://github.com/dotnet/aspnetcore/issues
Leave this issue open and add a cc: @guardrex and a cross-link to this docs issue to your opening comment over there. They'll probably be faster in reaching the issue/responding and in a better position to troubleshoot it.
guardrex
on 20 Nov 2020
btw --- There's no <app> tag around the Component TH (<component>) for 5.0. I doubt that's causing this problem, but remove that <app></app> tag pair. I'll update the doc with that now and then react further based on their guidance.
guardrex
on 20 Nov 2020
nah ... Blazor Server 3.x used the App component like that, so it's more likely that the tag drops for 5.0.
Yeah ... we'll need to hear from them. I'm not available for more testing at this time with the known 5.0 updates.
guardrex
on 20 Nov 2020
btw --- There's no
<app>tag around theComponentTH (<component>) for 5.0. I doubt that's causing this problem, but remove that<app></app>tag pair. I'll update the doc with that now and then react further based on their guidance.
Which app tag are you referring to?
ChristianWeyer
on 20 Nov 2020
In the Pages/_Host.cshtml file of the server app of a hosted solution. There are so many permutations of apps (hosting models X security) and versions at this point it's hard to keep up. 🏃 ... The hosted Server API app of a hosted WASM app with security has no such _Host.cshtml file, but a hosted WASM solution from the template without auth does have it (I think). Anyway ... _IF_ there is a Pages/_Host.cshtml file, I believe the <app> tag pair is dropped for 5.0 ... _and_ I need to add a remark in the migration guidance to cover it.
guardrex
on 20 Nov 2020
My _Host.cshtml looks like that (and we need it for prerendering, right?):
@page "/"
@using ConfTool.Client
@namespace ConfTool.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ConfTool</title>
<base href="~/" />
<!--<link rel="manifest" href="manifest.json" />-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="darkslategrey">
<link rel="apple-touch-icon" href="icon-192.png">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="ConfTool.Client.styles.css" rel="stylesheet" />
<link href="_content/Blazored.Typeahead/blazored-typeahead.css" rel="stylesheet" />
<link href="_content/Blazored.Toast/blazored-toast.css" rel="stylesheet" />
</head>
<body>
@if (!HttpContext.Request.Path.StartsWithSegments("/authentication"))
{
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
}
else
{
<div id="app">
<div class="spinner">...</div>
</div>
}
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_content/Blazored.Typeahead/blazored-typeahead.js"></script>
<script src="_content/ConfTool.ClientModules.Statistics/libs/wc-piechart/polyfills.js" type="module"></script>
<script src="_content/ConfTool.ClientModules.Statistics/libs/wc-piechart/angular-scripts.js" defer></script>
<script src="_content/ConfTool.ClientModules.Statistics/libs/wc-piechart/wc-piechart.js" type="module"></script>
<script src="_content/ConfTool.ClientModules.Statistics/jsinterop/wcpiechart.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
//navigator.serviceWorker.register('sw.js');
});
}
</script>
</body>
</html>
... again, based on https://docs.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-5.0#support-prerendering-with-authentication
ChristianWeyer
on 20 Nov 2020
It doesn't look like you followed the guidance tho. Shouldn't it render statically for the auth paths? ...
@if (!HttpContext.Request.Path.StartsWithSegments("/authentication"))
{
<component type="typeof(App)" render-mode="Static" />
}
else
{
<div id="app">
<div class="spinner">...</div>
</div>
}
True, just changed to Static. Same effect that the /authentication routes all give 404...
ChristianWeyer
on 20 Nov 2020
Ok ... fair enough.
I might need to make an adjustment to the text ... it's the _app_ that supports prerendering, not _auth_. The way we have it worded now (perhaps the section heading anyway) it might be misleading.
guardrex
on 20 Nov 2020
Oh ... _I really should NOT be trying to work right now. I'm OOF and brain fried totally for the week._ 😄 .... I totally forgot that this process has the dev use the Client index.html content for the content of the _Host.cshtml file.
Did you try converting it to ...
<div id="app">
@if (!HttpContext.Request.Path.StartsWithSegments("/authentication"))
{
<component type="typeof(App)" render-mode="Static" />
}
else
{
<text>
<div class="spinner">...</div>
</text>
}
</div>
Nope, doesn't help. Those 404s on /authentication are really... weird.
BTW: you are _NOT_ working, you are having fun 😇
ChristianWeyer
on 20 Nov 2020
Ahhh... no routes do work at all! What...? This is not just for/authentication...
ChristianWeyer
on 20 Nov 2020
Nope, doesn't help.
Ok ... just making sure.
The client apps all move to a <div id="app"> from <app> for 5.0. It _IS_ covered by the migration topic, so I don't need to address it there ... just for this example in this topic.
I'll hold that PR for a bit to see what the engineers have to say about it.
guardrex
on 20 Nov 2020
Related issues
fabich
·
3Comments
Rick-Anderson
·
3Comments
YeyoCoder
·
3Comments
davisnw
·
3Comments
wgutierrezr
·
3Comments