fix(remix): Adjust RootAuthLoaderCallbackReturn to allow returning nu…

…ll (#1704)

.changeset/proud-crabs-hammer.md

@@ -0,0 +1,5 @@
+---
+'@clerk/remix': patch
+---
+
+Adjust return type of `rootAuthLoader`'s callback to allow returning `null`.

packages/remix/src/ssr/rootAuthLoader.ts

@@ -4,7 +4,7 @@ import { invalidRootLoaderCallbackReturn } from '../errors';
 import { authenticateRequest } from './authenticateRequest';
 import type { LoaderFunctionArgs, LoaderFunctionReturn, RootAuthLoaderCallback, RootAuthLoaderOptions } from './types';
 import {
-  assertObject,
+  assertValidHandlerResult,
   injectAuthIntoRequest,
   injectRequestStateIntoResponse,
   interstitialJsonResponse,
@@ -15,14 +15,25 @@ import {
 
 interface RootAuthLoader {
   <Options extends RootAuthLoaderOptions, Callback extends RootAuthLoaderCallback<Options>>(
+    /**
+     * Arguments passed to the loader function.
+     */
     args: LoaderFunctionArgs,
+    /**
+     * A loader function with authentication state made available to it. Allows you to fetch route data based on the user's authentication state.
+     */
     callback: Callback,
     options?: Options,
   ): Promise<ReturnType<Callback>>;
 
   (args: LoaderFunctionArgs, options?: RootAuthLoaderOptions): Promise<LoaderFunctionReturn>;
 }
 
+/**
+ * Makes authorization state available in your application by wrapping the root loader.
+ *
+ * @see https://clerk.com/docs/quickstarts/remix
+ */
 export const rootAuthLoader: RootAuthLoader = async (
   args: LoaderFunctionArgs,
   handlerOrOptions: any,
@@ -51,7 +62,7 @@ export const rootAuthLoader: RootAuthLoader = async (
   }
 
   const handlerResult = await handler(injectAuthIntoRequest(args, sanitizeAuthObject(requestState.toAuth())));
-  assertObject(handlerResult, invalidRootLoaderCallbackReturn);
+  assertValidHandlerResult(handlerResult, invalidRootLoaderCallbackReturn);
 
   if (isResponse(handlerResult)) {
     try {
@@ -67,6 +78,8 @@ export const rootAuthLoader: RootAuthLoader = async (
     }
   }
 
-  // if the user returned a plain object, create an empty response and inject requestState and handlerResult
-  return injectRequestStateIntoResponse(new Response(JSON.stringify(handlerResult)), requestState);
+  // if the return value of the user's handler is null or a plain object, create an empty response to inject Clerk's state into
+  const responseBody = JSON.stringify(handlerResult ?? {});
+
+  return injectRequestStateIntoResponse(new Response(responseBody), requestState);
 };

packages/remix/src/ssr/types.ts

@@ -31,11 +31,14 @@ export type RootAuthLoaderCallback<Options extends RootAuthLoaderOptions> = (
   args: LoaderFunctionArgsWithAuth<Options>,
 ) => RootAuthLoaderCallbackReturn;
 
-export type RootAuthLoaderCallbackReturn =
-  | Promise<Response>
-  | Response
-  | Promise<Record<string, unknown>>
-  | Record<string, unknown>;
+type ObjectLike = Record<string, unknown> | null;
+
+/**
+ * We are not using `LoaderFunctionReturn` here because we can't support non-object return values. We need to be able to decorate the return value with authentication state, and so we need something object-like.
+ *
+ * In the case of `null`, we will return an object containing only the authentication state.
+ */
+export type RootAuthLoaderCallbackReturn = Promise<Response> | Response | Promise<ObjectLike> | ObjectLike;
 
 export type LoaderFunctionArgs = DataFunctionArgs;
 export type LoaderFunctionReturn = ReturnType<LoaderFunction>;

packages/remix/src/ssr/utils.ts

@@ -37,8 +37,8 @@ export const parseCookies = (req: Request) => {
   return cookie.parse(req.headers.get('cookie') || '');
 };
 
-export function assertObject(val: any, error?: string): asserts val is Record<string, unknown> {
-  if (!val || typeof val !== 'object' || Array.isArray(val)) {
+export function assertValidHandlerResult(val: any, error?: string): asserts val is Record<string, unknown> | null {
+  if ((val !== null && typeof val !== 'object') || Array.isArray(val)) {
     throw new Error(error || '');
   }
 }