feat(chrome-extension): WebSSO with URL-based session syncing [SDK-836]

[tmilewski]

Description

Expand the ability for @clerk/chrome-extension WebSSO to sync with host applications which use URL-based session syncing.

How to Update

WebSSO Local Development Host Permissions:

Add *://localhost:*/* to the host_permissions array in your manifest.json file:

{
  "host_permissions": ["*://localhost:*/*"]
}

If you're using a local domain other than localhost, you'll want replace that entry with your domain: *://<DOMAIN>/*

{
  "host_permissions": ["*://<DOMAIN>/*"]
}

WebSSO Provider settings:

<ClerkProvider
  publishableKey={publishableKey}
  routerPush={to => navigate(to)}
  routerReplace={to => navigate(to, { replace: true })}
  syncSessionWithTab

  // tokenCache is now storageCache (See below)
  storageCache={/* ... */}

  // [Development Only]: If the host application isn't on 
  // `http://localhost`, you can provide it here:
  syncSessionHost="http://<DOMAIN>"
>

WebSSO Storage Cache Interface:

With the prop change from tokenCache to storageCache, the interface has been expanded to allow for more flexibility.

The new interface is as follows:

type StorageCache = {
  createKey: (...keys: string[]) => string;
  get: <T = any>(key: string) => Promise<T>;
  remove: (key: string) => Promise<void>;
  set: (key: string, value: string) => Promise<void>;
};

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:

Packages affected

• @clerk/backend
• @clerk/chrome-extension
• @clerk/clerk-js
• @clerk/clerk-expo
• @clerk/fastify
• gatsby-plugin-clerk
• @clerk/localizations
• @clerk/nextjs
• @clerk/clerk-react
• @clerk/remix
• @clerk/clerk-sdk-node
• @clerk/shared
• @clerk/themes
• @clerk/types
• build/tooling/chore

[changeset-bot]

🦋 Changeset detected

Latest commit: 75c8d36

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

This PR includes changesets to release 1 package

Name	Type
@clerk/chrome-extension	Major

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

[dimkl]

@SokratisVidros Could you also take a look?

[tmilewski]

!snapshot

[clerk-cookie]

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

Package	Version
@clerk/backend	1.0.1-snapshot.vb99c163
@clerk/chrome-extension	1.0.1-snapshot.vb99c163
@clerk/clerk-js	5.0.1-snapshot.vb99c163
@clerk/clerk-expo	1.0.1-snapshot.vb99c163
@clerk/fastify	1.0.1-snapshot.vb99c163
gatsby-plugin-clerk	5.0.1-snapshot.vb99c163
@clerk/localizations	2.0.1-snapshot.vb99c163
@clerk/nextjs	5.0.1-snapshot.vb99c163
@clerk/clerk-react	5.0.1-snapshot.vb99c163
@clerk/remix	4.0.1-snapshot.vb99c163
@clerk/clerk-sdk-node	5.0.1-snapshot.vb99c163
@clerk/shared	2.0.1-snapshot.vb99c163
@clerk/themes	2.0.1-snapshot.vb99c163
@clerk/types	4.0.1-snapshot.vb99c163

Tip: Use the snippet copy button below to quickly install the required packages.
@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/clerk-expo

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

@clerk/fastify

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

gatsby-plugin-clerk

npm i [email protected] --save-exact

@clerk/localizations

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

@clerk/nextjs

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

@clerk/clerk-react

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

@clerk/remix

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

@clerk/clerk-sdk-node

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

@clerk/shared

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

@clerk/themes

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

@clerk/types

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

[pavelbinar]

Hi guys 👋🏻
Can you please add storageCache to the @clerk/clerk-react as well?
I am writing an desktop app running a react app in the web-view which does not support cookies, but does the local storage.

I would like to use the ClerkProvider in @clerk/clerk-react with storageCache option.