Fix Axios infinite loop bug

Author: Toruitas

README.md

@@ -5,7 +5,7 @@ This GitHub repo accompanies my tutorial on the subject of how to use JWT Authen
 
 If you want to use React as a frontend with Django Rest Framework as a backend, you'll notice that getting the Authentication system set up presents one of the largest early hurdles. Follow this tutorial to build a really ugly website demonstrating the process from start to finish, including Custom Users, refreshing tokens, and protected views. It's the tutorial I wish I had when I first started.
 
-The full tutorial on Medium lives here:
+The full tutorial on Hackernoon lives here: https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-iejq34ta
 
 
 ## Tutorial content
@@ -25,6 +25,10 @@ Part 2 - React:
 
 6. [Logging out & blacklisting tokens](https://github.com/Toruitas/Complete-JWT-Authentication/tree/2_4_logging_out)
 
+Part 3 - Improvements to Axios Interceptor
+
+7. [Fixing Axios infinite loop]()
+
 Requirements: 
 * Django 2 or 3
 * Django Rest Framework

djsr/djsr/settings.py

@@ -140,7 +140,7 @@
 
 SIMPLE_JWT = {
     'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
-    'REFRESH_TOKEN_LIFETIME': timedelta(days=14),
+    'REFRESH_TOKEN_LIFETIME': timedelta(minutes=10),
     'ROTATE_REFRESH_TOKENS': True,
     'BLACKLIST_AFTER_ROTATION': True,
     'ALGORITHM': 'HS256',

djsr/frontend/src/axiosApi.js

@@ -17,28 +17,48 @@ axiosInstance.interceptors.response.use(
     error => {
       const originalRequest = error.config;
 
-      // test for token presence, no point in sending a request if token isn't present
-      if (localStorage.getItem('refresh_token') && error.response.status === 401 && error.response.statusText === "Unauthorized") {
-          const refresh_token = localStorage.getItem('refresh_token');
+      if (!originalRequest._retry){
+        originalRequest._retry = true;
+        // test for token presence, no point in sending a request if token isn't present
+        if (error.response.data.code === "token_not_valid" && error.response.status === 401 && error.response.statusText === "Unauthorized") {
+            const refresh_token = localStorage.getItem('refresh_token');
 
-          return axiosInstance
-              .post('/token/refresh/', {refresh: refresh_token})
-              .then((response) => {
+            if (refresh_token){
+                const tokenParts = JSON.parse(atob(refresh_token.split('.')[1]));
 
-                  localStorage.setItem('access_token', response.data.access);
-                  localStorage.setItem('refresh_token', response.data.refresh);
+                // exp date in token is expressed in seconds, while now() returns milliseconds:
+                const now = Math.ceil(Date.now() / 1000);
+                console.log(tokenParts.exp);
 
-                  axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
-                  originalRequest.headers['Authorization'] = "JWT " + response.data.access;
+                if (tokenParts.exp > now) {
+                    return axiosInstance
+                    .post('/token/refresh/', {refresh: refresh_token})
+                    .then((response) => {
+        
+                        localStorage.setItem('access_token', response.data.access);
+                        localStorage.setItem('refresh_token', response.data.refresh);
+        
+                        axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
+                        originalRequest.headers['Authorization'] = "JWT " + response.data.access;
 
-                  return axiosInstance(originalRequest);
-              })
-              .catch(err => {
-                  console.log(err)
-              });
+                        console.log("Tokens refreshed.")
+        
+                        return axiosInstance(originalRequest);
+                    })
+                    .catch(err => {
+                        console.log(err)
+                    });
+                }else{
+                    console.log("Refresh token is expired", tokenParts.exp, now);
+                }
+            }else{
+                console.log("Refresh token missing.")
+            }
+        }
       }
+     
       // specific error handling done elsewhere
-      return Promise.reject({...error});
+      return Promise.reject(error);
   }
 );
 

djsr/frontend/src/components/login.js

@@ -26,9 +26,9 @@ class Login extends Component {
                     localStorage.setItem('access_token', result.data.access);
                     localStorage.setItem('refresh_token', result.data.refresh);
                 }
-        ).catch (error => {
-            throw error;
-        })
+            ).catch (error => {
+                throw error;
+            })
     }
 
     async handleSubmit(event) {