fix(react-router): Forward redirect URL options from middleware to client state (#8622)

Author: wobsoriano

.changeset/plain-apes-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@clerk/react-router": patch
+---
+
+Forward redirect URL options from middleware to client state.

packages/react-router/src/server/__tests__/clerkMiddleware.test.ts

@@ -79,7 +79,10 @@ describe('clerkMiddleware', () => {
     });
 
     expect(mockContext.set).toHaveBeenCalledWith(authFnContext, expect.any(Function));
-    expect(mockContext.set).toHaveBeenCalledWith(requestStateContext, mockRequestState);
+    expect(mockContext.set).toHaveBeenCalledWith(
+      requestStateContext,
+      expect.objectContaining({ requestState: mockRequestState }),
+    );
 
     expect(mockNext).toHaveBeenCalled();
 
@@ -119,6 +122,54 @@ describe('clerkMiddleware', () => {
     expect(mockLoadOptions).toHaveBeenCalledWith(args, options);
   });
 
+  it('should set redirect URL options from loadOptions in additionalStateContext', async () => {
+    mockLoadOptions.mockReturnValue({
+      audience: '',
+      authorizedParties: [],
+      signInUrl: '',
+      signUpUrl: '',
+      secretKey: 'sk_test_...',
+      publishableKey: 'pk_test_...',
+      signInForceRedirectUrl: '/dashboard',
+      signUpForceRedirectUrl: '/welcome',
+      signInFallbackRedirectUrl: '/home',
+      signUpFallbackRedirectUrl: '/home',
+    } as unknown as ReturnType<typeof loadOptions>);
+
+    const mockRequestState = {
+      status: AuthStatus.SignedIn,
+      headers: new Headers(),
+      toAuth: vi.fn().mockReturnValue({ userId: 'user_xxx', tokenType: TokenType.SessionToken }),
+    };
+
+    mockClerkClient.mockReturnValue({
+      authenticateRequest: vi.fn().mockResolvedValue(mockRequestState),
+    } as unknown as ClerkClient);
+
+    const middleware = clerkMiddleware();
+    const args = {
+      request: new Request('http://clerk.com'),
+      context: mockContext,
+    } as LoaderFunctionArgs;
+
+    mockNext.mockResolvedValue(new Response('OK'));
+
+    await middleware(args, mockNext);
+
+    expect(mockContext.set).toHaveBeenCalledWith(
+      requestStateContext,
+      expect.objectContaining({
+        requestState: mockRequestState,
+        additionalState: expect.objectContaining({
+          signInForceRedirectUrl: '/dashboard',
+          signUpForceRedirectUrl: '/welcome',
+          signInFallbackRedirectUrl: '/home',
+          signUpFallbackRedirectUrl: '/home',
+        }),
+      }),
+    );
+  });
+
   it('should append request state headers to response', async () => {
     const mockRequestState = {
       status: AuthStatus.SignedIn,

packages/react-router/src/server/__tests__/rootAuthLoader.test.ts

@@ -12,16 +12,21 @@ describe('rootAuthLoader', () => {
   });
 
   describe('with middleware context', () => {
+    const mockRequestState = {
+      toAuth: vi.fn().mockImplementation(() => ({
+        userId: 'user_xxx',
+        tokenType: TokenType.SessionToken,
+      })),
+      headers: new Headers(),
+      status: 'signed-in',
+    };
+
     const mockContext = {
       get: vi.fn().mockImplementation(contextKey => {
         if (contextKey === requestStateContext) {
           return {
-            toAuth: vi.fn().mockImplementation(() => ({
-              userId: 'user_xxx',
-              tokenType: TokenType.SessionToken,
-            })),
-            headers: new Headers(),
-            status: 'signed-in',
+            requestState: mockRequestState,
+            additionalState: {},
           };
         }
         if (contextKey === authFnContext) {
@@ -101,5 +106,39 @@ describe('rootAuthLoader', () => {
 
       expect(result).toHaveProperty('clerkState');
     });
+
+    it('should forward redirect URL options from additionalState into clerkState', async () => {
+      const mockContext2 = {
+        get: vi.fn().mockImplementation(contextKey => {
+          if (contextKey === requestStateContext) {
+            return {
+              requestState: mockRequestState,
+              additionalState: {
+                signInForceRedirectUrl: '/dashboard',
+                signUpForceRedirectUrl: '/welcome',
+                signInFallbackRedirectUrl: '/home',
+                signUpFallbackRedirectUrl: '/home',
+              },
+            };
+          }
+          if (contextKey === authFnContext) {
+            return vi.fn().mockReturnValue({ userId: 'user_xxx', tokenType: TokenType.SessionToken });
+          }
+          return null;
+        }),
+        set: vi.fn(),
+      };
+
+      const result = (await rootAuthLoader({
+        context: mockContext2,
+        request: new Request('http://clerk.com'),
+      } as LoaderFunctionArgs)) as any;
+
+      const internalState = result.clerkState.__internal_clerk_state;
+      expect(internalState.__signInForceRedirectUrl).toBe('/dashboard');
+      expect(internalState.__signUpForceRedirectUrl).toBe('/welcome');
+      expect(internalState.__signInFallbackRedirectUrl).toBe('/home');
+      expect(internalState.__signUpFallbackRedirectUrl).toBe('/home');
+    });
   });
 });

packages/react-router/src/server/clerkMiddleware.ts

@@ -9,11 +9,16 @@ import { createContext } from 'react-router';
 import { clerkClient } from './clerkClient';
 import { resolveKeysWithKeylessFallback } from './keyless/utils';
 import { loadOptions } from './loadOptions';
-import type { ClerkMiddlewareOptions } from './types';
+import type { AdditionalStateOptions, ClerkMiddlewareOptions } from './types';
 import { patchRequest } from './utils';
 
+type RequestStateContextValue = {
+  requestState: RequestState<any>;
+  additionalState: AdditionalStateOptions;
+};
+
 export const authFnContext = createContext<((options?: PendingSessionOptions) => AuthObject) | null>(null);
-export const requestStateContext = createContext<RequestState<any> | null>(null);
+export const requestStateContext = createContext<RequestStateContextValue | null>(null);
 
 /**
  * Middleware that integrates Clerk authentication into your React Router application.
@@ -83,11 +88,6 @@ export const clerkMiddleware = (options?: ClerkMiddlewareOptions): MiddlewareFun
       acceptsToken: 'any',
     });
 
-    Object.assign(requestState, {
-      __keylessClaimUrl,
-      __keylessApiKeysUrl,
-    });
-
     const locationHeader = requestState.headers.get(constants.Headers.Location);
     if (locationHeader) {
       handleNetlifyCacheInDevInstance({
@@ -104,7 +104,17 @@ export const clerkMiddleware = (options?: ClerkMiddlewareOptions): MiddlewareFun
     }
 
     args.context.set(authFnContext, (opts?: PendingSessionOptions) => requestState.toAuth(opts));
-    args.context.set(requestStateContext, requestState);
+    args.context.set(requestStateContext, {
+      requestState,
+      additionalState: {
+        __keylessClaimUrl,
+        __keylessApiKeysUrl,
+        signInForceRedirectUrl: loadedOptions.signInForceRedirectUrl,
+        signUpForceRedirectUrl: loadedOptions.signUpForceRedirectUrl,
+        signInFallbackRedirectUrl: loadedOptions.signInFallbackRedirectUrl,
+        signUpFallbackRedirectUrl: loadedOptions.signUpFallbackRedirectUrl,
+      },
+    });
 
     const response = await next();
 

packages/react-router/src/server/rootAuthLoader.ts

@@ -4,6 +4,7 @@ import type { LoaderFunctionArgs } from 'react-router';
 import { invalidRootLoaderCallbackReturn } from '../utils/errors';
 import { authFnContext, requestStateContext } from './clerkMiddleware';
 import type {
+  AdditionalStateOptions,
   LoaderFunctionArgsWithAuth,
   LoaderFunctionReturn,
   RootAuthLoaderCallback,
@@ -40,14 +41,15 @@ interface RootAuthLoader {
 async function processRootAuthLoader(
   args: LoaderFunctionArgs,
   requestState: RequestState,
+  additionalState: AdditionalStateOptions,
   handler?: RootAuthLoaderCallback<any>,
 ): Promise<LoaderFunctionReturn> {
   const hasMiddleware = IsOptIntoMiddleware(args.context) && !!args.context.get(authFnContext);
   const includeClerkHeaders = !hasMiddleware;
 
   if (!handler) {
     // if the user did not provide a handler, simply inject requestState into an empty response
-    const { clerkState } = getResponseClerkState(requestState, args.context);
+    const { clerkState } = getResponseClerkState(requestState, args.context, additionalState);
     return {
       ...clerkState,
     };
@@ -69,7 +71,13 @@ async function processRootAuthLoader(
       }
       // clone and try to inject requestState into all json-like responses
       // if this fails, the user probably didn't return a json object or a valid json string
-      return injectRequestStateIntoResponse(handlerResult, requestState, args.context, includeClerkHeaders);
+      return injectRequestStateIntoResponse(
+        handlerResult,
+        requestState,
+        args.context,
+        additionalState,
+        includeClerkHeaders,
+      );
     } catch {
       throw new Error(invalidRootLoaderCallbackReturn);
     }
@@ -83,6 +91,7 @@ async function processRootAuthLoader(
         new Response(JSON.stringify(handlerResult.data), handlerResult.init ?? undefined),
         requestState,
         args.context,
+        additionalState,
         includeClerkHeaders,
       );
     } catch {
@@ -91,7 +100,7 @@ async function processRootAuthLoader(
   }
 
   // If the return value of the user's handler is null or a plain object, return plain object with streaming support
-  const { clerkState } = getResponseClerkState(requestState, args.context);
+  const { clerkState } = getResponseClerkState(requestState, args.context, additionalState);
 
   return {
     ...(handlerResult ?? {}),
@@ -111,13 +120,14 @@ export const rootAuthLoader: RootAuthLoader = async (
   const handler = typeof handlerOrOptions === 'function' ? handlerOrOptions : undefined;
 
   const hasMiddlewareFlag = IsOptIntoMiddleware(args.context);
-  const requestState = hasMiddlewareFlag && args.context.get(requestStateContext);
+  const contextValue = hasMiddlewareFlag && args.context.get(requestStateContext);
 
-  if (!requestState) {
+  if (!contextValue) {
     throw new Error(
       'Clerk: clerkMiddleware() not detected. Make sure you have installed the clerkMiddleware in your root route.',
     );
   }
 
-  return processRootAuthLoader(args, requestState, handler);
+  const { requestState, additionalState } = contextValue;
+  return processRootAuthLoader(args, requestState, additionalState, handler);
 };

packages/react-router/src/server/types.ts

@@ -68,6 +68,15 @@ export interface KeylessUrls {
   __keylessApiKeysUrl?: string;
 }
 
+export type AdditionalStateOptions = SignInFallbackRedirectUrl &
+  SignUpFallbackRedirectUrl &
+  SignInForceRedirectUrl &
+  SignUpForceRedirectUrl &
+  KeylessUrls;
+
+/**
+ * @deprecated This type is no longer used internally. Use `AdditionalStateOptions` instead.
+ */
 export type RequestStateWithRedirectUrls = RequestState &
   SignInForceRedirectUrl &
   SignInFallbackRedirectUrl &

packages/react-router/src/server/utils.ts

@@ -1,10 +1,11 @@
+import type { RequestState } from '@clerk/backend/internal';
 import { constants, debugRequestState } from '@clerk/backend/internal';
 import { parse as parseCookie } from 'cookie';
 import type { AppLoadContext, UNSAFE_DataWithResponseInit } from 'react-router';
 
 import { getPublicEnvVariables } from '../utils/env';
 import { canUseKeyless } from '../utils/feature-flags';
-import type { RequestStateWithRedirectUrls } from './types';
+import type { AdditionalStateOptions } from './types';
 
 export function isResponse(value: any): value is Response {
   return (
@@ -51,14 +52,15 @@ export const IsOptIntoMiddleware = (context: AppLoadContext) => {
 
 export const injectRequestStateIntoResponse = async (
   response: Response,
-  requestState: RequestStateWithRedirectUrls,
+  requestState: RequestState,
   context: AppLoadContext,
+  additionalStateOptions: AdditionalStateOptions = {},
   includeClerkHeaders = false,
 ) => {
   const clone = new Response(response.body, response);
   const data = await clone.json();
 
-  const { clerkState, headers } = getResponseClerkState(requestState, context);
+  const { clerkState, headers } = getResponseClerkState(requestState, context, additionalStateOptions);
 
   // set the correct content-type header in case the user returned a `Response` directly
   clone.headers.set(constants.Headers.ContentType, constants.ContentTypes.Json);
@@ -78,9 +80,14 @@ export const injectRequestStateIntoResponse = async (
  *
  * @internal
  */
-export function getResponseClerkState(requestState: RequestStateWithRedirectUrls, context: AppLoadContext) {
-  const { reason, message, isSignedIn, __keylessClaimUrl, __keylessApiKeysUrl, ...rest } = requestState;
+export function getResponseClerkState(
+  requestState: RequestState,
+  context: AppLoadContext,
+  additionalStateOptions: AdditionalStateOptions = {},
+) {
+  const { reason, message, isSignedIn, ...rest } = requestState;
   const envVars = getPublicEnvVariables(context);
+  const { __keylessClaimUrl, __keylessApiKeysUrl, ...redirectUrlOptions } = additionalStateOptions;
 
   const baseState: Record<string, unknown> = {
     __clerk_ssr_state: rest.toAuth(),
@@ -90,10 +97,10 @@ export function getResponseClerkState(requestState: RequestStateWithRedirectUrls
     __isSatellite: requestState.isSatellite,
     __signInUrl: requestState.signInUrl,
     __signUpUrl: requestState.signUpUrl,
-    __signInForceRedirectUrl: requestState.signInForceRedirectUrl,
-    __signUpForceRedirectUrl: requestState.signUpForceRedirectUrl,
-    __signInFallbackRedirectUrl: requestState.signInFallbackRedirectUrl,
-    __signUpFallbackRedirectUrl: requestState.signUpFallbackRedirectUrl,
+    __signInForceRedirectUrl: redirectUrlOptions.signInForceRedirectUrl,
+    __signUpForceRedirectUrl: redirectUrlOptions.signUpForceRedirectUrl,
+    __signInFallbackRedirectUrl: redirectUrlOptions.signInFallbackRedirectUrl,
+    __signUpFallbackRedirectUrl: redirectUrlOptions.signUpFallbackRedirectUrl,
     __clerk_debug: debugRequestState(requestState),
     __clerkJSUrl: envVars.clerkJsUrl,
     __clerkJSVersion: envVars.clerkJsVersion,