Тёмный
No video :(

Comprehensive Authentication Tutorial in Next.js 14 

Sakura Dev
Подписаться 12 тыс.
Просмотров 35 тыс.
50% 1

Опубликовано:

 

26 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 149   
@therealdevopsintern
@therealdevopsintern 7 месяцев назад
This channel is highly underrated, as a lead software engineer in our start up we are using nextjs and I used this channel's refresh and access tokens for authentication tutorials and it has been our day to day application because it enables us hit the same API for our mobile application
@SakuraDev
@SakuraDev 7 месяцев назад
Thank you so much 🙏🙏. I am really glad it was helpful for you 🙂🙂.
@OnlyJavascript
@OnlyJavascript 7 месяцев назад
@@SakuraDev truly helped me a lot.
@kenshinhimura3140
@kenshinhimura3140 7 месяцев назад
I agree with your comment, god bless your parents.
@iamvinny
@iamvinny 6 месяцев назад
shut up mohammed
@treyrader
@treyrader Месяц назад
Just opened the repo to see its goods and you can always tell the developer is going to be competent by looking at their choice of technologies used. Right on, bro
@SakuraDev
@SakuraDev Месяц назад
Thanks
@zoltaanone1146
@zoltaanone1146 6 месяцев назад
I must say this is an amazing course on next-auth, your way of teaching is very clear and easy to understand sir. I've learnt so much from this video, really useful for my uni project, going to share this with my friends. Thank you so much once again🙏🙏
@SakuraDev
@SakuraDev 6 месяцев назад
I'm really glad it was helpful.
@nasko235679
@nasko235679 5 месяцев назад
You have no idea how many incomplete videos I had to go through until I found this one. First person to explain every step properly and I finally get it. Took me a week to learn nextauth and without your vid it might've been a month.
@SakuraDev
@SakuraDev 5 месяцев назад
I am really glad that it was helpful for you 🙂. Thank you so much 🙏
@nasko235679
@nasko235679 5 месяцев назад
@@SakuraDev I have a noob question if that's ok. Some websites have the ability to sign in with either an username or an email interchangably in a single field. Is this possible with next auth? Can I implement some kind of conditional logic to my authentication that accepts either parameter as a sign-in credential?
@SakuraDev
@SakuraDev 5 месяцев назад
Yes it is possible. In your authorize function of the next auth, you can find the user in in user table where it emails match with entered username or matched with user's email
@nasko235679
@nasko235679 5 месяцев назад
@@SakuraDev Thanks a lot there are a lot of details in your video that are super important yet people don't cover.
@SakuraDev
@SakuraDev 5 месяцев назад
Thanks a lot 👍
@ilan117
@ilan117 7 месяцев назад
Sekura ❤ I’m only at the first hour of this tutorial. Had to submit a comment to say a big thank you! You absolutely know how to explain and teach. I love every minute of it.
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks a lot. I am really glad you found it helpful 🙏
@santhoshkalisamy
@santhoshkalisamy 6 месяцев назад
Man, you deserve a lot more subscribers. As a beckend developer, I had hard time understading the working of Nextjs, you nailed it with your best in class course. Now I could build an awesome application.
@SakuraDev
@SakuraDev 6 месяцев назад
Thank you so much 🙏. I am really glad that it was helpful for you 😊
@friedrichsiever5964
@friedrichsiever5964 7 месяцев назад
Thanks a million. Your tutorial is not only the best abaout next-authenticaition. Its the door to modern next14 Fullstack Development.
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks for your nice words 🙏🙏
@sahnb
@sahnb 7 месяцев назад
First time here, and I'm blown away by your content! Your teaching is exceptional. Looking forward to more! Could you cover Role and Permission-based Access in your upcoming videos? Thanks for the great work!
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks 🙏🙏. I have already actually 2 videos on role based authorization.
@wuwo2296
@wuwo2296 4 месяца назад
I am highly appreciative of this tutorial! Like others I have had many false starts due to gaps in my knowledge of all the necessary packages/libraries that work together in a nice onboarding service. This tutorial answers a majority of my knowledge gaps as a noob. Thank you for putting this together as I know how much effort and planning goes into something like this. I look forward to many more tutorials from you!
@SakuraDev
@SakuraDev 4 месяца назад
Thank you so much for your enthusiastic comment. Thi gives me energy to move forward ⏩
@anushkasharma3736
@anushkasharma3736 4 месяца назад
this is the most straight foreward tutorial on next auth I love it
@SakuraDev
@SakuraDev 4 месяца назад
I'm really glad that you liked it 😊
@onildo_costa
@onildo_costa 7 месяцев назад
Thanks for you vid. I've watched your Nest/Next vídeo from last year, and comparing with this new one, it's much better. I also think you improved your explaning skills a lot. Congratz bud.
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks for your encouragement 🙏🙏🙏. This will give me energy to move forward ⏩
@turokII
@turokII 23 дня назад
This is a great tutorial, thank you for all your hard work!
@SakuraDev
@SakuraDev 23 дня назад
You're very welcome! I'm glad you found the tutorial helpful. Creating valuable content is my passion, so hearing positive feedback is incredibly rewarding. If you have any questions or need further assistance, feel free to ask!
@thoropyt9955
@thoropyt9955 7 месяцев назад
Keep making content like this, your content is great🙏
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks for your support 🙏🙏🙏
@user-sm1rs7xn2k
@user-sm1rs7xn2k 7 месяцев назад
Thank you very much teacher, it was the best authentication training I have seen. Thankful
@SakuraDev
@SakuraDev 7 месяцев назад
You are the best ❤️
@brayanjpm
@brayanjpm 7 месяцев назад
i will say that sakuradev is an underrated channel, thanks for all bro
@SakuraDev
@SakuraDev 7 месяцев назад
I appreciate that!
@rajbongshi2002
@rajbongshi2002 7 месяцев назад
I have subscribed your channel immediately after seeing your intro of this video.
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks for your support 🙏🙏
@nocturno7887
@nocturno7887 4 месяца назад
Amazing tutorial. All I've been asking for for years. Thank you very much
@SakuraDev
@SakuraDev 4 месяца назад
Thanks a lot 🙏🙏🙏
@metalcodebr
@metalcodebr 4 месяца назад
Thank you for the video, watching it here from 🇧🇷 Brazil, God bless you and your family, thank you very much for the great content, success brother!
@SakuraDev
@SakuraDev 4 месяца назад
Thank so much 🙏🙏🙏🎉💖
@HenokGebresenbet
@HenokGebresenbet 7 месяцев назад
wow this is crazy i have beenn expecting this kind of tutorial from scratch on youtube what can i say thank you happy new year
@SakuraDev
@SakuraDev 7 месяцев назад
Happy new year! Glad it was helpful!
@alexandervasilenko7773
@alexandervasilenko7773 7 месяцев назад
Vahid, thank you very very much for the such an amazing tutorial!! Really appreciate it :) Lets continue? Waiting...
@SakuraDev
@SakuraDev 7 месяцев назад
Thank you, I will
@maka55567
@maka55567 5 месяцев назад
You're really amazing. Just everything I need right now. Thank you
@SakuraDev
@SakuraDev 5 месяцев назад
Thanks 🙏🙏🙏
@johanrutberg8054
@johanrutberg8054 6 месяцев назад
Thanks alot for this tutorial! It was a big help to my project. Great job! 👍
@SakuraDev
@SakuraDev 6 месяцев назад
Thanks you so much 😊
@mDHARYL
@mDHARYL 6 месяцев назад
This is what i been looking for Thanks 🎉
@SR-zi1pw
@SR-zi1pw 7 месяцев назад
Nice one sakura ❤❤
@SakuraDev
@SakuraDev 7 месяцев назад
First Comment 😅 Thanks 🙏🙏
@tranngochai6558
@tranngochai6558 7 месяцев назад
awesome !!!!
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks 🙏🙏🙏
@fluFFPfizschi
@fluFFPfizschi 7 месяцев назад
hey Sakura, nice video! in one of your last videos you showed how to create a custom authentication service using nestjs and nextjs with jwt tokens send via the header. could you make a new fullstack authentication video using http only cookies? i would really appreciate. 🎉
@nefejames
@nefejames 4 месяца назад
Thank you! Thank you!! Thank you for this video!!!
@SakuraDev
@SakuraDev 4 месяца назад
Thank you so much 🙏🙏🙏🙏🙏
@metaeducation6813
@metaeducation6813 7 месяцев назад
Perfect New Year GIFT! Thanks a lot
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks a lot.
7 месяцев назад
Amazing tutorial! Thank you so much!
@SakuraDev
@SakuraDev 7 месяцев назад
Glad you enjoyed it!
@rockbelleh6237
@rockbelleh6237 7 месяцев назад
Tanks been waiting for this great project ❤
@muhammadnoman6513
@muhammadnoman6513 6 месяцев назад
❤❤love the way you teach
@SakuraDev
@SakuraDev 6 месяцев назад
❤️🌹
@benjamingoller6267
@benjamingoller6267 4 месяца назад
I have followed the tut and was so proud that all works now. But a bit too well? I noticed that all server actions can be called from the client side even without authorization. I don’t use Prisma but just a executeQuery function for mysql2. That server function can be used on client, as it should, to make database queries with normal sql (can just put the query in there). But: Anyone can use it. I made a button on a client page (just the home page outside of protected routes) that accesses the server action. And it works! And whatever I do I cannot prevent the client to always and anywhere use that server action. No idea how to protect it… Really frustrating because that would mean I need to use api routes for database queries??
@Nick-ks1nr
@Nick-ks1nr 6 месяцев назад
This video is the best explanation on next auth with a credentials provider period. Thanks for your great work. Do you have a video on how to verify a jwt token returned by a backend?
@SakuraDev
@SakuraDev 6 месяцев назад
Thanks for your nice words 🙏, Actually I have video about your question ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-khNwrFJ-Xqs.html
@DavoodRezasoltany
@DavoodRezasoltany 4 месяца назад
merci kheili khob bod
@RamrachaiMarma
@RamrachaiMarma 3 месяца назад
Thanks for amazing video. But your video sound is very low. I have set to maximun volume i my pc and youtube video player. still sound is low. Cordial Suggestion to improve sound quality.
@SakuraDev
@SakuraDev 3 месяца назад
Thanks for bringing that to my attention, I have amplified the second volume in my today video
@jrmartinss
@jrmartinss 7 месяцев назад
Good jobs 👏🏻👏🏻
@en_kratia
@en_kratia 7 месяцев назад
Massive job. Thank you
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks a lot 🙏
@saikrishnamuntha62
@saikrishnamuntha62 7 месяцев назад
Hi bro how to set the default page to be login when go to npm run dev in the browser it to be handle localhost:3000/login not the home page localhost:3000 I implemented but when I gave localhost:3000 its changing to localhost:3000/login but the issue is white space occuring 2secs then login page occuring how to resolve this issue
@Brlesskoin
@Brlesskoin 4 месяца назад
At @2:18:32 I'm getting an error: Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined
@user-tg8nd5vr4o
@user-tg8nd5vr4o 7 месяцев назад
great tutorial thank you so much can you also make project based tutorial using microservices architectures with nestjs,graphql,prisma,nextjs,docker so on
@SakuraDev
@SakuraDev 7 месяцев назад
Great suggestion!
@hirenjoshi2198
@hirenjoshi2198 5 месяцев назад
Thank you for sharing this content. I have one question, how do you handle redirecting the user to the profile page when that user tries to access the login page after successful authentication using middleware.
@ambujmittal6824
@ambujmittal6824 4 месяца назад
There are so many videos on Auth on this channel. There's a playlist but it doesn't have all the videos on Auth from this channel. Can you please tell me the order in which I am supposed to watch these videos?
@ambujmittal6824
@ambujmittal6824 4 месяца назад
btw, coming here from your prisma/ drizzle tutorials and absolutely loved them!
@dzseroldfabian4574
@dzseroldfabian4574 6 месяцев назад
it was a rly good tutorial but i felt like the "okey" wasn't enough
@thegrtnx
@thegrtnx Месяц назад
Great video but what about for consuming external nest.js REST APIs?
@SakuraDev
@SakuraDev Месяц назад
Hi, Thanks, For that you can watch this vide: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-khNwrFJ-Xqs.html
@davideminardi875
@davideminardi875 6 месяцев назад
Hi very good tutorial, only one question on form validation, is it a client or server side validation for user registration?
@JoeBoo532
@JoeBoo532 7 месяцев назад
Is there a reason why we're creating 'pages/api/auth/[...nextauth].route.ts' instead of 'pages/api/auth/[...nextauth].ts' like the documentation suggested on their site?
@BK-fk4gf
@BK-fk4gf 7 месяцев назад
Impressive....
@heniyentertainment
@heniyentertainment 7 месяцев назад
because of this vedeo i just sub you with my two accounts
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks for your support
@lobsanggyatso6280
@lobsanggyatso6280 7 месяцев назад
have one question, first case if both frontend and backend as next, how to store session and access token and refresh token, should i store it in cookie or what?? how to recall the refresh token . same question about separate backend. bit stuck here, thank you.
@Brlesskoin
@Brlesskoin 6 месяцев назад
Why dont you let to save this on a list so I can watch it whenever I want?...
@onildo_costa
@onildo_costa 7 месяцев назад
Hi Sekura! It's me again! I've done some custom stuff to the project, and it's working fine on my machine. After that, I've send to Netlify, but after the deploy for some reason I'm getting error messages when trying to comunicate with prisma. Wich aditional configuration I need to do to make it work?
@byronloarte
@byronloarte 7 месяцев назад
What is the theme that You use in VSCODE?
@SakuraDev
@SakuraDev 7 месяцев назад
Bearded themes
@byronloarte
@byronloarte 7 месяцев назад
​@@SakuraDev thank you and which theme specifically do you use? 😊
@zanasuleiman
@zanasuleiman 7 месяцев назад
Why api/auth/[...nextauth] is not working for me ??
@prashlovessamosa
@prashlovessamosa 7 месяцев назад
Thanks Sakura.
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks 🙏🙏🙏
@paarsaJam
@paarsaJam 7 месяцев назад
Thank you so much for sharing such a great tutorial video! sorry for asking, When exactly we need to use Nest.js too, for authentication? I mean while Next.js is capable of authentication what is the point of using Nest.js?
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks. We are using nextjs as a full stack project, so we don't have a backend server. If we use nextjs just as front end, then we need a back end server like nest.js to keep track of our user data. I have a video on that. You can find it on my channel
@paarsaJam
@paarsaJam 7 месяцев назад
❤🙏@@SakuraDev
@mehdidini880
@mehdidini880 7 месяцев назад
Thank you dear Vahid🤍
@SakuraDev
@SakuraDev 7 месяцев назад
🙏🙏🙏
@ababacarcisse7969
@ababacarcisse7969 7 месяцев назад
good tutorial tanks
@SakuraDev
@SakuraDev 7 месяцев назад
Thanks 🙏
@ababacarcisse7969
@ababacarcisse7969 7 месяцев назад
looking forward to the next nextjs tutorial❤
@mohamedyoussef8835
@mohamedyoussef8835 Месяц назад
Awesome tutorial. +++++++++++ 🙂
@SakuraDev
@SakuraDev Месяц назад
Many thanks 🙏🙏🙏🙏
@nasko235679
@nasko235679 3 месяца назад
I have a question since it's been a month since I completed this and since then I've learned about the difference between token based and session based auth. With your method of implementing auth can I revoke user access instantly or will they still have an active token if I delete them from my database? There are multiple written and video tutorials on the web but all of them use jwt token sessions and it's very hard to manage access with them as the client keeps them even if they're removed from db.
@SakuraDev
@SakuraDev 3 месяца назад
Hi, Nice Point, we should keep a database of tokens. with that, we can easily revoke tokens. We usually use Redis for that in our real world projects.
@Yesterday_i_ate_rat
@Yesterday_i_ate_rat 7 месяцев назад
I know only react and a little bit of next, is it enough to understand these concept?
@SakuraDev
@SakuraDev 7 месяцев назад
👋 if you have some basic understanding of next.js, you can understand this video pretty good 👍
@emanuelmaricic9657
@emanuelmaricic9657 7 месяцев назад
Thanks Sakura for this great video, can we elaborate to connect OAuth with backend?
@SakuraDev
@SakuraDev 7 месяцев назад
Yes I am going to create a tutorial for next.js and Nest.js in the backend and integrate the OAuth with the backend
@emanuelmaricic9657
@emanuelmaricic9657 7 месяцев назад
I came up with some solution getting google OAuth and refresh token strategy to work, thanks to your video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-khNwrFJ-Xqs.html It's is working but I don't know is it a good solution, I can share the code with you if you are interested. @@SakuraDev
@jagadeshjade
@jagadeshjade 7 месяцев назад
thanks sakura, can you please guide us how to logout inactive users based on session
@SakuraDev
@SakuraDev 7 месяцев назад
you can adjust the jwt expiry time.
@Ilohimushka
@Ilohimushka 5 месяцев назад
why pucking no body uses backend for authentication nowadays, wtf?
@SakuraDev
@SakuraDev 5 месяцев назад
Hi, you can watch my full stack auth video. It has a separate back end
@techiesakar
@techiesakar 7 месяцев назад
Hey Sakura, I have followed your NestJs and nextJs combine tutorial for handling refresh token. I replicate the same using Nextauth-5 In callback, we check the expire time and if expire we made call to refreshToken then we get But if in case, refreshToken also expire, the function will give 401. Under this condition, still nextauth keep user login. Is there any way yo trigger signOut() without clicking button ? Or is there any way to auto signout when such event happen
@fluFFPfizschi
@fluFFPfizschi 7 месяцев назад
unfortunately nextauth signOut() is only working in client side ... all you can do is to redirect the user to an client side page which will call the signOut() function. in my opinion i think nextauth is really not well designed to work with refresh tokens (especially when using http only cookies)
@xqc7087
@xqc7087 7 месяцев назад
Sir pls add the Github link soon. Awsm video for beginners like me.
@SakuraDev
@SakuraDev 7 месяцев назад
Added
@SakuraDev
@SakuraDev 7 месяцев назад
Thank you so much
@onildo_costa
@onildo_costa 7 месяцев назад
Hey Sakura, I have a question. I've watched you vid, an ultil the part 17 when you finish the signin form, you dont talk about the authentication expires. If I'm not wrong, the authentication goes like: 1st access? - create a token and insert user data inside a token 2nd access? - use the session to get the token and retrieve the user info But for how long the token is up? Or its only expires when you log out? You can change the expire time like the commom Jwt method ou your NestJS vid? Thanks! Edit: Also, I added two new columns to user table (createdAt and updatedAt) to manage future updates. But I can't find a way to insert the values for this two new fields. I cant do this in the formSingUp with zod, but because of this I cant also do it on the registerUser function on routes.ts method because to make it work, I need to inputs these new fields to Omit. Can you give me an idea to make it work please? Lov u!
@SakuraDev
@SakuraDev 7 месяцев назад
Hi, For the first connection, when we use nextjs as a fullstack, I believe, we do not need to worry about refresh token. but if we have a separate backend we need to think about the refreshing the access token.
@SakuraDev
@SakuraDev 7 месяцев назад
and for the second question, you can set a default value in the schema for createdAt or you can set the createdAt manually when you creating a user, i.e. inserting a new user with Prisma. In this case you don't need to change the zod schema because we don't want to take the value of createdAt from the user in the Form. So just handle it inside the create user function. the same goes with the updated at
@SakuraDev
@SakuraDev 7 месяцев назад
BTW, thanks for your support.
@onildo_costa
@onildo_costa 7 месяцев назад
Thank you very much for take your time to help.@@SakuraDev
@muhammadwahyuramadhan7730
@muhammadwahyuramadhan7730 7 месяцев назад
i wonder if you also put refresh token client & server way too ..
@SakuraDev
@SakuraDev 7 месяцев назад
Since we are using the next.js as full stack project, we don't need refresh token. but I have covered it in my previous video which is about combination of Nest.js and Next.js: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-khNwrFJ-Xqs.html
@muhammadwahyuramadhan7730
@muhammadwahyuramadhan7730 7 месяцев назад
cool sakura, and your explanation on that video it so good 🔥
@william_phyo
@william_phyo 7 месяцев назад
Thank you. Next.js + apollo client GraphQL Tutorial please...
@SakuraDev
@SakuraDev 7 месяцев назад
Put it on my list
@william_phyo
@william_phyo 7 месяцев назад
Thank you@@SakuraDev
@tsajm6bh
@tsajm6bh 7 месяцев назад
unfortunately next-auth 5.0 changed all their code.
@haiffy
@haiffy 2 месяца назад
Does this work for next auth v5 too?
@SakuraDev
@SakuraDev 2 месяца назад
Unfortunately not, for v5 you can watch my auth.js v5 video
@haiffy
@haiffy 2 месяца назад
@@SakuraDev yeah just watched it, v5 become simpler and easier to implement
@mrmysterious2535
@mrmysterious2535 7 месяцев назад
@SakuraDev When I send message, it can be seen in Mailtrap Inbox, but activation link is not sent to actual Email id.
@SakuraDev
@SakuraDev 7 месяцев назад
as I said you should register with your company email address in the mailtrap. with free email accounts like Gmail, we can just test the process. Although you can set SMTP Server with Gmail Server and send emails through your account.
@mrmysterious2535
@mrmysterious2535 7 месяцев назад
@@SakuraDev Thanks
@huletech
@huletech 7 месяцев назад
sakura thank you for this amazing tutorial but i have little bug when i try to load my env variable from .env it doesn't load it shows me this error "Error: Missing credentials for "PLAIN"" but it works well when i hard coded it works when i hard code it like this user: "myemail", pass: "mypass", but it doesn't work in this case user: process.env.SMPT_EMAIL, pass: process.env.SMTP_GMAIL_PASS,
@samozgoolz1875
@samozgoolz1875 2 месяца назад
to fix it try changing the "port" to 587
Далее
microsoft doubles down on recording your screen
10:00
Auth.js V5 From Scratch
36:41
Просмотров 20 тыс.
I Took a LUNCHBAR OFF A Poster 🤯 #shorts
00:17
Просмотров 2,7 млн
Best Video on Next.js 14 Authentication
1:14:58
Просмотров 21 тыс.
5 Design Patterns That Are ACTUALLY Used By Developers
9:27
The book every electronics nerd should own #shorts
0:20