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

Рет қаралды 35,833

Күн бұрын

I recommend to start here with Kinde: bit.ly/3QOe1Bh
👉 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

Пікірлер: 56

@ByteGrad 5 күн бұрын

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 5 ай бұрын

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 5 ай бұрын

Yes please.

@dawid_dahl 5 ай бұрын

And hopefully refresh token handling… 😄

@luthecoder 5 ай бұрын

This will be highly appreciated indeed and!!

@luthecoder 5 ай бұрын

Without using next.Auth

@Grozny446 5 ай бұрын

wiith phone

@shumit 4 ай бұрын

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 !!

@devardilshad3944 29 күн бұрын

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

@rahulgupta7720 5 ай бұрын

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

@sebastiancastillo3560 5 ай бұрын

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 5 ай бұрын

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 5 ай бұрын

Kinde is a nice auth, and pricing is also good

@aqarcity 5 ай бұрын

Awesome, thank you

@tawsifhaque9360 5 ай бұрын

excellent video. what vs code theme do you use?

@zunnoorainrafi5985 5 ай бұрын

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

@Grozny446 5 ай бұрын

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

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

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

@olusanyaolamide9764 4 ай бұрын

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

@orhanmadiassani 5 ай бұрын

dope content

@pietro_dev_07 5 ай бұрын

Hello, what theme do you use?

@ibrahimcious 4 ай бұрын

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

@heismyke Ай бұрын

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

@7doors847 5 ай бұрын

Awesome

@augedoo8409 4 ай бұрын

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 4 ай бұрын

Thanks! Will create a video about this soon

@_bestbeast Ай бұрын

Please make a video on phone authentication

@ahmadasgf7656 6 күн бұрын

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

@io0312 4 ай бұрын

is it possible to link to the repository?

@TheRcfrias 2 ай бұрын

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 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 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 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