fixing types

Author: nicknisi

package-lock.json

@@ -28,9 +28,9 @@
     "jose": "^5.2.3"
   },
   "peerDependencies": {
-    "react-router": "^7.2.0",
     "react": "^18.0 || ^19.0.0",
-    "react-dom": "^18.0 || ^19.0.0"
+    "react-dom": "^18.0 || ^19.0.0",
+    "react-router": "^7.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -44,6 +44,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.3.3",
+    "react-router": "^7.3.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.2",

package.json

@@ -1,4 +1,3 @@
-import type { LoaderFunction } from 'react-router';
 import { getWorkOS } from './workos.js';
 import { authLoader } from './authkit-callback-route.js';
 import {
@@ -7,6 +6,8 @@ import {
   assertIsResponse,
 } from './test-utils/test-helpers.js';
 import { configureSessionStorage } from './sessionStorage.js';
+import { isDataWithResponseInit } from './utils.js';
+import { DataWithResponseInit } from './interfaces.js';
 
 // Mock dependencies
 const fakeWorkosInstance = {
@@ -21,7 +22,7 @@ jest.mock('./workos.js', () => ({
 }));
 
 describe('authLoader', () => {
-  let loader: LoaderFunction;
+  let loader: ReturnType<typeof authLoader>;
   let request: Request;
   const workos = getWorkOS();
   const authenticateWithCode = jest.mocked(workos.userManagement.authenticateWithCode);
@@ -58,17 +59,19 @@ describe('authLoader', () => {
     it('should handle authentication failure', async () => {
       authenticateWithCode.mockRejectedValue(new Error('Auth failed'));
       request = createRequestWithSearchParams(request, { code: 'invalid-code' });
-      const response = (await loader({ request, params: {}, context: {} })) as Response;
+      const response = (await loader({ request, params: {}, context: {} })) as DataWithResponseInit<unknown>;
+      expect(isDataWithResponseInit(response)).toBeTruthy();
 
-      expect(response.status).toBe(500);
+      expect(response?.init?.status).toBe(500);
     });
 
     it('should handle authentication failure with string error', async () => {
       authenticateWithCode.mockRejectedValue('Auth failed');
       request = createRequestWithSearchParams(request, { code: 'invalid-code' });
-      const response = (await loader({ request, params: {}, context: {} })) as Response;
+      const response = (await loader({ request, params: {}, context: {} })) as DataWithResponseInit<unknown>;
+      expect(isDataWithResponseInit(response)).toBeTruthy();
 
-      expect(response.status).toBe(500);
+      expect(response?.init?.status).toBe(500);
     });
   });
 

src/authkit-callback-route.spec.ts

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs, data as json, redirect } from 'react-router';
+import { LoaderFunctionArgs, data, redirect } from 'react-router';
 import { getConfig } from './config.js';
 import { HandleAuthOptions } from './interfaces.js';
 import { encryptSession } from './session.js';
@@ -86,7 +86,7 @@ export function authLoader(options: HandleAuthOptions = {}) {
     }
 
     function errorResponse() {
-      return json(
+      return data(
         {
           error: {
             message: 'Something went wrong',

src/authkit-callback-route.ts

@@ -1,6 +1,8 @@
-import type { SessionStorage, SessionIdStorageStrategy } from 'react-router';
+import type { SessionStorage, SessionIdStorageStrategy, data } from 'react-router';
 import type { OauthTokens, User } from '@workos-inc/node';
 
+export type DataWithResponseInit<T> = ReturnType<typeof data<T>>;
+
 export interface HandleAuthOptions {
   returnPathname?: string;
   onSuccess?: (data: AuthLoaderSuccessData) => void | Promise<void>;

src/interfaces.ts

@@ -40,6 +40,23 @@ const getSessionStorage = jest.mocked(getSessionStorageMock);
 const configureSessionStorage = jest.mocked(configureSessionStorageMock);
 const jwtVerify = jest.mocked(jose.jwtVerify);
 
+function getHeaderValue(headers: HeadersInit | undefined, name: string): string | null {
+  if (!headers) {
+    return null;
+  }
+
+  if (headers instanceof Headers) {
+    return headers.get(name);
+  }
+
+  if (Array.isArray(headers)) {
+    const pair = headers.find(([key]) => key.toLowerCase() === name.toLowerCase());
+    return pair?.[1] ?? null;
+  }
+
+  return headers[name] ?? null;
+}
+
 jest.mock('jose', () => ({
   createRemoteJWKSet: jest.fn(),
   jwtVerify: jest.fn(),
@@ -222,8 +239,7 @@ describe('session', () => {
       });
 
       it('should return unauthorized data when no session exists', async () => {
-        const response = await authkitLoader(createLoaderArgs(createMockRequest()));
-        const data = await response.json();
+        const { data } = await authkitLoader(createLoaderArgs(createMockRequest()));
 
         expect(data).toEqual({
           user: null,
@@ -256,11 +272,14 @@ describe('session', () => {
         });
         const customLoader = jest.fn().mockReturnValue(redirectResponse);
 
-        const response = await authkitLoader(createLoaderArgs(createMockRequest()), customLoader);
-
-        expect(response.status).toBe(302);
-        expect(response.headers.get('Location')).toBe('/dashboard');
-        expect(response.headers.get('X-Redirect-Reason')).toBe('test');
+        try {
+          await authkitLoader(createLoaderArgs(createMockRequest()), customLoader);
+        } catch (response: unknown) {
+          assertIsResponse(response);
+          expect(response.status).toBe(302);
+          expect(response.headers.get('Location')).toEqual('/dashboard');
+          expect(response.headers.get('X-Redirect-Reason')).toEqual('test');
+        }
       });
     });
 
@@ -303,8 +322,7 @@ describe('session', () => {
       });
 
       it('should return authorized data with session claims', async () => {
-        const response = await authkitLoader(createLoaderArgs(createMockRequest()));
-        const data = await response.json();
+        const { data } = await authkitLoader(createLoaderArgs(createMockRequest()));
 
         expect(data).toEqual({
           user: mockSessionData.user,
@@ -325,8 +343,7 @@ describe('session', () => {
           metadata: { key: 'value' },
         });
 
-        const response = await authkitLoader(createLoaderArgs(createMockRequest()), customLoader);
-        const data = await response.json();
+        const { data } = await authkitLoader(createLoaderArgs(createMockRequest()), customLoader);
 
         expect(data).toEqual(
           expect.objectContaining({
@@ -349,12 +366,11 @@ describe('session', () => {
           }),
         );
 
-        const response = await authkitLoader(createLoaderArgs(createMockRequest()), customLoader);
+        const { data, init } = await authkitLoader(createLoaderArgs(createMockRequest()), customLoader);
 
-        expect(response.headers.get('Custom-Header')).toBe('test-header');
-        expect(response.headers.get('Content-Type')).toBe('application/json; charset=utf-8');
+        expect(getHeaderValue(init?.headers, 'Custom-Header')).toBe('test-header');
+        expect(getHeaderValue(init?.headers, 'Content-Type')).toBe('application/json; charset=utf-8');
 
-        const data = await response.json();
         expect(data).toEqual(
           expect.objectContaining({
             customData: 'test-value',
@@ -437,8 +453,7 @@ describe('session', () => {
       });
 
       it('should refresh session when access token is invalid', async () => {
-        const response = await authkitLoader(createLoaderArgs(createMockRequest()));
-        const data = await response.json();
+        const { data, init } = await authkitLoader(createLoaderArgs(createMockRequest()));
 
         // Verify the refresh token flow was triggered
         expect(authenticateWithRefreshToken).toHaveBeenCalledWith({
@@ -459,7 +474,7 @@ describe('session', () => {
         );
 
         // Verify cookie was set
-        expect(response.headers.get('Set-Cookie')).toBe('new-session-cookie');
+        expect(getHeaderValue(init?.headers, 'Set-Cookie')).toBe('new-session-cookie');
       });
 
       it('should redirect to root when refresh fails', async () => {

src/session.spec.ts

@@ -1,6 +1,13 @@
-import { data as json, redirect, type LoaderFunctionArgs, type SessionData } from 'react-router';
+import { data, redirect, type LoaderFunctionArgs, type SessionData } from 'react-router';
 import { getAuthorizationUrl } from './get-authorization-url.js';
-import type { AccessToken, AuthKitLoaderOptions, AuthorizedData, Session, UnauthorizedData } from './interfaces.js';
+import type {
+  AccessToken,
+  AuthKitLoaderOptions,
+  AuthorizedData,
+  DataWithResponseInit,
+  Session,
+  UnauthorizedData,
+} from './interfaces.js';
 import { getWorkOS } from './workos.js';
 
 import { sealData, unsealData } from 'iron-session';
@@ -94,24 +101,24 @@ type AuthorizedAuthLoader<Data> = (args: LoaderFunctionArgs & { auth: Authorized
 async function authkitLoader(
   loaderArgs: LoaderFunctionArgs,
   options: AuthKitLoaderOptions & { ensureSignedIn: true },
-): Promise<TypedResponse<AuthorizedData>>;
+): Promise<DataWithResponseInit<AuthorizedData> | Response>;
 
 async function authkitLoader(
   loaderArgs: LoaderFunctionArgs,
   options?: AuthKitLoaderOptions,
-): Promise<TypedResponse<AuthorizedData | UnauthorizedData>>;
+): Promise<DataWithResponseInit<AuthorizedData | UnauthorizedData>>;
 
 async function authkitLoader<Data = unknown>(
   loaderArgs: LoaderFunctionArgs,
   loader: AuthorizedAuthLoader<Data>,
   options: AuthKitLoaderOptions & { ensureSignedIn: true },
-): Promise<TypedResponse<Data & AuthorizedData>>;
+): Promise<DataWithResponseInit<Data & AuthorizedData>>;
 
 async function authkitLoader<Data = unknown>(
   loaderArgs: LoaderFunctionArgs,
   loader: AuthLoader<Data>,
   options?: AuthKitLoaderOptions,
-): Promise<TypedResponse<Data & (AuthorizedData | UnauthorizedData)>>;
+): Promise<DataWithResponseInit<Data & (AuthorizedData | UnauthorizedData)>>;
 
 async function authkitLoader<Data = unknown>(
   loaderArgs: LoaderFunctionArgs,
@@ -195,7 +202,7 @@ async function handleAuthLoader(
   session?: Session,
 ) {
   if (!loader) {
-    return json(auth, session ? { headers: { ...session.headers } } : undefined);
+    return data(auth, session ? { headers: { ...session.headers } } : undefined);
   }
 
   // If there's a custom loader, get the resulting data and return it with our
@@ -209,7 +216,7 @@ async function handleAuthLoader(
     }
 
     const newResponse = new Response(loaderResult.body, loaderResult);
-    const data = await newResponse.json();
+    const responseData = await newResponse.json();
 
     // Set the content type in case the user returned a Response instead of the
     // json helper method
@@ -218,12 +225,12 @@ async function handleAuthLoader(
       newResponse.headers.append('Set-Cookie', session.headers['Set-Cookie']);
     }
 
-    return json({ ...data, ...auth }, newResponse);
+    return data({ ...responseData, ...auth }, newResponse);
   }
 
   // If the loader returns a non-Response, assume it's a data object
   // istanbul ignore next
-  return json({ ...loaderResult, ...auth }, session ? { headers: { ...session.headers } } : undefined);
+  return data({ ...loaderResult, ...auth }, session ? { headers: { ...session.headers } } : undefined);
 }
 
 async function terminateSession(request: Request) {

src/session.ts

@@ -1,3 +1,5 @@
+import { DataWithResponseInit } from './interfaces.js';
+
 /**
  * Returns a function that can only be called once.
  * Subsequent calls will return the result of the first call.
@@ -16,3 +18,35 @@ export function lazy<T>(fn: () => T): () => T {
     return result;
   };
 }
+
+/**
+ * Returns true if the response is a redirect.
+ * @param res - The response to check.
+ * @returns True if the response is a redirect.
+ */
+export function isRedirect(res: Response) {
+  return res.status >= 300 && res.status < 400;
+}
+
+/**
+ * Returns true if the response is a response.
+ * @param response - The response to check.
+ * @returns True if the response is a response.
+ */
+export function isResponse(response: unknown): response is Response {
+  return response instanceof Response;
+}
+
+/**
+ * Returns true if the data is a DataWithResponseInit object.
+ */
+export function isDataWithResponseInit(data: unknown): data is DataWithResponseInit<unknown> {
+  return (
+    typeof data === 'object' &&
+    data != null &&
+    'type' in data &&
+    'data' in data &&
+    'init' in data &&
+    data.type === 'DataWithResponseInit'
+  );
+}