Template suggestions (#6)

Co-authored-by: Nick Nisi <nick.nisi@workos.com>

Author: thomasballinger

.env.local.example

@@ -3,7 +3,3 @@ WORKOS_CLIENT_ID=client_your_client_id_here
 WORKOS_API_KEY=sk_test_your_api_key_here
 WORKOS_COOKIE_PASSWORD=your_secure_password_here_must_be_at_least_32_characters_long
 NEXT_PUBLIC_WORKOS_REDIRECT_URI=http://localhost:3000/callback
-
-# Convex Configuration
-NEXT_PUBLIC_CONVEX_URL=https://your-convex-url.convex.cloud
-CONVEX_DEPLOY_KEY=your_convex_deploy_key_here

app/page.tsx

@@ -50,11 +50,7 @@ function Content() {
   const addNumber = useMutation(api.myFunctions.addNumber);
 
   if (viewer === undefined || numbers === undefined) {
-    return (
-      <div className="mx-auto">
-        <p>loading... (consider a loading skeleton)</p>
-      </div>
-    );
+    return <div className="mx-auto"></div>;
   }
 
   return (

app/server/inner.tsx

@@ -9,7 +9,7 @@ export default function Home({ preloaded }: { preloaded: Preloaded<typeof api.my
   return (
     <>
       <div className="flex flex-col gap-4 bg-slate-200 dark:bg-slate-800 p-4 rounded-md">
-        <h2 className="text-xl font-bold">Reactive client-loaded data</h2>
+        <h2 className="text-xl font-bold">Reactive client-loaded data (using server data during hydration)</h2>
         <code>
           <pre>{JSON.stringify(data, null, 2)}</pre>
         </code>

app/server/page.tsx

@@ -1,11 +1,17 @@
 import Home from './inner';
 import { preloadQuery, preloadedQueryResult } from 'convex/nextjs';
 import { api } from '@/convex/_generated/api';
+import { withAuth } from '@workos-inc/authkit-nextjs';
 
 export default async function ServerPage() {
-  const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
-    count: 3,
-  });
+  const { accessToken } = await withAuth();
+  const preloaded = await preloadQuery(
+    api.myFunctions.listNumbers,
+    {
+      count: 3,
+    },
+    { token: accessToken },
+  );
 
   const data = preloadedQueryResult(preloaded);
 

components/ConvexClientProvider.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { ReactNode, useCallback, useRef } from 'react';
+import { ReactNode, useCallback, useRef, useState } from 'react';
 import { ConvexReactClient } from 'convex/react';
 import { ConvexProviderWithAuth } from 'convex/react';
 import { AuthKitProvider, useAuth, useAccessToken } from '@workos-inc/authkit-nextjs/components';
 
-const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
-
 export function ConvexClientProvider({ children }: { children: ReactNode }) {
+  const [convex] = useState(() => {
+    return new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+  });
   return (
     <AuthKitProvider>
       <ConvexProviderWithAuth client={convex} useAuth={useAuthFromAuthKit}>
@@ -20,8 +21,9 @@ export function ConvexClientProvider({ children }: { children: ReactNode }) {
 function useAuthFromAuthKit() {
   const { user, loading: isLoading } = useAuth();
   const { accessToken, loading: tokenLoading, error: tokenError } = useAccessToken();
-  const loading = (isLoading ?? false) || (tokenLoading ?? false) || !accessToken;
-  const authenticated = !!user && !!accessToken && !loading;
+  const hasIncompleteAuth = (!!user && !accessToken) || (!user && !!accessToken);
+  const loading = (isLoading ?? false) || (tokenLoading ?? false) || hasIncompleteAuth;
+  const authenticated = !!user && !!accessToken;
 
   // Memoize the token to prevent unnecessary changes
   const stableAccessToken = useRef<string | null>(null);

package.json

@@ -22,8 +22,8 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@workos-inc/authkit-nextjs": "^2.4.4",
-    "convex": "^1.25.4",
+    "@workos-inc/authkit-nextjs": "^2.6.0",
+    "convex": "^1.26.2",
     "next": "15.4.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"