Skip to content

chore(clerk-js): add Protect scenarios to the sandbox - #10791

Draft
mwickett wants to merge 1 commit into
mainfrom
mwickett/sandbox-protect-scenarios
Draft

mwickett wants to merge 1 commit into
mainfrom
mwickett/sandbox-protect-scenarios

Conversation

@mwickett

Copy link
Copy Markdown
Member

Description

The sandbox had no way to show what <SignIn /> and <SignUp /> render when Clerk Protect blocks or challenges an attempt.
This adds six API mocking scenarios for those outcomes and a Scenario picker in the sandbox Controls pane.
Sandbox tooling only: no change to any published package.

Scenarios (packages/clerk-js/sandbox/scenarios/protect.ts)

Scenario What the mocked API does
ProtectBlockedGeneric Blocks the first submit with the default message.
ProtectBlockedOutdatedClerkJS Blocks the first submit with the outdated ClerkJS message and link.
ProtectBlockedNetwork Blocks the first sign-up submit with the network message.
ProtectBlockedAtVerification Accepts the first submit, then blocks the password or email code submit.
ProtectChallenge Requires a challenge after the first submit. A stand-in challenge lets you pass or fail it.
ProtectChallengeThenBlocked Requires a challenge after the first submit, then blocks once it is solved.

Scenario picker. A "Scenario" folder in the Controls pane lists every scenario (not only these) and "None (live API)". It uses the same storage key and reload as scenario.setScenario().

To try it: pnpm dev:sandbox, open http://localhost:4000/sign-in or /sign-up, pick a scenario, and submit the form with any email address.

Not covered: OAuth and SSO callbacks, second factor, reset password and rate-limit responses have no scenario yet.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other: sandbox tooling

Adds API mocking scenarios for blocked and challenged sign-in and sign-up attempts, and a Scenario picker in the sandbox Controls pane.
@vercel

vercel Bot commented Nov 12, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Nov 12, 2026 6:51pm UTC
swingset Ready Ready Preview Nov 12, 2026 6:51pm UTC

Request Review

@coderabbitai

coderabbitai Bot commented Nov 12, 2026

Copy link
Copy Markdown
Contributor

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

@changeset-bot

changeset-bot Bot commented Nov 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 25e1e96

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new

pkg-pr-new Bot commented Nov 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10791

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10791

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10791

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10791

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10791

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10791

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10791

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10791

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10791

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10791

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10791

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10791

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10791

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10791

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10791

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10791

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10791

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10791

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10791

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10791

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10791

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10791

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10791

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10791

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10791

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10791

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10791

commit: 25e1e96

This branch was successfully deployed

2 active deployments
Preview – swingset — 25e1e968 Deployed Nov 12, 2026 by vercel[bot]
Preview – clerk-js-sandbox — 25e1e968 Deployed Nov 12, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant