---
title: "Use the Vercel Deployment Protection feature with JSS apps"
slug: "use-the-vercel-deployment-protection-feature-with-jss-apps"
abstract: "Learn how to use Deployment Protection on the Vercel cloud platform for your Next.js JSS app."
---
# Use the Vercel Deployment Protection feature with JSS apps

[Deployment Protection](https://vercel.com/docs/concepts/deployments/deployment-protection) is a feature of the Vercel cloud platform that allows developers and editors to limit access to their site deployments. Enabling this feature requires making some changes based on how your JSS app is configured.

To use Deployment Protection with JSS apps:

1. In your app's `scripts\config\plugins\fallback.ts` file, modify how `publicUrl` is set. For example:

    ```ts
    const publicUrlFallback = (process.env.NODE_ENV !== 'production' ? getPublicUrl() : '');
    return Object.assign({}, config, {
      publicUrl: config.publicUrl || publicUrlFallback,
    });
    ```

    > [!important]
    > If you're using one of your Deployment Protection enabled Vercel URLs as your rendering host endpoint for editing, you must complete the remaining steps in this procedure to enable Sitecore’s editing tools to use your Vercel deployment with Protection Bypass. Otherwise, no further changes are needed.

2. Configure the [Protection Bypass token](https://vercel.com/docs/concepts/deployments/deployment-protection#using-protection-bypass-for-automation) in Vercel.
3. Add the bypass token to your rendering host settings:
    1. In SXA, open your rendering host definition located in `/sitecore/system/Settings/Services/Rendering Hosts/`. For example, if your definition is named `vercel`, open `/sitecore/system/Settings/Services/Rendering Hosts/vercel`.
    2. Add the query string parameter `x-vercel-protection-bypass=<bypass_token>` to the URLs in the following fields, making sure to include the bypass token value from Vercel:
        - **Server side rendering engine endpoint URL**
        - **Server side rendering engine application URL**
        - **Server side rendering engine configuration URL**

        The following example represents an updated URL for **Server side rendering engine application URL**:

        ```http
        https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>
        ```

4. If you're using Vercel as your editing host and you've enabled [metadata editing mode for Pages](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/editor-integration-using-metadata.html "Editor integration using metadata") (for JSS 22.1 and later), then while still in SXA, add the query string parameter `x-vercel-set-bypass-cookie=samesitenone` to **Server side rendering engine**.

    For example:

    ```http
    https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>&x-vercel-set-bypass-cookie=samesitenone
    ```

5. If Vercel Deployment Protection is enabled for a deployment URL other than the [automatically-generated one](https://vercel.com/docs/deployments/generated-urls), and you are using this other URL as your rendering host endpoint, do the following in Vercel:
    1. Add the `PUBLIC_URL` environment variable.
    2. Set the new variable's value to the protocol and hostname used by your rendering host settings, such as `https://<vercel_deployment_url>`.
6. If you want to use SitecoreAI Forms and BYOC components in Pages, you also need to configure the rendering host in the Components application, as follows:
    1. Access the Components app from your SitecoreAI dashboard.
    2. On the **Setting** tab, under **Rendering host**, enter your Vercel deployment URL and include the following query string parameters:
        - `x-vercel-protection-bypass`, set to your bypass token.
        - `x-vercel-set-bypass-cookie`, set to `samesitenone`.

        An example of an updated rendering host URL is as follows:

        ```http
        https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>&x-vercel-set-bypass-cookie=samesitenone
        ```

> [!important]
> If you use the Protection Bypass token to access the site in normal mode, you must use both the `x-vercel-protection-bypass` and `x-vercel-set-bypass-cookie` [headers](https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation#using-protection-bypass-for-automation), or use query string parameters, to properly render all the static assets.