I think we used axios interceptor to track the response of request and if it is failed then we need to automatically call another request to refresh token and then automatically call the original request and user don't know about that. So in that case user experience is also improved.
@@careerwithvasanth actually interceptor is used to track the response of every request and if response status is 401 then we request on refresh token end point but failed request store and after refresh token we call it again
@@careerwithvasanth yeah please, correct the answer if candidate give wrong answer, it will be helpful to know us also when we are also think what could be the answer and candidate give wrong answer, we can match it with your answer.
@@abhishekporwal876 Thanks for the comments!! if you checkout new videos on the same playlist I'm answering all the questions at the end !!th-cam.com/play/PLmcRO0ZwQv4SwXLVpnKb_nFQx1Wd2XEjD.html
I have 2 approaches that i used... 1) if it got status code in response 401 then I'll simple logout and tell user to login again with new token 2) If there is a support of refresh token from Backend then I'll use axios interceptor...when i make parallel api calls and first time my token gets expire then that time i got some error for that api call...then I'll call another api using interceptor and get refresh token replace that token with my current expired one token and move forward with that refresh token...
We can solve using the wrapper function to check the token is expired or not, we can simply create a guard auth file for check always token expire or not if we get incorrect response we can logout the user and redirect to the login page, I have implemented that with jwt token
Question 3 - We can implement a function of refrshToken, wheich will check whether session is active or not, and based on that status we will execute other 3 api's. if status is true then 3 api will be called else getNewToken will be executed, and then will use new toekn for other 3 api's. Please Do let me know whether answer is corret or not?
Can use axios and it's concept interceptor, What will happen is when acces token expired interceptor listens that acces token expired and after that it calls the refresh token api to get the new token and after all 3 api will call with new token. Interceptor.request Interceptor.response
The same question asked to me, and I answered that I will create a separate function. But at that time I was not sure that it's a right way to do this or not but I was right.
@@miw879 Hi, sorry for late reply. Join our 1800+ member uncommon geeks telegram group here, you can discuss such queries there t.me/uncommongeek install telegram app on your mobile and click this link. I have less time to make video about it, but you can clarify all your doubts on this group.
When we land on a website we check that we have fetch one api that tells about whether the user is logged in or not if the user is logged in then we definitely have the token else we logged out the user and prevent us to call another api. So like we have a social media web app so in this we will fetch the user profile where we get the token and save it to local storage ... If we have the Authorization token in then only we logged in the user else users have to log in again we can easily achieve this using the backend .... So now the other api call will depend upon if we have a profile or not ... So if we have a profile and we have the correct token and we proceed else the user has to login in again the token renew
There are 2 things here, authorisation token and access token. Authorisation token will be present if user is logged in, where as access token will expire at some predefined interval. So user is logged in (as authorisation token is valid) but access token is expired. How do you handle that situation is my question !!
@@careerwithvasanth can send this access token to all the protected routes inside their headers, which needs to be called only when the access token is valid, On the backend they can verify that is access token is valid or not.
If the first call succeeds, I'm gonna set the state to proceed for other calls, and in useEffect, if the state tells to proceed, I will. Else, I'm not gonna continue for those calls.
In the question of 3 api parallel call -> i think promise channing should be a solution first we check if the fisrt api call is resolved then return to next two unless go in the catch block
@@allindiachannel2290 Join our group here: t.me/uncommongeek you will get a community of people who can help you with all these !! open link from mobile phone after installing Telegram application.
Bro useReducer make it more complex, it's for heavy complex state Mangmt altr of useState if you want to use useReducer go with the redux, .. It's have smiliar syntax of that
May be im wrong but sallow copy malfunctuonality will help here to change the original object if you like to do so.. Or if you want to create new obj go with the deep copy..
I think we could do that token question with maintaining redux or usecontext api We will check for token expiry for all apis and when we got valid token then we will maintain it in context and we will check for that context before hitting api if we get false for that context we can hit the api or we will return it with some response Please share your thoughts on this solution it would be really appreciated 🙏
@uncommongeeks okay for that i am maintaining the context in boolean when the first requests hit and git the error of token expiry i will set the context to true and when i got the data from that requests i will set the context value to false and i will put a check on top for every query to first check the context value before hitting the request.
Since you are making API requests parallelly. How can you check that the first call has failed and now I have to put the second call in the queue meanwhile the token is being refreshed? Both will make requests to the server simultaneously (approx.) and will be failed.
Sir can u please explain the solution to prevent parllel api calls in case of expired tokens problem , Not able to find the answer anywhere not even in telegram channel, especially to prevent other two api calls after the initiation of first api call, most the solutions are for preventing all the api calls but not after first api call since they run in parallel all are initiated one after other without waiting for the result of first api call.
Bro as i think promise have some methods for this like promise.All(api1,api2,api3) which give all the resp. For the condition that even 1 will give the resp it's race() ,is settled() 4-5 methods are there i think this one of them will be use here
Hi, Join our 3100+ member Career with Vasanth telegram group here, you can discuss things like this and a lot of opening related information is also shared here: t.me/uncommongeek
Follow me on LinkedIn www.linkedin.com/in/vasanthbhat/ Join our telegram group here t.me/uncommongeek Message me in either of the two(Preferably telegram) and we can connect for a mock interview..
17:05 can we use cookies to store user auth token then check using if else condition if user auth token is expired then do 1 api call Else do all 3 api call
if (isTokenExpired(authToken)) { return refreshAuthToken() .then((newToken) => { // Now we have the new token, make the parallel requests return Promise.all( urls.map((url) => fetchWithToken(url, newToken)) ); }); } else{ return Promise.all( urls.map((url) => fetchWithToken(url, newToken)) )}} isnt this the ryt way? or am I missing something?
![[ ออกกอง ] วัยหนุ่ม 2544 โลกหลังลูกกรง..ทัวร์กองถ่ายหนังใน "คุกของจริง" | JUSTดูIT.](http://i.ytimg.com/vi/vB--aOkZCpw/mqdefault.jpg)
I think we used axios interceptor to track the response of request and if it is failed then we need to automatically call another request to refresh token and then automatically call the original request and user don't know about that. So in that case user experience is also improved.
How you're making everything "Automatic" ? can you elaborate ?
@@careerwithvasanth actually interceptor is used to track the response of every request and if response status is 401 then we request on refresh token end point but failed request store and after refresh token we call it again
Your interviews are insightful, I would recommend answering the questions as well if its not answered correctly.
Noted your suggestion !! will try to do it, in future videos
@@careerwithvasanth yeah please, correct the answer if candidate give wrong answer, it will be helpful to know us also when we are also think what could be the answer and candidate give wrong answer, we can match it with your answer.
@@abhishekporwal876 Thanks for the comments!! if you checkout new videos on the same playlist I'm answering all the questions at the end !!th-cam.com/play/PLmcRO0ZwQv4SwXLVpnKb_nFQx1Wd2XEjD.html
I have 2 approaches that i used...
1) if it got status code in response 401 then I'll simple logout and tell user to login again with new token
2) If there is a support of refresh token from Backend then I'll use axios interceptor...when i make parallel api calls and first time my token gets expire then that time i got some error for that api call...then I'll call another api using interceptor and get refresh token replace that token with my current expired one token and move forward with that refresh token...
Appreciate the response
We can solve using the wrapper function to check the token is expired or not, we can simply create a guard auth file for check always token expire or not if we get incorrect response we can logout the user and redirect to the login page, I have implemented that with jwt token
Question 3 - We can implement a function of refrshToken, wheich will check whether session is active or not, and based on that status we will execute other 3 api's.
if status is true then 3 api will be called else getNewToken will be executed, and then will use new toekn for other 3 api's.
Please Do let me know whether answer is corret or not?
How to invoke refreshToken ? from each of the 3 API's or ?
Can use axios and it's concept interceptor,
What will happen is when acces token expired interceptor listens that acces token expired and after that it calls the refresh token api to get the new token and after all 3 api will call with new token.
Interceptor.request
Interceptor.response
The same question asked to me, and I answered that I will create a separate function. But at that time I was not sure that it's a right way to do this or not but I was right.
Good way to get insights about React interview. The way to ask and answer questions is amazing.
Thank you !!
It would be better if you could answer the questions he was not able to give answer to anyways its a mock us audience will get to learn as well
Miw, I too want to do that !! but video becomes lengthy, for any question you don't get the answer online, comment here. I will try to answer them !!
@@careerwithvasanth great thanks we can start with how to make that prototype map function available across your entire app?
@@miw879 exporting it and importing it
@@careerwithvasanth still waiting for your reply sir
@@miw879 Hi, sorry for late reply. Join our 1800+ member uncommon geeks telegram group here, you can discuss such queries there
t.me/uncommongeek install telegram app on your mobile and click this link.
I have less time to make video about it, but you can clarify all your doubts on this group.
When we land on a website we check that we have fetch one api that tells about whether the user is logged in or not if the user is logged in then we definitely have the token else we logged out the user and prevent us to call another api.
So like we have a social media web app so in this we will fetch the user profile where we get the token and save it to local storage ... If we have the Authorization token in then only we logged in the user else users have to log in again we can easily achieve this using the backend ....
So now the other api call will depend upon if we have a profile or not ...
So if we have a profile and we have the correct token and we proceed else the user has to login in again the token renew
There are 2 things here, authorisation token and access token. Authorisation token will be present if user is logged in, where as access token will expire at some predefined interval. So user is logged in (as authorisation token is valid) but access token is expired. How do you handle that situation is my question !!
@@careerwithvasanth can send this access token to all the protected routes inside their headers,
which needs to be called only when the access token is valid,
On the backend they can verify that is access token is valid or not.
If the first call succeeds, I'm gonna set the state to proceed for other calls, and in useEffect, if the state tells to proceed, I will. Else, I'm not gonna continue for those calls.
That's debatable as calls happen in parallel !!
The myMap function can be exported and then can be imported wherever needed
Correct Aditya !!
Promise.all will be used . it means if token get fail it will return the failure
Promise.all will execute all promises in concurrent and the problem I asked cannot be solved by it.
very good real life interview experiance
Thank you !!
In the question of 3 api parallel call -> i think promise channing should be a solution first we check if the fisrt api call is resolved then return to next two unless go in the catch block
Promise chaining is not parallel execution, it's a concurrent execution.
@@careerwithvasanth Sir where can i read about parallel and concurrent execution of javascript? Can you give me the link?
@@allindiachannel2290 Join our group here: t.me/uncommongeek you will get a community of people who can help you with all these !! open link from mobile phone after installing Telegram application.
I'll have a variable to set if any api call fails. If it fails, i'll cancel out the parallel calls made to rest two calls.
Sir can you also give the answers to few of the questions. That will make us learn quickly.
Thanks for the comments!! if you checkout new videos on the same playlist I'm answering all the questions at the end !!th-cam.com/users/playlist?
Bro useReducer make it more complex, it's for heavy complex state Mangmt altr of useState if you want to use useReducer go with the redux, .. It's have smiliar syntax of that
May be im wrong but sallow copy malfunctuonality will help here to change the original object if you like to do so.. Or if you want to create new obj go with the deep copy..
I think we could do that token question with maintaining redux or usecontext api
We will check for token expiry for all apis and when we got valid token then we will maintain it in context and we will check for that context before hitting api if we get false for that context we can hit the api or we will return it with some response
Please share your thoughts on this solution it would be really appreciated 🙏
How do you handle the requests that are not processed because of token expiry ? how to re-trigger it ?
@uncommongeeks okay for that i am maintaining the context in boolean when the first requests hit and git the error of token expiry i will set the context to true and when i got the data from that requests i will set the context value to false and i will put a check on top for every query to first check the context value before hitting the request.
If the context value is false then we could go for the next step of hitting api
Share your review on this
Solution for 15:00 use async await
Since you are making API requests parallelly. How can you check that the first call has failed and now I have to put the second call in the queue meanwhile the token is being refreshed? Both will make requests to the server simultaneously (approx.) and will be failed.
if api call fail due to expiration of token then it should redirect to login page and empty the localstorage
Sir can u please explain the solution to prevent parllel api calls in case of expired tokens problem , Not able to find the answer anywhere not even in telegram channel, especially to prevent other two api calls after the initiation of first api call, most the solutions are for preventing all the api calls but not after first api call since they run in parallel all are initiated one after other without waiting for the result of first api call.
Bro as i think promise have some methods for this like promise.All(api1,api2,api3) which give all the resp. For the condition that even 1 will give the resp it's race() ,is settled() 4-5 methods are there i think this one of them will be use here
Can any one tell me where to place the poly fills folder in react.js
Generally people don't create polyfills in ReactJS project. They just use utilities to do the required functionalities
Sir can you please suggest any good books for learning frontend developer
Hi, Join our 3100+ member Career with Vasanth telegram group here, you can discuss things like this and a lot of opening related information is also shared here: t.me/uncommongeek
can we use any interceptors so that if the token error showed up , then we can cancel other 2 apis??
That's partially right !! but how to you handle re-calling those 2 API's ??
@@careerwithvasanth dont have any idea bro, please spit it from ur mouth 😃
Can please share candidate resume.
Great
Thank you !!
At 13:38
How about using token refreshing with a lock mechanism?
Hi Can you elaborate ??
❣️
thankyou
Hello sir I m interested in a mock interview I have knowledge of frontend technologies.
Follow me on LinkedIn www.linkedin.com/in/vasanthbhat/
Join our telegram group here t.me/uncommongeek
Message me in either of the two(Preferably telegram) and we can connect for a mock interview..
17:05 can we use cookies to store user auth token then check using if else condition if user auth token is expired then do 1 api call
Else do all 3 api call
How to do handle parallel API calling ??
@@careerwithvasanth we can use promise.all() for parellel api calls.
Please correct me if i am wrong
arvind bhaiya😂😂😂😂😂😂
if (isTokenExpired(authToken)) {
return refreshAuthToken()
.then((newToken) => {
// Now we have the new token, make the parallel requests
return Promise.all(
urls.map((url) => fetchWithToken(url, newToken))
);
});
} else{
return Promise.all(
urls.map((url) => fetchWithToken(url, newToken))
)}}
isnt this the ryt way? or am I missing something?
If you can add code sandbox link that would be easy to validate
I think we can do by promise.race
Can you please add the code snippets ? appreciate your comments.