t3 tutorial - chirp project has problems w google auth via Clerk?
Hi guys!
I recently went through theo's official T3 tutorial. However, one way i deviated from what he did was I also allowed Google auth via Clerk (not just GitHub).
TLDR a user who signed up my chirp site using google instead of GitHub isn't given a username value for the object representing them in the Clerk client? i.e.,
author.username
is null
even though e.g., they're profile pic is registered (author.profileImageUrl
contains a url to their social account pic)?
---
problem: a friend today tried to use the website. he:
1. signed up and in via his google account
2. made a post
and that has screwed the .getAll
procedure for the posts
router.
The specific error thrown is the tRPC error is here in pic 1: "Author not found for post".
I can verify that my friend is a User via the Clerk Dashboard. i can also see that posts he made via npx prisma studio
. the author_id
in his post and the user_id
for his Clerk profile matches up. i.e., the posts were made.
---
Looking at theo's GH repo for the project, there was a recent merge where basically the case is handled for when the author.username
is null/undefined. the key bit is in the filterUserforClient
helper function. it gives the author
object an externalUsername
property by assigning: user.externalAccounts[0]?.username
i.e., the username provided by the User object's externalAccount
(s), if they have one.
despite doing this, the object associated with my friend's profile has null
for the newly set .externalUsername
property.
so, again, the TLDR: my friend who signed up on my chirp site using google instead of GitHub isn't given a username value for the object representing them in the Clerk client?
just to check that was the cause of the issue, I set the externalUsername
to "username-less"
and now the Feed
component can get all the posts. see pic 2.
---
question: has anyone experienced something similar? is there a good way around this?2 Replies
Google doesn't provide a username so you need to handle that correctly. That piece of code I put in there for Theo is because Theo didn't want users changing their username, and there are some times where the user's username didn't meet Clerks constraints.
So you can fix this by enabling username in the Clerk dashboard as a requirement and making it required.
Then when a user signs in they will be asked nicely to pick a username if it doesn't exist.