CODEWITHSUNDEEP
reactjstypescriptnext.jsclerkconvex.dev
Павел Каршанков
Павел Каршанков

Reputation: 27

Clerk + Convex Auth

I have an application with Clerk authentication. I decided to add a module to it that uses Convex. I decided to combine them and it worked out. When I log into a new module, I see the same user. But if I just refresh this page, I get the error Uncaught Error: Not authenticated

I see this in the console after the first login to the page. Everything is fine and the data is being loaded

enter image description here

When I refresh the page:

enter image description here

export const getSidebar = query({
  args: {
    parentDocument: v.optional(v.id("documents"))
  },
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();
    console.log(identity);

    if (identity === null) {
      throw new Error("Not authenticated");
    }

    const userId = identity.subject;

    const documents = await ctx.db
      .query("documents")
      .withIndex("by_user_parent", (q) =>
        q
          .eq("userId", userId)
          .eq("parentDocument", args.parentDocument)
      )
      .filter((q) =>
        q.eq(q.field("isArchived"), false)
      )
      .order("desc")
      .collect();

    return documents;
  },
});

Why does this error appear when the page is refreshed

Upvotes: 0

Views: 465

Answers (1)

user26444517
user26444517

Reputation: 11

Do not use useQuery on your page.tsx

Use it in components like @/components/something.tsx

then in page.tsx just return it

   "use client";
    import Something from "@/components/something";
    import { Authenticated } from "convex/react";
     
    const SomePage = () => {
      return (
        <div>
        <Authenticated> 
          <Something />
          </Authenticated> 
        </div>
         
      );
    };
    
    export default SomePage;

Upvotes: 1

Related Questions