Add authorization HOC

package.json

@@ -101,6 +101,11 @@
       "import": "./app-bridge/index.mjs",
       "require": "./app-bridge/index.js"
     },
+    "./util": {
+      "types": "./util/index.d.ts",
+      "import": "./util/index.mjs",
+      "require": "./util/index.js"
+    },
     "./handlers/next": {
       "types": "./handlers/next/index.d.ts",
       "import": "./handlers/next/index.mjs",

src/app-bridge/with-authorization.tsx

@@ -0,0 +1,57 @@
+import { NextPage } from "next";
+import * as React from "react";
+import { PropsWithChildren, ReactNode } from "react";
+
+import { isInIframe, useIsMounted } from "../util";
+import { useDashboardToken } from "./use-dashboard-token";
+
+function SimpleError({ children }: PropsWithChildren<{}>) {
+  return (
+    <div style={{ padding: 32, color: "red" }}>
+      <p>{children}</p>
+    </div>
+  );
+}
+
+type Props = {
+  unmounted?: ReactNode;
+  notIframe?: ReactNode;
+  noDashboardToken?: ReactNode;
+  dashboardTokenInvalid?: ReactNode;
+};
+
+export const withAuthorization =
+  ({
+    dashboardTokenInvalid = <SimpleError>Dashboard token is invalid</SimpleError>,
+    noDashboardToken = <SimpleError>Dashboard token doesn&quot;t exist</SimpleError>,
+    notIframe = <SimpleError>The view can only be displayed inside iframe.</SimpleError>,
+    unmounted = <p>Loading</p>,
+  }: Props) =>
+  <BaseProps extends React.ComponentProps<NextPage>>(
+    BaseComponent: React.FunctionComponent<BaseProps>
+  ) => {
+    function AuthorizedPage(props: BaseProps) {
+      const mounted = useIsMounted();
+      const { isTokenValid, hasAppToken } = useDashboardToken();
+
+      if (!mounted) {
+        return unmounted;
+      }
+
+      if (!isInIframe()) {
+        return notIframe;
+      }
+
+      if (!hasAppToken) {
+        return noDashboardToken;
+      }
+
+      if (!isTokenValid) {
+        return dashboardTokenInvalid;
+      }
+
+      return <BaseComponent {...props} />;
+    }
+
+    return AuthorizedPage;
+  };

src/util/index.ts

@@ -0,0 +1,2 @@
+export * from "./is-in-iframe";
+export * from "./use-is-mounted";

src/util/is-in-iframe.ts

@@ -0,0 +1,11 @@
+export const isInIframe = () => {
+  if (!document || !window) {
+    throw new Error("isInIframe should be called only in browser");
+  }
+
+  try {
+    return document.location !== window.parent.location;
+  } catch (e) {
+    return false;
+  }
+};

src/util/use-is-mounted.ts

@@ -0,0 +1,8 @@
+import { useEffect, useState } from "react";
+
+export const useIsMounted = (): boolean => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  return mounted;
+};