How is Authorised Routes and Content Handled

[sirinath]

What is the equivalent way to do the following in Bolero?

Authorized Views

<AuthorizeView>
    <Authorized>
        <h1>Hello, @context.User.Identity.Name!</h1>
        <p>You can only see this content if you're authenticated.</p>
    </Authorized>
    <Authorizing>
        <h1>Authentication in progress</h1>
        <p>You can only see this content while authentication is in progress.</p>
    </Authorizing>
    <NotAuthorized>
        <h1>Authentication Failure!</h1>
        <p>You're not signed in.</p>
    </NotAuthorized>
    <AuthorizeView Roles="admin, superuser">
       <p>You can only see this if you're an admin or superuser.</p>
   </AuthorizeView>
</AuthorizeView>

Authorized Attribute

@page "/"
@attribute [Authorize(Roles = "admin, superuser")]

<p>You can only see this if you're in the 'admin' or 'superuser' role.</p>

Authorized Routes

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <NotAuthorized>
                <h1>Sorry</h1>
                <p>You're not authorized to reach this page.</p>
                <p>You may need to log in as a different user.</p>
            </NotAuthorized>
            <Authorizing>
                <h1>Authentication in progress</h1>
                <p>Only visible while authentication is in progress.</p>
            </Authorizing>
        </AuthorizeRouteView>
    </Found>
    <NotFound>
        <CascadingAuthenticationState>
            <LayoutView Layout="@typeof(MainLayout)">
                <h1>Sorry</h1>
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </CascadingAuthenticationState>
    </NotFound>
</Router>

[Tarmil]

I've started to look into how to best handle authorization, but I don't really have full guidelines to do this yet. That being said, it should be possible to call AuthorizeView directly using comp, something like this (untested):

comp<AuthorizeView> [] [
    comp<Authorized> [] [
        h1 [] [textf "Hello, %s!" context.User.Identity.Name]
        p [] [text "You can only see this content if you're authenticated."]
    ]
    comp<Authorizing> [] [
        h1 [] [text "Authentication in progress"]
        p [] [text "You can only see this content while authentication is in progress."]
    ]
    comp<NotAuthorized> [] [
        h1 [] [text "Authentication failure!"]
        p [] [text "You're not signed in."]
    ]
    comp<AuthorizeView> ["Roles" => "admin, superuser"] [
        p [] [text "You can only see this if you're an admin or superuser."]
    ]
]

I think using [<Authorize(Roles = "admin, superuser")>] on a component class (for example on a class inheriting from ElmishComponent) should be equivalent to the second case, although I don't quite know how and when it's checked.

[OnurGumus]

Just wanted to share my opinion on the matter. In functional programming, we generally avoid these kind of magical components, because of power of composition, usually it's not hard to come up with your home grown solution that achieves the same.

[sirinath]

Is it possible to perhaps extended the documentation to include guidelines on:

• Authentication and security
• Cross-platform native mobile, desktop and web apps
• Localisation

You can perhaps have a Bolero specific way to do this.

I believe all 3 of the above will be very much of interest to many users.

[Happypig375]

Cross-platform native mobile, desktop and web apps

There are separate F# projects for each of these.

Mobile: Fabulous Desktop: Avalonia.FuncUI Web: Bolero

[sirinath]

Using separate frameworks means you cannot have one codebase. So I am trying to see if Bolero can use throughout through this is many targeted for the web. E.g. Capacitor enables Ionic to go cross-platform. Also, Uno allows UWP-based code (C# and XAML) to run on iOS, Android, and WebAssembly. Also, NativeScript enables you to share the codebase.

Maybe Bolero can use a native-bridge like Capacitor to go cross-platform perhaps if it can be used with Cordova.

[jspuij]

I'm the author of BlazorWebView. It should not be hard to enable Bolero to run inside BlazorWebView. But give me a chance first to experience Bolero, because I only just discovered it and I love it ;-)

[xperiandri]

@sirinath if you use Uno you can use the Elmish.Uno that I maintain. Which is half-elmish approcah. Available as preview NuGets in my repo

[xperiandri]

About Bolero AuthorizeView from Blazor is just a component with 3 states:

1. NotAuthorized
2. Authorizing
3. Authoried

The simplest way of handling that is to call IAuthorizationService.AuthorizeAsync imperatively with a particular requirement and if not authorized redirect to /Unauthorized page

NotFound does not matter as it is from Router and you handle that on router. By the way @Tarmil how to redirect to /NotFound page if not supported route put into the browser address bar?