Role Based Authorization with Next Auth + Google Provider + Prisma in NEXT.JS
Вставка
- Опубліковано 14 жов 2024
- Join this channel to get access to perks:
/ @sakuradev
Learn how to implement powerful role-based authorization in Next.js using Next Auth, Google Provider, and Prisma. Secure your app, control user access, and level up your Next.js skills with this tutorial! 🔒👩💻
By the end of this tutorial, you'll have the skills to build an authentication and authorization system that fits your project's needs, from basic user roles to more advanced scenarios.
👉 Don't forget to like, subscribe, and hit the notification bell to stay updated with our latest tutorials on web development, Next.js, and more!
✅ GitHub Repo (Don't forget the fallow and give a start in GitHub):
github.com/vah...
#NextJS #Authorization #WebDev
That worked like a charm for me! Thank you for this tutorial
In the future, please, make more content on nextjs + prisma + postgresql
Dude. This is amazing. I've been struggling with google provider authentication for a while. This fixed it. Just a note - to initialize Prisma using sqlite database instead of the default Postgresql use the command "npx prisma init --datasource-provider sqlite"
Really happy that it was helpful for you. Also, thanks for your tip, so I don't need to manually change it to sql lite. I will use it in my upcomming videos.
Just what I needed man! Thank you!
🙏👍
AMAZING TUTORIAL! Thank you so much!
Just wanted to write that your videos are very clear and good, thanks!
Thanks, Really glad to hear that from you.
Thanks for replying
I'm sorry if the question makes no sense but i'm quite new with nextjs, from my understanding in next all the children of a client component must be client component, so then by wrapping the entire app with provider, doesn't it defeat the purpose of nextjs server side rendering?
thanks for the video!
Hi, good question. The answer is no. You can watch this short video in which I have explained it: ua-cam.com/video/xHOC1DJgQA0/v-deo.html
You made my day again !
Thanks and you also made my day with your nice words 💖
Thank you for this video, but I want to add custom roles (EMPLOYEE, EMPLOYER, ...) when sign in with Google Provider before create user in database, how can I do this?
Thank for this awesome tutorial!. question! when i build this project to deploy in vercel, Error: Unsafe assignment of an `any` value.. guessing from googleProvider using profile. the type shown is "any". how can I give the type for profile comming from Google?
hey, thanks for sharing such an amazing, precise codebase with unbeleiveable clarity of things ( explanations ).
Q. btw, which syntax theme you are using in vscode.(curious) arrow function and equality comparison with triple equal looked cool!
Hey Sakura, why do you create the Session Table in your DB? For me is everything workin without Session and VerificationToken ?
Here we are using the session strategy as "jwt", the session table if for the server side sessions (session.strategy="database") and the verificationToken table is for the email provider as long as you don't use those removing them works fine.
Whats the better method between allowing access to the admin dashboard this way or simply hiding the admin dashboard link from the navbar by checking the user role in the frontend
Meaning something like {user.role=='admin' ? Admin Dashboard: }
Which is the better method?
@@ichigokuro3986 definitely this way in the video.
Thanks mate! keep up the good work!@@SakuraDev
Hey, could you help me with a question about NextAuth providers and Next.js layouts? I'm using Route Groups in my app, so I don't have a single root layout. Instead, I have a (home) layout and an (auth) layout because I don't want to share my header and footer on both pages, just on the home page. So, where should I import the NextAuth provider? Should I import it in both layouts? Thank you!
Thank you!
Could you please make a tutorial on how to refresh token in nextauth?
Hi, In this video I have shown how we can do that: ua-cam.com/video/khNwrFJ-Xqs/v-deo.html
Here's a quick question how to you implement the 'bun:sqlite' instead of going the other route... Thank you in advance.
Can I use ExpressJS for auth logic while still having credential&google provider in NEXT.JS?
In this case you should use passport.js for it. You need to handle the Google authentication on your expressjs and the just tell nextjs that the user is authenticated. I will upload a video with a stand alone backend. It uses nestjs in the backend, however.
Hello, is it possible to setup google login with another Backend server using next and next auth and presist the user in the database?
Hi, yes it is possible. I should create a video about it
i would like to have a video for configurint jwt session token attaching access-token for back end api, would be nice to have azure ad provider as a sample
Wow, Nice video its really detailed and breaks down the complex part, may I ask which Icons you use in your vscode app?
Thanks 🙏, it's material icons
@@SakuraDev Thanks
@@SakuraDev hey sakura, may you didnt see my question: but why session and verficitation token tables? It’s works without also? I just want to understand :)
@@owl3379 hi, yes it works without them if you set the strategy to jwt. But if you set strategy to database you have to keep these tables
@@SakuraDev whats the key difference? Its better to store in database?
My problem is we have 3 roles. Advertiser, Publisher and Admin. I would like user to sign up as Advertiser or as Publisher. Now this data needs to comes from frontend. How to do that.
You can handle it in the middleware. get your user data from the backend with role then check them in middleware
Can you make a tutorial on how to use the credentials provider in conjunction with google provider please?
Yeah, Sure!
thx for tutorial..
i have a question.. how to handle session timeout ?
Thanks 👍, it is handled by next-auth
I am trying to follow along but I cant get the role to be changed role is just null even with the callback in place. Seems like its not working. All the other fields so name etc works fine its just role that is not working.
Can you share your code?
I want my admin to be able to create other users(employees). Does this video cover it?
In this video I have shown how we can protect pages based on the role of the user. A normal user can only see his profile, but an admin user can see the admin panel .
How to make: credentials + google provider + nestjs (simultaneously)? Backend shema contains password, but google doesn't provide password. So password in schema should be optional? Thank you for tutorial
I will create a short tutorial on that
@@SakuraDev i'm looking for this too
Amazing job!
Thanks 🙏🙏
thanks for sharing
Thanks for your constant support ❤️🙏
with this method is it possible to have more than 2 roles ?
It's a little complicated but yes we can do that with this method
@@SakuraDev thanks for the answer ❤️, i might just tried this out first
Can you please explain how I replace I'd with database id I don't, won't use sub I'd instead of this I want to use my databasge id
Hi, we should use the next-auth callbacks and replace the database id with google id in your session. I think next-auth is really complicated for many developer so now i am actually moving from next-auth to session based auth in next.js which is really simple and yet powerful. I have recorded a full tutorial for that and it will uploaded next week.
Nice video, but how to redirect user if role not admin?
You can handle it in the middleware. Redirect or rewrite
hi, I just want to ask , what if I had two signIn with google buttons, one to sign in as an admin and one to sign in as customer, how I tell what the role is ? I'm checking the provider in the signIn call back if it google then I save the user to the db in User table and in Account Table and if the user exist I just return it , but the user first sign in how I can differentiate if this user want to sign in as admin or as customer ?
he is not answering this in this video
i dont know why im receiving this error when trying to use PrismaAdapter... Type 'import("/home/thalys/Documents/projects/linkyplayer-dashboard/node_modules/@auth/core/adapters").Adapter' is not assignable to type 'import("/home/thalys/Documents/projects/linkyplayer-dashboard/node_modules/next-auth/adapters").Adapter'.
Types of property 'createUser' are incompatible.
Type '((user: AdapterUser) => Awaitable) | undefined' is not assignable to type '((user: Omit) => Awaitable) | undefined'.
Type '(user: AdapterUser) => Awaitable' is not assignable to type '(user: Omit) => Awaitable'.
Types of parameters 'user' and 'user' are incompatible.
Property 'id' is missing in type 'Omit' but required in type 'AdapterUser'.ts(2322)
adapters.d.ts(174, 5): 'id' is declared here.
types.d.ts(106, 5): The expected type comes from property 'adapter' which is declared here on type 'AuthOptions'
(property) AuthOptions.adapter?: Adapter | undefined
Yeah... I'm also receiving the same error... don't know why...
Thanks for stick and using next-auth
As every tutorial using clerk which is easy but not good for pricing
Happy to help
Could you please make one with nextauth 4 + firebase 10 adapter
Of course
Make this with google auth next auth client only in next js and api save users data using nest js Rest Api role based
Make tutorial on it
That would be very cool, because I can’t find any information about this. I would like to see the implementation of oauth + next auth + nest with JWT and Refresh tokens
I was searching for the solution where we can customise some email domain snd can tell whether its an user or admin.
But this is just changing the roles manually.
Not that helpfull
what if the user role is in another table? not in the user table? how would you get the role of user?
we are using prisma so we just need to use "Include" api in the prisma query to get the user role from a related table. the rest is the same
@@SakuraDev I was thinking of using either select or include with prisma for credentials log in, however, how about for Google Provider log in? Do u have an idea if you can also add a function to it? thanks, I really like your channel.
@@sirhc6chris1984 well, first thanks for your nice words. when we want to implement role based authorization with google provider, as I have shown in the video, we can use " profile" function to get the role of the user.
The tutorial is not reflecting real world scenarios. basically you have only one role (user) and change the role in the database to add more roles. In a real world as many users pointed out here in the comments you already have 2,3,4 roles and they need to register. That is the biggest riddle nextauth is very bad to ealborate. How to handle different signIn locations (for different roles) for example admin has his own Register Button viah Oauth.
Theme and font of vs code
Hi, Bearded arch theme and jetbrain font
6:37
18:30
11:20
if you used mongoDB in your every tutorial you would get more sub.
I will try that