feat(remix): Support new redirect urls as environment variables or options to rootAuthLoader (#3442)

Author: panteliselef

.changeset/eighty-rabbits-yawn.md

@@ -0,0 +1,17 @@
+---
+'@clerk/remix': minor
+---
+
+Support new redirect urls as environment variables or options to rootAuthLoader
+
+As options
+- signInForceRedirectUrl
+- signUpForceRedirectUrl
+- signInFallbackRedirectUrl
+- signUpFallbackRedirectUrl
+
+As environment variables
+- CLERK_SIGN_IN_FORCE_REDIRECT_URL
+- CLERK_SIGN_UP_FORCE_REDIRECT_URL
+- CLERK_SIGN_IN_FALLBACK_REDIRECT_URL
+- CLERK_SIGN_UP_FALLBACK_REDIRECT_URL

packages/remix/src/client/RemixClerkProvider.tsx

@@ -57,6 +57,10 @@ export function ClerkProvider({ children, ...rest }: ClerkProviderPropsWithState
     __signUpUrl,
     __afterSignInUrl,
     __afterSignUpUrl,
+    __signInForceRedirectUrl,
+    __signUpForceRedirectUrl,
+    __signInFallbackRedirectUrl,
+    __signUpFallbackRedirectUrl,
     __clerkJSUrl,
     __clerkJSVersion,
     __telemetryDisabled,
@@ -80,6 +84,10 @@ export function ClerkProvider({ children, ...rest }: ClerkProviderPropsWithState
     signUpUrl: __signUpUrl,
     afterSignInUrl: __afterSignInUrl,
     afterSignUpUrl: __afterSignUpUrl,
+    signInForceRedirectUrl: __signInForceRedirectUrl,
+    signUpForceRedirectUrl: __signUpForceRedirectUrl,
+    signInFallbackRedirectUrl: __signInFallbackRedirectUrl,
+    signUpFallbackRedirectUrl: __signUpFallbackRedirectUrl,
     clerkJSUrl: __clerkJSUrl,
     clerkJSVersion: __clerkJSVersion,
     telemetry: {

packages/remix/src/client/types.ts

@@ -14,6 +14,10 @@ export type ClerkState = {
     __signUpUrl: string | undefined;
     __afterSignInUrl: string | undefined;
     __afterSignUpUrl: string | undefined;
+    __signInForceRedirectUrl: string | undefined;
+    __signUpForceRedirectUrl: string | undefined;
+    __signInFallbackRedirectUrl: string | undefined;
+    __signUpFallbackRedirectUrl: string | undefined;
     __clerk_debug: any;
     __clerkJSUrl: string | undefined;
     __clerkJSVersion: string | undefined;

packages/remix/src/ssr/loadOptions.ts

@@ -34,6 +34,14 @@ export const loadOptions = (args: LoaderFunctionArgs, overrides: RootAuthLoaderO
   );
   const signInUrl = overrides.signInUrl || getEnvVariable('CLERK_SIGN_IN_URL', context) || '';
   const signUpUrl = overrides.signUpUrl || getEnvVariable('CLERK_SIGN_UP_URL', context) || '';
+  const signInForceRedirectUrl =
+    overrides.signInForceRedirectUrl || getEnvVariable('CLERK_SIGN_IN_FORCE_REDIRECT_URL', context) || '';
+  const signUpForceRedirectUrl =
+    overrides.signUpForceRedirectUrl || getEnvVariable('CLERK_SIGN_UP_FORCE_REDIRECT_URL', context) || '';
+  const signInFallbackRedirectUrl =
+    overrides.signInFallbackRedirectUrl || getEnvVariable('CLERK_SIGN_IN_FALLBACK_REDIRECT_URL', context) || '';
+  const signUpFallbackRedirectUrl =
+    overrides.signUpFallbackRedirectUrl || getEnvVariable('CLERK_SIGN_UP_FALLBACK_REDIRECT_URL', context) || '';
   const afterSignInUrl = overrides.afterSignInUrl || getEnvVariable('CLERK_AFTER_SIGN_IN_URL', context) || '';
   const afterSignUpUrl = overrides.afterSignUpUrl || getEnvVariable('CLERK_AFTER_SIGN_UP_URL', context) || '';
 
@@ -68,5 +76,9 @@ export const loadOptions = (args: LoaderFunctionArgs, overrides: RootAuthLoaderO
     signUpUrl,
     afterSignInUrl,
     afterSignUpUrl,
+    signInForceRedirectUrl,
+    signUpForceRedirectUrl,
+    signInFallbackRedirectUrl,
+    signUpFallbackRedirectUrl,
   };
 };

packages/remix/src/ssr/rootAuthLoader.ts

@@ -49,7 +49,9 @@ export const rootAuthLoader: RootAuthLoader = async (
 
   const loadedOptions = loadOptions(args, opts);
   // Note: authenticateRequest() will throw a redirect if the auth state is determined to be handshake
-  const requestState = await authenticateRequest(args, loadedOptions);
+  const _requestState = await authenticateRequest(args, loadedOptions);
+  // TODO: Investigate if `authenticateRequest` needs to return the loadedOptions (the new request urls in particular)
+  const requestState = { ...loadedOptions, ..._requestState };
 
   if (!handler) {
     // if the user did not provide a handler, simply inject requestState into an empty response

packages/remix/src/ssr/types.ts

@@ -1,6 +1,13 @@
 import type { Organization, Session, User, VerifyTokenOptions } from '@clerk/backend';
-import type { AuthObject } from '@clerk/backend/internal';
-import type { MultiDomainAndOrProxy } from '@clerk/types';
+import type { AuthObject, RequestState } from '@clerk/backend/internal';
+import type {
+  LegacyRedirectProps,
+  MultiDomainAndOrProxy,
+  SignInFallbackRedirectUrl,
+  SignInForceRedirectUrl,
+  SignUpFallbackRedirectUrl,
+  SignUpForceRedirectUrl,
+} from '@clerk/types';
 import type { DataFunctionArgs, LoaderFunction } from '@remix-run/server-runtime';
 
 export type GetAuthReturn = Promise<AuthObject>;
@@ -27,10 +34,20 @@ export type RootAuthLoaderOptions = {
   authorizedParties?: [];
   signInUrl?: string;
   signUpUrl?: string;
-  afterSignInUrl?: string;
-  afterSignUpUrl?: string;
 } & Pick<VerifyTokenOptions, 'audience'> &
-  MultiDomainAndOrProxy;
+  MultiDomainAndOrProxy &
+  SignInForceRedirectUrl &
+  SignInFallbackRedirectUrl &
+  SignUpForceRedirectUrl &
+  SignUpFallbackRedirectUrl &
+  LegacyRedirectProps;
+
+export type RequestStateWithRedirectUrls = RequestState &
+  SignInForceRedirectUrl &
+  SignInFallbackRedirectUrl &
+  SignUpForceRedirectUrl &
+  SignUpFallbackRedirectUrl &
+  LegacyRedirectProps;
 
 export type RootAuthLoaderCallback<Options extends RootAuthLoaderOptions> = (
   args: LoaderFunctionArgsWithAuth<Options>,

packages/remix/src/ssr/utils.ts

@@ -1,11 +1,11 @@
-import type { RequestState } from '@clerk/backend/internal';
 import { constants, debugRequestState } from '@clerk/backend/internal';
 import { isTruthy } from '@clerk/shared/underscore';
 import type { AppLoadContext, defer } from '@remix-run/server-runtime';
 import { json } from '@remix-run/server-runtime';
 import cookie from 'cookie';
 
 import { getEnvVariable } from '../utils/utils';
+import type { RequestStateWithRedirectUrls } from './types';
 
 export function isResponse(value: any): value is Response {
   return (
@@ -33,7 +33,7 @@ export function assertValidHandlerResult(val: any, error?: string): asserts val
 
 export const injectRequestStateIntoResponse = async (
   response: Response,
-  requestState: RequestState,
+  requestState: RequestStateWithRedirectUrls,
   context: AppLoadContext,
 ) => {
   const clone = new Response(response.body, response);
@@ -53,7 +53,7 @@ export const injectRequestStateIntoResponse = async (
 
 export function injectRequestStateIntoDeferredData(
   data: ReturnType<typeof defer>,
-  requestState: RequestState,
+  requestState: RequestStateWithRedirectUrls,
   context: AppLoadContext,
 ) {
   const { clerkState, headers } = getResponseClerkState(requestState, context);
@@ -78,7 +78,7 @@ export function injectRequestStateIntoDeferredData(
  *
  * @internal
  */
-export function getResponseClerkState(requestState: RequestState, context: AppLoadContext) {
+export function getResponseClerkState(requestState: RequestStateWithRedirectUrls, context: AppLoadContext) {
   const { reason, message, isSignedIn, ...rest } = requestState;
   const clerkState = wrapWithClerkState({
     __clerk_ssr_state: rest.toAuth(),
@@ -90,6 +90,10 @@ export function getResponseClerkState(requestState: RequestState, context: AppLo
     __signUpUrl: requestState.signUpUrl,
     __afterSignInUrl: requestState.afterSignInUrl,
     __afterSignUpUrl: requestState.afterSignUpUrl,
+    __signInForceRedirectUrl: requestState.signInForceRedirectUrl,
+    __signUpForceRedirectUrl: requestState.signUpForceRedirectUrl,
+    __signInFallbackRedirectUrl: requestState.signInFallbackRedirectUrl,
+    __signUpFallbackRedirectUrl: requestState.signUpFallbackRedirectUrl,
     __clerk_debug: debugRequestState(requestState),
     __clerkJSUrl: getEnvVariable('CLERK_JS', context),
     __clerkJSVersion: getEnvVariable('CLERK_JS_VERSION', context),