Authentication with Next Auth and Next.js 14 | Protected routes, Server & Client Sessions
ฝัง
- เผยแพร่เมื่อ 21 พ.ย. 2024
- Authentication with Next Auth and Next.js 14 | Protected routes, Server & Client Sessions
In this tutorial, I walk you through the process of implementing the latest version of NextAuth into Next.js 14. I cover how to set up OAuth login with both GitHub and Google, as well as creating protected routes by obtaining the session on the client and server.
Find the github repository here: bit.ly/4aAbWRk - วิทยาศาสตร์และเทคโนโลยี
The content is litreally so impressive. Everything is explained in quite simple way. Nothing extra in the video, just focusing on what actually needs to be done. Highly appreciated! Highly recommended! Thanks for the video.
Part 2 with updating the session on the server would be greatly appreciated! Subscribed
Part 2 is out now, have a look here: th-cam.com/video/Aq4FstAD3iM/w-d-xo.html
No BS guide to Oauth with a very minimal example , really great work
Sir, your demonstration is far better than others. Just an advice if you create a playlist where viewer can get all the auth/next.js related videos in one place that would be great
I appreciate that so much. :)
That actually already exists, have a look here:
th-cam.com/video/Cm6-3pVCPEI/w-d-xo.html
I really like this video and think it's one of the best for beginners. There are just two things I'd suggest: the video could be a little slower, and the sound should be louder. Other than that, everything is top-notch-your teaching skills and content are excellent. Thanks again for covering this topic in such a great way!
Appreciate the valuable feedback! :)
Please a part 2 series !!! I like your style of tutorial. Thankssss
Watched so many videos but couldn't get it. Your video had me setup in no time. Keep up the good work!
That means so much! Glad I could help you out :)
Really appreciate this video. Quick and straight to the point, really helpful!
Very useful content, quick, no time-wasting. Highly recommended! 🔥🔥🔥🔥
Appreciate it bro!
It would be great to see how to handle sessions for both cases (credentials and something like google) and with roles management off course.
Thank you for this session
really helped a ton!
Thank you so much for this video... Can do one more about this and register User Data into MongoDB or any other database?
This is awesome tutorial.
Hi Yan , Followed your video, Amazing work and looking forward for new videos.
Just needed to ask a question that while getting the session data on client side you've used useSession() , cant we use the same function on the server as well for getting the same session data ?
Thanks! Once I have some free time, I'll definitely dive deeper into the nextauth series and create a part 2.
In that, I'll explore the credentials provider and provide more in-depth information. :)
The useSession hook is specifically designed for client components, meaning you can't utilize it on the server side.
To address this limitation, nextauth introduced the getServerSession function, which performs the same task on the server.
@@webdevjan Wow great, Now got the point. Thanks !! 😇😇
I want to give you a big thank you from France ! Do you have a discord server for your community ?
Excelente vídeo! Parabéns!
Ya we need part 2 with email and password and also save user in data base for google and github login
Part 2 is out now, have a look here: th-cam.com/video/Aq4FstAD3iM/w-d-xo.html
This is very good content and explanation, I really enjoyed it.
However, I have a question there is a one second split delay where it shows the index page then the dashboard when logged in, is there a way to prevent this?
You are performing the session check on the client with useSession which causes that delay. Perform the check on the server instead to avoid any layout shifts
@@webdevjan can you explain more please?
So great! Thank you!
But with your approach in relation with SessionProvider wrappering all your application, are you losing any options of having server components? Because you are forced to use always components in client-side
how does your terminal autofill stuff, that's new to me!
really really helpful! thanks for sharing
Glad it was helpful!
It fixed my bug!! Thanks
what is your extension that suggest that typescript errors in red color?
Just saw this, sorry for the late reply. It's called "Error lens"
Yes nice, Question, what about I want to go to another page, if he is not log in, I want to show that page does not have accesss.. or redirect, do you do that in the middleware?
Why do u using external services? I think custom auth will be there
very simple very helpfull. thank you.
In their documentation they say to make a file called [...nextauth].js but you are making a folder called that. Why the difference?
Subscribed, impressive stuff !! just on the point ♥♥♥
Thank you so much
Hi, do you have a tutorial that use only next.js with next auth without typescript ?
Very useful content, thank you very much, solve my problem
Hi Man. Great content. Thanks. But I have a problem: I want to use session based authentication strategy (as you know jwt is little bit unsafe) and I also credentials provider. When I adjust credentials provider in auth.ts and other files, next auth throwing error something like " 'session': 'database' strategy doesn't support credentials provider" is there any way to fix it? if not, can you suggest me a library that allow users credentials login and uses session based strategy. What should I do? Thanks.
thanks you brooo, tutorial is work
What is the plugin you are using that shows the errors inline?
best tutorial
i'm getting {"message":"There was a problem with the server configuration. Check the server logs for more information."} this when i host it in netlify don't know why
And if possible can you login using email and socials for appwrite with nextjs with both server and client. Please do it because no one TH-cam has done it properly
that helps me a lot but the crazy thing is the vscode interface. can u please share the ur VS code profile file with me
It works locally but in production gives me error 500
Can you tell what extension is showing you errors directly in the code?
The extension is called "Error Lens"
Just have a question. If Sessionwrapper is using use client and it's wrapping the whole layout won't this make the full app client side rendered? Since children would also follow csr. I'm very new to server rendering components in next js so please forgive my dumb question
No, this has been asked a lot and I am one of them, lol. You can use chat gpt or Google to confirm.
I think you forgot the protected routes part
const session = await getServerSession(authOptions);
console.log("session", session);
it don't work . session alway is null.
can you help me? ple
If the session is null, that means you are currently not logged in
Subscribed, impressive stuff !!
Highly appreciate!
Oh man, you saved my day.
OK but you're just using localhost in your GitHub setup, that's not going to work in production so what's the point?
change it to live when ready?
I think the SessionWrapper wrapping everything at the top level, essentially makes everything a client side component so now your app is a SPA. Can someone else confirm this?
I had the same thought... and the same lack of answer 😛
Another video talking about a similar setup uses a slightly different approach inside layout.tsx to keep things server-side: th-cam.com/video/md65iBX5Gxg/w-d-xo.html
no it's not.
@ashrafjunior3479 thank you for explaining
If that would be the case, then you could use the useEffect (a client sided hook) for example in a fresh page.tsx file without specifying "use client" at the top. The wrapper is a server component so no need to worry about this :)
Thank you Jan
Thank you so much!!!!!
bro please upload part 2
Part 2 is out now, have a look here: th-cam.com/video/Aq4FstAD3iM/w-d-xo.html
I will have your Desktop Wallpaper please!!!
The wallpaper is called "Amazing Landscape" and I am using the program "Wallpaper Engine" from steam.
du bist ne süße maus
Thanks bro
GoodJob!
part 2 th-cam.com/video/Aq4FstAD3iM/w-d-xo.html&ab_channel=WebDevJan
Ithinkitwasveryinteresting,hower,Igottiredinmyheadasyoudidmakeanynaturalpausesinyournarration.
The video has jump cuts since most people have the attention span of a goldfish nowadays in this TikTok/short-form content era. If it wasn't cut down like this, a lot of viewers would just click away after 30 seconds.
However, I appreciate your feedback.
@@webdevjan Thank you for replying.
May I suggest that you create and publish your videos in two versions: a short and a longer one and then provide a link for the short version in the long version and vice versa - a positive side effect of this is that you'll double your content with very little effort on your part.
idk why but i keep getting error 404 when clicking the button
and the terminal shows this
GET /api/auth/session 404 in 456ms
GET /api/auth/session 404 in 32ms
POST /api/auth/_log 404 in 32ms
POST /api/auth/_log 404 in 15ms
GET /api/auth/providers 404 in 44ms
POST /api/auth/_log 404 in 40ms
GET /api/auth/error 404 in 27ms
and the session object is undefined