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

Start here with Kinde: bit.ly/3QOe1Bh (paid sponsorship)
👉 NEW React & Next.js course: email.bytegrad.com
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication here: bit.ly/3QOe1Bh
👉 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

[@ByteGrad]

Hi, my latest course is out now (Professional React & Next.js): bytegrad.com/courses/professional-react-nextjs -- I'm very proud of this course, my best work!
I'm also a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication and more bit.ly/3QOe1Bh

[@imkir4n]

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]

Yes please.

[@dawid_dahl]

And hopefully refresh token handling… 😄

[@luthecoder]

This will be highly appreciated indeed and!!

[@luthecoder]

Without using next.Auth

[@Grozny446]

wiith phone

[@devardilshad3944]

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

[@shumit]

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]

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

[@aqarcity]

Awesome, thank you

[@zunnoorainrafi5985]

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

[@tawsifhaque9360]

excellent video. what vs code theme do you use?

[@sebastiancastillo3560]

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!

[@dennisb1590]

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]

Kinde is a nice auth, and pricing is also good

[@ahmadasgf7656]

pls someone tell me how to CRUD user data from kinde?

[@orhanmadiassani]

dope content

[@Grozny446]

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

[@ibrahimcious]

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

[@olusanyaolamide9764]

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

[@pietro_dev_07]

Hello, what theme do you use?

[@augedoo8409]

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]

Thanks! Will create a video about this soon

[@_bestbeast]

Please make a video on phone authentication

[@vinojanabhimanyu2632]

Can you please give the GitHub URL for this project?

[@heismyke]

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

[@0x-003]

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

[@7doors847]

Awesome

[@io0312]

is it possible to link to the repository?

[@Racine14]

How to pass user data into mongodb database.

[@chesterxp508]

GoodJob!

[@TheRcfrias]

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]

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]

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]

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

[@ComputationalArt]

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?

[@togya4]

where is the starter code?
git hub repo?

[@d4rzk252]

code?

[@koreandude]

Any plans on having your course hosted on Udemy platform?

[@ByteGrad]

Nope

[@getoar2413]

Whats your vs code theme

[@ismaeltinta6118]

try one dark pro. it's pretty cool

[@asadmehboob1300]

Please make paid course on Nestjs microservices and AWS

[@user-xn1vz9jq1b]

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

[@olusanyaolamide9764]

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

[@user-rb7wk4nf6v]

please subtitles!!!

[@lokeshkaushik1812]

First🎉