New components or functions for development

[boukenka]

Here are some features I would like for Blazor. This would facilitate the implementation of a website.
What do you think?

A. Have the possibility to define a startup page

For example, the main screen/dashboard has the @page '/'.
The login page has the @page "/login" .
When the application starts, the applications loads first the "login" page
because it is defined as the startup page.

B. Method to check the Uri

To avoid a malicious attack on a redirection from the login page,
it is required to check if the returnUrl (used for the redirection after a successful login)
belongs to the list of possible Uris of the routing table.
Is there a function for it?
It could just return a boolean value if the Uri is matching or not in the routing table.

C. NotFound component

Could a 'NotFound' component be provided in a Blazor toolkit.
Inputs could be the URL for the navigation and a render fragment.
Render fragment is used to display a message to the user if the user is authenticated.
In the other case, there a redirection to another page. Example: Login
Below is an example what could be achieved by this component.

@inject NavigationManager NavigationManager

@if (IsAuthenticated)
{
    @ChildContent
}

@code {
    private bool IsAuthenticated = false;
    public string NavigateToUrl { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [CascadingParameter] 
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        AuthenticationState authenticationState = await AuthenticationStateTask;

        if (authenticationState?.User?.Identity is null
 || !authenticationState.User.Identity.IsAuthenticated)
            NavigationManager.NavigateTo(NavigateToUrl, true);
        else
            IsAuthenticated = true;
    }
}

D. RedirectToLogin component

Could a 'RedirectToLogin' component be provided in a Blazor toolkit.
Inputs could be the URL for the navigation and a render fragment.
Below is an example what could be achieved by this component.

@inject NavigationManager NavigationManager

@if (IsAuthenticated)
{
    @ChildContent
}

@code {
    private bool IsAuthenticated;
    public string NavigateToUrl { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [CascadingParameter] 
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        AuthenticationState authenticationState = await AuthenticationStateTask;

        if (authenticationState?.User?.Identity is null 
|| !authenticationState.User.Identity.IsAuthenticated)
        {
            string returnUrl = NavigationManager.Uri;
            
            if (string.IsNullOrWhiteSpace(returnUrl) || 
             returnUrl.Equals(NavigationManager.BaseUri))
                NavigationManager.NavigateTo(NavigateToUrl, true);
            else
            {
                if (!NavigateToUrl.EndsWith("/")) NavigateToUrl += "/";
                NavigationManager.NavigateTo(NavigateToUrl + "?returnUrl=" + 
               returnUrl, true);
            }
        }
        else
            IsAuthenticated = true;
    }
}

E. Hide option

The application starts at the '/'.
During the loading/startup of the application on the web browser,
the nav menu in the 'MainLayout.razor' is shown during a very short period (blinking).
Then there is a redirection to the login page which is using another layout.
Is it possible to 'hide' completely (or stops totally the rendering) of the layout, so the 'MainLayout' layout is not shown at all during the startup? Could a specific attribute do that implementation?
Below is the following app.razor.

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" 
              DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    Please wait...
                </Authorizing>
                <NotAuthorized>
                    <RedirectToLogin />
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <NotFoundComponent />
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

Below is the workaround. The nav menu is not shown at all during the startup.
Is there a better solution?

@inherits LayoutComponentBase
@attribute [Authorize]

<AuthorizeView>
    <Authorized>
        <div class="sidebar">
            <NavMenu />
        </div>
        <div class="main">
            <div class="top-row px-4">
                <LoginDisplay />
            </div>
            <div class="content px-4">
                @Body
            </div>
        </div>
    </Authorized>
    <NotAuthorized>
        @Body
    </NotAuthorized>
</AuthorizeView>

Below is the layout used by the Login page.

@inherits LayoutComponentBase

<div class="container">
    <main role="main" class="pb-1">
        @Body
    </main>
</div>

Further technical details

ASP.NET Core version 3.1.
Microsoft Edge 81.0.396.0
It's a Blazor Web Assembly with ASP.NET core hosted.
Visual Studio 16.5.0 Preview 2.0.

[mkArtakMSFT]

Thanks for contacting us.
This is a lot of requests in one issue. @javiercn can you please go through these and see which ones are things we may do and either reference to existing issues or create new ones.
Then close please, as we don't want to track this meta-issue.

[boukenka]

Thank you @javiercn for #18851 and #18979 and @mkArtakMSFT for your feedback.
What do you think for the points A, B and E?

[javiercn]

Hi,

I'll try to address each of your points in order.

For A I don't think this is a common enough request to be part of the framework itself. We are considering including a redirect component, but that is still under consideration.

You can also achieve this in many ways:

• Redirect on the server.
• Redirect on the client with a bit of JavaScript
• Apply some style to your root component to make it hidden and make it appear only after you've navigated to the right page.

For B, this already exists as !return.StartsWith(navigationManager.BaseUri, StringComparison.Ordinal)

For E, the same answer as A applies. Simply hide your UI by default using CSS and enable it once you are ready.

All these things you can build on top of Blazor and we don't plan to bake them in unless we see evidence that they are common enough to require a solution provided by within the framework and not by some other library built on top.

[boukenka]

Thank you @javiercn. 😄 I will follow your recommendations.