diff --git a/README.md b/README.md index f416830..1f5b77b 100644 --- a/README.md +++ b/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 diff --git a/docs/protected-views.md b/docs/protected-views.md new file mode 100644 index 0000000..f50cf29 --- /dev/null +++ b/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
This is app inside Dashboard
; +}; + +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
This is app inside Dashboard
; +}; + +export default withAuthorization({ + unmounted: null, + notIframe: This page can be accessed from dashboard, +})(AppConfigurationPage); +```