Comments (4)
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.
Related Issues (20)
- Profile Image not loading from Clerk HOT 1
- File title too long - Modal doesn't shorten or wrap HOT 1
- PDF upload throwing an error HOT 1
- Navigation sidebar and Server sidebar not redering after leaving the server or deleteing the server HOT 10
- Authentication failed against database server HOT 1
- Sidebar gone HOT 4
- How to deploy to the cloud server
- useInfiniteQuery is throwing ts errors in useChatQuery Hook. HOT 1
- does anyone solved the the error of useinfinitequery hooks and the messages are not showing because of it or there is any other reason? please help HOT 4
- Stream Timeout Issue Upon Deployment On Railway. HOT 3
- Sign in and Sign up HOT 4
- getting TypeError: Cannot read properties of undefined (reading 'role') on const icon = roleIconMap[member.role]; in server-member.tsx HOT 1
- Getting 500 Error while deleting the channels HOT 1
- Naming a channel "General" or "gEneral", etc... HOT 1
- Server Settings function error HOT 1
- Cannot read propertiess of undefined (reading 'bind') at DevServer.handleRequestImpl HOT 2
- Is there a way that I can make profile pictures update in the database if it is updated in clerk?
- Unhandled Runtime Error Error: @clerk/clerk-react: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys. HOT 1
- video title: server sidebar - DropdownMenuItem for role MODERATOR not visible
- Issue: Invite code resets to initial value after generating new link and closing and reopening the modal. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next13-discord-clone.