diff --git a/.env.local.example b/.env.local.example index 777f624..3c03f91 100644 --- a/.env.local.example +++ b/.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 diff --git a/app/page.tsx b/app/page.tsx index e5d1fb0..1a8901b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -50,11 +50,7 @@ function Content() { const addNumber = useMutation(api.myFunctions.addNumber); if (viewer === undefined || numbers === undefined) { - return ( -
-

loading... (consider a loading skeleton)

-
- ); + return
; } return ( diff --git a/app/server/inner.tsx b/app/server/inner.tsx index c8480cd..9ba3d87 100644 --- a/app/server/inner.tsx +++ b/app/server/inner.tsx @@ -9,7 +9,7 @@ export default function Home({ preloaded }: { preloaded: Preloaded
-

Reactive client-loaded data

+

Reactive client-loaded data (using server data during hydration)

{JSON.stringify(data, null, 2)}
diff --git a/app/server/page.tsx b/app/server/page.tsx index 2380814..713985b 100644 --- a/app/server/page.tsx +++ b/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); diff --git a/components/ConvexClientProvider.tsx b/components/ConvexClientProvider.tsx index b380736..bb077e5 100644 --- a/components/ConvexClientProvider.tsx +++ b/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 ( @@ -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(null); diff --git a/package.json b/package.json index 4c0089b..e434ace 100644 --- a/package.json +++ b/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"