I'm developing website like classified ads with Django REST framework, react and redux. I have a question about authentication with JWT.
I want to use djangorestframework_simplejwt for authenticate and I've checked a few tutorial. I saw that many tutorial are checking access token on client side like below
export function isAccessTokenExpired(state) {
if (state.access && state.access.exp) {
return 1000 * state.access.exp - (new Date()).getTime() < 5000
}
return true
}
and refresh token as well.
But I don't know why. Because just request new access token with refresh token every time we got HTTP 401 Unauthorized error with expired access token.
The workflow that I thought is
Send server a request with access token to get page which only
authenticated user can see.
If access token is expired, frontend
will get HTTP 401 Unauthorized error.
Send server a request with
refresh token to get new access token, then frontend will store it
to localStorage.
Send a request again.
Is this bad way?
My apologies with my poor English...
You shouldnt be checking the JWT on the client side. A JWT is basically a token that the server has given you that is "assumed" valid. When you send the token back, the server will tell you if the token is not valid in the form of Http Status Code 401 - Unauthorized
Related
I have built an MERN application
Built an login route and i have 2 JWT tokens one is Access Token and another one Refresh Token
Whats the proper way to store this token in frontend?
I'm setting both the token in http only cookie 🍪
But axios interceptor will send back both the jwt tokens every time in each requests.
So storing in local storage is bad option as i know
What's the proper process? I need refresh token only when access token is expired.
Can anyone please guide me the proper way of doing MERN application?
In every tutorials they setting the http only cookie for access token and refresh token through the response body. In that case how to handle in frontend? Where exactly storing it?
I am new to web dev. I built a backend using Django Rest Framework and am using JWT to handle auth.
Now, I want to connect my backend to my frontend in React. But, I am confused how this should be done. Here are my question:
What is the whole flow of requesting and using JWT access and refresh tokens? Like, when should I request a new access token with my refresh token and when should I request a new refresh token? Thanks!
I will make a quick response:
Flow of requesting and using JWT:
A picture worth a thousand words.
The access token is not lasting forever. Whenever it expires, you have to request a new access token with your refresh token.
Refresh tokens can expire, although their expiration time is usually much longer than access tokens. To handle this case, almost all implementations I've seen return a known error code of 'invalid_grant' that you can check for on the client-side and handle by your business. (ex: Show login page...)
Regarding your questions:
What is the whole flow of requesting and using JWT access and refresh tokens?
I don't know you're using what's package about JWT, having too many packages about Django JWT on github (pyjwt, djangorestframework_simplejwt, ...). And Im using pyjwt in my application, because I want to custom my authentication in-app for security.
The workflow:
When FE send request to login/signup APIs, BE generate a token by using JWT, and return that token in the response.
FE store that token on local storage, using it for sending other requests.
BE will take the token by each request from FE to verify. The same as TokenAuthentication of DRF, we must be custom it when using pyjwt. Will verify the JWT token instead.
when should I request a new access token with my refresh token and when should I request a new refresh token?
You can request a new access token after that token is expired.
When you're using djangorestframework_simplejwt you can see the refresh token but in my case (pyjwt), I just need re-generate jwt token again :)
There could be options, but simple flow is next:
You do auth and get access and refresh tokens from a backend and save them as cookies.
You use your access token until you get error 401 because access token has expired
Then you try to refresh your tokens using your refresh token. If you use axios on frontend, good option to write a middleware for this case. This middleware will refresh tokens and repeat a last request. There should be recipes in google.
If success you got new pair of access and refresh tokens and continue your workflow.
If fail, you need to auth again to get tokens.
LlI found this YouTube vid which provides a good intro to JWT auth tokens and refresh tokens:
https://youtu.be/mbsmsi7l3r4
Now I'm trying to integrate this design with a React app. I can store the JWT in my app Context and then pass it to API endpoints. Each endpoint would include an authenticate hook to validate authentication with the provided token.
I'm thinking that the authenticate hook could generate and return a refresh token if the original authentication token is within 10 seconds of expiration
But with this ^^^ approach, it seems like I would need to possibly return the auth token or refresh token as part of the API endpoint response object so my React app would have the ability to easily get a handle to that refresh token and pass it in to the next API endpoint call
So I'm just trying to postulate a possible design for JWT integration between my React app and Express API. How common is the approach that I described? Is there a better or more elegant way to do this?
When your access token expired, refresh token is used to get a new copy of access token. Both needs to be persisted somehow on client side. You may find useful information here from Auth0.
Note that refresh token can be implemented in a few form. Refer to this SO question.
My JWT workflow is something along these lines:
Get refresh token and access token from Authorization Server
Use access token to access resources from Resource Server
Access token expired, Resource Server refused access and returned an something like unauthorized status
App notified of expired access token, proceed to use refresh token to get new access token from Authorization Server
Repeat
Your Auth server and Resource server may be the same.
Read this from Auth0 thoroughly.
I am using reactjs on the client-side. The server is sending a cookie after authentication.
So my question is that How to get JWT cookie in react-js which is send by the server and how to manage a token on behalf of this cookie
Typically, there will be an API for client-side to get the data of the current user, for instance, send a GET request to /api/me to get the user data { username: 'harry830622', /* email, gender, etc. */ }.
In your scenario, the JWT is in the cookie, so it will be sent to the server in every request made by the browser automatically.
When the server receive the request, it will first verify the JWT in the cookie, if the JWT is correct, respond with the data, otherwise, throw an error of 401 UNAUTHORIZED.
Therefore, to check if a user is logined or not, simply send a GET request to the API to see if the response has valid data.
I am generating the JWT token for a user when he logs in with correct credentials at Server side.Previously,I was storing the token in database and for every request I am getting the token from database which leads to bad practice(If i am not wrong).At client side(In my controller),i can store that token in $rootscope so that i can send that token with each and every request.I am unable to find where should i store my JWT token to access at server side for every request??
Some one,suggested me to use Redis to store JWT token.
If i use Redis,can i set maxAge for my token which deletes the token when user is idle for certain time??
Can any one please provide me the suggestions for my procedure?If it is wrong,Suggest me with a right approach!
Note:I am new to NodeJS/Express and AngularjS
JWT's have an exp claim. Set it to the time to which you want the tokens to be valid and have a check in the route if the token has expired.
If it has, send a 401. Else let the route handle the request.
The simplest way:
Add 'validDate' field to token payload when you issue new token for logged user, then check this field when processing the request. If date is expired just return 401 error