Skip to content

Update useAwaitableNavigate to handle navigations between pages reliably - #2889

Closed
nikosdouvlis wants to merge 2 commits into
release/v4from
nikos/fix-awaitable-navigation
Closed

Update useAwaitableNavigate to handle navigations between pages reliably#2889
nikosdouvlis wants to merge 2 commits into
release/v4from
nikos/fix-awaitable-navigation

Conversation

@nikosdouvlis

@nikosdouvlisnikosdouvlis commented Feb 28, 2024

Copy link
Copy Markdown
Member

We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted

Description

Checklist

  • npm test runs as expected.
  • npm run 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:

@nikosdouvlis
nikosdouvlis requested a review from a team as a code ownerFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis requested review from anagstef and removed request for a teamFebruary 28, 2024 22:13
@changeset-bot

changeset-botBot commented Feb 28, 2024•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 86eb801

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

This PR includes changesets to release 4 packages
NameType
@clerk/clerk-jsPatch
@clerk/nextjsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

@nikosdouvlis
nikosdouvlisforce-pushed the nikos/fix-awaitable-navigation branch from ccc301f to 91efa8fCompareFebruary 28, 2024 22:13
@nikosdouvlis

nikosdouvlis commented Feb 28, 2024

Copy link
Copy Markdown
MemberAuthor

!snapshot

@clerk-cookie

clerk-cookie commented Feb 28, 2024

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v91efa8f
@clerk/clerk-js4.70.2-snapshot.v91efa8f
@clerk/clerk-expo0.20.7-snapshot.v91efa8f
@clerk/nextjs4.29.9-snapshot.v91efa8f

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

npm i @clerk/chrome-extension@0.6.12-snapshot.v91efa8f --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.v91efa8f --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.v91efa8f --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.v91efa8f --save-exact

@nikosdouvlis
nikosdouvlisforce-pushed the nikos/fix-awaitable-navigation branch from 91efa8f to c9a521bCompareFebruary 28, 2024 22:30
@nikosdouvlis

nikosdouvlis commented Feb 28, 2024

Copy link
Copy Markdown
MemberAuthor

!snapshot

@clerk-cookie

clerk-cookie commented Feb 28, 2024

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b

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

npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact

@nikosdouvlis

nikosdouvlis commented Feb 29, 2024

Copy link
Copy Markdown
MemberAuthor

!snapshot

@clerk-cookie

clerk-cookie commented Feb 29, 2024

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b

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

npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact

@nikosdouvlis
nikosdouvlisforce-pushed the nikos/fix-awaitable-navigation branch from c9a521b to 41e6fdbCompareFebruary 29, 2024 03:02
@nikosdouvlis

nikosdouvlis commented Feb 29, 2024

Copy link
Copy Markdown
MemberAuthor

!snapshot

desiprisg
desiprisg approved these changes Feb 29, 2024
View reviewed changes

@desiprisgdesiprisg left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@clerk-cookie

clerk-cookie commented Feb 29, 2024

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v6eb1bf8
@clerk/clerk-js4.70.2-snapshot.v6eb1bf8
@clerk/clerk-expo0.20.7-snapshot.v6eb1bf8
@clerk/nextjs4.29.9-snapshot.v6eb1bf8

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

npm i @clerk/chrome-extension@0.6.12-snapshot.v6eb1bf8 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.v6eb1bf8 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.v6eb1bf8 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.v6eb1bf8 --save-exact

@nikosdouvlis
nikosdouvlisforce-pushed the nikos/fix-awaitable-navigation branch from 6eb1bf8 to 1d4dfe6CompareFebruary 29, 2024 15:08
brkalow
brkalow reviewed Feb 29, 2024
View reviewed changes
Comment threadpackages/nextjs/src/app-router/client/invalidateCacheAction.ts Outdated
* https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
*/
export const invalidateCacheAction = async () => {
cookies().delete(`__clerk_random_cookie_${Date.now()}`);

@brkalowbrkalowFeb 29, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ According to the docs linked, calling router.refresh() will clear the cache. Why do we need to use the cookies approach?

@nikosdouvlisnikosdouvlisFeb 29, 2024•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the docs, router.refresh() invalidates the cache for the current router not for all routes. If we are at '/path' and the '/' route is cached, navigating to / will use the cached payload even after firing refresh()

See: https://nextjs.org/docs/app/building-your-application/caching#invalidation-1

@brkalowbrkalowFeb 29, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, I read it as it invalidates the router cache, not just for the current route, but if what you have here works or addresses some issue you experienced with router.refresh() then lgtm 😀

Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
clerkNavRef.current = (to, opts) => {
return new Promise<void>(res => {
clerkNavPromiseBuffer.current.push(res);
startTransition(() => {

@brkalowbrkalowFeb 29, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe removing the transition here will re-introduce the original issue, which is that state updates were happening during the router transition, or that the setActive call was not completing at all because of the navigation triggered by onBeforeSetActive.

Is there a way we can retain the use of the transition while keeping the buffer on the window?

@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll most likely keep using the transition API - this is removed temporarily so I can cut a snapshot version for testing

@nikosdouvlisnikosdouvlisFeb 29, 2024•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setActive call was not completing at all because of the navigation triggered by onBeforeSetActive

Regarding this one, I never managed to reproduce a failed setActive because of us not listening to isPending

I think the issue was caused by the components being unmounted during navigation but I do agree that keep using transition state is the way to go here

Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx Outdated
router.refresh();
router.push(window.location.href);
}
return invalidateCacheAction();

@brkalowbrkalowFeb 29, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we want to invalidate the router cache in onAfterSetActive? Why in before?

@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to invalidate the router cache before a navigation occurs, otherwise the navigation might not fire atll . Currently, the order is: setActive > onBeforeSetActive > beforeEmit() > onAfterSetActive

Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts Outdated
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts Outdated
@nikosdouvlis
nikosdouvlisforce-pushed the nikos/fix-awaitable-navigation branch from 1d4dfe6 to 40af74cCompareFebruary 29, 2024 16:14
@nikosdouvlis

nikosdouvlis commented Feb 29, 2024

Copy link
Copy Markdown
MemberAuthor

!snapshot

@clerk-cookie

clerk-cookie commented Feb 29, 2024

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v40af74c
@clerk/clerk-js4.70.2-snapshot.v40af74c
@clerk/clerk-expo0.20.7-snapshot.v40af74c
@clerk/nextjs4.29.9-snapshot.v40af74c

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

npm i @clerk/chrome-extension@0.6.12-snapshot.v40af74c --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.v40af74c --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.v40af74c --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.v40af74c --save-exact

@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
5470ea6
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlisforce-pushed the nikos/fix-awaitable-navigation branch from 40af74c to 5470ea6CompareFebruary 29, 2024 22:12
@nikosdouvlisnikosdouvlis mentioned this pull request Feb 29, 2024
Merged
9 tasks
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
86eb801
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis

nikosdouvlis commented Mar 1, 2024

Copy link
Copy Markdown
MemberAuthor

!snapshot

@clerk-cookie

clerk-cookie commented Mar 1, 2024

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v86eb801
@clerk/clerk-js4.70.2-snapshot.v86eb801
@clerk/clerk-expo0.20.7-snapshot.v86eb801
@clerk/nextjs4.29.9-snapshot.v86eb801

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

npm i @clerk/chrome-extension@0.6.12-snapshot.v86eb801 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@4.70.2-snapshot.v86eb801 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@0.20.7-snapshot.v86eb801 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@4.29.9-snapshot.v86eb801 --save-exact

@nikosdouvlis

nikosdouvlis commented Mar 19, 2024

Copy link
Copy Markdown
MemberAuthor

This released was included in the v5 beta release and so far everything seems to be working as expected.

However, we've had no other reports for unexpected behavior in v4. GIven that this fix could introduce breaking behavior for v4 apps, even if extremely unlikely, I'm closing this for now. We will merge and release if we receive any other reports.

@nikosdouvlis
nikosdouvlis deleted the nikos/fix-awaitable-navigation branch December 7, 2025 10:42
@jacekradkojacekradko mentioned this pull request Mar 5, 2026
Merged
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brkalowbrkalowbrkalow left review comments
@anagstefanagstefAwaiting requested review from anagstefanagstef is a code owner automatically assigned from clerk/team-sdk
+1 more reviewer
@desiprisgdesiprisgdesiprisg approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

clerk-jsnextjs

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@nikosdouvlis@clerk-cookie@brkalow@desiprisg
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Update useAwaitableNavigate to handle navigations between pages reliably by nikosdouvlis · Pull Request #2889 · clerk/javascript · GitHub
Skip to content
Update useAwaitableNavigate to handle navigations between pages reliably - #2889
Closed
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Closed
Update useAwaitableNavigate to handle navigations between pages reliably#2889
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Conversation
@nikosdouvlis
@nikosdouvlisnikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

Member
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
Description
Checklist
  • npm test runs as expected.
  • npm run 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:
@nikosdouvlis
nikosdouvlis
requested a review
from a team
as a code ownerFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
requested review from
anagstef
and removed request for
a teamFebruary 28, 2024 22:13
@changeset-bot
changeset-botBot
commented
Feb 28, 2024•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 86eb801
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 4 packages
NameType
@clerk/clerk-jsPatch
@clerk/nextjsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
ccc301f to
91efa8fCompareFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v91efa8f
@clerk/clerk-js4.70.2-snapshot.v91efa8f
@clerk/clerk-expo0.20.7-snapshot.v91efa8f
@clerk/nextjs4.29.9-snapshot.v91efa8f
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v91efa8f --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v91efa8f --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v91efa8f --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v91efa8f --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
91efa8f to
c9a521bCompareFebruary 28, 2024 22:30
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
c9a521b to
41e6fdbCompareFebruary 29, 2024 03:02
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
desiprisg
desiprisg
approved these changes
Feb 29, 2024
View reviewed changes
@desiprisgdesiprisg
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v6eb1bf8
@clerk/clerk-js4.70.2-snapshot.v6eb1bf8
@clerk/clerk-expo0.20.7-snapshot.v6eb1bf8
@clerk/nextjs4.29.9-snapshot.v6eb1bf8
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v6eb1bf8 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v6eb1bf8 --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
6eb1bf8 to
1d4dfe6CompareFebruary 29, 2024 15:08
brkalow
brkalow
reviewed
Feb 29, 2024
View reviewed changes
Comment threadpackages/nextjs/src/app-router/client/invalidateCacheAction.ts
Outdated

 * https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
 */
export const invalidateCacheAction = async () => {
 cookies().delete(`__clerk_random_cookie_${Date.now()}`);
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ According to the docs linked, calling router.refresh() will clear the cache. Why do we need to use the cookies approach?
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the docs, router.refresh() invalidates the cache for the current router not for all routes. If we are at '/path' and the '/' route is cached, navigating to / will use the cached payload even after firing refresh()
See: https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, I read it as it invalidates the router cache, not just for the current route, but if what you have here works or addresses some issue you experienced with router.refresh() then lgtm 😀
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
 clerkNavRef.current = (to, opts) => {
 return new Promise<void>(res => {
 clerkNavPromiseBuffer.current.push(res);
 startTransition(() => {
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe removing the transition here will re-introduce the original issue, which is that state updates were happening during the router transition, or that the setActive call was not completing at all because of the navigation triggered by onBeforeSetActive.
Is there a way we can retain the use of the transition while keeping the buffer on the window?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll most likely keep using the transition API - this is removed temporarily so I can cut a snapshot version for testing
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setActive call was not completing at all because of the navigation triggered by onBeforeSetActive
Regarding this one, I never managed to reproduce a failed setActive because of us not listening to isPending
I think the issue was caused by the components being unmounted during navigation but I do agree that keep using transition state is the way to go here
Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx
Outdated

 router.refresh();
 router.push(window.location.href);
 }
 return invalidateCacheAction();
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we want to invalidate the router cache in onAfterSetActive? Why in before?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to invalidate the router cache before a navigation occurs, otherwise the navigation might not fire atll . Currently, the order is: setActive > onBeforeSetActive > beforeEmit() > onAfterSetActive
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
1d4dfe6 to
40af74cCompareFebruary 29, 2024 16:14
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v40af74c
@clerk/clerk-js4.70.2-snapshot.v40af74c
@clerk/clerk-expo0.20.7-snapshot.v40af74c
@clerk/nextjs4.29.9-snapshot.v40af74c
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v40af74c --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v40af74c --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v40af74c --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v40af74c --save-exact
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
5470ea6
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
40af74c to
5470ea6CompareFebruary 29, 2024 22:12
@nikosdouvlisnikosdouvlis
mentioned this pull request
Feb 29, 2024
 Merged

9 tasks
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
86eb801
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlis
commented
Mar 1, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Mar 1, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v86eb801
@clerk/clerk-js4.70.2-snapshot.v86eb801
@clerk/clerk-expo0.20.7-snapshot.v86eb801
@clerk/nextjs4.29.9-snapshot.v86eb801
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v86eb801 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v86eb801 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v86eb801 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v86eb801 --save-exact
@nikosdouvlis
nikosdouvlis
commented
Mar 19, 2024

Copy link


Copy Markdown

MemberAuthor
This released was included in the v5 beta release and so far everything seems to be working as expected.
However, we've had no other reports for unexpected behavior in v4. GIven that this fix could introduce breaking behavior for v4 apps, even if extremely unlikely, I'm closing this for now. We will merge and release if we receive any other reports.
@nikosdouvlis
nikosdouvlis
deleted the

nikos/fix-awaitable-navigation

branch
December 7, 2025 10:42
@jacekradkojacekradko
mentioned this pull request
Mar 5, 2026
 Merged

2 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@brkalowbrkalowbrkalow left review comments
@anagstefanagstefAwaiting requested review from anagstefanagstef is a code owner automatically assigned from clerk/team-sdk

+1 more reviewer

@desiprisgdesiprisgdesiprisg approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-jsnextjs

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@nikosdouvlis@clerk-cookie@brkalow@desiprisg

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Update useAwaitableNavigate to handle navigations between pages reliably by nikosdouvlis · Pull Request #2889 · clerk/javascript · GitHub
Skip to content
Update useAwaitableNavigate to handle navigations between pages reliably - #2889
Closed
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Closed
Update useAwaitableNavigate to handle navigations between pages reliably#2889
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Conversation
@nikosdouvlis
@nikosdouvlisnikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

Member
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
Description
Checklist
  • npm test runs as expected.
  • npm run 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:
@nikosdouvlis
nikosdouvlis
requested a review
from a team
as a code ownerFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
requested review from
anagstef
and removed request for
a teamFebruary 28, 2024 22:13
@changeset-bot
changeset-botBot
commented
Feb 28, 2024•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 86eb801
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 4 packages
NameType
@clerk/clerk-jsPatch
@clerk/nextjsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
ccc301f to
91efa8fCompareFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v91efa8f
@clerk/clerk-js4.70.2-snapshot.v91efa8f
@clerk/clerk-expo0.20.7-snapshot.v91efa8f
@clerk/nextjs4.29.9-snapshot.v91efa8f
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v91efa8f --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v91efa8f --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v91efa8f --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v91efa8f --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
91efa8f to
c9a521bCompareFebruary 28, 2024 22:30
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
c9a521b to
41e6fdbCompareFebruary 29, 2024 03:02
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
desiprisg
desiprisg
approved these changes
Feb 29, 2024
View reviewed changes
@desiprisgdesiprisg
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v6eb1bf8
@clerk/clerk-js4.70.2-snapshot.v6eb1bf8
@clerk/clerk-expo0.20.7-snapshot.v6eb1bf8
@clerk/nextjs4.29.9-snapshot.v6eb1bf8
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v6eb1bf8 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v6eb1bf8 --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
6eb1bf8 to
1d4dfe6CompareFebruary 29, 2024 15:08
brkalow
brkalow
reviewed
Feb 29, 2024
View reviewed changes
Comment threadpackages/nextjs/src/app-router/client/invalidateCacheAction.ts
Outdated

 * https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
 */
export const invalidateCacheAction = async () => {
 cookies().delete(`__clerk_random_cookie_${Date.now()}`);
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ According to the docs linked, calling router.refresh() will clear the cache. Why do we need to use the cookies approach?
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the docs, router.refresh() invalidates the cache for the current router not for all routes. If we are at '/path' and the '/' route is cached, navigating to / will use the cached payload even after firing refresh()
See: https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, I read it as it invalidates the router cache, not just for the current route, but if what you have here works or addresses some issue you experienced with router.refresh() then lgtm 😀
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
 clerkNavRef.current = (to, opts) => {
 return new Promise<void>(res => {
 clerkNavPromiseBuffer.current.push(res);
 startTransition(() => {
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe removing the transition here will re-introduce the original issue, which is that state updates were happening during the router transition, or that the setActive call was not completing at all because of the navigation triggered by onBeforeSetActive.
Is there a way we can retain the use of the transition while keeping the buffer on the window?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll most likely keep using the transition API - this is removed temporarily so I can cut a snapshot version for testing
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setActive call was not completing at all because of the navigation triggered by onBeforeSetActive
Regarding this one, I never managed to reproduce a failed setActive because of us not listening to isPending
I think the issue was caused by the components being unmounted during navigation but I do agree that keep using transition state is the way to go here
Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx
Outdated

 router.refresh();
 router.push(window.location.href);
 }
 return invalidateCacheAction();
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we want to invalidate the router cache in onAfterSetActive? Why in before?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to invalidate the router cache before a navigation occurs, otherwise the navigation might not fire atll . Currently, the order is: setActive > onBeforeSetActive > beforeEmit() > onAfterSetActive
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
1d4dfe6 to
40af74cCompareFebruary 29, 2024 16:14
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v40af74c
@clerk/clerk-js4.70.2-snapshot.v40af74c
@clerk/clerk-expo0.20.7-snapshot.v40af74c
@clerk/nextjs4.29.9-snapshot.v40af74c
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v40af74c --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v40af74c --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v40af74c --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v40af74c --save-exact
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
5470ea6
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
40af74c to
5470ea6CompareFebruary 29, 2024 22:12
@nikosdouvlisnikosdouvlis
mentioned this pull request
Feb 29, 2024
 Merged

9 tasks
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
86eb801
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlis
commented
Mar 1, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Mar 1, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v86eb801
@clerk/clerk-js4.70.2-snapshot.v86eb801
@clerk/clerk-expo0.20.7-snapshot.v86eb801
@clerk/nextjs4.29.9-snapshot.v86eb801
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v86eb801 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v86eb801 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v86eb801 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v86eb801 --save-exact
@nikosdouvlis
nikosdouvlis
commented
Mar 19, 2024

Copy link


Copy Markdown

MemberAuthor
This released was included in the v5 beta release and so far everything seems to be working as expected.
However, we've had no other reports for unexpected behavior in v4. GIven that this fix could introduce breaking behavior for v4 apps, even if extremely unlikely, I'm closing this for now. We will merge and release if we receive any other reports.
@nikosdouvlis
nikosdouvlis
deleted the

nikos/fix-awaitable-navigation

branch
December 7, 2025 10:42
@jacekradkojacekradko
mentioned this pull request
Mar 5, 2026
 Merged

2 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@brkalowbrkalowbrkalow left review comments
@anagstefanagstefAwaiting requested review from anagstefanagstef is a code owner automatically assigned from clerk/team-sdk

+1 more reviewer

@desiprisgdesiprisgdesiprisg approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-jsnextjs

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@nikosdouvlis@clerk-cookie@brkalow@desiprisg

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Update useAwaitableNavigate to handle navigations between pages reliably by nikosdouvlis · Pull Request #2889 · clerk/javascript · GitHub
Skip to content
Update useAwaitableNavigate to handle navigations between pages reliably - #2889
Closed
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Closed
Update useAwaitableNavigate to handle navigations between pages reliably#2889
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Conversation
@nikosdouvlis
@nikosdouvlisnikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

Member
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
Description
Checklist
  • npm test runs as expected.
  • npm run 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:
@nikosdouvlis
nikosdouvlis
requested a review
from a team
as a code ownerFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
requested review from
anagstef
and removed request for
a teamFebruary 28, 2024 22:13
@changeset-bot
changeset-botBot
commented
Feb 28, 2024•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 86eb801
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 4 packages
NameType
@clerk/clerk-jsPatch
@clerk/nextjsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
ccc301f to
91efa8fCompareFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v91efa8f
@clerk/clerk-js4.70.2-snapshot.v91efa8f
@clerk/clerk-expo0.20.7-snapshot.v91efa8f
@clerk/nextjs4.29.9-snapshot.v91efa8f
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v91efa8f --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v91efa8f --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v91efa8f --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v91efa8f --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
91efa8f to
c9a521bCompareFebruary 28, 2024 22:30
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
c9a521b to
41e6fdbCompareFebruary 29, 2024 03:02
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
desiprisg
desiprisg
approved these changes
Feb 29, 2024
View reviewed changes
@desiprisgdesiprisg
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v6eb1bf8
@clerk/clerk-js4.70.2-snapshot.v6eb1bf8
@clerk/clerk-expo0.20.7-snapshot.v6eb1bf8
@clerk/nextjs4.29.9-snapshot.v6eb1bf8
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v6eb1bf8 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v6eb1bf8 --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
6eb1bf8 to
1d4dfe6CompareFebruary 29, 2024 15:08
brkalow
brkalow
reviewed
Feb 29, 2024
View reviewed changes
Comment threadpackages/nextjs/src/app-router/client/invalidateCacheAction.ts
Outdated

 * https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
 */
export const invalidateCacheAction = async () => {
 cookies().delete(`__clerk_random_cookie_${Date.now()}`);
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ According to the docs linked, calling router.refresh() will clear the cache. Why do we need to use the cookies approach?
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the docs, router.refresh() invalidates the cache for the current router not for all routes. If we are at '/path' and the '/' route is cached, navigating to / will use the cached payload even after firing refresh()
See: https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, I read it as it invalidates the router cache, not just for the current route, but if what you have here works or addresses some issue you experienced with router.refresh() then lgtm 😀
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
 clerkNavRef.current = (to, opts) => {
 return new Promise<void>(res => {
 clerkNavPromiseBuffer.current.push(res);
 startTransition(() => {
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe removing the transition here will re-introduce the original issue, which is that state updates were happening during the router transition, or that the setActive call was not completing at all because of the navigation triggered by onBeforeSetActive.
Is there a way we can retain the use of the transition while keeping the buffer on the window?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll most likely keep using the transition API - this is removed temporarily so I can cut a snapshot version for testing
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setActive call was not completing at all because of the navigation triggered by onBeforeSetActive
Regarding this one, I never managed to reproduce a failed setActive because of us not listening to isPending
I think the issue was caused by the components being unmounted during navigation but I do agree that keep using transition state is the way to go here
Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx
Outdated

 router.refresh();
 router.push(window.location.href);
 }
 return invalidateCacheAction();
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we want to invalidate the router cache in onAfterSetActive? Why in before?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to invalidate the router cache before a navigation occurs, otherwise the navigation might not fire atll . Currently, the order is: setActive > onBeforeSetActive > beforeEmit() > onAfterSetActive
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
1d4dfe6 to
40af74cCompareFebruary 29, 2024 16:14
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v40af74c
@clerk/clerk-js4.70.2-snapshot.v40af74c
@clerk/clerk-expo0.20.7-snapshot.v40af74c
@clerk/nextjs4.29.9-snapshot.v40af74c
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v40af74c --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v40af74c --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v40af74c --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v40af74c --save-exact
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
5470ea6
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
40af74c to
5470ea6CompareFebruary 29, 2024 22:12
@nikosdouvlisnikosdouvlis
mentioned this pull request
Feb 29, 2024
 Merged

9 tasks
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
86eb801
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlis
commented
Mar 1, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Mar 1, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v86eb801
@clerk/clerk-js4.70.2-snapshot.v86eb801
@clerk/clerk-expo0.20.7-snapshot.v86eb801
@clerk/nextjs4.29.9-snapshot.v86eb801
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v86eb801 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v86eb801 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v86eb801 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v86eb801 --save-exact
@nikosdouvlis
nikosdouvlis
commented
Mar 19, 2024

Copy link


Copy Markdown

MemberAuthor
This released was included in the v5 beta release and so far everything seems to be working as expected.
However, we've had no other reports for unexpected behavior in v4. GIven that this fix could introduce breaking behavior for v4 apps, even if extremely unlikely, I'm closing this for now. We will merge and release if we receive any other reports.
@nikosdouvlis
nikosdouvlis
deleted the

nikos/fix-awaitable-navigation

branch
December 7, 2025 10:42
@jacekradkojacekradko
mentioned this pull request
Mar 5, 2026
 Merged

2 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@brkalowbrkalowbrkalow left review comments
@anagstefanagstefAwaiting requested review from anagstefanagstef is a code owner automatically assigned from clerk/team-sdk

+1 more reviewer

@desiprisgdesiprisgdesiprisg approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-jsnextjs

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@nikosdouvlis@clerk-cookie@brkalow@desiprisg

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Update useAwaitableNavigate to handle navigations between pages reliably by nikosdouvlis · Pull Request #2889 · clerk/javascript · GitHub
Skip to content
Update useAwaitableNavigate to handle navigations between pages reliably - #2889
Closed
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Closed
Update useAwaitableNavigate to handle navigations between pages reliably#2889
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Conversation
@nikosdouvlis
@nikosdouvlisnikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

Member
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
Description
Checklist
  • npm test runs as expected.
  • npm run 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:
@nikosdouvlis
nikosdouvlis
requested a review
from a team
as a code ownerFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
requested review from
anagstef
and removed request for
a teamFebruary 28, 2024 22:13
@changeset-bot
changeset-botBot
commented
Feb 28, 2024•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 86eb801
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 4 packages
NameType
@clerk/clerk-jsPatch
@clerk/nextjsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
ccc301f to
91efa8fCompareFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v91efa8f
@clerk/clerk-js4.70.2-snapshot.v91efa8f
@clerk/clerk-expo0.20.7-snapshot.v91efa8f
@clerk/nextjs4.29.9-snapshot.v91efa8f
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v91efa8f --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v91efa8f --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v91efa8f --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v91efa8f --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
91efa8f to
c9a521bCompareFebruary 28, 2024 22:30
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
c9a521b to
41e6fdbCompareFebruary 29, 2024 03:02
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
desiprisg
desiprisg
approved these changes
Feb 29, 2024
View reviewed changes
@desiprisgdesiprisg
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v6eb1bf8
@clerk/clerk-js4.70.2-snapshot.v6eb1bf8
@clerk/clerk-expo0.20.7-snapshot.v6eb1bf8
@clerk/nextjs4.29.9-snapshot.v6eb1bf8
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v6eb1bf8 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v6eb1bf8 --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
6eb1bf8 to
1d4dfe6CompareFebruary 29, 2024 15:08
brkalow
brkalow
reviewed
Feb 29, 2024
View reviewed changes
Comment threadpackages/nextjs/src/app-router/client/invalidateCacheAction.ts
Outdated

 * https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
 */
export const invalidateCacheAction = async () => {
 cookies().delete(`__clerk_random_cookie_${Date.now()}`);
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ According to the docs linked, calling router.refresh() will clear the cache. Why do we need to use the cookies approach?
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the docs, router.refresh() invalidates the cache for the current router not for all routes. If we are at '/path' and the '/' route is cached, navigating to / will use the cached payload even after firing refresh()
See: https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, I read it as it invalidates the router cache, not just for the current route, but if what you have here works or addresses some issue you experienced with router.refresh() then lgtm 😀
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
 clerkNavRef.current = (to, opts) => {
 return new Promise<void>(res => {
 clerkNavPromiseBuffer.current.push(res);
 startTransition(() => {
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe removing the transition here will re-introduce the original issue, which is that state updates were happening during the router transition, or that the setActive call was not completing at all because of the navigation triggered by onBeforeSetActive.
Is there a way we can retain the use of the transition while keeping the buffer on the window?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll most likely keep using the transition API - this is removed temporarily so I can cut a snapshot version for testing
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setActive call was not completing at all because of the navigation triggered by onBeforeSetActive
Regarding this one, I never managed to reproduce a failed setActive because of us not listening to isPending
I think the issue was caused by the components being unmounted during navigation but I do agree that keep using transition state is the way to go here
Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx
Outdated

 router.refresh();
 router.push(window.location.href);
 }
 return invalidateCacheAction();
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we want to invalidate the router cache in onAfterSetActive? Why in before?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to invalidate the router cache before a navigation occurs, otherwise the navigation might not fire atll . Currently, the order is: setActive > onBeforeSetActive > beforeEmit() > onAfterSetActive
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
1d4dfe6 to
40af74cCompareFebruary 29, 2024 16:14
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v40af74c
@clerk/clerk-js4.70.2-snapshot.v40af74c
@clerk/clerk-expo0.20.7-snapshot.v40af74c
@clerk/nextjs4.29.9-snapshot.v40af74c
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v40af74c --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v40af74c --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v40af74c --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v40af74c --save-exact
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
5470ea6
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
40af74c to
5470ea6CompareFebruary 29, 2024 22:12
@nikosdouvlisnikosdouvlis
mentioned this pull request
Feb 29, 2024
 Merged

9 tasks
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
86eb801
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlis
commented
Mar 1, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Mar 1, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v86eb801
@clerk/clerk-js4.70.2-snapshot.v86eb801
@clerk/clerk-expo0.20.7-snapshot.v86eb801
@clerk/nextjs4.29.9-snapshot.v86eb801
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v86eb801 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v86eb801 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v86eb801 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v86eb801 --save-exact
@nikosdouvlis
nikosdouvlis
commented
Mar 19, 2024

Copy link


Copy Markdown

MemberAuthor
This released was included in the v5 beta release and so far everything seems to be working as expected.
However, we've had no other reports for unexpected behavior in v4. GIven that this fix could introduce breaking behavior for v4 apps, even if extremely unlikely, I'm closing this for now. We will merge and release if we receive any other reports.
@nikosdouvlis
nikosdouvlis
deleted the

nikos/fix-awaitable-navigation

branch
December 7, 2025 10:42
@jacekradkojacekradko
mentioned this pull request
Mar 5, 2026
 Merged

2 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@brkalowbrkalowbrkalow left review comments
@anagstefanagstefAwaiting requested review from anagstefanagstef is a code owner automatically assigned from clerk/team-sdk

+1 more reviewer

@desiprisgdesiprisgdesiprisg approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-jsnextjs

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@nikosdouvlis@clerk-cookie@brkalow@desiprisg

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Update useAwaitableNavigate to handle navigations between pages reliably by nikosdouvlis · Pull Request #2889 · clerk/javascript · GitHub
Skip to content
Update useAwaitableNavigate to handle navigations between pages reliably - #2889
Closed
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Closed
Update useAwaitableNavigate to handle navigations between pages reliably#2889
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Conversation
@nikosdouvlis
@nikosdouvlisnikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

Member
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
Description
Checklist
  • npm test runs as expected.
  • npm run 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:
@nikosdouvlis
nikosdouvlis
requested a review
from a team
as a code ownerFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
requested review from
anagstef
and removed request for
a teamFebruary 28, 2024 22:13
@changeset-bot
changeset-botBot
commented
Feb 28, 2024•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 86eb801
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 4 packages
NameType
@clerk/clerk-jsPatch
@clerk/nextjsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
ccc301f to
91efa8fCompareFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v91efa8f
@clerk/clerk-js4.70.2-snapshot.v91efa8f
@clerk/clerk-expo0.20.7-snapshot.v91efa8f
@clerk/nextjs4.29.9-snapshot.v91efa8f
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v91efa8f --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v91efa8f --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v91efa8f --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v91efa8f --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
91efa8f to
c9a521bCompareFebruary 28, 2024 22:30
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
c9a521b to
41e6fdbCompareFebruary 29, 2024 03:02
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
desiprisg
desiprisg
approved these changes
Feb 29, 2024
View reviewed changes
@desiprisgdesiprisg
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v6eb1bf8
@clerk/clerk-js4.70.2-snapshot.v6eb1bf8
@clerk/clerk-expo0.20.7-snapshot.v6eb1bf8
@clerk/nextjs4.29.9-snapshot.v6eb1bf8
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v6eb1bf8 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v6eb1bf8 --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
6eb1bf8 to
1d4dfe6CompareFebruary 29, 2024 15:08
brkalow
brkalow
reviewed
Feb 29, 2024
View reviewed changes
Comment threadpackages/nextjs/src/app-router/client/invalidateCacheAction.ts
Outdated

 * https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
 */
export const invalidateCacheAction = async () => {
 cookies().delete(`__clerk_random_cookie_${Date.now()}`);
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ According to the docs linked, calling router.refresh() will clear the cache. Why do we need to use the cookies approach?
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the docs, router.refresh() invalidates the cache for the current router not for all routes. If we are at '/path' and the '/' route is cached, navigating to / will use the cached payload even after firing refresh()
See: https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, I read it as it invalidates the router cache, not just for the current route, but if what you have here works or addresses some issue you experienced with router.refresh() then lgtm 😀
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
 clerkNavRef.current = (to, opts) => {
 return new Promise<void>(res => {
 clerkNavPromiseBuffer.current.push(res);
 startTransition(() => {
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe removing the transition here will re-introduce the original issue, which is that state updates were happening during the router transition, or that the setActive call was not completing at all because of the navigation triggered by onBeforeSetActive.
Is there a way we can retain the use of the transition while keeping the buffer on the window?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll most likely keep using the transition API - this is removed temporarily so I can cut a snapshot version for testing
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setActive call was not completing at all because of the navigation triggered by onBeforeSetActive
Regarding this one, I never managed to reproduce a failed setActive because of us not listening to isPending
I think the issue was caused by the components being unmounted during navigation but I do agree that keep using transition state is the way to go here
Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx
Outdated

 router.refresh();
 router.push(window.location.href);
 }
 return invalidateCacheAction();
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we want to invalidate the router cache in onAfterSetActive? Why in before?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to invalidate the router cache before a navigation occurs, otherwise the navigation might not fire atll . Currently, the order is: setActive > onBeforeSetActive > beforeEmit() > onAfterSetActive
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
1d4dfe6 to
40af74cCompareFebruary 29, 2024 16:14
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v40af74c
@clerk/clerk-js4.70.2-snapshot.v40af74c
@clerk/clerk-expo0.20.7-snapshot.v40af74c
@clerk/nextjs4.29.9-snapshot.v40af74c
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v40af74c --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v40af74c --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v40af74c --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v40af74c --save-exact
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
5470ea6
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
40af74c to
5470ea6CompareFebruary 29, 2024 22:12
@nikosdouvlisnikosdouvlis
mentioned this pull request
Feb 29, 2024
 Merged

9 tasks
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
86eb801
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlis
commented
Mar 1, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Mar 1, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v86eb801
@clerk/clerk-js4.70.2-snapshot.v86eb801
@clerk/clerk-expo0.20.7-snapshot.v86eb801
@clerk/nextjs4.29.9-snapshot.v86eb801
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v86eb801 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v86eb801 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v86eb801 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v86eb801 --save-exact
@nikosdouvlis
nikosdouvlis
commented
Mar 19, 2024

Copy link


Copy Markdown

MemberAuthor
This released was included in the v5 beta release and so far everything seems to be working as expected.
However, we've had no other reports for unexpected behavior in v4. GIven that this fix could introduce breaking behavior for v4 apps, even if extremely unlikely, I'm closing this for now. We will merge and release if we receive any other reports.
@nikosdouvlis
nikosdouvlis
deleted the

nikos/fix-awaitable-navigation

branch
December 7, 2025 10:42
@jacekradkojacekradko
mentioned this pull request
Mar 5, 2026
 Merged

2 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@brkalowbrkalowbrkalow left review comments
@anagstefanagstefAwaiting requested review from anagstefanagstef is a code owner automatically assigned from clerk/team-sdk

+1 more reviewer

@desiprisgdesiprisgdesiprisg approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-jsnextjs

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@nikosdouvlis@clerk-cookie@brkalow@desiprisg

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
Update useAwaitableNavigate to handle navigations between pages reliably by nikosdouvlis · Pull Request #2889 · clerk/javascript · GitHub
Skip to content
Update useAwaitableNavigate to handle navigations between pages reliably - #2889
Closed
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Closed
Update useAwaitableNavigate to handle navigations between pages reliably#2889
nikosdouvlis wants to merge 2 commits into
release/v4from 
nikos/fix-awaitable-navigation
Conversation
@nikosdouvlis
@nikosdouvlisnikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

Member
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
Description
Checklist
  • npm test runs as expected.
  • npm run 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:
@nikosdouvlis
nikosdouvlis
requested a review
from a team
as a code ownerFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
requested review from
anagstef
and removed request for
a teamFebruary 28, 2024 22:13
@changeset-bot
changeset-botBot
commented
Feb 28, 2024•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 86eb801
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 4 packages
NameType
@clerk/clerk-jsPatch
@clerk/nextjsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
ccc301f to
91efa8fCompareFebruary 28, 2024 22:13
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v91efa8f
@clerk/clerk-js4.70.2-snapshot.v91efa8f
@clerk/clerk-expo0.20.7-snapshot.v91efa8f
@clerk/nextjs4.29.9-snapshot.v91efa8f
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v91efa8f --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v91efa8f --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v91efa8f --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v91efa8f --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
91efa8f to
c9a521bCompareFebruary 28, 2024 22:30
@nikosdouvlis
nikosdouvlis
commented
Feb 28, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 28, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.vc9a521b
@clerk/clerk-js4.70.2-snapshot.vc9a521b
@clerk/clerk-expo0.20.7-snapshot.vc9a521b
@clerk/nextjs4.29.9-snapshot.vc9a521b
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.vc9a521b --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.vc9a521b --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.vc9a521b --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.vc9a521b --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
c9a521b to
41e6fdbCompareFebruary 29, 2024 03:02
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
desiprisg
desiprisg
approved these changes
Feb 29, 2024
View reviewed changes
@desiprisgdesiprisg
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v6eb1bf8
@clerk/clerk-js4.70.2-snapshot.v6eb1bf8
@clerk/clerk-expo0.20.7-snapshot.v6eb1bf8
@clerk/nextjs4.29.9-snapshot.v6eb1bf8
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v6eb1bf8 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v6eb1bf8 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v6eb1bf8 --save-exact
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
6eb1bf8 to
1d4dfe6CompareFebruary 29, 2024 15:08
brkalow
brkalow
reviewed
Feb 29, 2024
View reviewed changes
Comment threadpackages/nextjs/src/app-router/client/invalidateCacheAction.ts
Outdated

 * https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
 */
export const invalidateCacheAction = async () => {
 cookies().delete(`__clerk_random_cookie_${Date.now()}`);
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ According to the docs linked, calling router.refresh() will clear the cache. Why do we need to use the cookies approach?
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the docs, router.refresh() invalidates the cache for the current router not for all routes. If we are at '/path' and the '/' route is cached, navigating to / will use the cached payload even after firing refresh()
See: https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, I read it as it invalidates the router cache, not just for the current route, but if what you have here works or addresses some issue you experienced with router.refresh() then lgtm 😀
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
 clerkNavRef.current = (to, opts) => {
 return new Promise<void>(res => {
 clerkNavPromiseBuffer.current.push(res);
 startTransition(() => {
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe removing the transition here will re-introduce the original issue, which is that state updates were happening during the router transition, or that the setActive call was not completing at all because of the navigation triggered by onBeforeSetActive.
Is there a way we can retain the use of the transition while keeping the buffer on the window?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll most likely keep using the transition API - this is removed temporarily so I can cut a snapshot version for testing
@nikosdouvlisnikosdouvlisFeb 29, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setActive call was not completing at all because of the navigation triggered by onBeforeSetActive
Regarding this one, I never managed to reproduce a failed setActive because of us not listening to isPending
I think the issue was caused by the components being unmounted during navigation but I do agree that keep using transition state is the way to go here
Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx
Outdated

 router.refresh();
 router.push(window.location.href);
 }
 return invalidateCacheAction();
@brkalowbrkalowFeb 29, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we want to invalidate the router cache in onAfterSetActive? Why in before?
@nikosdouvlisnikosdouvlisFeb 29, 2024

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to invalidate the router cache before a navigation occurs, otherwise the navigation might not fire atll . Currently, the order is: setActive > onBeforeSetActive > beforeEmit() > onAfterSetActive
Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

Comment threadpackages/nextjs/src/app-router/client/useAwaitableNavigate.ts
Outdated

@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
1d4dfe6 to
40af74cCompareFebruary 29, 2024 16:14
@nikosdouvlis
nikosdouvlis
commented
Feb 29, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Feb 29, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v40af74c
@clerk/clerk-js4.70.2-snapshot.v40af74c
@clerk/clerk-expo0.20.7-snapshot.v40af74c
@clerk/nextjs4.29.9-snapshot.v40af74c
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v40af74c --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v40af74c --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v40af74c --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v40af74c --save-exact
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
5470ea6
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlisforce-pushed
the
nikos/fix-awaitable-navigation
branch
from
40af74c to
5470ea6CompareFebruary 29, 2024 22:12
@nikosdouvlisnikosdouvlis
mentioned this pull request
Feb 29, 2024
 Merged

9 tasks
@nikosdouvlis
fix(nextjs,clerk-js): Make useAwaitableNavigate handle navigations be…
86eb801
…tween pages reliably
We need to use window to store the reference to the buffer, as ClerkProvider might be unmounted and remounted during navigations. If we use a ref, it will be reset when ClerkProvider is unmounted
@nikosdouvlis
nikosdouvlis
commented
Mar 1, 2024

Copy link


Copy Markdown

MemberAuthor
!snapshot
@clerk-cookie
clerk-cookie
commented
Mar 1, 2024

Copy link


Copy Markdown

Collaborator
Hey @nikosdouvlis - the snapshot version command generated the following package versions:
PackageVersion
@clerk/chrome-extension0.6.12-snapshot.v86eb801
@clerk/clerk-js4.70.2-snapshot.v86eb801
@clerk/clerk-expo0.20.7-snapshot.v86eb801
@clerk/nextjs4.29.9-snapshot.v86eb801
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension
npm i @clerk/chrome-extension@0.6.12-snapshot.v86eb801 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@4.70.2-snapshot.v86eb801 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@0.20.7-snapshot.v86eb801 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@4.29.9-snapshot.v86eb801 --save-exact
@nikosdouvlis
nikosdouvlis
commented
Mar 19, 2024

Copy link


Copy Markdown

MemberAuthor
This released was included in the v5 beta release and so far everything seems to be working as expected.
However, we've had no other reports for unexpected behavior in v4. GIven that this fix could introduce breaking behavior for v4 apps, even if extremely unlikely, I'm closing this for now. We will merge and release if we receive any other reports.
@nikosdouvlis
nikosdouvlis
deleted the

nikos/fix-awaitable-navigation

branch
December 7, 2025 10:42
@jacekradkojacekradko
mentioned this pull request
Mar 5, 2026
 Merged

2 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@brkalowbrkalowbrkalow left review comments
@anagstefanagstefAwaiting requested review from anagstefanagstef is a code owner automatically assigned from clerk/team-sdk

+1 more reviewer

@desiprisgdesiprisgdesiprisg approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-jsnextjs

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@nikosdouvlis@clerk-cookie@brkalow@desiprisg