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.
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 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!
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
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
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?
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.
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
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
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 UA-cam has done it properly
mr. what authstrategy you used? is it jwt? local session? database session or other strategy? this nextauth makes me dying even premium chatgpt doesnt gave answer, i think learn trough experienced is still a better method
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.
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
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: ua-cam.com/video/md65iBX5Gxg/v-deo.html
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 :)
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.
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: ua-cam.com/video/Aq4FstAD3iM/v-deo.html
No BS guide to Oauth with a very minimal example , really great work
Really appreciate this video. Quick and straight to the point, really helpful!
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 :)
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:
ua-cam.com/video/Cm6-3pVCPEI/v-deo.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! :)
Very useful content, quick, no time-wasting. Highly recommended! 🔥🔥🔥🔥
Appreciate it bro!
Thank you for this session
really helped a ton!
It would be great to see how to handle sessions for both cases (credentials and something like google) and with roles management off course.
This is awesome tutorial.
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
Very useful content, thank you very much, solve my problem
Thank you so much for this video... Can do one more about this and register User Data into MongoDB or any other database?
In their documentation they say to make a file called [...nextauth].js but you are making a folder called that. Why the difference?
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"
how does your terminal autofill stuff, that's new to me!
Can I know how we can get this nice background desktop ?
Hi, do you have a tutorial that use only next.js with next auth without typescript ?
Why do u using external services? I think custom auth will be there
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.
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?
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.
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
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
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?
Subscribed, impressive stuff !! just on the point ♥♥♥
Thank you so much
What is the plugin you are using that shows the errors inline?
really really helpful! thanks for sharing
Glad it was helpful!
very simple very helpfull. thank you.
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 UA-cam has done it properly
So great! Thank you!
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: ua-cam.com/video/Aq4FstAD3iM/v-deo.html
I want to give you a big thank you from France ! Do you have a discord server for your community ?
thanks you brooo, tutorial is work
mr. what authstrategy you used? is it jwt? local session? database session or other strategy? this nextauth makes me dying even premium chatgpt doesnt gave answer, i think learn trough experienced is still a better method
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
It works locally but in production gives me error 500
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 !! 😇😇
Excelente vídeo! Parabéns!
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?
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
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: ua-cam.com/video/md65iBX5Gxg/v-deo.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 :)
Can you tell what extension is showing you errors directly in the code?
The extension is called "Error Lens"
best tutorial
Subscribed, impressive stuff !!
Highly appreciate!
Oh man, you saved my day.
I think you forgot the protected routes part
part 2 ua-cam.com/video/Aq4FstAD3iM/v-deo.html&ab_channel=WebDevJan
Thank you so much!!!!!
Thank you Jan
bro please upload part 2
Part 2 is out now, have a look here: ua-cam.com/video/Aq4FstAD3iM/v-deo.html
I will have your Desktop Wallpaper please!!!
The wallpaper is called "Amazing Landscape" and I am using the program "Wallpaper Engine" from steam.
Thanks bro
du bist ne süße maus
GoodJob!
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.