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

My courses:

💻 MY GEAR

Connect with me:

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

[TheOriginalCornbread]

Channels like this need more recognition. This is such a clear tutorial on NextAuth

[MarkDeibert]

I was really struggling trying to get NextAuth working in the new Next JS 13 "app" folder. It is working now thanks to you my friend!! Thank you, thank you, thank you!!

[markharwood]

Thanks Tuomo, your videos are the best I've found, great style to them, just simple and clear. Up vote for video on Protected Routes for sure

[tradepilot]

Can you make a follow-up video on how to create roles, protected routes etc.

[kaempy]

Thank you so much for this video I've been battling with how to properly use the next-auth provider efficiently in the layout.ts file😘

[DylanRotich]

Was following a tutorial that used SessionProvider in NextJS 12. This seriously helped a lot. For the life of me I couldn't figure out how to implement it with the AppDir

[LisandroPradaToledo]

Great video! I refactor the example in order to implement credentials. Using Next 13.2 (api folder inside (experimental) app folder). I'm trying to use pages: { singIn: 'path'}. But can not redirect to the folder i'm trying to.

[che_sta]

Great videos on Next 13! Please make one on next/navigation :)

What is the typescript version of Providers?
Looks like gpt found out:

import { SessionProvider } from 'next-auth/react';

interface ProvidersProps {
children: React.ReactNode;
}

export default function Providers({ children }: ProvidersProps) {
return
}

[NuggetsLess]

Thanks a lot you explained it really well !

[shawn-skull]

In the starter project the _app.js file injects the 'session' through the SessionProvider. But in the Providers.js file you just ignore that 'session' and still your app works. How did you do that? All my tries are yelling me about that 'session', cause it's missing. Also I cloned your repo and run the project but I only get "Error: Cannot read properties of null (reading 'user')"

[not-me]

Keep it up. You are doing amazing job.

[RolandAyala]

Great stuff. You literally answered all my questions re: ssr vs client as video progressed -- thank you! Maybe you an pull a rabbit out of a hat by showing how to get vs code working w/ google provider! Subbed.

[raysplay]

nice tutorial. you missed to pass the session object?

[PatalJunior]

How would we pass the session to the server ?
I've got a client implementation, but I would prefer a server side one.

[Jasonwynn]

Is there any benefit to moving your component files into the app directory rather than keeping them in the components directory? I'm not quite certain why the files were moved during this video

[tompolman]

you used nextjs 13 and app structure of nextjs 12 can you make a video of the actual nextjs 13 folder layout too?

[nicolascuor]

Your english accent is fan-ta-stic! Contents too 👍

[naerikailash]

Can you do a similar tutorial integrating ORY auth in a nextjs app directory app?

[alexparsons]

What if i created a project with next js 13 app directory beta and i want to use next auth. Can i move the api/hello out of the app directory and create a pages/api/auth/[...auth].js folder?