Require authentication for entire Blazor Server app

Question

I'm trying to add a custom authentication for my Blazor Server app and I can't get it to redirect an unauthorized user to the login page.

I've already tried this:

This is my app.razor component

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <RedirectToLogin />
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>No encontrado</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Dirección inválida.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

This is my RedirectToLogin component

@inject NavigationManager NavManager

@code {
    protected override async Task OnInitializedAsync()
    {
        NavManager.NavigateTo("/login", forceLoad: true);
    }
}

But it seems the <NotAuthorized> section is never reached as I set a breakpoint on the OnInitializedAsync method and the debugging never stopped.

I'm using cookies for authentication and it works as I added an <AuthorizeView> tag in my MainLayout to test it showing a text for not authenticated users.

Did my answer help you?

Nb777
– Nb777

2022-03-11 07:14:48 +00:00
Commented Mar 11, 2022 at 7:14 — Nb777
– Nb777, Commented Mar 11, 2022 at 7:14

CesarSP · Accepted Answer · 2022-03-11 17:33:37Z

I could get it to work, I was missing an [Authorize] attribute.

I put @attribute [Authorize] right after my @using directives at my _Imports.razor file and the <NotAuthorized> tag under the Router was finally reached, and I just simply removed the RedirectToLogin component to render the Login one directly.

Also, as I used [Authorize] at that level, I had to add @attribute [AllowAnonymous] on my login component

Therefore, leaving my Router like this:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <Login />
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>No encontrado</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Dirección inválida.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

And my MainLayout like this:

<AuthorizeView>
    <Authorized>
        @*Normal layout when authorized*@
        @Body
    </Authorized>
    <NotAuthorized>
        @Body
    </NotAuthorized>
</AuthorizeView>

The Login component is just a form with username and password fields

Nb777 · Accepted Answer · 2022-03-10 14:15:29Z

0

Combines the behaviors of AuthorizeView and RouteView, so that it displays the page matching the specified route but only if the user is authorized to see it.
This from Microsoft doc

You can try:
1- Keep you AuthorizeRouteView sample like this:
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
2- Wrap your RedirectToLogin component with:

<AuthorizeView>
  <NotAuthorized>
     //something
  </NotAuthorized>
  <Authorized>
    //something
  </Authorized>
</AuthorizeView>

answered Mar 10, 2022 at 14:15

Nb777

2,05215 silver badges34 bronze badges

1 Comment

CesarSP Over a year ago

Thanks for your answer, I put my AuthorizeView in my MainLayout, so that I could have the menu displayed wether the user was authenticated or not, and it worked there, my problem was with the redirect, I could get it to work at the end of the day, I was missing an [Authorize] attribute

Collectives™ on Stack Overflow

Require authentication for entire Blazor Server app

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related