Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(clerk-js): Make use of browser navigator locks property #5156

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

alexcarpenter
Copy link
Member

@alexcarpenter alexcarpenter commented Feb 13, 2025

Description

Make use of browser navigator locks property when possible to avoid localstorage usage caused by use of browser-tabs-lock. Browser support is good, but will fallback to browser-tabs-lock usage when necessary.

Fixes SDKI-855
Fixes #5016

Checklist

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

Type of change

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

Copy link

changeset-bot bot commented Feb 13, 2025

🦋 Changeset detected

Latest commit: 85f74d9

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

This PR includes changesets to release 3 packages
Name Type
@clerk/clerk-js Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch

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

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

Copy link

vercel bot commented Feb 13, 2025

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

Name Status Preview Comments Updated (UTC)
clerk-js-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 13, 2025 8:21pm

@alexcarpenter
Copy link
Member Author

!snapshot

@clerk-cookie
Copy link
Collaborator

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

Package Version
@clerk/agent-toolkit 0.0.3-snapshot.v20250213201843
@clerk/astro 2.2.1-snapshot.v20250213201843
@clerk/backend 1.24.2-snapshot.v20250213201843
@clerk/chrome-extension 2.2.10-snapshot.v20250213201843
@clerk/clerk-js 5.53.0-snapshot.v20250213201843
@clerk/elements 0.22.23-snapshot.v20250213201843
@clerk/clerk-expo 2.7.8-snapshot.v20250213201843
@clerk/expo-passkeys 0.1.21-snapshot.v20250213201843
@clerk/express 1.3.49-snapshot.v20250213201843
@clerk/fastify 2.1.22-snapshot.v20250213201843
@clerk/nextjs 6.12.0-snapshot.v20250213201843
@clerk/nuxt 1.1.5-snapshot.v20250213201843
@clerk/clerk-react 5.23.0-snapshot.v20250213201843
@clerk/react-router 1.1.0-snapshot.v20250213201843
@clerk/remix 4.5.0-snapshot.v20250213201843
@clerk/shared 2.22.0-snapshot.v20250213201843
@clerk/tanstack-start 0.10.0-snapshot.v20250213201843
@clerk/testing 1.4.23-snapshot.v20250213201843
@clerk/ui 0.3.24-snapshot.v20250213201843
@clerk/vue 1.2.1-snapshot.v20250213201843

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

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/ui

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

@alexcarpenter alexcarpenter marked this pull request as ready for review February 14, 2025 15:31
@alexcarpenter alexcarpenter requested a review from a team February 14, 2025 15:31
@@ -10,6 +10,20 @@ export function SafeLock(key: string) {
});

const acquireLockAndRun = async (cb: () => unknown) => {
if ('locks' in navigator && isSecureContext) {
const controller = new AbortController();
const lockTimeout = setTimeout(() => controller.abort(), 4999);
Copy link
Member

Choose a reason for hiding this comment

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

Curious about the 4999 here. 🤔

Copy link
Member

Choose a reason for hiding this comment

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

It was one ms less than the the 5s polling interval 😅

@alexcarpenter alexcarpenter marked this pull request as draft February 14, 2025 18:43
@alexcarpenter alexcarpenter requested review from nikosdouvlis and a team February 20, 2025 17:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Clerk's use of localStorage is not safe enough
5 participants