Authentication with Next Auth and Next.js 14 | Protected routes, Server & Client Sessions

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

[@NoahCuz]

Part 2 with updating the session on the server would be greatly appreciated! Subscribed

[@webdevjan]

Part 2 is out now, have a look here: czcams.com/video/Aq4FstAD3iM/video.html

[@ansarqazi4377]

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.

[@Racine14]

This is awesome tutorial.

[@ansarqazi4377]

Very useful content, quick, no time-wasting. Highly recommended! 🔥🔥🔥🔥

[@webdevjan]

Appreciate it bro!

[@captaintechworld]

Subscribed, impressive stuff !!

[@Twinkling-wy1dp]

Very useful content, thank you very much, solve my problem

[@ansarqazi4377]

Highly appreciate!

[@srivatsans3723]

Oh man, you saved my day.

[@DhaouJawhar]

Subscribed, impressive stuff !! just on the point ♥♥♥

[@webdevjan]

Thank you so much

[@user-zn7fm1su8x]

Thank you Jan

[@jhoanmiguelescobararboleda8547]

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?

[@mateokladaric]

how does your terminal autofill stuff, that's new to me!

[@shanumehra7088]

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 ?

[@webdevjan]

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.

[@shanumehra7088]

​@@webdevjan Wow great, Now got the point. Thanks !! 😇😇

[@Prag1974]

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.

[@sahebbeshra7659]

Ya we need part 2 with email and password and also save user in data base for google and github login

[@webdevjan]

Part 2 is out now, have a look here: czcams.com/video/Aq4FstAD3iM/video.html

[@sahebbeshra7659]

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 CZcams has done it properly

[@andremalt8255]

Thanks bro

[@BuhuuRecords]

Can you tell what extension is showing you errors directly in the code?

[@webdevjan]

The extension is called "Error Lens"

[@chesterxp508]

GoodJob!

[@shoaibshaikh0786]

bro please upload part 2

[@webdevjan]

Part 2 is out now, have a look here: czcams.com/video/Aq4FstAD3iM/video.html

[@sungo9664]

I will have your Desktop Wallpaper please!!!

[@webdevjan]

The wallpaper is called "Amazing Landscape" and I am using the program "Wallpaper Engine" from steam.

[@mikhacavin]

part 2 czcams.com/video/Aq4FstAD3iM/video.html&ab_channel=WebDevJan

[@DudeFrom1972]

Ithinkitwasveryinteresting,hower,Igottiredinmyheadasyoudidmakeanynaturalpausesinyournarration.

[@webdevjan]

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.

[@DudeFrom1972]

@@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.

[@levimorais3641]

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