Blazor hosted - authorize immediately before displaying application

Question

Can anybody give me a helping push to get my hosted Blazor application (Client, Server and Shared) to request a login immediately, before the application is initially shown. I want the experience that a user must log in before accessing the application at all.

My starting point is the Blazor Webassembly (hosted) template with Api Authorization (Individual User Accounts)

Using the Authorize attribute on either server-side actions or a client-side Razor page will not initiate the authentication flow before the specific action/page with the Authorize attribute is being requested by the user. How would I go about having the authorization flow kicked off as the first thing, before the application is even displayed for the first time?

I am sure this is possible and even trivial for somebody more savvy than me. Can anybody give me a shove in the right direction, please?

David Masterson · Accepted Answer · 2020-05-02 20:39:38Z

5

I created a control RedirectToLogin.razor

@inject NavigationManager Navigation
@code {
    protected override void OnInitialized()
    {
        String thisPage = Navigation.Uri.Replace(Navigation.BaseUri, "~/");
        Navigation.NavigateTo($"Identity/Account/Login?returnUrl={thisPage}");
        base.OnInitialized();
    }
}

And then inserted it into the mainlayout.razor

<div class="container-fluid">
 <AuthorizeView>
        <Authorized>
            <NavigationLogger />
            <ContextMenuMouseClick>
                <MenuTopBar />
                <NavMenu />
                <SubPageContainer>
                    @Body
                </SubPageContainer>
            </ContextMenuMouseClick>
        </Authorized>
        <NotAuthorized>
            <RedirectToLogin />
        </NotAuthorized>
</AuthorizeView>
</div>

So when the layout is loaded and it is in the NotAuthorized state it will redirect to the login page and after authorising will return to the page it was trying to access.

Hope this helps.

answered May 2, 2020 at 20:39

David Masterson

1,0159 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dingdonglars Over a year ago

Thank you! I got this to work. The out-of-the box Blazor hosted client template already creates a RedirectToLogin.razor control. However, different to yours, the default RediriectToLogin redirects to the page Authentication.razor, which is also provided by the template. I wanted to preserve this and thus had to add a new, empty Layout to be used by the Authentication.razor page. Otherwise the Authentication page would load the MainLayout.razor again and RedirectToLogin and off it went in a silly loop :-) I got one step further in this adventure, thanks for your help!

Marvin Klein Over a year ago

OnInitialized throws an NavigationException. To fix it, I used the OnAfterRenderedAsync() method.

Rogier · Accepted Answer · 2020-05-03 07:30:10Z

The Blazor Client is bootstrapped from a static index.html in the wwwroot. In the Server project this is mapped to an Endpoint in the Startup.cs, basically a catch-all to all endpoints not taken by your Razor Pages or Controllers:

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("index.html");
});

For your scenario:

Create a new layout in Server, say _LayoutBlazor.cshtml
Re-create the contents of the index.html from the Client. Note that the _framework files from the Client are copied to the Server wwwroot upon build: :

<app>Loading...</app>

<script src="@Href("~/_framework/blazor.webassembly.js")"></script>
Create a new Razor page and put the "Authorize" tag on it and use the _LayoutBlazor.
Remove the endpoints.MapFallbackToFile("index.html"); from Startup.cs

Mark Gould has created a proof of concept here: RazorBlazor

Collectives™ on Stack Overflow

Blazor hosted - authorize immediately before displaying application

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related