If their is no lastname attached in the google profile, null value is being shown in the application. about next13-discord-clone HOT 4 OPEN

This is a good catch. Also, if user does not have lastName, the <MediaRoom /> component will load forever, because I check for user.lastName inside useEffect. For now I am just gonna keep this issue open so whoever stumbles upon it can see the solution. I might merge this fix later, but for now I want to keep the code true to the video.

from next13-discord-clone.

my solution like this

// in media-room.tsx
if (
     typeof user?.firstName == "undefined" ||
     typeof user?.lastName == "undefined"
   )
     return;

   function random4DigitNumber() {
     // Generate a random number between 1000 and 9999 (inclusive)
     return Math.floor(Math.random() * 9000) + 1000;
   }
   
   //prettier-ignore
   const name = `${user.firstName ?? ""} ${user.lastName ?? ""} - ${random4DigitNumber()}`;
   // the random4DigitNumber to prevent disconnected livekit if 2 person have same name

// in initial-profile.ts
const newProfile = await db.profile.create({
    data: {
      userId: user.id,
      name: `${user.firstName ?? "Username"} ${user.lastName ?? ""}`,
      imageUrl: user.imageUrl,
      email: user.emailAddresses[0].emailAddress,
    },
  });

from next13-discord-clone.

Ran into this same situation. It can be reproduced easily with non-social sign-ups because Clerk does not save the data besides the email for the non-social sign-ups on sign-up unless you turn it on in the Clerk settings.

On the Clerk dashboard in the 'Email, Phone, Username' section. Turn on the toggle at 'Personal Information' and it will prompt the user on sign-up to add a first and last name. There is also an option to turn on the Username prompt, that will force even the social sign-ups to create a username.

The user will be able to edit this on the Clerk User Management panel as well as add an image for avatar.

Solution: Turn on Username in the Clerk in the dashboard 'Email, Phone, Username' section. Whenever the user signs-up either with social or non-social login, they will now be given this prompt:

// in initial-profile.ts
const newProfile = await db.profile.create({
    data: {
      userId: user.id,
      name: `${user.username}`,
      imageUrl: user.imageUrl,
      email: user.emailAddresses[0].emailAddress,
    },
  });

from next13-discord-clone.

True. Also to add to the OP's point, if we sign up using username/password instead of google sign in, null value will show for first name and last name. The solution is to add them later in the manage account setting in clerk.

from next13-discord-clone.