diff --git a/.changeset/happy-insects-talk.md b/.changeset/happy-insects-talk.md new file mode 100644 index 0000000..0a15dcd --- /dev/null +++ b/.changeset/happy-insects-talk.md @@ -0,0 +1,5 @@ +--- +"@saleor/app-sdk": minor +--- + +Added useAuthenticatedFetch hook with can construct decorated window.fetch with pre-defined headers with required AppBridge state. Can be used with createProtectedHandler diff --git a/.changeset/tall-birds-sort.md b/.changeset/tall-birds-sort.md new file mode 100644 index 0000000..da83371 --- /dev/null +++ b/.changeset/tall-birds-sort.md @@ -0,0 +1,5 @@ +--- +"@saleor/app-sdk": patch +--- + +Remove MANAGE_APPS from possible permissions, because App should not have it. Mutations that requires MANAGE_APPS will not work with App Token even if permission is set diff --git a/docs/protected-handlers.md b/docs/protected-handlers.md index 21a739d..4aecd6c 100644 --- a/docs/protected-handlers.md +++ b/docs/protected-handlers.md @@ -24,6 +24,7 @@ export type ProtectedHandlerContext = { - the API URL has been registered, with help of the APL - the request has `authorization-bearer` - the auth token is a valid JWT token created by the Saleor running on the given URL +- user has required permissions in the token For example purposes our endpoint will only log welcome message: @@ -44,8 +45,10 @@ export const handler = async ( /** * If any of the requirements is failed, an error response will be returned. * Otherwise, provided handler function fill be called. + * + * Last argument is optional array of permissions that will be checked. If user doesn't have them, will return 401 before handler is called */ -export default createProtectedHandler(handler, saleorApp.apl); +export default createProtectedHandler(handler, saleorApp.apl, ["MANAGE_ORDERS"]); ``` To make your requests successfully communicate with the backend, `saleor-api-url` and `authorization-bearer` headers are required: @@ -65,3 +68,30 @@ fetch("/api/protected", { ``` If you want to read more about `appBridgeState`, check [App Bridge](./app-bridge.md) documentation. + +### Using `useAuthenticatedFetch()` hook + +Instead of manually attaching headers with AppBridge context, you can use `useAuthenticatedFetch()` hook + +Since it requires AppBridge, it's only available in browser context. It depends on `Window` object, +so your app will break if Next.js tries to render it server-side. Hence, ensure component that uses the hook is imported with dynamic() + +Component must be within `AppBridgeProvider` to have access to the AppBridge + +```tsx +import { useAuthenticatedFetch } from "@saleor/app-sdk/app-bridge"; +import { useEffect } from "react"; + +export const ClientComponent = () => { + const fetch = useAuthenticatedFetch(); + + useEffect(() => { + /** + * Auth headers are set up automatically, so you can just call the fetch function + */ + fetch("/api/protected"); + }, [fetch]); + + return