Role-Based Authentication in React (Complete Tutorial)

most cleanest react channel!! I needed this!!

Way to 100k Lets goo you deserve more brother .... 🫡

Can you make a video about casel

exactly what I needed. Thank you!🤩

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

I love your videos!

How do i preview react website on phone when it's under development... Plz reply

justo lo que estoy necesitando!!

Repo ???

source code missing

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

❤❤

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?

once again a great content and a very informative video, thank you so much

I think you mean role based authorization right? The distinction between authentication and authorization is important

Best Channel for React

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 (⁠◔⁠‿⁠◔⁠)

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

Next authentication in next.js

can't this client codes be edited and then have access the protected route?

use context api with authentication with cookies, with axios only authentication user access dashboard with protected routes waiting for your response

Thanks for this. Auth has been my biggest weakness for the longest time.

You really create the best content, real scenario's with best practices. Good reason for your channel to grow so well.

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

The best

Great Job ! Can you please manage roles and authentication with redux

Great video, could you please teach us RBAC in next.js

so happy i found your channel! great content as always!

Great content, thanks

Need "Project Next"

This is bad implementation of authentication, there are no cookies, access or refresh tokens, so it simply makes requests on every page refresh

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. :)

Pleae make one video about Casal (Role Base Authentication) library

Very clear implementation. 🥰

when my lead engineer sees me try to authenticate users on the client🤣🤣🤣 i might as well fire myself

You mean Role based Authorization?

can you cover jotai lib, it is great and to bad many do not know it is even exist.

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

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'd recommend you to use the <Outlet /> component from react-router-dom since we can add multiple routes to the same ProtectedRoute instead of adding multiple ProtectedRoute for each different route.

This is such a peaceful video.

Even your voice sounds ASMR.

I badly needed it.
I just also saw your authentication handling video.

I can now combine both and reap best results.

This day have been won 😸🤩🥹.

Thanks a lot

Thanks, but I'm stuck with GraphQL JWT auth. I'm using codegen and hooks for mutations and queries.

great

I love this implementations but i have one BIG question. The way you wrote this all login logic is in AuthProvider(including fetch itself) and although this look clean i run into a problem when i tried to make Login page. In order to show potential errors or loading state when user tries to log in i needed login fetch logic in my Login page component however you put that logic inside AuthProvider. I though of moving login fetch from AuthProvider to Login component and leaving just setCurrentUser and setAuthToken to AuthProvider. This way i will be able to monitor fetch state (show errors and loading state to user). Is this valid solution and if not please give me some advise.

Thanks for You work! But there is an error with statuses, in particular undefined in user. The author automatically fetches data through the use effect, in fact you receive authorization data only after sending the authorization form. It's bad that he did not simulate this in the example. It would have been a different matter, and so many will still have the task of really correctly processing authorization statuses in a protected route.

nice tut but this is insufficient cuz when handling multiple routes the currentUser goes back to null therefore you lose the ability to check for roles however you can use localStorage as an alternative to store the desired roles and then retrieve it when needed

From Cambodia . I love your video so much . your channel help me a lot . thank u man

Great Video

concerteza eu vou maratonar os videos deste canal