feat(backend,clerk-js,shared): Introduce suffixed / un-suffixed cookies

[dimkl]

Description

Introduce suffixed / un-suffixed cookies to support multiple apps in the same domain.

TODOs

• [ ] add integration test
• [ ] add tests

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
• [x] 🌟 New feature
• [ ] 🔨 Breaking change
• [ ] 📖 Refactoring / dependency upgrade / documentation
• [ ] other:

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: e73b3a27491f371368b52e2734b4e024610badee

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

This PR includes changesets to release 13 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/backend	Minor
@clerk/shared	Minor
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/nextjs	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/elements	Patch
@clerk/clerk-react	Patch
@clerk/testing	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

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: ec9b127877d166c8933b85ea9d3b08f37220826f

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

This PR includes changesets to release 12 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/backend	Minor
@clerk/shared	Minor
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/nextjs	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/clerk-react	Patch
@clerk/testing	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

[dimkl]

Would you consider this example of implementing the same pattern more readable and preferrable?

//
// @clerk/shared
//
type Operation<T> = (...args: any[]) => T;
const pipeline = <T>(operations: Operation<T>[], ...args: any[]) =>
  operations.map((o) => o(...args)).find(Boolean);

//
// @clerk/backend
//
const getCookieSuffixFromPk = (publishableKey: string): string => {
  return publishableKey.split("_").pop() || "";
};

const unSuffixCookie = (publishableKey: string) => {
  return (cookieDirective: string) => {
    //...
  };
};

const suffixCookie = (publishableKey: string) => {
  return (cookieDirective: string) => {
    //...
  };
};

// Example of executing the pipeline

const cookieDirectives = ["__session=aloha"];
cookieDirectives.map((cookieDirective) =>
  pipeline(
    [suffixCookie("pk_test_"), unSuffixCookie("pk_test_")],
    cookieDirective
  )
);

//
// @clerk/clerk-js
//

import { createCookieHandler } from "@clerk/shared/cookie";

const getCookie = () => {
  return (cookieName: string) => {
    //...
  };
};

const getSuffixedCookie = (publishableKey: string) => {
  return (cookieName: string) => {
    //...
  };
};

// Operations

const setCookie = () => {
  return (cookieName: string, value: string) => {
    //...
  };
};

const setSuffixedCookie = (publishableKey: string) => {
  return (cookieName: string, value: string) => {
    //...
  };
};

const removeCookie = () => {
  return (cookieName: string, value: string) => {
    //...
  };
};

const removeSuffixedCookie = (publishableKey: string) => {
  return (cookieName: string, value: string) => {
    //...
  };
};

// pipelines

const getPipeline = (cookieName: string) =>
  pipeline([getCookie(), getSuffixedCookie("pk_test_")], cookieName);
const setPipeline = (cookieName: string, value: string) =>
  pipeline([setCookie(), setSuffixedCookie("pk_test_")], cookieName, value);
const removePipeline = (cookieName: string) =>
  pipeline([removeCookie(), removeSuffixedCookie("pk_test_")], cookieName);

// Example of executing the pipeline

getPipeline("__session");
setPipeline("__session", "value");
removePipeline("__session");

cc: @BRKalow , @nikosdouvlis

[dimkl]

Closing this in favor of another implementation : https://github.com/clerk/javascript/pull/3506