Cratis•14mo ago

query() Not Authenticated Error

Good Afternoon, i'm a bit new to convex I currently have it setup with clerk

export default {
  providers: [
    {
      domain: "https://sharing-koala-59.clerk.accounts.dev",
      applicationID: "convex",
    },
  ],
};

export default {
  providers: [
    {
      domain: "https://sharing-koala-59.clerk.accounts.dev",
      applicationID: "convex",
    },
  ],
};

i have created the following query

export const getTaskList = query({
  args: {},
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();

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

    const userId = identity.subject;

    const tasks = await ctx.db
      .query("tasks")
      .withIndex("by_userId")
      .filter((q) => q.eq(q.field("userId"), userId))
      .order("desc")
      .collect();
    return tasks;
  },
});

export const getTaskList = query({
  args: {},
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();

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

    const userId = identity.subject;

    const tasks = await ctx.db
      .query("tasks")
      .withIndex("by_userId")
      .filter((q) => q.eq(q.field("userId"), userId))
      .order("desc")
      .collect();
    return tasks;
  },
});

I'm then calling the following on my page on load here

function Dashboard() {
  const [search, setSearch] = useState("");
  const { isAuthenticated, isLoading } = useConvexAuth();
  const tasks = useQuery(api.tasks.getTaskList);

  if (!isAuthenticated) {
    return (
      <p className="text-2xl text-center mt-12">
        You need to be logged in to view this page
      </p>
    );
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center mt-12 md:mt-16">
        <div className="flex flex-col gap-8 w-full items-center mt-24">
          <Loader2 className="h-16 w-16 animate-spin text-primary" />
          <div className="text-2xl">Loading your notes...</div>
        </div>
      </div>
    );
  }

function Dashboard() {
  const [search, setSearch] = useState("");
  const { isAuthenticated, isLoading } = useConvexAuth();
  const tasks = useQuery(api.tasks.getTaskList);

  if (!isAuthenticated) {
    return (
      <p className="text-2xl text-center mt-12">
        You need to be logged in to view this page
      </p>
    );
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center mt-12 md:mt-16">
        <div className="flex flex-col gap-8 w-full items-center mt-24">
          <Loader2 className="h-16 w-16 animate-spin text-primary" />
          <div className="text-2xl">Loading your notes...</div>
        </div>
      </div>
    );
  }

However when I refresh the page i get this error. When i use a router.push() seems to work find but if i go to the link directly or refresh the page i get this error. However in my query if i don't throw an error and just return a null it ends up working but seems to not be authenticated for a short while until it does (image attached)

3 Replies

erquhart•14mo ago

Welcome! You can pass the string 'skip' as a second argument to useQuery() until isAuthenticated is true in the client to address this.

const { isAuthenticated, isLoading } = useConvexAuth();
const tasks = useQuery(api.tasks.getTaskList, isAuthenticated ? undefined : 'skip');

const { isAuthenticated, isLoading } = useConvexAuth();
const tasks = useQuery(api.tasks.getTaskList, isAuthenticated ? undefined : 'skip');

(I think undefined will work in that ternary, if not you can use an empty object)

lee•14mo ago

you can also use <Authenticated><AuthenticatedDashboard /></Authenticated> to wrap a component that does queries which must be authenticated (put the useQuery in AuthenticatedDashboard)

CratisOP•14mo ago

ahhh thanks! i'll give it a shot appreciate your assistance! looks like that did it, thanks a lot!

query() Not Authenticated Error

Did you find this page helpful?