getUserIdentity returning null + ui errors, convex clerk
Hi,
I am trying out Convex + Clerk for first time. I used these docs. https://docs.convex.dev/auth/clerk#user-information-in-functions
I am using https.ts in convex with webhook in clerk for sycning users in clerk & convex which seems to be working correctly.
In convex functions, I am trying to simply get the clerkId. As the docs mentioned, the components that query needs to be a children of <Authenticated> from "convex/react". As you can see, I've done that with a Providers in layout.
The getUserIdentity still returns null & now, my page renders with only html, no styles.
Convex & Clerk | Convex Developer Hub
Clerk is an authentication platform providing login via
12 Replies
Am I wrapping the children correctly ?
Kindly help, Thank you.
There are guides for next js invidually for both convex & clerk but none for integration of both. It'd be really helpful if there were. 🌼
the css not loading is completely unrelated, apologies. I accidentally removed the import of globals.css in root layout file.
It looks like you're doubling-up on the Clerk provider. You have it inside the
Providers component, and it looks to be configured correctly there. You also have it with no config as the outer wrapper in your RootLayout component. Not only is that not necessary (because the Providers component already has it), but having any element (component or otherwise) as a wrapper around the root HTML element is likely to lead to issues.Thank you for the help.
I removed the ClerkProvider with no config from layout.tsx.
getUserIdentity() still returns null.
And I get this error in console. I've added the dynamic prop to ConvexProvider but it still gives me this error, even after restarting the server.
Could this be a reason ?
That's because I was importing ClerkProvider from "clerk/nextjs". Now, I'm
import { ClerkProvider, useAuth } from "@clerk/clerk-react";
which resolves this error/warning. getUserIdentity still returning null
edit: This is wrong, need to import from "clerk/nextjs".
Where are you calling
getUserIdentity? Can you share some sample code?inside convex folder, ideas.ts. I'm just testing it for now.
I'm calling the query from (user)/manage/page.tsx
const ideas = await fetchQuery(api.ideas.get);
In reference to my earlier comment re: concerns about the Clerk provider wrapping the HTML element, I was just watching a video where the user did just that, and it was also in a Next.js project. I'm guessing that this may be allowed after all (maybe it's a Next.js thing? I mostly use Remix). However, I still feel that doubling up on the providers is a bad idea, and using only the Clerk provider in your
Providers component is probably the better way to go.
That said, I'm running out of ideas on what else to do here. Again, I do far more with Remix than Next.js. I'm hoping that some others who've used Clerk and Convex in a Next.js project will chime in.Thank you so much for your help, I appreciate it !
okay, so after being dumb for a while i found the solution xD. Not even a solution.
https://docs.convex.dev/auth/debug
so basically since I'm using fetchQuery I need to pass token by myself. like this.
https://docs.convex.dev/client/react/nextjs/server-rendering#server-side-authentication
const ideas = await fetchQuery(api.ideas.get, {}, {token});
( im not passing any args, token needs to be 3rd argument, you don't need to do anything extra in query)
One thing I would add is that in the second link I sent, the code given in auth.ts (attached pic of what's in docs) didn't work for me.
Here's what worked :
import {auth} from "@clerk/nextjs/server";
export async function getAuthToken() {
const authInstance = await auth();
return (await authInstance.getToken({template: "convex"})) ?? undefined;
}
Thank you!
(the docs are great 🙂 While searching around for fixes, I answered my first ever question on StackOverflow which feels like a new level xD. )
Debugging Authentication | Convex Developer Hub
You have followed one of our authentication guides but something is not working.
@citrus thanks for reporting, looks like we are missing an await for the new versions of Clerk where
auth() is returns a Promise. We're planning on officially supporting Clerk 5 and 6 before long so this should get addressed then, but I might dip in and add the extra await you have here just to get this working even before we officially support Clerk 5 and 6.that'd be great. Actual credit goes to : https://stackoverflow.com/questions/78727961/module-clerk-nextjs-has-no-exported-member-auth
Stack Overflow
Module '"@clerk/nextjs"' has no exported member 'auth'
I am implementing Clerk Js authentication on my next app.
import Link from 'next/link';
import React from 'react';
import { UserButton, auth, useAuth } from '@clerk/nextjs';
// import { auth } from '@