Add doc about protected views (#66)

README.md

@@ -24,6 +24,7 @@ npm i @saleor/app-sdk
 ## Docs
 
 - [AppBridge](./docs/app-bridge.md) - communication layer between Saleor App and Dashboard
+- [Protected Views](./docs/protected-views.md) - protecting access to App outside of Dashboard
 - [APL](./docs/apl.md) - an interface that enabled App communicating between one or more Saleor instances
 - [Debugging](./docs/debugging.md) - how to debug app-sdk behaviour
 

docs/protected-views.md

@@ -0,0 +1,59 @@
+# App protected views
+
+Most likely at least some screens of the Saleor App are meant to be visible only withing Dashboard "Apps" section.
+
+SDK provides a Higher Order Component that can be used to wrap Next.js pages and perform basic protection checks
+
+## Example usage
+
+```tsx
+import { withAuthorization } from "@saleor/app-sdk/app-bridge";
+
+const AppConfigurationPage: NextPage = () => {
+  return <div>This is app inside Dashboard</div>;
+};
+
+export default withAuthorization()(AppConfigurationPage);
+```
+
+This code will render default, unstyled error screens if one of following checks are not met:
+
+- App is rendered Server Side
+- App is rendered outside iframe
+- App is rendered and token can't be accessed
+- App is rendered, but token is invalid
+
+If all conditions are successful, child Page will be rendered
+
+## Configuration
+
+Each condition can be styled with custom error React Node, by passing configuration into HOC factory
+
+Interface of configuration is following
+
+```typescript
+type Props = {
+  unmounted?: ReactNode;
+  notIframe?: ReactNode;
+  noDashboardToken?: ReactNode;
+  dashboardTokenInvalid?: ReactNode;
+};
+```
+
+Each prop is optional, so some of them can be left with default fallback component.
+
+### Full example
+
+```tsx
+import { withAuthorization } from "@saleor/app-sdk/app-bridge";
+import { ErrorPage } from "src/error-page";
+
+const AppConfigurationPage: NextPage = () => {
+  return <div>This is app inside Dashboard</div>;
+};
+
+export default withAuthorization({
+  unmounted: null,
+  notIframe: <ErrorPage error="403">This page can be accessed from dashboard</ErrorPage>,
+})(AppConfigurationPage);
+```