60 lines
1.6 KiB
Markdown
60 lines
1.6 KiB
Markdown
|
# 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);
|
||
|
|
```
|