Clerk - multi-user login/profiles
Hi there
I’m trying to find any Clerk documentation on handling different sign up flows for different types of users. My site has 3 users. Of which I want them to have access to different parts of the site and have unique profile pages. Any pointers that anyone could share would be greatly appreciated, or would I need to use NextAuth for something like this?
18 Replies
Maybe you could use the userMetadata shown in here: https://clerk.com/docs/users/user-metadata
User metadata | Clerk
User objects hold a set of metadata that can be used internally to store arbitrary information.
Then in your middleware you could access that data and define if the user can access that page or not
This is probably the solution if it is B2C if you are building B2B or need organizations we have prebuilt roles (admin, member) and custom ones coming soon.
Thank you both. I’ll def look into the metadata option. I’d be excited about the custom ones coming. It’s more B2B, I would think. An artist on my site creates a profile and a venue creates a profile. Then the venue can make a request to book an artist for a gig.
Happy to help! Good luck with your project! 😁
Hey if you figure out how to implement this with user metadata please link the repo! I have a very similar use case and the Clerk docs do link to an example repo but it’s a couple years old
It's just this:
1. user signs up.
2. Webhook fires, update metadata.
3. send user to the right place based on their users.
Or
1. user signs up.
2. check metadata if no metadata, add correct metadata.
3. redirect user to correct parts.
thanks James appreciate the help. I'm relatively new to full-stack dev so forgive me for not fully understanding, but this all has to be done with the useSignUp() hook correct? There's no way to add custom fields/user metadata to Clerk's built-in components right
If you do the first method. you can use our components.
actually both can be done without custom flows.
huh interesting. if there are any resources out there that show either of the two methods please point me there! don't want to take up any more of your time on a newbie 🙂
Basically enable webhooks and then this:
https://clerk.com/docs/integration/webhooks
Right but does that allow the user to input their own metadata? I’d need users to be able to provide info like artist name which they’ll need to input themselves
Okay so as we peel the layers.
Sign the user up.
Ask the user for their data.
Update user.
Make no sense to do it any other way or.
Ask user for data.
Sign up user.
Add metadata...
Perhaps, @IAmZen ask the user something unique that will sort the users based on who they are and accordingly, it will place the users in the correct "buckets", with that, we can restrict or modify what they can and can't see. Rather than do this with Clerk, for my use case, I am working on the following.
I have three user cohorts.
1. General users who want to browse the site and see music concerts
2. Artists who want to promote to venues and general users
3. Venues who want to find artists and get general users in their doors
I could play with the metadata, or....
Given everyone fits into the first cohort of general users. I give general users an option to "upgrade" their account. In my use case, they need to subscribe to be artists or a venue. This costs money, so I manage it through a sign up process in Stripe and my Supabase db updates accordingly. Then, using tRPC i create private procedures and routes for artists and venues.
Oh cool sounds like a solution that works for you. But I actually think I figured it out thanks to @James Perkins last message! I redirected after signup using the aftersignupurl property and then created a custom form to ask and store user metadata. It now shows up as unsafe metadata in the Clerk dashboard so looks like it’s all working properly. Thanks to both of you for your help
Oh sweet. That sounds great. Nice one. And thanks @James Perkins really appreciate it
Anytime... It's my job 😄
Well then. Keep up the good work!!