Merge pull request #8 from deepsingh132/development

Fix bug in Clerk webhook: ensure user creation in Convex DB for email signups without first name
deepsingh132 · Nov 14, 2024 · 380ad15 · 380ad15
2 parents f5d9605 + cb82079
commit 380ad15
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/app/(root)/profile/page.tsx b/app/(root)/profile/page.tsx
@@ -8,14 +8,13 @@ import PodcastCard from "@/components/PodcastCard";
 import ProfileCard from "@/components/ProfileCard";
 import { api } from "@/convex/_generated/api";
 import { ProfilePodcastProps } from "@/types";
-import { useClerk } from "@clerk/nextjs";
 
 const MyProfilePage = () => {
 
-  const { user } = useClerk();
+  const user = useQuery(api.users.getUser);
 
   const podcastsData = useQuery(api.podcasts.getPodcastByAuthorId, {
-    authorId: user?.id!,
+    authorId: user?.clerkId!,
   }) as ProfilePodcastProps;
 
   if (!user || !podcastsData) return <LoaderSpinner />;
@@ -27,10 +26,10 @@ const MyProfilePage = () => {
       </h1>
       <div className="mt-6 flex flex-col gap-6 max-md:items-center md:flex-row">
         <ProfileCard
-          profileId={user.id}
+          profileId={user.clerkId}
           podcastData={podcastsData}
           imageUrl={user?.imageUrl!}
-          userFirstName={user.firstName!}
+          userFirstName={user.name}
         />
       </div>
       <section className="mt-9 flex flex-col gap-5">

diff --git a/components/RightSidebar.tsx b/components/RightSidebar.tsx
@@ -27,7 +27,11 @@ const RightSidebar = () => {
         <Link href={`/profile/${user?.id}`} className="flex gap-3 pb-12">
           <UserButton />
           <div className="flex w-full items-center justify-between">
-            <h1 className="text-16 truncate font-semibold text-white-1">{user?.firstName} {user?.lastName}</h1>
+            <h1 className="text-16 truncate font-semibold text-white-1">
+              { user?.firstName && user?.lastName ?
+                user?.firstName + " " + user?.lastName
+              : user?.emailAddresses[0].emailAddress.split("@")[0]}
+            </h1>
             <Image
               src="/icons/right-arrow.svg"
               alt="arrow"

diff --git a/convex/http.ts b/convex/http.ts
@@ -20,7 +20,9 @@ const handleClerkWebhook = httpAction(async (ctx, request) => {
         clerkId: event.data.id,
         email: event.data.email_addresses[0].email_address,
         imageUrl: event.data.image_url,
-        name: event.data.first_name!,
+        name: event.data.first_name
+          ? event.data.first_name + " " + (event.data.last_name ?? "")
+          : event.data.email_addresses[0].email_address.split("@")[0],
       });
       break;
     case "user.updated":