fix(react-router): Add E2E tests & improve redirect URL env var loadi…

…ng (#4747)

.changeset/lemon-news-agree.md

@@ -0,0 +1,5 @@
+---
+'@clerk/react-router': patch
+---
+
+Improve environment variable loading for certain values

.github/workflows/ci.yml

@@ -160,7 +160,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        test-name: [ 'generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router', 'vue', 'nuxt']
+        test-name: [ 'generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router', 'vue', 'nuxt', 'react-router']
         test-project: ['chrome']
         include:
           - test-name: 'nextjs'

integration/templates/react-router-node/app/routes/protected.tsx

@@ -1,21 +1,32 @@
 import { redirect } from 'react-router';
+import { UserProfile } from '@clerk/react-router';
 import { getAuth } from '@clerk/react-router/ssr.server';
+import { createClerkClient } from '@clerk/react-router/api.server';
 import type { Route } from './+types/profile';
 
 export async function loader(args: Route.LoaderArgs) {
   const { userId } = await getAuth(args);
 
   if (!userId) {
-    return redirect('/sign-in?redirect_url=' + args.request.url);
+    return redirect('/sign-in');
   }
 
-  return {};
+  const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).users.getUser(userId);
+
+  return {
+    user,
+  };
 }
 
-export default function Profile(args: Route.ComponentProps) {
+export default function Profile({ loaderData }: Route.ComponentProps) {
   return (
     <div>
       <h1>Protected</h1>
+      <UserProfile />
+      <ul>
+        <li>First name: {loaderData.user.firstName}</li>
+        <li>Email: {loaderData.user.emailAddresses[0].emailAddress}</li>
+      </ul>
     </div>
   );
 }

integration/tests/react-router/basic.test.ts

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 import { appConfigs } from '../../presets';
 import type { FakeUser } from '../../testUtils';
@@ -49,5 +49,44 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
 
       await u.po.userButton.toHaveVisibleMenuItems([/Manage account/i, /Sign out$/i]);
     });
+
+    test('redirects to sign-in when unauthenticated', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+
+      await u.page.goToRelative('/protected');
+      await u.page.waitForURL(`${app.serverUrl}/sign-in`);
+      await u.po.signIn.waitForMounted();
+    });
+
+    test('renders control components contents', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+
+      await u.page.goToAppHome();
+      await expect(u.page.getByText('SignedOut')).toBeVisible();
+
+      await u.page.goToRelative('/sign-in');
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.expect.toBeSignedIn();
+      await expect(u.page.getByText('SignedIn')).toBeVisible();
+    });
+
+    test('renders user profile with SSR data', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+
+      await u.page.goToRelative('/sign-in');
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.expect.toBeSignedIn();
+
+      await u.po.userButton.waitForMounted();
+      await u.page.goToRelative('/protected');
+      await u.po.userProfile.waitForMounted();
+
+      // Fetched from an API endpoint (/api/me), which is server-rendered.
+      // This also verifies that the server middleware is working.
+      await expect(u.page.getByText(`First name: ${fakeUser.firstName}`)).toBeVisible();
+      await expect(u.page.getByText(`Email: ${fakeUser.email}`)).toBeVisible();
+    });
   },
 );

packages/react-router/src/client/ReactRouterClerkProvider.tsx

@@ -32,7 +32,7 @@ type ClerkProviderPropsWithState = ReactRouterClerkProviderProps & {
   clerkState?: ClerkState;
 };
 
-function ClerkProviderBase({ children, ...rest }: ClerkProviderPropsWithState): JSX.Element {
+function ClerkProviderBase({ children, ...rest }: ClerkProviderPropsWithState) {
   const awaitableNavigate = useAwaitableNavigate();
   const isSpaMode = _isSpaMode();
 

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

@@ -36,8 +36,9 @@ export type WithClerkState<U = any> = {
 
 export type ReactRouterClerkProviderProps = Without<ClerkProviderProps, 'publishableKey' | 'initialState'> & {
   /**
-   * Used to override the default CLERK_PUBLISHABLE_KEY env variable if needed.
-   * This is optional for React Router as the ClerkProvider will automatically use the CLERK_PUBLISHABLE_KEY env variable if it exists.
+   * Used to override the default VITE_CLERK_PUBLISHABLE_KEY env variable if needed.
+   * This is optional for React Router (in SSR mode) as the ClerkProvider will automatically use the VITE_CLERK_PUBLISHABLE_KEY env variable if it exists.
+   * If you use React Router in SPA mode or as a library, you have to pass the publishableKey prop.
    */
   publishableKey?: string;
   children: React.ReactNode;

packages/react-router/src/ssr/loadOptions.ts

@@ -13,12 +13,13 @@ export const loadOptions = (args: LoaderFunctionArgs, overrides: RootAuthLoaderO
   const { request, context } = args;
   const clerkRequest = createClerkRequest(patchRequest(request));
 
-  // Fetch environment variables across Remix runtime.
-  // 1. First check if the user passed the key in the getAuth function or the rootAuthLoader.
+  // Fetch environment variables across React Router runtime.
+  // 1. First check if the user passed the key in the getAuth() function or the rootAuthLoader().
   // 2. Then try from process.env if exists (Node).
-  // 3. Then try from globalThis (Cloudflare Workers).
-  // 4. Then from loader context (Cloudflare Pages).
-  const secretKey = overrides.secretKey || getEnvVariable('CLERK_SECRET_KEY', context) || '';
+  // 3. Then try from import.meta.env if exists (Vite).
+  // 4. Then try from globalThis (Cloudflare Workers).
+  // 5. Then from loader context (Cloudflare Pages).
+  const secretKey = overrides.secretKey || getEnvVariable('CLERK_SECRET_KEY', context);
   const publishableKey = overrides.publishableKey || getPublicEnvVariables(context).publishableKey;
   const jwtKey = overrides.jwtKey || getEnvVariable('CLERK_JWT_KEY', context);
   const apiUrl = getEnvVariable('CLERK_API_URL', context) || apiUrlFromPublishableKey(publishableKey);
@@ -33,13 +34,13 @@ export const loadOptions = (args: LoaderFunctionArgs, overrides: RootAuthLoaderO
   const signInUrl = overrides.signInUrl || getPublicEnvVariables(context).signInUrl;
   const signUpUrl = overrides.signUpUrl || getPublicEnvVariables(context).signUpUrl;
   const signInForceRedirectUrl =
-    overrides.signInForceRedirectUrl || getEnvVariable('CLERK_SIGN_IN_FORCE_REDIRECT_URL', context) || '';
+    overrides.signInForceRedirectUrl || getPublicEnvVariables(context).signInForceRedirectUrl;
   const signUpForceRedirectUrl =
-    overrides.signUpForceRedirectUrl || getEnvVariable('CLERK_SIGN_UP_FORCE_REDIRECT_URL', context) || '';
+    overrides.signUpForceRedirectUrl || getPublicEnvVariables(context).signUpForceRedirectUrl;
   const signInFallbackRedirectUrl =
-    overrides.signInFallbackRedirectUrl || getEnvVariable('CLERK_SIGN_IN_FALLBACK_REDIRECT_URL', context) || '';
+    overrides.signInFallbackRedirectUrl || getPublicEnvVariables(context).signInFallbackRedirectUrl;
   const signUpFallbackRedirectUrl =
-    overrides.signUpFallbackRedirectUrl || getEnvVariable('CLERK_SIGN_UP_FALLBACK_REDIRECT_URL', context) || '';
+    overrides.signUpFallbackRedirectUrl || getPublicEnvVariables(context).signUpFallbackRedirectUrl;
   const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables(context).afterSignInUrl;
   const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables(context).afterSignUpUrl;
 

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

@@ -41,8 +41,17 @@ export type RouteInfo = {
 export type GetAuthReturn = Promise<AuthObject>;
 
 export type RootAuthLoaderOptions = {
+  /**
+   * Used to override the default VITE_CLERK_PUBLISHABLE_KEY env variable if needed.
+   */
   publishableKey?: string;
+  /**
+   * Used to override the CLERK_JWT_KEY env variable if needed.
+   */
   jwtKey?: string;
+  /**
+   * Used to override the CLERK_SECRET_KEY env variable if needed.
+   */
   secretKey?: string;
   /**
    * @deprecated This option will be removed in the next major version.

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

@@ -75,6 +75,18 @@ export const getPublicEnvVariables = (context: AppLoadContext | undefined) => {
     telemetryDebug:
       isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DEBUG', context)) ||
       isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG', context)),
+    signInForceRedirectUrl:
+      getEnvVariable('VITE_CLERK_SIGN_IN_FORCE_REDIRECT_URL', context) ||
+      getEnvVariable('CLERK_SIGN_IN_FORCE_REDIRECT_URL', context),
+    signUpForceRedirectUrl:
+      getEnvVariable('VITE_CLERK_SIGN_UP_FORCE_REDIRECT_URL', context) ||
+      getEnvVariable('CLERK_SIGN_UP_FORCE_REDIRECT_URL', context),
+    signInFallbackRedirectUrl:
+      getEnvVariable('VITE_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL', context) ||
+      getEnvVariable('CLERK_SIGN_IN_FALLBACK_REDIRECT_URL', context),
+    signUpFallbackRedirectUrl:
+      getEnvVariable('VITE_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL', context) ||
+      getEnvVariable('CLERK_SIGN_UP_FALLBACK_REDIRECT_URL', context),
     afterSignInUrl:
       getEnvVariable('VITE_CLERK_AFTER_SIGN_IN_URL', context) || getEnvVariable('CLERK_AFTER_SIGN_IN_URL', context),
     afterSignUpUrl:

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

@@ -3,7 +3,6 @@ const createErrorMessage = (msg: string) => {
 
 For more info, check out the docs: https://clerk.com/docs,
 or come say hi in our discord server: https://clerk.com/discord
-
 `;
 };