fix(clerk-js,types): Close modals when `setActive({redirectUrl})` is called by panteliselef · Pull Request #5092 · clerk/javascript

panteliselef · 2025-02-06T17:09:46Z

Description

A simpler solution to #5077 which allows the e2e test of #5071 to pass 🟢.

General Problem

Since the deprecation of setActive({ beforeEmit }), our UI components have been using Clerk.navigate in order to navigate when setActive({ redirectUrl }) is set which does no handle closing the already open modals.

Specific use-case

This buggy behaviour is clearly visible, when you attempt to delete a user from UserProfile rendered in a modal. Upon deletion, setActive({redirectUrl}) was called, but when a soft navigation occurred (using framework router) the modal would not close, and the backdrop was clearly visible.

Solution

This solution in this PR fixes the above issues while maintaining setActive simple to use for developers. We also still discourage the explicit usage of setActive({beforeEmit})

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

…Active and Clerk.navigate inside UI components

…Active This way we do not need to change the public signature of setActive, or remove the deprecation of beforeEmit, since developers that consume the sdk should still use `redirectUrl`.

…still-mounted-after-delete

…tive`

changeset-bot · 2025-02-06T17:09:51Z

🦋 Changeset detected

Latest commit: 8c66b98

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

This PR includes changesets to release 22 packages

Name	Type
@clerk/clerk-react	Patch
@clerk/types	Minor
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/elements	Patch
@clerk/clerk-expo	Patch
@clerk/nextjs	Patch
@clerk/react-router	Patch
@clerk/remix	Patch
@clerk/tanstack-start	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/expo-passkeys	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nuxt	Patch
@clerk/shared	Patch
@clerk/testing	Patch
@clerk/themes	Patch
@clerk/ui	Patch
@clerk/vue	Patch

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

vercel · 2025-02-06T17:09:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 12, 2025 11:54am

LauraBeatris · 2025-02-07T10:54:11Z

+    }
  };

-  #resetComponentsState = () => {


Wouldn't we still need this for custom flows that mount SignIn/SignUp and call setActive without further navigation?

I am a bit confused by the question, you can either have a custom flow, or mount SignIn/Up, right ? Can you give a n example when this is not the case ?

You're right, let me rephrase in another way then:

If I understood correctly, the modals get closed upon router navigation after setActive - but what happens if there's no navigation, you're just calling regular setActive - wouldn't we want to keep this current logic for closing SignIn / SignUp?

Also, setActive inner workings is still relately new to me as I'll be pushing some changes to it soon, so I'm mostly asking for my own understanding here 🫡

#resetComponentsState does not cover all modals which is weird on it's own.

Having #resetComponentsState there, cause an open SignInModal to close if for whatever reason a setActive({session: null}) is called in a multi session app. Another weird side effect.

wouldn't we want to keep this current logic for closing SignIn / SignUp?
Our components will always redirect to afterSignIn or afterSignUp, which means we make a navigation outside the component so the modal will close.
The only modal component that exists today that does not navigate on setActive, is Reverification and it closes the modal manually (inside useAfterVerification).

Are we aligned that we care about closing the modal, only as long setActive is called within our components ? And as long as we always setActive({redirectUrl}) from within our component at the end of each flow the modals will close properly.

Removing #resetComponentsState might unblock afterAuth in a way, because now you can call setActive (without redirectUrl) from /sign-in/select-org/ and then internally navigate to /sign-in/subscribe and not having the modal close on you.

If you have scenarios that seem problematic with the changes that this PR proposes, please let us know as we might need to switch back to the more complex solution which allows for each component to close their own modal similarly to how we had setActive working prior to the deprecation of beforeEmit.

Makes sense to me! I'll make sure to consider that behavior when testing after-auth changes, and we also discuss further about that, thanks for handling those cases 🫡

LauraBeatris

Just missing the changeset description. Other than that, changes look good to me! 🫡

dstaley · 2025-02-07T17:40:16Z

    expect(sessionCookieList.length).toBe(0);
  });
+
+  test('closes the modal after delete', async ({ page, context }) => {


Can you also add a test that covers the removed resetComponentState functionality? So closing a sign-in modal on sign in.

I added a bunch of tests in this commit

dstaley · 2025-02-07T17:50:25Z

+    return () => {
+      unsubscribe();
+    };
+    // We are not expecting `onExternalNavigate` to change


I know we're not expecting it to change, but does providing it as a dependency break anything?

since we pass a non memoize function i think it will cause multiple subscriptions/unsubscribes

panteliselef · 2025-02-10T11:56:26Z


 testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign up flow @generic @nextjs', ({ app }) => {
-  test.describe.configure({ mode: 'serial' });
+  test.describe.configure({ mode: 'parallel' });


Seems to improve speed and does not cause tests to fail

Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com>

panteliselef · 2025-02-12T10:54:47Z

!snapshot

clerk-cookie · 2025-02-12T10:57:18Z

Hey @panteliselef - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	2.2.0-snapshot.v20250212105537
@clerk/backend	1.24.1-snapshot.v20250212105537
@clerk/chrome-extension	2.2.9-snapshot.v20250212105537
@clerk/clerk-js	5.52.3-snapshot.v20250212105537
@clerk/elements	0.22.22-snapshot.v20250212105537
@clerk/clerk-expo	2.7.7-snapshot.v20250212105537
@clerk/expo-passkeys	0.1.20-snapshot.v20250212105537
@clerk/express	1.3.48-snapshot.v20250212105537
@clerk/fastify	2.1.21-snapshot.v20250212105537
@clerk/localizations	3.10.6-snapshot.v20250212105537
@clerk/nextjs	6.11.3-snapshot.v20250212105537
@clerk/nuxt	1.1.4-snapshot.v20250212105537
@clerk/clerk-react	5.22.13-snapshot.v20250212105537
@clerk/react-router	1.0.8-snapshot.v20250212105537
@clerk/remix	4.4.24-snapshot.v20250212105537
@clerk/shared	2.21.1-snapshot.v20250212105537
@clerk/tanstack-start	0.9.6-snapshot.v20250212105537
@clerk/testing	1.4.22-snapshot.v20250212105537
@clerk/themes	2.2.18-snapshot.v20250212105537
@clerk/types	4.46.0-snapshot.v20250212105537
@clerk/ui	0.3.23-snapshot.v20250212105537
@clerk/vue	1.1.12-snapshot.v20250212105537

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@2.2.0-snapshot.v20250212105537 --save-exact

@clerk/backend

npm i @clerk/backend@1.24.1-snapshot.v20250212105537 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@2.2.9-snapshot.v20250212105537 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.52.3-snapshot.v20250212105537 --save-exact

@clerk/elements

npm i @clerk/elements@0.22.22-snapshot.v20250212105537 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.7.7-snapshot.v20250212105537 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@0.1.20-snapshot.v20250212105537 --save-exact

@clerk/express

npm i @clerk/express@1.3.48-snapshot.v20250212105537 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.1.21-snapshot.v20250212105537 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.10.6-snapshot.v20250212105537 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.11.3-snapshot.v20250212105537 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@1.1.4-snapshot.v20250212105537 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.22.13-snapshot.v20250212105537 --save-exact

@clerk/react-router

npm i @clerk/react-router@1.0.8-snapshot.v20250212105537 --save-exact

@clerk/remix

npm i @clerk/remix@4.4.24-snapshot.v20250212105537 --save-exact

@clerk/shared

npm i @clerk/shared@2.21.1-snapshot.v20250212105537 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.9.6-snapshot.v20250212105537 --save-exact

@clerk/testing

npm i @clerk/testing@1.4.22-snapshot.v20250212105537 --save-exact

@clerk/themes

npm i @clerk/themes@2.2.18-snapshot.v20250212105537 --save-exact

@clerk/types

npm i @clerk/types@4.46.0-snapshot.v20250212105537 --save-exact

@clerk/ui

npm i @clerk/ui@0.3.23-snapshot.v20250212105537 --save-exact

@clerk/vue

npm i @clerk/vue@1.1.12-snapshot.v20250212105537 --save-exact

panteliselef added 11 commits February 4, 2025 11:41

chore(clerk-js): Eslint rules to prevent incorrect usage of Clerk.set…

97f1bfc

…Active and Clerk.navigate inside UI components

chore(clerk-js): Use scoped context to pass provide beforeEmit to set…

482de37

…Active This way we do not need to change the public signature of setActive, or remove the deprecation of beforeEmit, since developers that consume the sdk should still use `redirectUrl`.

add unit tests for createScopedContext

b2326ea

beforeEmit has priority over redirectUrl

2caf9ec

exclude __internal_setActiveContext from IsomorphicClerk

4a7a152

temp changeset

6f6c016

Merge branch 'main' into elef/sdki-856-userprofile-modal-backdrop-is-…

59c91bb

…still-mounted-after-delete

chore(e2e): Check if modal closes after user deletion

5bc5a88

fix(nextjs): Shallow routing for in-component navigations

527f0ac

fix(clerk-js,types): Notify UI Component modals to close after `setAc…

79bd787

…tive`

cleanup from previous pr

d425e44

panteliselef self-assigned this Feb 6, 2025

clerk-cookie added types clerk-js integration labels Feb 6, 2025

vercel Bot deployed to Preview February 6, 2025 17:11 View deployment

panteliselef changed the title ~~Elef/sdki 856 set active emitter~~ fix(clerk-js,types): Close modals when setActive({redirectUrl}) is called Feb 6, 2025

fix clerk-react types

8b5c071

panteliselef requested a review from a team February 6, 2025 17:21

panteliselef marked this pull request as ready for review February 6, 2025 17:21

clerk-cookie added the react label Feb 6, 2025

vercel Bot deployed to Preview February 6, 2025 17:23 View deployment

LauraBeatris reviewed Feb 7, 2025

View reviewed changes

LauraBeatris approved these changes Feb 7, 2025

View reviewed changes

dstaley reviewed Feb 7, 2025

View reviewed changes

panteliselef added 2 commits February 10, 2025 12:03

Merge branch 'refs/heads/main' into elef/sdki-856-set-active-emitter

3805d01

address pr comments

6c68ec4

panteliselef commented Feb 10, 2025

View reviewed changes

vercel Bot deployed to Preview February 10, 2025 11:57 View deployment

address pr comments

8d6c6ce

vercel Bot deployed to Preview February 10, 2025 12:01 View deployment

add missing page

917bba9

panteliselef requested a review from dstaley February 10, 2025 13:32

vercel Bot deployed to Preview February 10, 2025 13:32 View deployment

dstaley reviewed Feb 10, 2025

View reviewed changes

Comment thread packages/types/src/clerk.ts Outdated

dstaley approved these changes Feb 10, 2025

View reviewed changes

Update packages/types/src/clerk.ts

e364340

Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com>

vercel Bot deployed to Preview February 11, 2025 07:59 View deployment

panteliselef mentioned this pull request Feb 11, 2025

chore(clerk-js): Enable UI Components to use setActive with router.navigate #5077

Closed

9 tasks

panteliselef added 2 commits February 12, 2025 10:19

add changesets

ef0e058

Merge branch 'refs/heads/main' into elef/sdki-856-set-active-emitter

bba359f

vercel Bot deployed to Preview February 12, 2025 08:23 View deployment

vercel Bot deployed to Preview February 12, 2025 11:39 View deployment

remove onExternalNavigate from mountedBlankCaptchaModal

8c66b98

panteliselef force-pushed the elef/sdki-856-set-active-emitter branch from be5c2ae to 8c66b98 Compare February 12, 2025 11:53

vercel Bot deployed to Preview February 12, 2025 11:54 View deployment

panteliselef merged commit dd2cbfe into main Feb 12, 2025

panteliselef deleted the elef/sdki-856-set-active-emitter branch February 12, 2025 12:59

clerk-cookie mentioned this pull request Feb 12, 2025

ci(repo): Version packages #5127

Merged

panteliselef mentioned this pull request Feb 12, 2025

chore(e2e): Check if modal closes after user deletion #5071

Closed

9 tasks

Uh oh!

Conversation

panteliselef commented Feb 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

General Problem

Specific use-case

Solution

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Feb 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Feb 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LauraBeatris Feb 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

panteliselef Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

LauraBeatris Feb 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

panteliselef Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

LauraBeatris Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

LauraBeatris left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dstaley Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselef Feb 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dstaley Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselef Feb 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

panteliselef Feb 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

panteliselef commented Feb 12, 2025

Uh oh!

clerk-cookie commented Feb 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

panteliselef commented Feb 6, 2025 •

edited

Loading

changeset-bot Bot commented Feb 6, 2025 •

edited

Loading

vercel Bot commented Feb 6, 2025 •

edited

Loading

LauraBeatris Feb 7, 2025 •

edited

Loading

LauraBeatris Feb 7, 2025 •

edited

Loading

panteliselef Feb 10, 2025 •

edited

Loading