Seeking Solace
Seeking Solace
PostsComments
CCConvex Community
Created by Seeking Solace on 4/19/2025 in #support-community
How to force consent screen on log in? (Google OAuth + Convex Auth)
When I sign in using Google OAuth with Convex, I don't get the option to pick an account. It just automatically logs in with the latest account. How do I force account selection every time the user clicks the login button? For reference, this is how my login component looks like: 
"use client";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useAuthActions } from "@convex-dev/auth/react";
import { useTranslations } from "next-intl";
import { FaGoogle } from "react-icons/fa";

export default function GoogleAuth({
  className,
  isIcon,
}: {
  className?: string;
  isIcon?: boolean;
}) {
  const { signIn } = useAuthActions();
  const t = useTranslations("Auth");

  return (
    <Button onClick={() => signIn("google")} className={cn(className)}>
      <FaGoogle />
      {!isIcon && t("signIn")}
    </Button>
  );
}
"use client";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useAuthActions } from "@convex-dev/auth/react";
import { useTranslations } from "next-intl";
import { FaGoogle } from "react-icons/fa";

export default function GoogleAuth({
  className,
  isIcon,
}: {
  className?: string;
  isIcon?: boolean;
}) {
  const { signIn } = useAuthActions();
  const t = useTranslations("Auth");

  return (
    <Button onClick={() => signIn("google")} className={cn(className)}>
      <FaGoogle />
      {!isIcon && t("signIn")}
    </Button>
  );
}
2 replies
CCConvex Community
Created by Seeking Solace on 1/16/2025 in #support-community
"getManyViaOrThrow" Convex Helper Function Expects 6 Arguments
Relevant Schema: 
  users: defineTable({
    name: v.optional(v.string()),
    image: v.optional(v.string()),
    email: v.optional(v.string()),
    emailVerificationTime: v.optional(v.number()),
    phone: v.optional(v.string()),
    phoneVerificationTime: v.optional(v.number()),
    isAnonymous: v.optional(v.boolean()),
  }).index("email", ["email"]),
  boards: defineTable({
    title: v.string(),
  }),
  userBoards: defineTable({
    userId: v.id("users"),
    boardId: v.id("boards"),
  })
    .index("userId", ["userId"])
    .index("boardId", ["boardId"]),
  users: defineTable({
    name: v.optional(v.string()),
    image: v.optional(v.string()),
    email: v.optional(v.string()),
    emailVerificationTime: v.optional(v.number()),
    phone: v.optional(v.string()),
    phoneVerificationTime: v.optional(v.number()),
    isAnonymous: v.optional(v.boolean()),
  }).index("email", ["email"]),
  boards: defineTable({
    title: v.string(),
  }),
  userBoards: defineTable({
    userId: v.id("users"),
    boardId: v.id("boards"),
  })
    .index("userId", ["userId"])
    .index("boardId", ["boardId"]),
Mutation: 
export const getUserBoards = query({
  args: {},
  handler: async (ctx) => {
    const userId = await getAuthUserId(ctx);
    if (!userId) {
      throw new Error("Not authenticated");
    }

    const boards = await getManyViaOrThrow(ctx.db, "userBoards", "boardId", "userId", userId);
    return boards;
  },
});
export const getUserBoards = query({
  args: {},
  handler: async (ctx) => {
    const userId = await getAuthUserId(ctx);
    if (!userId) {
      throw new Error("Not authenticated");
    }

    const boards = await getManyViaOrThrow(ctx.db, "userBoards", "boardId", "userId", userId);
    return boards;
  },
});
Error: 
Expected 6 arguments, but got 5.ts(2554)
relationships.d.ts(157, 618): Arguments for the rest parameter 'fieldArg' were not provided.
Expected 6 arguments, but got 5.ts(2554)
relationships.d.ts(157, 618): Arguments for the rest parameter 'fieldArg' were not provided.
I have thoroughly read the "Database Relationships Helpers" article: https://stack.convex.dev/functional-relationships-helpers But I can't find an example where he uses 6 arguments, nor can I find any examples or documentation that lists the 6 required arguments.
5 replies
CCConvex Community
Created by Seeking Solace on 1/14/2025 in #support-community
Push id of a newly created document to another on creation
My schema looks like this: 
  boards: defineTable({
    title: v.string(),
    users: v.array(v.id("users")),
    columns: v.array(v.id("columns")),
  }),
  columns: defineTable({
    title: v.string(),
    tasks: v.array(v.id("tasks")),
  }),
  boards: defineTable({
    title: v.string(),
    users: v.array(v.id("users")),
    columns: v.array(v.id("columns")),
  }),
  columns: defineTable({
    title: v.string(),
    tasks: v.array(v.id("tasks")),
  }),
My createColumn mutation: 
export const createColumn = mutation({
  args: zodToConvex(CreateColumnSchema),
  handler: async (ctx, args) => {
    const newColumnId = await ctx.db.insert("columns", { title: args.title, tasks: [] });
    // WIP: Update the respective board's columns
    return newColumnId;
  },
});
export const createColumn = mutation({
  args: zodToConvex(CreateColumnSchema),
  handler: async (ctx, args) => {
    const newColumnId = await ctx.db.insert("columns", { title: args.title, tasks: [] });
    // WIP: Update the respective board's columns
    return newColumnId;
  },
});
The Zod schema looks like this: 
export const CreateColumnSchema = z.object({
  id: z.string(), // id of the board
  title: z.string().min(1, { message: "Title is required." }).max(32, {
    message: "Title is too long.",
  }),
});
export const CreateColumnSchema = z.object({
  id: z.string(), // id of the board
  title: z.string().min(1, { message: "Title is required." }).max(32, {
    message: "Title is too long.",
  }),
});
I would like to push the id of the new column to the respective board document. How can I do this?
5 replies
CCConvex Community
Created by Seeking Solace on 12/21/2024 in #support-community
Fetching another document's data via id in query
schema.ts 
import { authTables } from "@convex-dev/auth/server";
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  ...authTables,
  announcements: defineTable({
    text: v.string(),
    userId: v.string(),
  }),
  events: defineTable({
    title: v.string(),
    description: v.string(),
    date: v.string(),
    imageId: v.string(),
    userId: v.string(),
  }),
  messages: defineTable({
    text: v.string(),
    userId: v.string(),
  }),
});
import { authTables } from "@convex-dev/auth/server";
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  ...authTables,
  announcements: defineTable({
    text: v.string(),
    userId: v.string(),
  }),
  events: defineTable({
    title: v.string(),
    description: v.string(),
    date: v.string(),
    imageId: v.string(),
    userId: v.string(),
  }),
  messages: defineTable({
    text: v.string(),
    userId: v.string(),
  }),
});
chat.ts 
import { v } from "convex/values";
import { mutation, query } from "./_generated/server";

export const sendMessage = mutation({
  args: { text: v.string() },
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) {
      throw new Error("Unauthenticated call to sendMessage");
    }
    const { text } = args;
    await ctx.db.insert("messages", {
      text,
      userId: identity.subject,
    });
  },
});

export const listMessages = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("messages").order("desc").take(50);
  },
});
import { v } from "convex/values";
import { mutation, query } from "./_generated/server";

export const sendMessage = mutation({
  args: { text: v.string() },
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) {
      throw new Error("Unauthenticated call to sendMessage");
    }
    const { text } = args;
    await ctx.db.insert("messages", {
      text,
      userId: identity.subject,
    });
  },
});

export const listMessages = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("messages").order("desc").take(50);
  },
});
How do I read a user's name when querying the messages via the userId property? For context, I'm using ConvexAuth.
10 replies
CCConvex Community
Created by Seeking Solace on 12/21/2024 in #support-community
How to get the URL of an image in the storage by its id?
I have tried the http method but obviously I'm doing something wrong. convex/http.ts 
import { httpRouter } from "convex/server";
import { Id } from "./_generated/dataModel";
import { httpAction } from "./_generated/server";
import { auth } from "./auth";

const http = httpRouter();

auth.addHttpRoutes(http);

http.route({
  path: "/getImage",
  method: "GET",
  handler: httpAction(async (ctx, request) => {
    const { searchParams } = new URL(request.url);
    const storageId = searchParams.get("storageId")! as Id<"_storage">;
    const blob = await ctx.storage.get(storageId);
    if (blob === null) {
      return new Response("Image not found", {
        status: 404,
      });
    }
    return new Response(blob);
  }),
});

export default http;
import { httpRouter } from "convex/server";
import { Id } from "./_generated/dataModel";
import { httpAction } from "./_generated/server";
import { auth } from "./auth";

const http = httpRouter();

auth.addHttpRoutes(http);

http.route({
  path: "/getImage",
  method: "GET",
  handler: httpAction(async (ctx, request) => {
    const { searchParams } = new URL(request.url);
    const storageId = searchParams.get("storageId")! as Id<"_storage">;
    const blob = await ctx.storage.get(storageId);
    if (blob === null) {
      return new Response("Image not found", {
        status: 404,
      });
    }
    return new Response(blob);
  }),
});

export default http;
event-list.tsx 
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { api } from "@/convex/_generated/api";
import { useQuery } from "convex/react";
import Image from "next/image";

export default function EventList() {
  const events = useQuery(api.events.listEvents) || [];

  function getImageUrl({ storageId }: { storageId: string }) {
    const imageUrl = new URL(`${process.env.NEXT_PUBLIC_CONVEX_SITE_URL}/getImage`);
    imageUrl.searchParams.set("storageId", storageId);
    console.log(imageUrl.href);

    return imageUrl.href;
  }

  return (
          {events.map((event: any) => (
            <Card key={event._id}>
              <CardContent className="p-4">
                <Image
                  src={getImageUrl(event.imageId)}
                  alt={event.title}
                  width={300}
                  height={200}
                  className="mb-4 h-48 w-full rounded object-cover"
                />
              </CardContent>
            </Card>
          ))}
  );
}
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { api } from "@/convex/_generated/api";
import { useQuery } from "convex/react";
import Image from "next/image";

export default function EventList() {
  const events = useQuery(api.events.listEvents) || [];

  function getImageUrl({ storageId }: { storageId: string }) {
    const imageUrl = new URL(`${process.env.NEXT_PUBLIC_CONVEX_SITE_URL}/getImage`);
    imageUrl.searchParams.set("storageId", storageId);
    console.log(imageUrl.href);

    return imageUrl.href;
  }

  return (
          {events.map((event: any) => (
            <Card key={event._id}>
              <CardContent className="p-4">
                <Image
                  src={getImageUrl(event.imageId)}
                  alt={event.title}
                  width={300}
                  height={200}
                  className="mb-4 h-48 w-full rounded object-cover"
                />
              </CardContent>
            </Card>
          ))}
  );
}
15 replies