Next.js 14 Authentication (Kinde Auth, Server Actions, Roles & Permissions)

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 NEW React & Next.js course: email.bytegrad.com
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord
🔔 Email newsletter (new course discount!): email.bytegrad.com
⏱️ Timestamps:
0:00 Full-stack auth in Next.js overview
5:16 Kinde Auth setup
7:17 Auth in server components (protected route / page)
8:45 Login page
9:12 Auth in client components
13:11 Login & Register link components (Kinde)
14:37 Protect /admin-area route
15:54 Static vs dynamic rendering
16:53 Auth in middleware
18:47 Auth in server actions (IMPORTANT!)
23:16 Roles & Permissions
36:05 Connect Kinde data with your own database
#webdevelopment #programming #coding

Пікірлер: 53

  • @devardilshad3944
    @devardilshad39448 күн бұрын

    100 out of 10, can't ask for more this single video cleared a mountain of questions in my head.

  • @imkir4n
    @imkir4n5 ай бұрын

    Wesley, Could you create a similar video but with custom JWT authentication and a separate backend? This should include token rotation and route protection for both the client and server.

  • @dawid_dahl

    @dawid_dahl

    5 ай бұрын

    Yes please.

  • @dawid_dahl

    @dawid_dahl

    5 ай бұрын

    And hopefully refresh token handling… 😄

  • @luthecoder

    @luthecoder

    5 ай бұрын

    This will be highly appreciated indeed and!!

  • @luthecoder

    @luthecoder

    5 ай бұрын

    Without using next.Auth

  • @Grozny446

    @Grozny446

    4 ай бұрын

    wiith phone

  • @shumit
    @shumit4 ай бұрын

    10 out of 10. To the point, no fluffs. Authentication on server, on client, roles and permissions for authorization, route protection, UI show/hide based on authentication and authorization - job done!! SIMPLY TOP CLASS !! THANK YOU SO VERY MUCH !!! Kinde folks should be indebted to you !!

  • @rahulgupta7720
    @rahulgupta77204 ай бұрын

    Hey man this is one of the best videos I have ever seen explaining auth in nextjs Keep going!!!!!

  • @aqarcity
    @aqarcity5 ай бұрын

    Awesome, thank you

  • @zunnoorainrafi5985
    @zunnoorainrafi59855 ай бұрын

    Hi Wesley, Will you make a short video on projects that you built in your React and Nextjs course

  • @orhanmadiassani
    @orhanmadiassani5 ай бұрын

    dope content

  • @heismyke
    @heismyke16 күн бұрын

    please can you also do a video on the best way to deploy a next js application to vercel. server and client ?

  • @sebastiancastillo3560
    @sebastiancastillo35605 ай бұрын

    It would be very helpful if you could give us an example of how to manage JWT token for authentication, in my case I use python and django as backend due to the complexity of the data, but I ran into many problems with nextjs13, cookies and the behavior in the mobile browser. Thank you very much for your videos, they are very helpful!

  • @tawsifhaque9360
    @tawsifhaque93605 ай бұрын

    excellent video. what vs code theme do you use?

  • @dennisb1590
    @dennisb15905 ай бұрын

    Hi might be a stupid question but i saw some videos on Signals and wanted to ask if there are usecases for them in nextjs or if they can be used in next js. looks like they make a lot of stuff easier.

  • @nikhilpsathyanathan
    @nikhilpsathyanathan5 ай бұрын

    Kinde is a nice auth, and pricing is also good

  • @7doors847
    @7doors8475 ай бұрын

    Awesome

  • @0x-003
    @0x-0034 ай бұрын

    Can you make a video, where you talk about yourself, how you became a developer, your background, tips/advice for newcomers etc.

  • @Grozny446
    @Grozny4464 ай бұрын

    I'm interested in authentifacation based on next+websockets+some token. Could you create this video?

  • @pietro_dev_07
    @pietro_dev_075 ай бұрын

    Hello, what theme do you use?

  • @vinojanabhimanyu2632
    @vinojanabhimanyu26324 ай бұрын

    Can you please give the GitHub URL for this project?

  • @ibrahimcious
    @ibrahimcious3 ай бұрын

    Hey, I really like your channel. However, I have difficulties following along since there is no GitHub repo for the project. A starter GitHub repo would be nice. Thanks

  • @augedoo8409
    @augedoo84093 ай бұрын

    Thanks for sharing you knowledge in such clear and concise manner. I have a question though. What is your take on where Tanstack ReactQuery library sit with the advanced data fetching and caching capabilities of Next.js 14?

  • @ByteGrad

    @ByteGrad

    3 ай бұрын

    Thanks! Will create a video about this soon

  • @olusanyaolamide9764
    @olusanyaolamide97644 ай бұрын

    For the actions.ts file formData: FormData I didn't see you import a type for the formdata or does next automatically gives it FormData type

  • @io0312
    @io03123 ай бұрын

    is it possible to link to the repository?

  • @TheRcfrias
    @TheRcfrias2 ай бұрын

    Hey Wes, great content!, On this specific scenario where you want the logged-in user information, and you have the auth logic in Next server actions. Would you rather leave the server component on top and drill the user as a prop in a client-component? or you prefer to host it in a context? I am assuming that having the server component on top and passing the user as a prop would work, but I am not sure about implications on the client component. Lets say the client component also needs to use more server actions, should this actions be passed also as props? or in this case we can keep a server component in a custom hook???

  • @ByteGrad

    @ByteGrad

    2 ай бұрын

    If you need the user data in a client component you can just use the React hook that Kinde gives you (they already do the whole thing with the Context API to keep track of the user info on the client)

  • @TheRcfrias

    @TheRcfrias

    2 ай бұрын

    Ok, I am not using Kinde, but I think I got the answer after watching your server actions video. I got confused because server actions are also imported to use them, but didn’t know if they would turn to client components because of this.

  • @TheRcfrias

    @TheRcfrias

    2 ай бұрын

    I also found this interesting: (Next docs) : If you need to use the same data (e.g. current user) in multiple components in a tree, you do not have to fetch data globally, nor forward props between components. Instead, you can use fetch or React cache in the component that needs the data without worrying about the performance implications of making multiple requests for the same data. This is possible because fetch requests are automatically memoized

  • @togya4
    @togya42 ай бұрын

    where is the starter code? git hub repo?

  • @ComputationalArt
    @ComputationalArt6 күн бұрын

    All the tutorials are with third party authentication backend, but what if it was custom with JWT and cookies?, do you have a tutorial on this?

  • @_bestbeast
    @_bestbeastАй бұрын

    Please make a video on phone authentication

  • @d4rzk252
    @d4rzk2525 ай бұрын

    code?

  • @koreandude
    @koreandude5 ай бұрын

    Any plans on having your course hosted on Udemy platform?

  • @ByteGrad

    @ByteGrad

    5 ай бұрын

    Nope

  • @getoar2413
    @getoar24135 ай бұрын

    Whats your vs code theme

  • @ismaeltinta6118

    @ismaeltinta6118

    5 ай бұрын

    try one dark pro. it's pretty cool

  • @asadmehboob1300
    @asadmehboob13005 ай бұрын

    Please make paid course on Nestjs microservices and AWS

  • @olusanyaolamide9764
    @olusanyaolamide97644 ай бұрын

    This Next14 we die there. Survival of the fittest, Never give up Sia

  • @user-rb7wk4nf6v
    @user-rb7wk4nf6v3 ай бұрын

    please subtitles!!!

  • @user-xn1vz9jq1b
    @user-xn1vz9jq1b5 ай бұрын

    It's kinda weird to see him in clear voice 😂

  • @lokeshkaushik1812
    @lokeshkaushik18125 ай бұрын

    First🎉