Role-Based Authentication in React (Complete Tutorial)

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!

[Lykkos-]

most cleanest react channel!! I needed this!!

[bestformspielt]

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

[Thomas-zruw]

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

[TannerBarcelos]

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

[tomasburian]

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

[jofay]

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

[pedrosilva]

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.

[gauravbawa]

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

[pavlevelickovic]

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.

[okadz]

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

[kermit]

Cleanest tutorial, greeting from Indonesia!

[ritankarbhattacharjee]

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.

[kevinchen]

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

[CLeovison]

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

[Solo_playz]

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

[lil_nach]

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

[codewithsanjay]

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

[elabinnovations]

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

[mohamedyamani]

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?

[kalideb-yy]

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