Merge pull request #9 from Toruitas/3_bugfixes

3 bugfixes

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](https://github.com/Toruitas/Complete-JWT-Authentication/tree/3_bugfixes)
+
 Requirements: 
 * Django 2 or 3
 * Django Rest Framework

djsr/djsr/settings.py

@@ -139,8 +139,8 @@
 }
 
 SIMPLE_JWT = {
-    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
-    'REFRESH_TOKEN_LIFETIME': timedelta(days=14),
+    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=1),
+    'REFRESH_TOKEN_LIFETIME': timedelta(minutes=2),
     'ROTATE_REFRESH_TOKENS': True,
     'BLACKLIST_AFTER_ROTATION': True,
     'ALGORITHM': 'HS256',

djsr/frontend/src/axiosApi.js

@@ -2,8 +2,10 @@
 
 import axios from 'axios'
 
+const baseURL = 'http://127.0.0.1:8000/api/'
+
 const axiosInstance = axios.create({
-    baseURL: 'http://127.0.0.1:8000/api/',
+    baseURL: baseURL,
     timeout: 5000,
     headers: {
         'Authorization': localStorage.getItem('access_token') ? "JWT " + localStorage.getItem('access_token') : null,
@@ -12,33 +14,60 @@ const axiosInstance = axios.create({
     }
 });
 
+
 axiosInstance.interceptors.response.use(
     response => response,
     error => {
-      const originalRequest = error.config;
+        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');
+        // Prevent infinite loops early
+        if (error.response.status === 401 && originalRequest.url === baseURL+'token/refresh/') {
+            window.location.href = '/login/';
+            return Promise.reject(error);
+        }
 
-          return axiosInstance
-              .post('/token/refresh/', {refresh: refresh_token})
-              .then((response) => {
+        if (error.response.data.code === "token_not_valid" &&
+            error.response.status === 401 && 
+            error.response.statusText === "Unauthorized") 
+            {
+                const refreshToken = localStorage.getItem('refresh_token');
 
-                  localStorage.setItem('access_token', response.data.access);
-                  localStorage.setItem('refresh_token', response.data.refresh);
+                if (refreshToken){
+                    const tokenParts = JSON.parse(atob(refreshToken.split('.')[1]));
 
-                  axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
-                  originalRequest.headers['Authorization'] = "JWT " + response.data.access;
+                    // exp date in token is expressed in seconds, while now() returns milliseconds:
+                    const now = Math.ceil(Date.now() / 1000);
+                    console.log(tokenParts.exp);
 
-                  return axiosInstance(originalRequest);
-              })
-              .catch(err => {
-                  console.log(err)
-              });
-      }
+                    if (tokenParts.exp > now) {
+                        return axiosInstance
+                        .post('/token/refresh/', {refresh: refreshToken})
+                        .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)
+                        });
+                    }else{
+                        console.log("Refresh token is expired", tokenParts.exp, now);
+                        window.location.href = '/login/';
+                    }
+                }else{
+                    console.log("Refresh token not available.")
+                    window.location.href = '/login/';
+                }
+        }
+      
+     
       // 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) {