Handling secure pages and components in C#Bot client-side

The client-side of an application is not a reliable place to verify security, this is instead the duty of the server-side which considers user authentication, CRUD permissions and other considerations. However, it is important for the client-side to reflect the security rules. While the Codebots Security Diagram will have pre-configured security for you in both the client and server-side, it is important for you to understand client-side security to work with your custom code.

Secure Pages

Certain users have access to particular pages, whereas others do not. The SecurePage component helps to manage this.

<SecuredPage groups={['Super Administrators', 'Users', 'Administrators']}>
    <Navigation
        linkGroups={navigationLinks}
        orientation={Orientation.VERTICAL}
        match={match}
        location={location}
        history={history}
        staticContext={staticContext}
    />

    <BodyContent>
        <ElementsTileTile
            history={history}
            location={location}
            match={match}
            staticContext={staticContext}
        />
    </BodyContent>
</SecuredPage>

By passing in the groups prop, you let the page know which users have access, if they are not in any of the groups, they are redirected to /404. If this groups prop is not present, then it is a public page and accessible to all.

Secure Components

Building on the knowledge from the previous two sections, the Auth component can be used wrap other items and to display the children, only if the user is logged in. The following example shows how this can be used.

<>
    <Auth>
        <Link to="/profile">Profile</Link>
        <Link to="/logout">Logout</Link>
    </Auth>

    <BlogContent />
</>