fix(nextjs): url-based session syncing for auth() helpers (#3334)

Co-authored-by: Lennart <lekoarts@gmail.com>
clerk · May 7, 2024 · 4ae79af · 4ae79af
1 parent 39265d9
commit 4ae79af
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 6 deletions.
diff --git a/.changeset/late-readers-pretend.md b/.changeset/late-readers-pretend.md
@@ -0,0 +1,6 @@
+---
+'@clerk/backend': patch
+'@clerk/nextjs': patch
+---
+
+Pass `devBrowserToken` to `createRedirect()` to ensure methods from `auth()` that trigger redirects correctly pass the dev browser token for URL-based session syncing.
diff --git a/packages/backend/src/__tests__/createRedirect.test.ts b/packages/backend/src/__tests__/createRedirect.test.ts
@@ -244,5 +244,23 @@ export default (QUnit: QUnit) => {
         ),
       );
     });
+
+    test('passed dev browser when cross-origin redirect in dev', assert => {
+      const redirectAdapterSpy = sinon.spy(_url => 'redirectAdapterValue');
+      const { redirectToSignUp } = createRedirect({
+        baseUrl: 'http://www.clerk.com',
+        devBrowserToken: 'deadbeef',
+        redirectAdapter: redirectAdapterSpy,
+        publishableKey: 'pk_test_aW5jbHVkZWQua2F0eWRpZC05Mi5jbGVyay5hY2NvdW50cy5kZXYk',
+      });
+
+      const result = redirectToSignUp({ returnBackUrl });
+      assert.equal(result, 'redirectAdapterValue');
+      assert.ok(
+        redirectAdapterSpy.calledWith(
+          `https://included.katydid-92.accounts.dev/sign-up?redirect_url=${encodedUrl}&__clerk_db_jwt=deadbeef`,
+        ),
+      );
+    });
   });
 };
diff --git a/packages/backend/src/createRedirect.ts b/packages/backend/src/createRedirect.ts
@@ -1,6 +1,12 @@
+import { constants } from './constants';
 import { errorThrower, parsePublishableKey } from './util/shared';
 
-const buildUrl = (_baseUrl: string | URL, _targetUrl: string | URL, _returnBackUrl?: string | URL | null) => {
+const buildUrl = (
+  _baseUrl: string | URL,
+  _targetUrl: string | URL,
+  _returnBackUrl?: string | URL | null,
+  _devBrowserToken?: string | null,
+) => {
   if (_baseUrl === '') {
     return legacyBuildUrl(_targetUrl.toString(), _returnBackUrl?.toString());
   }
@@ -12,6 +18,10 @@ const buildUrl = (_baseUrl: string | URL, _targetUrl: string | URL, _returnBackU
   if (returnBackUrl) {
     res.searchParams.set('redirect_url', returnBackUrl.toString());
   }
+  // For cross-origin redirects, we need to pass the dev browser token for URL session syncing
+  if (_devBrowserToken && baseUrl.hostname !== res.hostname) {
+    res.searchParams.set(constants.Cookies.DevBrowser, _devBrowserToken);
+  }
   return res.toString();
 };
 
@@ -66,6 +76,7 @@ export type RedirectFun<ReturnType> = (params?: RedirectToParams) => ReturnType;
  */
 type CreateRedirect = <ReturnType>(params: {
   publishableKey: string;
+  devBrowserToken?: string;
   redirectAdapter: RedirectAdapter<ReturnType>;
   baseUrl: URL | string;
   signInUrl?: URL | string;
@@ -77,23 +88,29 @@ type CreateRedirect = <ReturnType>(params: {
 
 export const createRedirect: CreateRedirect = params => {
   const { publishableKey, redirectAdapter, signInUrl, signUpUrl, baseUrl } = params;
-  const frontendApi = parsePublishableKey(publishableKey)?.frontendApi;
+  const parsedPublishableKey = parsePublishableKey(publishableKey);
+  const frontendApi = parsedPublishableKey?.frontendApi;
+  const isDevelopment = parsedPublishableKey?.instanceType === 'development';
   const accountsBaseUrl = buildAccountsBaseUrl(frontendApi);
 
   const redirectToSignUp = ({ returnBackUrl }: RedirectToParams = {}) => {
     if (!signUpUrl && !accountsBaseUrl) {
       errorThrower.throwMissingPublishableKeyError();
     }
     const accountsSignUpUrl = `${accountsBaseUrl}/sign-up`;
-    return redirectAdapter(buildUrl(baseUrl, signUpUrl || accountsSignUpUrl, returnBackUrl));
+    return redirectAdapter(
+      buildUrl(baseUrl, signUpUrl || accountsSignUpUrl, returnBackUrl, isDevelopment ? params.devBrowserToken : null),
+    );
   };
 
   const redirectToSignIn = ({ returnBackUrl }: RedirectToParams = {}) => {
     if (!signInUrl && !accountsBaseUrl) {
       errorThrower.throwMissingPublishableKeyError();
     }
     const accountsSignInUrl = `${accountsBaseUrl}/sign-in`;
-    return redirectAdapter(buildUrl(baseUrl, signInUrl || accountsSignInUrl, returnBackUrl));
+    return redirectAdapter(
+      buildUrl(baseUrl, signInUrl || accountsSignInUrl, returnBackUrl, isDevelopment ? params.devBrowserToken : null),
+    );
   };
 
   return { redirectToSignUp, redirectToSignIn };

diff --git a/packages/nextjs/src/app-router/server/auth.ts b/packages/nextjs/src/app-router/server/auth.ts
@@ -1,5 +1,5 @@
 import type { AuthObject, RedirectFun } from '@clerk/backend/internal';
-import { createClerkRequest, createRedirect } from '@clerk/backend/internal';
+import { constants, createClerkRequest, createRedirect } from '@clerk/backend/internal';
 import { notFound, redirect } from 'next/navigation';
 
 import { buildClerkProps } from '../../server/buildClerkProps';
@@ -23,9 +23,15 @@ export const auth = (): Auth => {
   const clerkUrl = getAuthKeyFromRequest(request, 'ClerkUrl');
 
   const redirectToSignIn: RedirectFun<never> = (opts = {}) => {
+    const clerkRequest = createClerkRequest(request);
+    const devBrowserToken =
+      clerkRequest.clerkUrl.searchParams.get(constants.Cookies.DevBrowser) ||
+      clerkRequest.cookies.get(constants.Cookies.DevBrowser);
+
     return createRedirect({
       redirectAdapter: redirect,
-      baseUrl: createClerkRequest(request).clerkUrl.toString(),
+      devBrowserToken: devBrowserToken,
+      baseUrl: clerkRequest.clerkUrl.toString(),
       // TODO: Support runtime-value configuration of these options
       // via setting and reading headers from clerkMiddleware
       publishableKey: PUBLISHABLE_KEY,