Handling unauthorized access to links and navigations

[kausik10]

Hi, I was testing an application for accessing to unauthorized links and navigations.

• Unauthorized being referenced to user's role based routing

In the UI, to restrict the navigation links from being displayed in the application, I've wrapped it inside HasRole or HasRoles depending upon the requirement like this:

    <HasRole role="admin">
                                    <Button
                                        variant={
                                           ...
                                        }
                                        size={"md"}
                                        className={`items-center gap-1 ${
                                            currentPathTrimmed === "user-list"
                                                ? "tabActive"
                                                : "text-white"
                                        } `}
                                        onClick={() =>
                                           ...
                                        }
                                    >
                                        <Users2Icon className="w-5" />
                                        Uživatelé
                                    </Button>
                                </HasRole>

Doing this, the user-list page is not visible in the UI for the client and employee role, which is great.

However, if I login to the app with other roles (client employee accountant) and directly set the route, eg:

http://localhost:1480/app/user-list

It will open the user-list page. I won't be able to perform creation deletion or modification but can read the data which is a serious security concern.

To remove this, I tried implementing something to restrict the like this:

const redirect = useRedirect();

const userRoutesRole: Record<string, string[]> = {
        "file-list": ["admin"],
        "folder-list": ["admin"],
        "user-list": ["admin"],
        "image-list": ["admin"],
        "events": ["admin", "client", "accountant"],
    };
    
const roles = useProjectUserRoles();
    const rolesArray = Array.from(roles);
    useEffect(() => {
        const path = window.location.pathname.split("/").pop();
        const requiredRoles = userRoutesRole[path as string];
        if (!requiredRoles) return;
        const hasRequiredRole = requiredRoles.some((role) =>
            rolesArray.includes(role)
        );
        if (!hasRequiredRole) {
            redirect("/");        // or even better (maybe a fallback page ??)
        }
    }, [rolesArray, redirect]);

This seems to work okay I guess for the scope of the project with limited navigation links.

However, I would like to know about how such cases are handled in contember the correct way. How is ProtectedRoute setup in contember based on the roles of user.

Also, in production environment, if I navigate to random links, for example,

https://eurpoean-blogs.eu.contember.cloud/app/asdfsadasdfdfs

I get an error message that says Fatal error. I assume this error message is common for many different kinds of errors.

I can't seem to find anywhere in app where this error page is located. In local development, we get error saying No such page as asdfasdfs.

Could you clarify my confusion regarding the issues that I am facing. Thank you!

[jonasnobile]

If you have security concerns about access to certain parts of the data, it's best to define permissions and access rules directly in the schema rather than relying on hiding data in the UI.

This ensures that restricted data remains protected even when users make direct API calls, not just through the user interface.