Refresh JWT Token Interceptor in Flutter

hello everyone today we are going to use flutter and learn how to automatically refresh an access token once it expires in this tutorial i'm assuming that you are using a rest api and that we are getting a refresh token and access token on login and then whenever the server responds with a 401 request we are going to then refresh that access token let's dive in to get started we're going to create a base flutter project we can name it refresh token tutorial with that created we can now navigate to our lib folder and we'll create a new directory called core and we'll create another directory called services and inside of that we'll add our api.dart file before we begin coding first we have to understand what will be happening with our http request for every request we make we want to first add our authorization header with our access token then after the request comes back we want to check if the status code is a 401 with a message of invalid jwt your message after jwt failure will be different depending on your server but for our example this is what we will use if the request has that 401 status code though we must call the server's refresh endpoint and store the new access token then using that access token we can then use the api client and retry the request to help us accomplish this we are going to use the dio package so we can run in the terminal flutter pub ad dio back in our api dot dart file create a class named api depending on your state management solution this could be a service provider whatever you want i use riverpod so this will just be a class that i can make to a provider later on this class will have three variables first the dial object called api then the access token string and finally we need a way to store a refresh token so it'll be saved when the user closes the app to do this securely we can use flutter secure storage so run flutter pub ad flutter secure storage with that installed then our final variable in the class will be a private variable storage and will be set to flutter secure storage constructor structure of this class is where we can add our interceptors and to add the authorization header and refresh our token so we'll call our api.interceptors.add to add an interceptor's wrapper to add an access token we'll add a function under the on request parameter and we will set our authorization header for the request another useful feature is to add the url of our server so we can check if the options.path contains http and if it doesn't then we can set our path to the url of our server plus the existing path then to run the rest of the request we can return handler not next and pass in our new options with that out of the way now we can work on refreshing our access token to do this we're going to add a function under the on air parameter that takes an air and handler inside of this function we're going to first check if the error response status code is equal to 401 and also we're going to check if the response data and then the message object of that response is equal to invalid jwt now like i mentioned earlier this can depend on your server but for our example this is the values we will use inside of this if statement that means that our jwt access token has expired so we will first check and see if our storage contains the key refresh token if it does that means that we can use that refresh token to get a new access token so we're going to create another function called refresh token and it will return a future void inside of this function we're going to read our refresh token using our flutter secure storage and we'll call our server's refresh endpoint and pass in that refresh token as the data once the request has run we can check if the status code is equal to 201 and if so we can set our access token to the response.data if the response.status code is not equal to 201 then that means that our refresh token is invalid so we can set access token to null and we'll call storage.deleteall with that function in place then we can go back to our interceptor and call the refreshtoken function at this point the access token is set so now we need to retry the request unfortunately diode doesn't add an easy way to retry the request so we're going to need to create a new function called retry retry will return a future of responsive dynamic and it will take in request options inside of this function we are simply just retrying or running the request again so we're going to create a copy of the request options and then we'll run that inside of our api client now back in our interceptor we can return the handler.resolve and we'll await our retry passing in our air.request options now at the very bottom of on air we have to return handler.nextair in the event that the status code is not equal to 401 and it's just a general error that wraps up our api class in order to use this class in your project you're going to need some sort of state management solution i use riverpod so you can import riverpod and then we can create our api provider at the very top of our main.dart file and we'll set it to a provider wrapped inside of our api class on any other providers that you would want you could use the ref object passed in with provider and read our api class that concludes this video and if you enjoyed this video please like it and subscribe as i will be posting more videos like this in the future

Channel: Dev Influence

Views: 27,138

Keywords:

Id: 0JIGVCje0yU

Length: 5min 35sec (335 seconds)

Published: Sun Dec 26 2021