Securing Client App

import React from "react";
import { MenuPlugin } from "@webiny/app-admin/plugins/MenuPlugin";

// Note that we've changed the icon (this one is more appropriate).
import { ReactComponent as Icon } from "./assets/directions_car-24px.svg";

import { useSecurity } from "@webiny/app-security";

// We use this when specifying the return types of the getPermission function call (below).
import { FullAccessPermission } from "@webiny/app-security/types";

// Creating types for security permissions makes our code less error-prone and more readable.
import { CarManufacturersPermission } from "./types";

// We need a component which will perform security checks, and conditionally render menu items.
const CarManufacturersMenu = ({ Menu, Item }) => {
  const { identity } = useSecurity();

  // We get the "car-manufacturers" permission from current identity (logged-in user).
  const permission = identity.getPermission<CarManufacturersPermission | FullAccessPermission>(
    "car-manufacturers"
  );

  if (!permission) {
    return null;
  }

  // Note that the received permission object can also be `{ name: "*" }`. If so, that
  // means we are dealing with the super admin, who has unlimited access.
  let hasAccess = permission.name === "*";
  if (!hasAccess) {
    // If not super admin, let's check if we have the "r" in the `rwd` property.
    hasAccess =
      permission.name === "car-manufacturers" && permission.rwd && permission.rwd.includes("r");
  }

  // Finally, if current identity doesn't have access, we immediately exit.
  if (!hasAccess) {
    return null;
  }

  return (
    <Menu name="menu-car-manufacturers" label={"Car Manufacturers"} icon={<Icon />}>
      <Item label={"Car Manufacturers"} path={"/car-manufacturers"} />
    </Menu>
  );
};

/**
 * Registers "Car Manufacturers" main menu item.
 */
export default new MenuPlugin({
  render(props) {
    // We forward the menu plugin props to our custom component, which will be using hooks.
    // This `render` function is _not_ a React component itself, so you can't use hooks directly in here.
    return <CarManufacturersMenu {...props} />;
  }
});

import React, { Suspense, lazy } from "react";
import Helmet from "react-helmet";
import { Route } from "@webiny/react-router";
import { RoutePlugin } from "@webiny/app/types";
import { CircularProgress } from "@webiny/ui/Progress";
import { AdminLayout } from "@webiny/app-admin/components/AdminLayout";
import { SecureRoute } from "@webiny/app-security/components";

const Loader = ({ children, ...props }) => (
  <Suspense fallback={<CircularProgress />}>{React.cloneElement(children, props)}</Suspense>
);

const CarManufacturers = lazy(() => import("./views/CarManufacturers"));

export default (): RoutePlugin => ({
  type: "route",
  name: "route-admin-car-manufacturers",
  route: (
    <Route
      path={"/car-manufacturers"}
      exact
      render={() => (
        // In order to be able to access this route, the logged-in user needs to
        // have the "car-manufacturers" permission. We don't inspect the extra
        // properties it may hold, we do that within rendered child components.
        <SecureRoute permission={"car-manufacturers"}>
          <AdminLayout>
            <Helmet>
              <title>Car Manufacturers</title>
            </Helmet>
            <Loader>
              <CarManufacturers />
            </Loader>
          </AdminLayout>
        </SecureRoute>
      )}
    />
  )
});

import React from "react";
import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
import {
    DataList,
    ScrollList,
    ListItem,
    ListItemText,
    ListItemMeta,
    ListActions
} from "@webiny/ui/List";
import { useCarManufacturersDataList } from "./hooks/useCarManufacturersDataList";

import { SecureView } from "@webiny/app-security/components";

// We also imported FullAccessPermission and CarManufacturersPermission types.
import { FullAccessPermission } from "@webiny/app-security/types";
import { CarManufacturersPermission } from "../types";

(...)

const CarManufacturersDataList = () => {

    (...)

    return (
        <DataList
            title={"Car Manufacturers"}
            data={carManufacturers}
            loading={loading}
            refresh={refresh}
            pagination={pagination}
            sorters={sorters}
            setSorters={setSort}
            actions={
                /* The SecureView component conditionally renders child components
                (depending on the result of the permissions check we provided). */
                <SecureView<CarManufacturersPermission | FullAccessPermission>
                    permission={"car-manufacturers"}
                >
                    {({ permission }) => {
                        if (!permission) {
                            return null;
                        }

                        // Note that the received permission object can also be `{ name: "*" }`. If so, that
                        // means we are dealing with the super admin, who has unlimited access.
                        let hasAccess = permission.name === "*";
                        if (!hasAccess) {
                            // If not super admin, let's check if we have the "w" in the `rwd` property.
                            hasAccess =
                                permission.name === "car-manufacturers" &&
                                permission.rwd &&
                                permission.rwd.includes("w");
                        }

                        // Finally, if current identity doesn't have access, we immediately exit.
                        if (!hasAccess) {
                            return null;
                        }

                        return (
                            <ButtonSecondary onClick={newCarManufacturer}>
                                <ButtonIcon icon={<AddIcon />} />
                                New Car Manufacturer
                            </ButtonSecondary>
                        );
                    }}
                </SecureView>
            }
        >
            {({ data }) => (
                <ScrollList>
                    {data.map(item => (
                        <ListItem key={item.id} selected={item.id === currentCarManufacturerId}>
                            <ListItemText onClick={() => editCarManufacturer(item.id)}>
                                {item.title}
                            </ListItemText>

                            <ListItemMeta>
                                <ListActions>
                                    <DeleteIcon onClick={() => deleteCarManufacturer(item)} />
                                </ListActions>
                            </ListItemMeta>
                        </ListItem>
                    ))}
                </ScrollList>
            )}
        </DataList>
    );
};

export default CarManufacturersDataList;