Next.js 13 – How to add Authentication (app folder)

Next.js 13 authentication is done a bit differently thanks to the App directory and Client components and Server components. In this video we will add NextAuth to a Next js 13 application and configure it to work with the app folder. We will convert working next-auth implementation using pages folder to work with Next.js 13 app folder.

Github link for the repo in the video: https://github.com/tumetus/next-js-13-auth-example
NextAuth getting started: https://next-auth.js.org/getting-started/example
Learn Programming (Skillshare FREE trial): https://skl.sh/3cYxUP5

My courses:
React basics: https://skl.sh/2XAKn7u
HTML & CSS for beginners: https://skl.sh/34wvGUH
Draft.js basics: https://skl.sh/3cJ5Hw4

💻 MY GEAR
MY CODIGN LAPTOP: https://amzn.to/3MI90ci
MY MOUSE: https://amzn.to/3mr3no9
MY KEYBOARD: https://amzn.to/3GIoMjh
MY MICROPHONE: https://amzn.to/3KCDPfv
MICROPHONE BOOSTER: https://amzn.to/43trLWB
MY MICROPHONE ARM: https://amzn.to/3oaf5DW
MY CAMERA: https://amzn.to/3UxyvyJ
MY STREAMING LIGHT: https://amzn.to/3KE0PuE

Connect with me:
Website: https://tuomokankaanpaa.com
My newsletter: https://tuomokankaanpaa.com/newsletter
Twitter: https://twitter.com/tumee
Skillshare: https://www.skillshare.com/r/user/tume

Timestamps
00:00 What this video is about
00:22 Short intro on the app we will work on
03:15 How to use next-auth with the App directory
09:01 Where the components are rendered (Server or Client?)
10:30 How to render Server component inside Client component
12:34 How to use user session data in Server Component
15:49 Short recap what we did & my thoughts

#nextjs #authentication #nextauth