7 replies

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",
    },
  ],
};

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;
  },
});

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>
    );
  }

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)

query() Not Authenticated Error

Similar Threads

Similar Threads

Similar Threads