use session data in nextjs15

[dense sonnet]

I have this provider

"use client";

import { convex } from "@/lib/convex";
import { ConvexAuthProvider } from "@convex-dev/auth/react";

const ReactConvexProvider = ({ children }: { children: React.ReactNode }) => {
return <ConvexAuthProvider client={convex}>{children}</ConvexAuthProvider>;
};

export default ReactConvexProvider;

and this query

import { api } from "@/convex/_generated/api";
import LandingPage from "@/features/landing-page/landing-page";
import { fetchQuery } from "convex/nextjs";

export default async function HomePage() {
const currentUser = await fetchQuery(api.auth.getCurrentUser);

console.log(currentUser);

return <LandingPage />;
}

import { convexAuth, getAuthUserId } from "@convex-dev/auth/server";
import Google from "@auth/core/providers/google";
import { query } from "./_generated/server";
import { ConvexError } from "convex/values";

export const { auth, signIn, signOut, store } = convexAuth({
providers: [Google],
});

export const getCurrentUser = query(async (ctx) => {
const userId = await getAuthUserId(ctx);
if (!userId) {
return null;
}

const user = await ctx.db.get(userId);
if (!user) {
throw new ConvexError("User not found");
}

return user;
});

I login with but the current user is always null

[halcyon hawk]

Hi @dense sonnet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the knowledge sources, it appears that you're encountering an issue with server-side authentication in Next.js when using Convex Auth. This is a known limitation, as server-side authentication with Next.js is not fully supported yet for Convex Auth.

The main issue here is that you're using fetchQuery in a server component, which doesn't have access to the authentication state. To resolve this, you need to provide the JWT token explicitly when using fetchQuery on the server side.

Here are some steps to address this issue:

1. Replace ConvexAuthProvider with ConvexProviderWithAuth in your client component. This is necessary for Next.js integration ConvexProviderWithAuth (https://stack.convex.dev/nextauth-adapter#provide-the-jwt-to-the-convex-react-client).

2. When using fetchQuery in a server component, you need to pass the JWT token explicitly. However, the current documentation only describes this process for Clerk and Auth0, not for the built-in Convex Auth Next.js Server Rendering (https://docs.convex.dev/client/react/nextjs/server-rendering#server-side-authentication).

3. The Convex team is working on improving support for Next.js server-side authentication Discord support thread (https://discord.com/channels/1019350475847499849/1265416856832049306).

In the meantime, you have a few options:

1. Use client-side authentication instead of server-side. This means moving your authentication logic to a client component where you can use useQuery instead of fetchQuery.

2. If you must use server-side authentication, you'll need to find a way to pass the JWT token to fetchQuery. This might involve storing the token in a cookie or using a different authentication method that's better supported for server-side rendering in Next.js.

3. Wait for the Convex team to release full support for Next.js server-side authentication with Convex Auth.

It's important to note that the issue you're experiencing is not due to an error in your code, but rather a current limitation of the Convex Auth integration with Next.js server components.

For the most up-to-date information and potential workarounds, I recommend checking the official Convex documentation or reaching out to the Convex support team directly.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@dense sonnet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[dense sonnet]

@halcyon hawk is clerk fully supported?

[halcyon hawk]

Let me check the knowledge base for you again. One moment! :books:

---

Yes, Clerk is fully supported by Convex for authentication, including in Next.js applications. Here's what you need to know:

1. Clerk integration with Convex is well-documented and supported. You can find detailed setup instructions in the Convex & Clerk documentation (https://docs.convex.dev/auth/clerk).

2. For Next.js specifically, Clerk is supported and can be used for both client-side and server-side authentication. The Next.js setup guide (https://docs.convex.dev/client/react/nextjs) in the Convex documentation provides information on how to integrate Clerk with Next.js and Convex.

3. To use Clerk with Convex in a Next.js application, you'll need to wrap your app with both the ClerkProvider and ConvexProviderWithClerk components. Here's an example of how to set this up:

'use client';

import { ReactNode } from 'react';
import { ConvexReactClient } from 'convex/react';
import { ConvexProviderWithClerk } from 'convex/react-clerk';
import { ClerkProvider, useAuth } from '@clerk/nextjs';

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export default function ConvexClientProvider({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
    >
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}

This setup allows for seamless integration between Clerk, Convex, and Next.js Convex & Clerk (https://docs.convex.dev/auth/clerk#nextjs-react-native-expo-gatsby).

4. For server-side authentication in Next.js, you can use the getAuthToken function provided by Clerk to pass the JWT token to Convex queries and mutations Next.js Server Rendering (https://docs.convex.dev/client/react/nextjs/server-rendering#server-side-authentication).

In summary, Clerk is fully supported and well-integrated with Convex, offering a robust authentication solution for Next.js applications.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: