Authentication flow
I'm currently working on building a marketplace. So far, everything is working fine with next-auth. I want two roles: customer and provider. I am trying to figure out a way to force registration for one of them, but not quite sure how. Right now, the only way I see it, is that I check the roles on each page and if they are neither customer or provider, then redirect to a page that makes them select one of them so I can assign it to their entry in the db, and then I will be able to show each page correspondingly to their role. I was wondering if there is a better option of forcing it, for example:
Click sign up -> Are you customer or provider -> whichever they choose they get to a page of Oauth sign in options and somehow I can save the fact what they chose in the previous setup and automatically fetch it in events: {createUser()} in [...nextauth].ts if possible, this would be the ideal way.
Can someone please chime in if they have any ideas on a smooth way to force a role on sign up? Thanks!
34 Replies
Hello, I think you should add new database field for Role, enum or string. Then when user logs in you get the role from db and add it to session, then you check session for the role, if no role redirect somewhere, if role reditect there.
You can also add default value for it but make it changable
Not sure how to do it without credentials provier
role-based-login-strategy | NextAuth.js
To add role based authentication to your application, you must do three things.
I've thought about this, it doesn't work. Think about it, how would you assign the role the first time they sign up? If you just create a new User with role=customer and no other data, how will you reference it?
? I mean you get the other data from the provider
If you use for example discord login
No you don't understand
Imagine this, you have two options to sign up as either customer or provider
Say you sign up as customer
Can you explain to me how you would correctly assign customer to that exact user with their Oauth details?
By adding role to prisma and after login forcing them to choose role or they cant see other pages, not sure what is the problem
You are logged in at that point so you know what user it is
I don't want to do that though, did you not read what I wrote?
Ok try to fix it yourself 😄
"Right now, the only way I see it, is that I check the roles on each page and if they are neither customer or provider, then redirect to a page that makes them select one of them so I can assign it to their entry in the db, and then I will be able to show each page correspondingly to their role. I was wondering if there is a better option of forcing it"
I am trying to, but I need help and you are just writing things that I already wrote in the original post?
You are right, how about, not sure if possible with provider but otherwice its possible to pass data liek that:
Now we're talking! Do you think this will work?
Let me check it out and see what happens, thank you
I did something like that with CredentialsProvider
It didn't work 😦
But this is exactly the functionality I am looking for
We predetermine whether they will be customer/provider such that when they complete Oauth, the role will be automatically added
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
You think so? I wasn't sure if it's more clear the user gets the option before even going any further, lots of times sellers will look for a separate sign up for them, thinking that the sign up is just for customers
If that makes any sense
Because if you go to any platform right now, they have separate sign up flows for customer/seller from the beginning
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
im actually working in the same case as you but heres my flow
user signup -> can choose a role(in my case between user and merchant) -> and then the db is change
and i have an idea but dont know if this is make sense to you,
how about making 2 t3.app(user and admin) but point into same db and then forward the port using caddy
There’s a isNewUser arg on the sign in event, if you were to set the role into redis using the user Id you get back. Then using the isNewUser you can set it in the database when they first sign in
It’s an indirect way to solve the problem for sure and am interested In What else comes up
How do I persist what the user chose before entering the oauth flow?
Because if I know their selection when the oauth flow is completed, my problem is solved, but you just skipped that step of explaining how to solve it 😂
Oh I completely didn’t realize you were using oauth, I did this with credentials ðŸ«
I think better to just do oAuth first -> then only redirect to the role page
1. OAuth with any providers
2. Brand new user
3. Redirect to role page if role attribute in session is undefined
4. Once user click customer or provider, hit another update db call
5. and update the session accordingly with the new role
Yeah this is my current solution.
Incredible how something so simple has to be so difficult 😂
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Any Oauth, but say Google as an example
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
@amanuel im building a marketplace also and don't waste too much time on this kind of thing (try to find cheapest solution), trust me better to launch it quickly
can always improve later on
Yeah, I just went with how I had it, nothing is stopping me
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
you could try and implement your own adapter to use in next-auth.
Prisma adapter source code: https://github.com/nextauthjs/next-auth/blob/main/packages/adapter-prisma/src/index.ts
Docs about creating your own adapter: https://next-auth.js.org/tutorials/creating-a-database-adapter
GitHub
next-auth/index.ts at main · nextauthjs/next-auth
Authentication for Next.js. Contribute to nextauthjs/next-auth development by creating an account on GitHub.
Create an adapter | NextAuth.js
Using a custom adapter you can connect to any database back-end or even several different databases. Official adapters created and maintained by our community can be found in the adapters packages. Feel free to add a custom adapter from your project to the repository, or even become a maintainer of a certain adapter. Custom adapters can still be...
Can you modify the Prisma adapter as-is?
Uhm, unsure. Not even sure if this would work. I just know it gives you access to the function used to create user in DB. The problem I can see you having is trying to send data to the adapter.
Yeah exactly
I know this might sound dumb to someone, but hear me out.
You technically have a way of detecting and passing a custom state "string" from one page to another, then fetching the signin options and selecting a different one based on the string state.
If you'd like to assign a different role to the same auth provider, then there's a different way, custom client sesh handling.
see image from docs for nextauth
Sorry if I've missed OP's intention, but to me this seems to satisfy his request
You can also throw a quick peek here, if this is what you might want:
https://discord.com/channels/966627436387266600/1047598504605913230