feat(clerk-js): Set __clerk_suffixed_cookies cookie on custom develop…

…ment domains

packages/clerk-js/src/core/auth/AuthCookieService.ts

@@ -9,6 +9,8 @@ import type { ClientUatCookieHandler } from './cookies/clientUat';
 import { createClientUatCookie } from './cookies/clientUat';
 import type { SessionCookieHandler } from './cookies/session';
 import { createSessionCookie } from './cookies/session';
+import type { SuffixedCookiesCookieHandler } from './cookies/suffixedCookies';
+import { createSuffixedCookiesCookie } from './cookies/suffixedCookies';
 import type { DevBrowser } from './devBrowser';
 import { createDevBrowser } from './devBrowser';
 import { SessionCookiePoller } from './SessionCookiePoller';
@@ -38,6 +40,7 @@ export class AuthCookieService {
  private clientUat: ClientUatCookieHandler;
  private sessionCookie: SessionCookieHandler;
  private devBrowser: DevBrowser;
+ private suffixedCookies: SuffixedCookiesCookieHandler;
 
  constructor(private clerk: Clerk, fapiClient: FapiClient) {
  // set cookie on token update
@@ -56,6 +59,7 @@ export class AuthCookieService {
  fapiClient,
  publishableKey: clerk.publishableKey,
  });
+ this.suffixedCookies = createSuffixedCookiesCookie(clerk.publishableKey);
  }
 
  // TODO(@dimkl): Replace this method call with an event listener to decouple Clerk with setEnvironment
@@ -73,6 +77,7 @@ export class AuthCookieService {
 
  public async setupDevelopment() {
  await this.devBrowser.setup();
+ this.suffixedCookies.set(true);
  }
 
  public setupProduction() {

packages/clerk-js/src/core/auth/cookies/suffixedCookies.ts

@@ -0,0 +1,35 @@
+import { createCookieHandler } from '@clerk/shared/cookie';
+import { addYears } from '@clerk/shared/date';
+import { getSuffixedCookieName } from '@clerk/shared/keys';
+
+import { inCrossOriginIframe } from '../../../utils';
+
+const SUFFIXED_COOKIES_COOKIE_NAME = '__clerk_suffixed_cookies';
+
+export type SuffixedCookiesCookieHandler = {
+ set: (enabled: boolean) => void;
+};
+
+/**
+ * Create JS cookie as hint for the backend SDKs to allow them identify if the suffixed
+ * cookies are supported in ClerkJS.
+ * This cookie will be set by the ClerkJS in development instances with custom development domains
+ * (eg host != frontendApi eTLD+1 domain) and by FAPI on all the other cases.
+ */
+export const createSuffixedCookiesCookie = (publishableKey: string): SuffixedCookiesCookieHandler => {
+ const suffixedCookiesCookie = createCookieHandler(
+ getSuffixedCookieName(SUFFIXED_COOKIES_COOKIE_NAME, publishableKey),
+ );
+
+ const set = (enabled: boolean) => {
+ const expires = addYears(Date.now(), 1);
+ const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
+ const secure = window.location.protocol === 'https:';
+
+ suffixedCookiesCookie.set(enabled.toString(), { expires, sameSite, secure });
+ };
+
+ return {
+ set,
+ };
+};