Next.js Authentication - Avoid these 4 mistakes (Don't do auth in layout!)

Add auth to your Next.js app quickly: bit.ly/3QOe1Bh (paid sponsorship).
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
👉 Kinde: check out Kinde for auth and more bit.ly/3QOe1Bh
⏱️ Timestamps:
00:00 Intro
01:00 Add auth quickly
03:15 Don't do auth in layout
05:50 Page vs Middleware for auth
08:01 Middleware benefit 1: better structure
09:01 Middleware benefit 2: static rendering
13:19 BIG RISK: Showing user info app-wide (e.g. header)
15:40 Middleware benefit 3: better performance
18:16 IMPORTANT: Auth check in Middleware or Page is not enough!
21:27 Auth for server actions
25:17 Summary: robust authentication in Next.js
#webdevelopment #reactjs #nextjs

Пікірлер: 60

  • @JuanJuan-sq7hu
    @JuanJuan-sq7hu10 күн бұрын

    Thank you for making these beginner videos!

  • @RishikeshDasappa
    @RishikeshDasappa9 күн бұрын

    Loving this new content. Making videos on what not to do is REALLY helpful in building good coding practices. Keep it up!

  • @digitalapplied
    @digitalapplied10 күн бұрын

    This is the first resource that's made next.js authentication clear.

  • @eddiejaoude
    @eddiejaoudeКүн бұрын

    Great video! Thank you for the examples and different use cases

  • @rhkina
    @rhkina10 күн бұрын

    Great tutorial!!! Thank you so much! 🙏

  • @Herxh428
    @Herxh4287 күн бұрын

    Bytegrad brother i am so lucky to find out about your next js course it is #1 resource on nextjs and the coding standard you follow is top notch along with your teaching style . Anyone willing to take his course don't hesitate even a bit its The best next js course you will find in internet ❤️❤️

  • @ByteGrad

    @ByteGrad

    7 күн бұрын

    Thanks, appreciate it!

  • @joepetrillo6185
    @joepetrillo618510 күн бұрын

    THIS IS EXACTLY THE VIDEO I NEEDED

  • @learner8084
    @learner808410 күн бұрын

    He is so good that while I'm watching the video, I will automatically remember to click like... because the video is so good.

  • @gerkim3046
    @gerkim304610 күн бұрын

    This guy is a genius

  • @jairseedorf
    @jairseedorf10 күн бұрын

    I actually found layout auth to work better than middleware if your api already has built in auth. Middleware slows down navigation by alot and makes the user experience worst. So if it's a dashboard app just do auth on the layout with force-dynamic. if its an app that needs to authorize itself, middleware can be used.

  • @404-not-found-service
    @404-not-found-service6 күн бұрын

    thanks your video

  • @luisllaboj
    @luisllaboj10 күн бұрын

    Do you know if Clerk makes the whole app dynamic by using a wrapper in the main layout even if I don’t explicitly use the utility functions that retrieve the session? Like const {…} = await auth()

  • @tarikogic9313
    @tarikogic931310 күн бұрын

    I had a problem with checking session in a server action using next-auth. It was because next-auth used cookies. It was the story about static and dynamic stuff you just explained. Everything was fine in development, but the production failed. So I removed it from server actions. Do you know how to solve this?

  • @shimi6165
    @shimi61653 күн бұрын

    we can use middleware for the first fence and how about using auth HOC for reusable components as second fence ?

  • @sifact1391
    @sifact1391Күн бұрын

    Good job

  • @art8419
    @art841910 күн бұрын

    In my middleware im returning a NextResponse.next request with some custom headers that I utilize in my pages, where should I put kinde's return withAuth(request)?

  • @cangorkemgunes
    @cangorkemgunes10 күн бұрын

    Hi, do you have a chance to make a video about Authjs v5? I would like to learn from you.

  • @kevinluna5786
    @kevinluna578610 күн бұрын

    I use Layout because in all the pages that we create there is like a 95% chances that we'll use an API that is already verifyng the authentification. But it's a nice idea to use middleware, I'll try it in my next project!

  • @hungify

    @hungify

    10 күн бұрын

    I have a question regarding the using in Layout. Does it cause the entire page to be statically rendered?

  • @ByteGrad

    @ByteGrad

    10 күн бұрын

    It will make the whole app dynamically rendered, in addition to not properly protecting the pages

  • @juviess
    @juviess9 күн бұрын

    Middleware is great if you just want to check if there is any auth data at all. But what about roles? How do we check them in middleware?

  • @TechDiffuse

    @TechDiffuse

    3 күн бұрын

    I make my Auth with firebase and once it's authenticated I store my own user from the database in a cookie. There is the role encoded which I can get in the middleware

  • @didarnawzad
    @didarnawzad2 күн бұрын

    U are the best ❤

  • @r3nd593
    @r3nd5936 күн бұрын

    navigation using next Link with prefetch set to true which is the default setup doesn't run the middleware on every navigation, prefetch is not available in development and you don't see it not work but when you deploy your app to production issues will appear

  • @Ismail-hd4yz
    @Ismail-hd4yz10 күн бұрын

    What if i am using Nodemailer Provider. Middleware does not work there

  • @vishalmewada5817
    @vishalmewada58173 күн бұрын

    I have a doubt , does middleware .ts file work in a static build , because this logic work on server side and when we make a build everything on the client side ? I would be very happy if someone would answer on this , because my middleware.ts file is not working on static build and I want to know how it can work .

  • @harshdasila6680
    @harshdasila668010 күн бұрын

    Hey you were telling that we are exposing a API endpoint in case of server actions. Then why can't we hit the api (server action) using something like postman? I think we just need to protect the frontend were the server action is used!!

  • @ByteGrad

    @ByteGrad

    10 күн бұрын

    Because Next.js has some additional protection in place. But still a best practice to add auth to them imo, also because you could accidentally use them on a public route (i.e. a route not covered by middleware or page auth check)

  • @harshdasila6680

    @harshdasila6680

    10 күн бұрын

    @@ByteGrad can you make a video on this and how to authenticate them using cookies? Or other that kinde auth

  • @petrtcoi9398
    @petrtcoi939810 күн бұрын

    Great🎉

  • @frontend_ko
    @frontend_ko10 күн бұрын

    middleware has caching. how can i validate every new request?

  • @ossama90s47
    @ossama90s4710 күн бұрын

    Hey brand! Considering the complexity of the Next.js middleware issue in production with Docker, I think it would be incredibly valuable if you could create a video tutorial or walkthrough addressing this specific challenge and issues of middleware with docker .

  • @joepetrillo6185
    @joepetrillo618510 күн бұрын

    How does caching work when doing the check on the page level? Every time the component is on the page, will the auth check be run?

  • @ByteGrad

    @ByteGrad

    10 күн бұрын

    Dynamic rendering means there won’t be server-side caching, but client-side cache may still work

  • @joepetrillo6185

    @joepetrillo6185

    10 күн бұрын

    @@ByteGrad so this is ok to have on the client side because we can assume they are still authenticated until some logout event or jwt cookie is destroyed right? When that happens I assume kinde clears out the client side cache using revalidatePath or something?

  • @alexnelson2119
    @alexnelson211910 күн бұрын

    Would a third option be to put your session check into a template.ts file? Works similarly to layout.ts but every time you navigate to a new route, a new instance of the component is mounted. Full disclosure, I haven’t tried it so I’m not actually sure if it works. 😅

  • @ByteGrad

    @ByteGrad

    10 күн бұрын

    Yeah could be, but it’s still a bit too obscure for me to definitely recommend

  • @imkir4n
    @imkir4n10 күн бұрын

    8:00 HOC will save the duplication right?

  • @ByteGrad

    @ByteGrad

    10 күн бұрын

    Yes, but realistically you will also have more fine-grained access control (e.g. based on admin role), so it becomes messy that way with HOC’s or utility functions imo. But for a simple app that’s fine I think

  • @twenty9str498
    @twenty9str4989 күн бұрын

    what about authorization??? doing it in layout is the only way.

  • @joaoarthurbandeira

    @joaoarthurbandeira

    6 күн бұрын

    Hey, curious, what would be the difference between both and why would it be the only way? Just trying to learn hahah

  • @mDHARYL

    @mDHARYL

    3 күн бұрын

    ​@@joaoarthurbandeira I think we can u session hook at client.

  • @joshuadeguzman2911

    @joshuadeguzman2911

    2 күн бұрын

    What do you mean? You can redirect in middleware, though.

  • @joshuadeguzman2911

    @joshuadeguzman2911

    2 күн бұрын

    ​@joaoarthurbandeira doing authentication is like you are appraising whether the user/item is legit/registered or not. Authorization is simply validating whether the user or guest is validated to enter in this room/route.

  • @vinoopb
    @vinoopb10 күн бұрын

    What theme are you using for VS Code?

  • @OpenDeepLearning

    @OpenDeepLearning

    10 күн бұрын

    Interested also

  • @bellasvideo5620

    @bellasvideo5620

    10 күн бұрын

    @@OpenDeepLearning INDMKB

  • @luisllaboj

    @luisllaboj

    10 күн бұрын

    I would say is Atom dark pro or one dark pro but a Darker version. Honestly I forget the exact names but u can maybe find them looking by those names lol hope he can confirm or correct me anyway ;)

  • @usinakenes

    @usinakenes

    10 күн бұрын

    Mine seems to be the same as his: "One Dark Pro Monokai Darker".

  • @vinoopb

    @vinoopb

    10 күн бұрын

    @@usinakenes thanks, that seems to be the one!

  • @user-ef5cl4rq3w
    @user-ef5cl4rq3w4 күн бұрын

    your very smart

  • @trxsson
    @trxsson10 күн бұрын

    So if I want to display simple login / logout buttons across my blog in the upper corner of the screen using layout my entire app will just be dynamically rendered?

  • @ByteGrad

    @ByteGrad

    10 күн бұрын

    Not if you use a client-side way of checking if the user is authenticated (e.g. the Kinde hook I showed - useKindeBrowserClient gives you access to the user)

  • @waltervanwoudenberg6876

    @waltervanwoudenberg6876

    7 күн бұрын

    @@ByteGradhow would you do that without an auth library if you follow the nextjs docs they always use cookies in their examples which forces dynamic rendering

  • @ItsAvyy

    @ItsAvyy

    2 күн бұрын

    @@waltervanwoudenberg6876 At that point you're reading the cookies on the client in normal JavaScript so you don't have to worry about the server at all.

  • @bgarcesch
    @bgarcesch7 күн бұрын

    Middleware does not support NodeJS, only edge. No session auth with db there.

  • @DiiiaZoTe
    @DiiiaZoTe10 күн бұрын

    One thing that needs to be mentioned is that the middleware uses the edge runtime. So unless you use a database that is edge compatible, you will not be able to use database sessions for your auth and will need to rely on JWTs. So if you use database sessions, page is probably a better option in my opinion.