Next.js Auth with Roles & Permissions (RBAC / Authorization) - Protect your app the professional way

👉 Check out Kinde for auth and more bit.ly/3QOe1Bh (paid sponsorship). Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 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
⏱️ Timestamps:
00:00 Authorization intro
02:48 What to protect in Next.js?
04:35 Example app overview
06:56 Add authentication
13:09 Add authorization (roles & permissions)
19:27 Change UI depending on user permissions
21:31 Get role
22:39 Revoking access
#webdevelopment #reactjs #nextjs

[@bibblebabl]

Unfortunately, using sas for auth and authorization is not something that startups and even more so medium-sized companies are willing to sacrifice. if, for example, emailing or file uploading can be left to sas, but users, their administration and so on is unlikely. it would be great if another player or library appeared on the market that solved the authentication problem well. we only have two big things right now, right? next-auth and lucia. the former is still very raw and confusing, and the latter has less support and poor documentation

[@mahmoud88789]

Not to mention adding another point of failure to your application.

[@hello19286]

No one should ever use SAAS for auth or databases for anything that is not a small hobby project. All these companies are just selling shovels in a gold rush.

[@eladr_]

Great video! Thanks for the comprehensive explanation on managing roles and permissions with Kinde. I have a question: could you make a video showing how an admin can create accounts for other users, like clients, support agents, or sales representatives? Specifically, I'm interested in the admin selecting a role from a list (e.g., client, support agent, representative) when creating these accounts. Is this possible with Kinde, and if so, how can it be implemented? I have a use case where only the admin can create all the accounts, and other users can just sign in. Thanks in advance

[@BliitzPint]

I like this but I’m a bit concerned of what happens when the Kinde servers are offline for some reason. Then my whole app doesn’t work anymore, right? I don’t like it when my auth logics depends on a third party service. I mean it’s very essential.

[@huzaifaqayyum786]

can we have class based server actions? to support inheritance etc?

[@ZitoxLD]

0:35 is there a way with Kinde to integrate the login form inside our app as a component, instead of redirecting the user outside our app (in order to keep the layout/header/flooter etc.) ?

[@floristrading8418]

if its an oath2 login then No, if its an email based login then yes

[@PhilanJames]

Would be awesome to have some SolidJS && SolidStart content.

[@letsgetstarted.05]

Please build a project where you'll need to host an extra Express server along with Next.js

[@brutalcodm4605]

i need to set user role when user is signup. as an example think about job vacancy site. when user is registering user can select whether he is an employer or an employee. like that. can this be achieved by kinde auth.

[@KkrDs97]

I have been trying for similar thing with next-auth but unfortunately no success. There is so no direct way, dynamically adding roles has become tough.

[@dellsonydissanayaka7712]

@@KkrDs97 I also have the same requirement, how did you achieve this?

[@farzadmf]

Can't we combine the two calls? `const { isAuthenticated, getPermission } = getKindeServerSession();` Seems redundant to do them separately

[@BliitzPint]

Why do you think it’s two calls? It IS just one function call, it just returns a complex object.

[@farzadmf]

If I remember correctly, in the video, there's a line doing `const { isAuthenticated } = ...`, then another line doing `const { getPermission } = ...`; that's why I said two calls (because on two separate lines)

[@smit359]

I m first 🥇