How to Build Google Social Login in Django Rest Framework and Nuxt Auth and Refresh its JWT token Part 2

Refreshing JWT Token and recommended settings for production environment

You can find the first part of this tutorial here. In the first part of the tutorial, we have built a functioning frontend and backend app that allows users to authenticate via Google login.

Refreshing a JWT Token

We are not done yet! Even though our app can authenticate a new user correctly, our still Nuxt app cannot refresh its JWT token. When the token is expired, and the token refresh is failed, the user will be logged out unexpectedly. This would be a bad experience for your user.

Let’s simulate a token expiry by setting the token lifetime duration to 1 second in backend/backend/settings.py the file and navigate to the page. You’ll get a 401 Unauthorized error when making a request to the backend from your Nuxt app like below.

// backend/backend/settings.py
SIMPLE_JWT = {
-    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
+    'ACCESS_TOKEN_LIFETIME': timedelta(seconds=5),
     'REFRESH_TOKEN_LIFETIME': timedelta(days=30),
     'ROTATE_REFRESH_TOKENS': True, # IMPORTANT
     'BLACKLIST_AFTER_ROTATION': True, # IMPORTANT

Now edit protected.vue frontend page so that it makes a request to our backend API on every page load.