Auth token is not a valid JWT with ConvexProviderWithClerk (EXPO)
Issue
I'm using Clerk with Convex in an Expo Router app, and everything loads fine, logs me in, and works as expected. However, I get the following error when using ConvexProviderWithClerk:
If I remove Convex and just use Clerk, the error disappears, and functionality remains the same.
Code Setup
Code that Causes the Error (Clerk + Convex)
I'm using Clerk with Convex in an Expo Router app, and everything loads fine, logs me in, and works as expected. However, I get the following error when using ConvexProviderWithClerk:
ERROR Auth token is not a valid JWT, cannot refetch the tokenERROR Auth token is not a valid JWT, cannot refetch the tokenIf I remove Convex and just use Clerk, the error disappears, and functionality remains the same.
Code Setup
Code that Causes the Error (Clerk + Convex)import { ClerkProvider, ClerkLoaded, useAuth } from "@clerk/clerk-expo";
import { Slot } from "expo-router";
import { tokenCache } from "./cache";
import "../global.css";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ConvexQueryCacheProvider } from "convex-helpers/react/cache";
import { ConvexProviderWithClerk } from "convex/react-clerk";
// Initialize Convex client
const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!);
export default function RootLayout() {
const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!;
return (
<ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
<ClerkLoaded>
<ConvexProviderWithClerk useAuth={useAuth} client={convex}>
<ConvexQueryCacheProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<BottomSheetModalProvider>
<Slot screenOptions={{ headerShown: false }} />
</BottomSheetModalProvider>
</GestureHandlerRootView>
</ConvexQueryCacheProvider>
</ConvexProviderWithClerk>
</ClerkLoaded>
</ClerkProvider>
);
}import { ClerkProvider, ClerkLoaded, useAuth } from "@clerk/clerk-expo";
import { Slot } from "expo-router";
import { tokenCache } from "./cache";
import "../global.css";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ConvexQueryCacheProvider } from "convex-helpers/react/cache";
import { ConvexProviderWithClerk } from "convex/react-clerk";
// Initialize Convex client
const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!);
export default function RootLayout() {
const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!;
return (
<ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
<ClerkLoaded>
<ConvexProviderWithClerk useAuth={useAuth} client={convex}>
<ConvexQueryCacheProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<BottomSheetModalProvider>
<Slot screenOptions={{ headerShown: false }} />
</BottomSheetModalProvider>
</GestureHandlerRootView>
</ConvexQueryCacheProvider>
</ConvexProviderWithClerk>
</ClerkLoaded>
</ClerkProvider>
);
}
