Protected previews

Prerequisites

• The project Settings page, section Previews.
• Show previews to clients turned on. The off state says "Previews disabled" and "Clients won't see a preview link before changes are merged."

Preview URLs are detected from GitHub. Connecting Vercel is for Deployment Protection, and for MODIFEE_SECRET when you use App with login.

Steps

Open Settings → Previews. The description is "Preview links clients see before a change is merged."

What Modifee detected

Detection says "Detected automatically from GitHub."

• Vercel: "Hosted on Vercel ·" the project name.
• Another known host: "Hosted on" the host name, then "· No setup needed".
• Nothing yet: "No preview detected yet".

Last preview links to the latest preview URL. Before any request stores one, the line is "Waiting for the first request to confirm."

GitHub deployments decide the host: a Vercel deployment or a Preview environment, a Heroku deployment or a review app, or root files vercel.json, next.config.*, app.json, or Procfile. Netlify, Render, Cloudflare Pages, and other hosts use the same GitHub preview URL. Settings → Integrations says "Only needed if your previews are protected by Vercel. Modifee detects previews from GitHub, so Netlify, Render, Cloudflare Pages and others work with no setup."

The onboarding step Previews uses the same detection:

• "Connected to Vercel ·" the project name, or "Connected to Vercel"
• "Hosted on Vercel."
• "Hosted on Heroku. Clients open the preview link from GitHub."
• "Hosted on Netlify. Remove password protection if clients cannot open the preview."
• "Hosted on" the host name, then ". Clients open the preview link from GitHub."
• "We'll detect your host from your first pull request."

Vercel Deployment Protection

When the preview responds like a login wall, the banner is Action needed: "Previews are protected by Vercel. Connect Vercel or add a bypass secret so clients can open them." Connect Vercel starts the integration.

Access offers two cards:

• Automatic (recommended). "Modifee creates the bypass secret through your Vercel connection." The secret Vercel stores is labeled "Modifee client previews". The badge Active means that integration secret is the one in use.
• Manual secret. "Paste a Protection Bypass secret from Vercel." The field is Protection bypass secret. The hint is "Vercel → Project → Settings → Deployment Protection → Protection Bypass for Automation." Press Save secret. A saved secret shows "Bypass secret · ••••••••", the badge Set, Replace, and Remove.

On the client preview link, Modifee adds Vercel's protection bypass and sets the bypass cookie. The client opens the preview without a Vercel account.

After a save, "Previews are now accessible to your clients ✓" means the check got through. "Secret saved, but the preview still requires a login. Double-check the secret in Vercel." means the secret is stored and the preview still looks protected.

Use automatic secret replaces a manual secret with one Modifee creates. Disconnect revokes the "Modifee client previews" secret. See Vercel integration.

Other hosts

Leave Access unused. The detection line "Hosted on" the host, then "· No setup needed", is the setup. Clients open the preview URL from GitHub. If Netlify password protection is on, the onboarding line tells you to remove it.

The Previews mark

The mark beside Previews is separate from the banner.

Green ("Complete") when any of these is true:

• Show previews to clients is off.
• The host is known, and it is not a protected Vercel preview missing a bypass secret, and the last preview check did not fail.

Yellow, with the tooltip as the reason:

• "Previews are protected. Connect Vercel or add a bypass secret so clients can open them." The host is Vercel, the preview is protected, and no bypass secret is stored. The banner title in that case is Action needed.
• "No preview host detected. Add where this site is hosted."
• "The last preview check failed. Run it again from the project."

A known host that is not Vercel stays green without a bypass secret. A Vercel preview that is not protected stays green without one. A protected Vercel preview with a bypass secret stored keeps the mark green. Access can still show "Secret saved, but the preview still requires a login. Double-check the secret in Vercel."

Verify

1. Turn Show previews to clients on and press Save.
2. For Vercel Authentication, connect or paste the bypass, then open a client preview link. It should load without a Vercel login.
3. The mark beside Previews is green, or the yellow tooltip matches one of the three reasons above.
4. For Netlify, Render, Cloudflare Pages, or another GitHub-detected host, confirm "No setup needed" and open the preview from a request.

Troubleshooting

• "Previews unavailable" plus the error under it: "Vercel connection lost, reconnect", a list error, or "Vercel refused to create the bypass secret. Paste one manually below."
• "Secret saved, but the preview still requires a login. Double-check the secret in Vercel."
• "Paste the Vercel protection bypass secret."
• "Protection bypass secret is too long."
• "This project is not hosted on Vercel."
• "Could not store the protection bypass secret."
• "The Modifee Vercel integration is missing the Projects read-write scope."
• "No Vercel account connected."
• "No Vercel project is linked to this repository yet."
• Previews.