What is the best way to handle 401 error, refresh user token and repeat request using Nuxt 3 useFetch composable?
Related
I am using google ads api, I have generated Access Token, Refresh Token, I have CustomerId of my Ads Manager account, my developer token still getting this error. **My ultimate goal is to generate Keyword ideas using google ads api **
You have to put your generated token inside your request-header. With that token inside the header, every request to your API is authorized.
You can see that you have an "Authorization"-Token with the empty value "Bearer". There you have to put in your token, that your API can check the token and validate it. Same thing with the developer-token. Your requests sends empty header values.
After log in, I have a cookie . I am wondering, if it's possible for my app to detect if cookie has expired, and then force logout action? Or just force router push to /login
Does it needs to be done with axios interceptors response or in router guard?
You have two options that I know of.
Option 1 (recommended)
Setup an axios interceptor on the response object and listen to the returned responses from the server. Particularly error codes. If the server sends a 401 you can logout the user or request for a new access token to keep user logged in. You can use this npm library to implement the axios interceptors. With the library you can mention the error codes you want to listen to. So, I usually send a 498 error code from the server for all cases that involve expired access tokens, so its easier for me distinguish between expired and unauthorized tokens.
Option 2 (not recommended)
You can use this npm library to decode the JWT on the frontend and extract the expiry time from the token. Create a setInterval() function that regularly checks if the current time is greater or equal to the expiry time. If it is true logout user or request a new token.
Go with option 1 because authenticating a token or its expiry time is the job of the auth server and nobody else. The front-end shouldn't be in charge of deciding whether the token is valid or not. Plus, you don't have to work with setInterval() or setTimeout(), because you'll have to take into account additional edge cases as well.
My setup works fine apart from that special flow:
1) On my express server I have a route /bookings which sends back a new csrf token.
2) In my Nextjs bookings.js page in getInitialProps(), I use that csrf token to call "api/user/bookings" on the server (which is also csrf protected).
3) But I get an invalid csrf Token exception from the server.
I think this should work because I created a new csrf token in the first request and use it in the consecutive api request.
Here is the relevant code:
In my react-native app, I have a jwtsaved to localStorage by redux-persist. I need to check the expire date of token before every fetch request to API. But I don't want to implement this process of date comparing within every page, because there are dozens of pages where I make a request to API. Maybe I can write custom method that wrappes fetch and check the expire date inside or before every fetch to dispatch action that check whether token expired? I'm stuck here. Do you have any idea how can I solve this problem?
This is an overview of how you can solve your problem.
Step by Step
/login
Successful login
Server returns { token, refreshToken }
Now for making any request ( protected i.e only logged in user needs to be shown or access a particular resource on server)
send token with each protected request in Authorization header
server validates the token
in case of expired token server returns expired token error
now client receives the expired token error
next client dispatches an action to get new token
new action should send an api call to server to get new token passing refreshToken
after validation of refreshToken server returns new accessToken and refreshToken, in case passed refreshToken was invalid return an error and client should logOut the user
If new accessToken is received update the app state with new accessToken and refreshToken
This is just an overview but you can add more security measures to it such as only few times token can be requested via refreshToken and after that user must login again.
I've registered as a developer with eBay and created an app.
I generated an Oauth (not Auth'n'Auth)
Using Postman to generate a simple request (image) and recieving an error for token invalidity
Error: Invalid access token. Check the value of the Authorization HTTP request header.
What am I doing wrong here?
If your token is for "sandbox" environment, make sure you use sandbox API endpoints for your requests as well.
Instead of https://api.ebay.com/buy/browse/v1/...,
try https://api.sandbox.ebay.com/buy/browse/v1/....
One of the issues which might have happened is:
The access token might have expired
Use the refresh token to refresh the access token when it expires — you know when to do this when your call to the API returns a status code of 401 and the above body you saw in Postman.