From 844bd3abeca398f463cb3af3d364cf898e8cde65 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Tue, 3 Sep 2024 11:49:53 +0300
Subject: [PATCH] chore(tanstack-start): Fix types for createClerkHandler

---
 .changeset/four-experts-learn.md                       |  5 +++++
 packages/tanstack-start/src/client/ClerkProvider.tsx   |  2 +-
 .../tanstack-start/src/server/middlewareHandler.ts     | 10 +++++-----
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/four-experts-learn.md

diff --git a/.changeset/four-experts-learn.md b/.changeset/four-experts-learn.md
new file mode 100644
index 00000000000..a94f0d70767
--- /dev/null
+++ b/.changeset/four-experts-learn.md
@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Types fix for `createClerkHandler`
diff --git a/packages/tanstack-start/src/client/ClerkProvider.tsx b/packages/tanstack-start/src/client/ClerkProvider.tsx
index 5c60687aadf..7e420ff81af 100644
--- a/packages/tanstack-start/src/client/ClerkProvider.tsx
+++ b/packages/tanstack-start/src/client/ClerkProvider.tsx
@@ -18,10 +18,10 @@ const SDK_METADATA = {
 const awaitableNavigateRef: { current: ReturnType<typeof useAwaitableNavigate> | undefined } = { current: undefined };
 
 export function ClerkProvider({ children, ...providerProps }: TanstackStartClerkProviderProps): JSX.Element {
+  const awaitableNavigate = useAwaitableNavigate();
   const routerContext = useRouteContext({
     strict: false,
   });
-  const awaitableNavigate = useAwaitableNavigate();
 
   useEffect(() => {
     awaitableNavigateRef.current = awaitableNavigate;
diff --git a/packages/tanstack-start/src/server/middlewareHandler.ts b/packages/tanstack-start/src/server/middlewareHandler.ts
index 053f3517dab..707087ad027 100644
--- a/packages/tanstack-start/src/server/middlewareHandler.ts
+++ b/packages/tanstack-start/src/server/middlewareHandler.ts
@@ -6,18 +6,18 @@ import { loadOptions } from './loadOptions';
 import type { LoaderOptions } from './types';
 import { getResponseClerkState } from './utils';
 
-export type RequestHandler<TRouter extends AnyRouter> = (ctx: {
+export type HandlerCallback<TRouter extends AnyRouter> = (ctx: {
   request: Request;
   router: TRouter;
   responseHeaders: Headers;
-}) => Promise<Response>;
-export type CustomizeRequestHandler<TRouter extends AnyRouter> = (cb: RequestHandler<TRouter>) => EventHandler;
+}) => Response | Promise<Response>;
+export type CustomizeStartHandler<TRouter extends AnyRouter> = (cb: HandlerCallback<TRouter>) => EventHandler;
 
 export function createClerkHandler<TRouter extends AnyRouter>(
-  eventHandler: CustomizeRequestHandler<TRouter>,
+  eventHandler: CustomizeStartHandler<TRouter>,
   clerkOptions: LoaderOptions = {},
 ) {
-  return (cb: RequestHandler<TRouter>): EventHandler => {
+  return (cb: HandlerCallback<TRouter>): EventHandler => {
     return eventHandler(async ({ request, router, responseHeaders }) => {
       try {
         const loadedOptions = loadOptions(request, clerkOptions);