chore(clerk-js): Trigger navigation to tasks on `setActive` for internal routing only by LauraBeatris · Pull Request #5535 · clerk/javascript

LauraBeatris · 2025-04-04T16:41:06Z

Description

Summary

Do not trigger navigation to tasks on setActive if it's called from outside UI components
Do not delay emitting state, this was a wrong workaround to avoid UI updating on session updates, eg: SignIn rendered inside SignedOut, which got fixed now that SignedOut treats pending sessions as signed out by default chore(clerk-react,astro,vue): Introduce treatPendingAsSignedOut prop to client control components #5512

For custom flows

awaitsetActive({ session })consttask=clerk.currentTask;mountTaskComponentIfAny(task)

Or use clerk.__experimental_nextTask for orchestrating navigation:

awaitsetActive({ session })awaitclerk.__experimental_nextTask({redirectUrlComplete: afterTasksUrl})

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

changeset-bot · 2025-04-04T16:41:10Z

🦋 Changeset detected

Latest commit: 58c3bb1

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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-04-04T16:41:10Z

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	Apr 4, 2025 5:01pm

LauraBeatris · 2025-04-04T16:55:30Z


- if (newSession?.currentTask) {
+ // Only triggers navigation for internal routing, in order to not affect custom flows
+ if (newSession?.currentTask && this.#componentNavigationContext) {


Doing this explicitly means avoiding having to call nextTask on every single factor component.
For an actual application, with a single sign-in/sign-up form, it's just one method call. For our internal purposes, it would need to be replicated across multiple layers of the components after every setActive.
The whole reasoning of not triggering navigation to task once setActive detects a pending status, is the following:
Navigating without a explicit signature / param can be confusing
If a developer just wants to mount the task component on the same screen, after calling setActive, they should be able to do so

LauraBeatris · 2025-04-04T16:59:14Z

Just noticed that one unit test is failing, which is expected tho, I'll fix it here!

LauraBeatris · 2025-04-04T16:41:06Z

Description

Summary

Do not trigger navigation to tasks on setActive if it's called from outside UI components
Do not delay emitting state, this was a wrong workaround to avoid UI updating on session updates, eg: SignIn rendered inside SignedOut, which got fixed now that SignedOut treats pending sessions as signed out by default chore(clerk-react,astro,vue): Introduce treatPendingAsSignedOut prop to client control components #5512

For custom flows

awaitsetActive({ session })consttask=clerk.currentTask;mountTaskComponentIfAny(task)

Or use clerk.__experimental_nextTask for orchestrating navigation:

awaitsetActive({ session })awaitclerk.__experimental_nextTask({redirectUrlComplete: afterTasksUrl})

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

changeset-bot · 2025-04-04T16:41:10Z

🦋 Changeset detected

Latest commit: 58c3bb1

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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-04-04T16:41:10Z

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	Apr 4, 2025 5:01pm

LauraBeatris · 2025-04-04T16:55:30Z


- if (newSession?.currentTask) {
+ // Only triggers navigation for internal routing, in order to not affect custom flows
+ if (newSession?.currentTask && this.#componentNavigationContext) {


Doing this explicitly means avoiding having to call nextTask on every single factor component.
For an actual application, with a single sign-in/sign-up form, it's just one method call. For our internal purposes, it would need to be replicated across multiple layers of the components after every setActive.
The whole reasoning of not triggering navigation to task once setActive detects a pending status, is the following:
Navigating without a explicit signature / param can be confusing
If a developer just wants to mount the task component on the same screen, after calling setActive, they should be able to do so

LauraBeatris · 2025-04-04T16:59:14Z

Just noticed that one unit test is failing, which is expected tho, I'll fix it here!

LauraBeatris · 2025-04-04T16:41:06Z

Description

Summary

Do not trigger navigation to tasks on setActive if it's called from outside UI components
Do not delay emitting state, this was a wrong workaround to avoid UI updating on session updates, eg: SignIn rendered inside SignedOut, which got fixed now that SignedOut treats pending sessions as signed out by default chore(clerk-react,astro,vue): Introduce treatPendingAsSignedOut prop to client control components #5512

For custom flows

awaitsetActive({ session })consttask=clerk.currentTask;mountTaskComponentIfAny(task)

Or use clerk.__experimental_nextTask for orchestrating navigation:

awaitsetActive({ session })awaitclerk.__experimental_nextTask({redirectUrlComplete: afterTasksUrl})

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

changeset-bot · 2025-04-04T16:41:10Z

🦋 Changeset detected

Latest commit: 58c3bb1

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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-04-04T16:41:10Z

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	Apr 4, 2025 5:01pm

LauraBeatris · 2025-04-04T16:55:30Z


- if (newSession?.currentTask) {
+ // Only triggers navigation for internal routing, in order to not affect custom flows
+ if (newSession?.currentTask && this.#componentNavigationContext) {


Doing this explicitly means avoiding having to call nextTask on every single factor component.
For an actual application, with a single sign-in/sign-up form, it's just one method call. For our internal purposes, it would need to be replicated across multiple layers of the components after every setActive.
The whole reasoning of not triggering navigation to task once setActive detects a pending status, is the following:
Navigating without a explicit signature / param can be confusing
If a developer just wants to mount the task component on the same screen, after calling setActive, they should be able to do so

LauraBeatris · 2025-04-04T16:59:14Z

Just noticed that one unit test is failing, which is expected tho, I'll fix it here!

LauraBeatris · 2025-04-04T16:41:06Z

Description

Summary

Do not trigger navigation to tasks on setActive if it's called from outside UI components
Do not delay emitting state, this was a wrong workaround to avoid UI updating on session updates, eg: SignIn rendered inside SignedOut, which got fixed now that SignedOut treats pending sessions as signed out by default chore(clerk-react,astro,vue): Introduce treatPendingAsSignedOut prop to client control components #5512

For custom flows

awaitsetActive({ session })consttask=clerk.currentTask;mountTaskComponentIfAny(task)

Or use clerk.__experimental_nextTask for orchestrating navigation:

awaitsetActive({ session })awaitclerk.__experimental_nextTask({redirectUrlComplete: afterTasksUrl})

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

changeset-bot · 2025-04-04T16:41:10Z

🦋 Changeset detected

Latest commit: 58c3bb1

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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-04-04T16:41:10Z

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	Apr 4, 2025 5:01pm

LauraBeatris · 2025-04-04T16:55:30Z


- if (newSession?.currentTask) {
+ // Only triggers navigation for internal routing, in order to not affect custom flows
+ if (newSession?.currentTask && this.#componentNavigationContext) {


Doing this explicitly means avoiding having to call nextTask on every single factor component.
For an actual application, with a single sign-in/sign-up form, it's just one method call. For our internal purposes, it would need to be replicated across multiple layers of the components after every setActive.
The whole reasoning of not triggering navigation to task once setActive detects a pending status, is the following:
Navigating without a explicit signature / param can be confusing
If a developer just wants to mount the task component on the same screen, after calling setActive, they should be able to do so

LauraBeatris · 2025-04-04T16:59:14Z

Just noticed that one unit test is failing, which is expected tho, I'll fix it here!

LauraBeatris · 2025-04-04T16:41:06Z

Description

Summary

Do not trigger navigation to tasks on setActive if it's called from outside UI components
Do not delay emitting state, this was a wrong workaround to avoid UI updating on session updates, eg: SignIn rendered inside SignedOut, which got fixed now that SignedOut treats pending sessions as signed out by default chore(clerk-react,astro,vue): Introduce treatPendingAsSignedOut prop to client control components #5512

For custom flows

awaitsetActive({ session })consttask=clerk.currentTask;mountTaskComponentIfAny(task)

Or use clerk.__experimental_nextTask for orchestrating navigation:

awaitsetActive({ session })awaitclerk.__experimental_nextTask({redirectUrlComplete: afterTasksUrl})

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

changeset-bot · 2025-04-04T16:41:10Z

🦋 Changeset detected

Latest commit: 58c3bb1

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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-04-04T16:41:10Z

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	Apr 4, 2025 5:01pm

LauraBeatris · 2025-04-04T16:55:30Z


- if (newSession?.currentTask) {
+ // Only triggers navigation for internal routing, in order to not affect custom flows
+ if (newSession?.currentTask && this.#componentNavigationContext) {


Doing this explicitly means avoiding having to call nextTask on every single factor component.
For an actual application, with a single sign-in/sign-up form, it's just one method call. For our internal purposes, it would need to be replicated across multiple layers of the components after every setActive.
The whole reasoning of not triggering navigation to task once setActive detects a pending status, is the following:
Navigating without a explicit signature / param can be confusing
If a developer just wants to mount the task component on the same screen, after calling setActive, they should be able to do so

LauraBeatris · 2025-04-04T16:59:14Z

Just noticed that one unit test is failing, which is expected tho, I'll fix it here!

LauraBeatris · 2025-04-04T16:41:06Z

Description

Summary

Do not trigger navigation to tasks on setActive if it's called from outside UI components
Do not delay emitting state, this was a wrong workaround to avoid UI updating on session updates, eg: SignIn rendered inside SignedOut, which got fixed now that SignedOut treats pending sessions as signed out by default chore(clerk-react,astro,vue): Introduce treatPendingAsSignedOut prop to client control components #5512

For custom flows

awaitsetActive({ session })consttask=clerk.currentTask;mountTaskComponentIfAny(task)

Or use clerk.__experimental_nextTask for orchestrating navigation:

awaitsetActive({ session })awaitclerk.__experimental_nextTask({redirectUrlComplete: afterTasksUrl})

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

changeset-bot · 2025-04-04T16:41:10Z

🦋 Changeset detected

Latest commit: 58c3bb1

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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-04-04T16:41:10Z

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	Apr 4, 2025 5:01pm

LauraBeatris · 2025-04-04T16:55:30Z


- if (newSession?.currentTask) {
+ // Only triggers navigation for internal routing, in order to not affect custom flows
+ if (newSession?.currentTask && this.#componentNavigationContext) {


Doing this explicitly means avoiding having to call nextTask on every single factor component.
For an actual application, with a single sign-in/sign-up form, it's just one method call. For our internal purposes, it would need to be replicated across multiple layers of the components after every setActive.
The whole reasoning of not triggering navigation to task once setActive detects a pending status, is the following:
Navigating without a explicit signature / param can be confusing
If a developer just wants to mount the task component on the same screen, after calling setActive, they should be able to do so

LauraBeatris · 2025-04-04T16:59:14Z

Just noticed that one unit test is failing, which is expected tho, I'll fix it here!

LauraBeatris · 2025-04-04T16:41:06Z

Description

Summary

Do not trigger navigation to tasks on setActive if it's called from outside UI components
Do not delay emitting state, this was a wrong workaround to avoid UI updating on session updates, eg: SignIn rendered inside SignedOut, which got fixed now that SignedOut treats pending sessions as signed out by default chore(clerk-react,astro,vue): Introduce treatPendingAsSignedOut prop to client control components #5512

For custom flows

awaitsetActive({ session })consttask=clerk.currentTask;mountTaskComponentIfAny(task)

Or use clerk.__experimental_nextTask for orchestrating navigation:

awaitsetActive({ session })awaitclerk.__experimental_nextTask({redirectUrlComplete: afterTasksUrl})

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

changeset-bot · 2025-04-04T16:41:10Z

🦋 Changeset detected

Latest commit: 58c3bb1

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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-04-04T16:41:10Z

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	Apr 4, 2025 5:01pm

LauraBeatris · 2025-04-04T16:55:30Z


- if (newSession?.currentTask) {
+ // Only triggers navigation for internal routing, in order to not affect custom flows
+ if (newSession?.currentTask && this.#componentNavigationContext) {


Doing this explicitly means avoiding having to call nextTask on every single factor component.
For an actual application, with a single sign-in/sign-up form, it's just one method call. For our internal purposes, it would need to be replicated across multiple layers of the components after every setActive.
The whole reasoning of not triggering navigation to task once setActive detects a pending status, is the following:
Navigating without a explicit signature / param can be confusing
If a developer just wants to mount the task component on the same screen, after calling setActive, they should be able to do so

LauraBeatris · 2025-04-04T16:59:14Z

Just noticed that one unit test is failing, which is expected tho, I'll fix it here!

LauraBeatris · 2025-04-04T16:41:06Z

Description

Summary

Do not trigger navigation to tasks on setActive if it's called from outside UI components
Do not delay emitting state, this was a wrong workaround to avoid UI updating on session updates, eg: SignIn rendered inside SignedOut, which got fixed now that SignedOut treats pending sessions as signed out by default chore(clerk-react,astro,vue): Introduce treatPendingAsSignedOut prop to client control components #5512

For custom flows

awaitsetActive({ session })consttask=clerk.currentTask;mountTaskComponentIfAny(task)

Or use clerk.__experimental_nextTask for orchestrating navigation:

awaitsetActive({ session })awaitclerk.__experimental_nextTask({redirectUrlComplete: afterTasksUrl})

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

changeset-bot · 2025-04-04T16:41:10Z

🦋 Changeset detected

Latest commit: 58c3bb1

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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-04-04T16:41:10Z

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	Apr 4, 2025 5:01pm

LauraBeatris · 2025-04-04T16:55:30Z


- if (newSession?.currentTask) {
+ // Only triggers navigation for internal routing, in order to not affect custom flows
+ if (newSession?.currentTask && this.#componentNavigationContext) {


Doing this explicitly means avoiding having to call nextTask on every single factor component.
For an actual application, with a single sign-in/sign-up form, it's just one method call. For our internal purposes, it would need to be replicated across multiple layers of the components after every setActive.
The whole reasoning of not triggering navigation to task once setActive detects a pending status, is the following:
Navigating without a explicit signature / param can be confusing
If a developer just wants to mount the task component on the same screen, after calling setActive, they should be able to do so

LauraBeatris · 2025-04-04T16:59:14Z

Just noticed that one unit test is failing, which is expected tho, I'll fix it here!

LauraBeatris self-assigned this Apr 4, 2025

clerk-cookie added the clerk-js label Apr 4, 2025

LauraBeatris force-pushed the laura/after-auth-custom-flows-1 branch from 4c5822b to 21e089bCompare April 4, 2025 16:51

LauraBeatris changed the title ~~chore(clerk-ks): Trigger navigation to tasks on setActive for internal routing only~~ chore(clerk-js): Trigger navigation to tasks on setActive for internal routing only Apr 4, 2025

LauraBeatris requested a review from a teamApril 4, 2025 16:52

LauraBeatris force-pushed the laura/after-auth-custom-flows-1 branch from 21e089b to 58c3bb1Compare April 4, 2025 16:52

LauraBeatris marked this pull request as ready for review April 4, 2025 16:52

vercelBotdeployed to Preview April 4, 2025 16:54 View deployment

LauraBeatris commented Apr 4, 2025
View reviewed changes

NicolasLopes7 approved these changes Apr 4, 2025
View reviewed changes

Do not delay emit from pending to active session
765c6fa

LauraBeatris force-pushed the laura/after-auth-custom-flows-1 branch from 58c3bb1 to 765c6faCompare April 4, 2025 17:00

vercelBotdeployed to Preview April 4, 2025 17:01 View deployment

panteliselef approved these changes Apr 4, 2025
View reviewed changes

LauraBeatris merged commit 250b311 into mainApr 4, 2025

LauraBeatris deleted the laura/after-auth-custom-flows-1 branch April 4, 2025 18:21

clerk-cookie mentioned this pull request Apr 4, 2025
ci(repo): Version packages #5524
Merged