Role-Based Authentication in React (Complete Tutorial)
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- 🚀 Project React → cosden.solutio...
📥 Import React (Newsletter) → cosden.solutio...
Source Code → github.com/cos...
Join The Discord! → discord.cosden...
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video we will learn how to handle role-based authentication in React. We will implement a custom AuthProvider component to handle authentication, and then a custom protected route component to handle user roles. Only if a user is signed in and with the correct roles, will they be able to view the content on the app!
most cleanest react channel!! I needed this!!
I really love your channel and your very clean and simple way of writing code. This is the first time you took a slightly bad shortcut by using sentinel values for your context. Saying that "undefined" means one thing and "null" means another makes the code hard to read and reason about. A better way in my opinion would be an additional attribute in your context called "authState" which is an enum containing "pending", "authenticated" etc. This would make it way more obvious and intuitive.
This is of course nit-picking. I still think your videos are the best react content there is. Thanks for making them. :)
You really create the best content, real scenario's with best practices. Good reason for your channel to grow so well.
Great implementation. I was talking to Claude about this recently and I came to a HOC solution which worked well, but this is simpler. Going to use this as a reference for a prod task at work 👀🍻
Thanks for this. Auth has been my biggest weakness for the longest time.
so happy i found your channel! great content as always!
I'd recommend you to use the component from react-router-dom since we can add multiple routes to the same ProtectedRoute instead of adding multiple ProtectedRoute for each different route.
exactly what I needed. Thank you!🤩
once again a great content and a very informative video, thank you so much
Best Channel for React
Very clear implementation. 🥰
Cleanest tutorial, greeting from Indonesia!
Good video. But the title is wrong. It should be Authentication and Role based Authorization. Authentication is verifying if you are a valid user or not. Then comes Authorization. That is how they are defined in Computer Science
I think you mean role based authorization right? The distinction between authentication and authorization is important
well the first half of the vid is all about authentication so I think the title is fine
justo lo que estoy necesitando!!
Great content, thanks
The video was awesome 👍. This is a per component based application right, I wanted to know that if we wanted to protect a complete route like /staff and its children /staff/profile, /staff/edit-profiles etc at once, then how will we do it? For projects where there might be many components that might need protection adding ProtectedRouteComponent like this may become a laborious task.
I would actually create one Route component and wrap all routes with it, and then have the logic there for any route. This is useful if you need to do other things to routes like set page title or analytics, it makes sense to have one component to do it! It's not laborious if every component needs it!
@@cosdensolutions got it thanks
I love your videos!
Hi kosden, will it be possible in the future that you will make a video about implementing seo in react? Because that will be a really great great help, thank you so much
Ty great tutorial 👑, i have a question, is the backend check role safer then this client side check, for example: in nextjs i check in the middleware or in the rsc pages, and redirect from there
Backend check is a must, he’s only included front end for brevity. If auth only lived on the front end, anyone could hit the backend using a script and do things they’re not supposed to
if you're using nextjs with rsc, yes you need to do that there as well. But if you're only on client components, for this specfiic use case it's just the frontend. But when logging the user in, you have to check their credentials and all other checks
Great video, could you please teach us RBAC in next.js
use context api with authentication with cookies, with axios only authentication user access dashboard with protected routes waiting for your response
Way to 100k Lets goo you deserve more brother .... 🫡
Can you make a video about casel
Pleae make one video about Casal (Role Base Authentication) library
can you cover jotai lib, it is great and to bad many do not know it is even exist.
10:58 why not directly call handleLogout() in the catch block in handleLogin. Seems like the logic is completely the same!
better separation of concerns. You don't log out the user when login fails. You log out the user when they are logged in and need to log out. It just happened that the logic is the same here but they are different use cases!
This is bad implementation of authentication, there are no cookies, access or refresh tokens, so it simply makes requests on every page refresh
Would you mind to tell me the resource about how to do it properly? This FE and BE things still kinda new for me. I really appreciate it sir. Thank you in advance.
@@reskort4089 to be honest I can't find any valuable information about it. Most of posts or videos about "how to eat make auth with Google or GitHub provider" and no one use credentials with tokens, only one thing I can suggest to you is try to search for axios interceptors with refresh and access tokens, it will be at least near to real world. It's not perfect, but working, especially in react
This video is about role-based, not pure auth. If you want interceptors and tokens, check out my main auth video
@@cosdensolutions i see, thanks for your respond, author.
@@cosdensolutions alright, but it still strange implementation of that :)
Great Job ! Can you please manage roles and authentication with redux
when my lead engineer sees me try to authenticate users on the client🤣🤣🤣 i might as well fire myself
Need "Project Next"
nice video!
I implemented this once, but arrived at a situation I didn't like. In order to send the JWT with each request, I'd use interceptors for example, and since the accessToken is passed through context, the fetcher instance must also be a hook in order to access the token. This snowballs to each request you try to make, which must end up a hook.
how do you deal with this?
I just created interceptors in useEffects in the AuthProvider directly that injected the authToken in every request and updated the interceptor everytime it changes. Then, the rest of your app just fetches as normally and the authToken will always be sent along!
@@cosdensolutions but the axios instances would need to be provided via a hook then, which in turn would require requests to be fired from within hooks/components, no?
source code missing
fixed
This chat feels like git riview
You mean Role based Authorization?
isn't it bad when creating variable name same exactly as type name like the const AuthContext and type AuthContext? I am thinking to just lowercase the const like authContext, cause I am kinda confused when I see them
if you want them different, I'd rename the type instead!
The best
Next authentication in next.js
can't this client codes be edited and then have access the protected route?
You would also protect your endpoints so even if they go to any route, they get errors from the api
How to handle situation where i need to show a different component on a page depending on the role type? Do you have a clean solution for that
after logging in, check user role, and redirect user to whatever route that role belongs (/admin if role is admin, /staff if role is staff). easy peasy
@@raves_r3177 no thats fine. But let say you have page wherein there are few components visible to both viewer and admin. And for admin role, there exist a special component, only visible to admin. How do you handle that in a clean way
role.admin ? : it's that easy?
Create a Condition render component something called like
{chilren}
Then render the children based on the given props of the component and you have higly generic customisable component wrapper that will only render a component based on a condition being true or any role matches the allowed roles in the props.
@@GenZ-Coder interesting 🧐
How do i preview react website on phone when it's under development... Plz reply
In vite it comes out of the box by adding -host tag, not sure for nextjs but I believe you can search for port forwarding
@@jerrykodes thanks
❤❤
Next video on context api with authentication with cookies, cookies store token user details with axios only authentication user access dashboard with protected routes waiting for your response (◔‿◔)
Repo ???
it's there
Moore Mark Perez Jose Robinson Karen