How to distinguish between user types when authenticating with JWT
In my application (Mongo, Express, Node, React) I am currently validating users from client to server using JSON Web tokens. However, I want to be able to access different halves of the application for two different types of users. What's the best way to do this? I currently have both types of users stored in the same model, with a boolean that distinguishes them. To clarify, different types of users will be able to access different APIs as well as different parts of the client application.
Is there a package that handles this? JWT function?
source to share
Wanted to add a little to the suggested answer. A lot of what Auth0 uses jwt. You might want to play around with it to see how they handle authentication and secure their routes. Another thing that really helped me figure out how to use jwt was playing with the debugger on the jwt website .
Give users access to various API endpoints
The jwt icon can be decoded by any user. Anyone can see what is on the token. The important part of jwt is that it has a signature. If someone wants to take a token, change the information and then access your api, then the signature will be messed up and this token should be rejected.
All you have to do is create route middleware. If the route is protected, the user sends a jwt in the header. Secondary software will do 2 things:
-
Check the token signature to ensure that the token is valid and has not been tampered with.
-
Decode the token to see what's in the JSON. Since jwt is just JSON, you can add any property you want. Add property permissions and set the access level for users. Here is a tutorial from auth0 on how real life companies like slack can use jwt tokens to determine what a user can and cannot do. For what you want to do, the same principles apply. Auth0 with multiple tenant apps
How can I restrict users on the client side with React?
I saw this question in the comments and will post an answer here in case anyone is interested. If anyone really wanted to, they can take their token, change it and go to any visual component (in react). The reason is that you do not want to store token signature secrets on your client. But even if someone changed their token, they could not do any damage. If they try to send a request to the server, their token will be rejected and your api will be protected.
Router responsiveness and dynamic routing
For 99.9% of your users who are not at war with their token, the best way to decide which parts of the site they are allowed to use is with react-router . Since React is a single page application, there is only one static html file that will send your assembly to the client. On other systems, different routes on your server will send a different page on different static endpoints. To mimic the behavior of this page using React, very often people use React Router. React Router creates dynamic routes, so when users insert endpoints into the browser, they can simulate how typical static sites work.
It can also be used to restrict user access to specific components. Once the user is logged in, you can send the decoded token information and store it in your react state. One of them will be your permission setting. When working with a router, when a user tries to navigate to a location that requires permissions, you can reference their state and redirect them either to the secured component, or back to the authorized catch, back to where they came from, the login page, etc. Basically anywhere.
Another auth0 tutorial using a relay to restrict users . Scroll down to the Process Authentication Result heading
source to share
There are two ways to do this:
- When you encode the JWT token, also encode the user role.
- When you decode a JWT token and get a user id, for example, query your datastore to get that user role.
Most packages will allow you to define what you want to encode.
Tips:
-
Always set an expiration date for your tokens. It is just a date stored in the JWT. When you decode the token, make sure the date is in the future if not deny access.
-
Create middleware that validates the user's role. For example:
router.get('/restricted-area', requiresAdmin, (req, res, next) => {
// only admin can access this
});
function requiresAdmin(req, res, next) {
if(req.user.admin !== true) {
res.status(401).end();
} else {
next();
}
}
source to share