automatically refresh token to keep user authenticated

backend/src/baserow/api/v0/jwt.py

@@ -1,8 +0,0 @@
-from .serializers.user import UserSerializer
-
-
-def jwt_response_payload_handler(token, user=None, request=None):
-    return {
-        'token': token,
-        'data': UserSerializer(user, context={'request': request}).data
-    }

backend/src/baserow/config/settings/base.py

@@ -129,8 +129,7 @@ CORS_ORIGIN_WHITELIST = (
 )
 
 JWT_AUTH = {
-    'JWT_EXPIRATION_DELTA': datetime.timedelta(seconds=300),
+    'JWT_EXPIRATION_DELTA': datetime.timedelta(seconds=30),
     'JWT_ALLOW_REFRESH': True,
-    'JWT_REFRESH_EXPIRATION_DELTA': datetime.timedelta(days=7),
-    'JWT_RESPONSE_PAYLOAD_HANDLER': 'baserow.api.v0.jwt.jwt_response_payload_handler'
+    'JWT_REFRESH_EXPIRATION_DELTA': datetime.timedelta(days=7)
 }

web-frontend/config/nuxt.config.base.js

@@ -30,24 +30,14 @@ export default {
   /*
    ** Nuxt.js modules
    */
-  modules: [
-    // Doc: https://axios.nuxtjs.org/usage
-    '@nuxtjs/axios'
-  ],
+  modules: ['@nuxtjs/axios', 'cookie-universal-nuxt'],
 
-  /*
-   ** Axios module configuration
-   */
-  axios: {
-    // See https://github.com/nuxt-community/axios-module#options
+  router: {
+    middleware: 'authentication'
   },
 
   env: {
     // The API base url, this will be prepended to the urls of the remote calls.
-    baseUrl: 'http://localhost:8000',
-
-    // The JWT token expire time in seconds, when this time passes after a login
-    // or refresh, the token will be refreshed.
-    JWTTokenExpire: 300
+    baseUrl: 'http://localhost:8000'
   }
 }

web-frontend/middleware/authenticated.js

@@ -0,0 +1,13 @@
+/**
+ * If this middleware is added to a page, it will redirect back to the login
+ * page if the user is not authenticated.
+ */
+export default function({ req, store, redirect }) {
+  // If nuxt generate, pass this middleware
+  if (process.server && !req) return
+
+  // If the user is not authenticated we will redirect him to the login page.
+  if (!store.getters['auth/isAuthenticated']) {
+    redirect('/login')
+  }
+}

web-frontend/middleware/authentication.js

@@ -0,0 +1,16 @@
+import { getToken } from '@/utils/auth'
+
+export default function({ store, req, app }) {
+  // If nuxt generate, pass this middleware
+  if (process.server && !req) return
+
+  // Load the token
+  const token = getToken(app.$cookies)
+
+  // If there already is a token we will refresh it to check if it is valid and
+  // to get fresh user information. This will probably happen on the server
+  // side.
+  if (token && !store.getters['auth/isAuthenticated']) {
+    return store.dispatch('auth/refresh', token)
+  }
+}

web-frontend/package.json

@@ -15,8 +15,10 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.8.2",
-    "@nuxtjs/axios": "^5.3.6",
+    "@nuxtjs/axios": "^5.5.4",
+    "cookie-universal-nuxt": "^2.0.16",
     "cross-env": "^5.2.0",
+    "jwt-decode": "^2.2.0",
     "lodash.merge": "^4.6.1",
     "node-sass": "^4.12.0",
     "normalize-scss": "^7.0.1",

web-frontend/pages/index.vue

@@ -1,5 +1,16 @@
 <template>
   <div>
     <h1>Baserow</h1>
+    <p>authenticated: {{ isAuthenticated }}</p>
+    <nuxt-link :to="{ name: 'login' }">Login</nuxt-link>
   </div>
 </template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  middleware: 'authenticated',
+  computed: { ...mapGetters({ isAuthenticated: 'auth/isAuthenticated' }) }
+}
+</script>

web-frontend/pages/login/index.vue

@@ -12,7 +12,6 @@
         The provided e-mail address or password is incorrect.
       </p>
     </div>
-    authenticated: {{ loggedIn }}
     <form @submit.prevent="login">
       <div class="control">
         <label class="control-label">E-mail address</label>
@@ -53,6 +52,11 @@
               Sign up
             </nuxt-link>
           </li>
+          <li>
+            <nuxt-link :to="{ name: 'index' }">
+              Index
+            </nuxt-link>
+          </li>
         </ul>
         <button
           :class="{ 'button-loading': loading }"
@@ -67,7 +71,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import { required, email } from 'vuelidate/lib/validators'
 
 export default {
@@ -87,7 +90,6 @@ export default {
       }
     }
   },
-  computed: { ...mapGetters({ loggedIn: 'auth/loggedIn' }) },
   validations: {
     credentials: {
       email: { required, email },

web-frontend/plugins/auth.js

@@ -1,11 +1,24 @@
-export default function({ store }) {
-  if (!process.browser) {
-    return
-  }
+import { client } from '@/services/client'
 
-  const user = JSON.parse(localStorage.getItem('user'))
-  if (user) {
-    store.commit('auth/SET_USER_DATA', user)
-    store.dispatch('auth/refresh')
+export default function({ store }) {
+  // Create a request interceptor to add the authorization token to every
+  // request if the user is authenticated.
+  client.interceptors.request.use(config => {
+    if (store.getters['auth/isAuthenticated']) {
+      const token = store.getters['auth/token']
+      config.headers.Authorization = `JWT: ${token}`
+    }
+    return config
+  })
+
+  // If the user is authenticated, but is not refreshing in the browser means
+  // that the refresh was done on the server side, so we need to manually start
+  // the refreshing timeout here.
+  if (
+    store.getters['auth/isAuthenticated'] &&
+    !store.getters['auth/isRefreshing'] &&
+    process.browser
+  ) {
+    store.dispatch('auth/startRefreshTimeout')
   }
 }

web-frontend/store/auth.js

@@ -1,56 +1,98 @@
-import AuthService from '@/services/authService.js'
-import { client } from '@/services/client.js'
+import jwtDecode from 'jwt-decode'
+
+import AuthService from '@/services/auth'
+import { setToken, unsetToken } from '@/utils/auth'
 
 export const state = () => ({
+  refreshing: false,
+  token: null,
   user: null
 })
 
 export const mutations = {
-  SET_USER_DATA(state, data) {
-    state.user = data
-    localStorage.setItem('user', JSON.stringify(data))
-    client.defaults.headers.common.Authorization = `JWT ${data.token}`
+  SET_USER_DATA(state, token) {
+    state.token = token
+    state.user = jwtDecode(token)
   },
   CLEAR_USER_DATA(state) {
+    state.token = null
     state.user = null
-    localStorage.removeItem('user')
-    client.defaults.headers.common.pop('Authorization')
+  },
+  SET_REFRESHING(state, refreshing) {
+    state.refreshing = refreshing
   }
 }
 
 export const actions = {
+  /**
+   * Authenticate a user by his email and password. If successful commit the
+   * token to the state and start the refresh timeout to stay authenticated.
+   */
   login({ commit, dispatch }, { email, password }) {
     return AuthService.login(email, password).then(({ data }) => {
-      commit('SET_USER_DATA', data)
+      setToken(data.token, this.app.$cookies)
+      commit('SET_USER_DATA', data.token)
       dispatch('startRefreshTimeout')
     })
   },
-  refresh({ commit, state, dispatch }) {
-    return AuthService.refresh(state.user.token)
+  /**
+   * Refresh the existing token. If successful commit the new token and start a
+   * new refresh timeout. If unsuccessful the existing cookie and user data is
+   * cleared.
+   */
+  refresh({ commit, state, dispatch }, token) {
+    return AuthService.refresh(token)
       .then(({ data }) => {
-        commit('SET_USER_DATA', data)
+        setToken(data.token, this.app.$cookies)
+        commit('SET_USER_DATA', data.token)
         dispatch('startRefreshTimeout')
       })
       .catch(() => {
         // The token could not be refreshed, this means the token is no longer
         // valid and the user not logged in anymore.
+        unsetToken(this.app.$cookies)
         commit('CLEAR_USER_DATA')
+
+        // @TODO we might want to do something here, trigger some event, show
+        //       show the user a login popup or redirect to the login page.
       })
   },
   /**
    * Because the token expires within a configurable time, we need to keep
-   * refreshing the token before that happens.
+   * refreshing the token before that happens. This process may only happen in
+   * the browser because that is where we measure if the user still has the
+   * application open.
    */
-  startRefreshTimeout({ dispatch }) {
+  startRefreshTimeout({ getters, commit, dispatch }) {
+    if (!process.browser) return
+
     clearTimeout(this.refreshTimeout)
+    commit('SET_REFRESHING', true)
+
     this.refreshTimeout = setTimeout(() => {
-      dispatch('refresh')
-    }, (process.env.JWTTokenExpire - 2) * 1000)
+      dispatch('refresh', getters.token)
+      commit('SET_REFRESHING', false)
+    }, (getters.tokenExpireSeconds - 10) * 1000)
   }
 }
 
 export const getters = {
-  loggedIn(state) {
+  isAuthenticated(state) {
     return !!state.user
+  },
+  isRefreshing(state) {
+    return state.refresh
+  },
+  token(state) {
+    return state.token
+  },
+  /**
+   * Returns the amount of seconds it will take before the tokes expires.
+   * @TODO figure out what happens if the browser and server time and not very
+   *       much in sync.
+   */
+  tokenExpireSeconds(state) {
+    const now = Math.ceil(new Date().getTime() / 1000)
+    return state.user.exp - now
   }
 }

web-frontend/utils/auth.js

@@ -0,0 +1,15 @@
+const cookieTokenName = 'jwt_token'
+
+export const setToken = (token, cookie) => {
+  if (process.SERVER_BUILD) return
+  cookie.set(cookieTokenName, token)
+}
+
+export const unsetToken = cookie => {
+  if (process.SERVER_BUILD) return
+  cookie.remove(cookieTokenName)
+}
+
+export const getToken = cookie => {
+  return cookie.get(cookieTokenName)
+}

web-frontend/yarn.lock

@@ -1102,15 +1102,15 @@
     webpack-node-externals "^1.7.2"
     webpackbar "^3.2.0"
 
-"@nuxtjs/axios@^5.3.6":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.5.2.tgz#b6447bb12707b56b16b942ae6c737a0b051cecba"
-  integrity sha512-S5+IkUjCSSFeMVZp/JAzjoit9P7Di2QM4beAlFbHXbOEG+/vSaZReW8l817u9WC6nuKa3x6HhZfWD3tJDTvljg==
+"@nuxtjs/axios@^5.5.4":
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.5.4.tgz#c4aee2322901b19d4072670c03144662a73ea6f4"
+  integrity sha512-/Ljsyh5VIc9paXGrQue7RQ+PpBNES1oit0g4l+ya1tfyKnZMpHSbghuLcv0xq+BpXlSEr690uemHbz54/N6U5w==
   dependencies:
     "@nuxtjs/proxy" "^1.3.3"
-    axios "^0.18.0"
+    axios "^0.19.0"
     axios-retry "^3.1.2"
-    consola "^2.6.2"
+    consola "^2.7.1"
 
 "@nuxtjs/eslint-config@^0.0.1":
   version "0.0.1"
@@ -1167,6 +1167,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/cookie@^0.3.1":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -1869,13 +1874,13 @@ axios-retry@^3.1.2:
   dependencies:
     is-retry-allowed "^1.1.0"
 
-axios@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
-  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
+axios@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+  integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
   dependencies:
-    follow-redirects "^1.3.0"
-    is-buffer "^1.1.5"
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
 
 babel-code-frame@^6.26.0:
   version "6.26.0"
@@ -2845,11 +2850,16 @@ connect@^3.6.6:
     parseurl "~1.3.3"
     utils-merge "1.0.1"
 
-consola@^2.3.0, consola@^2.5.6, consola@^2.6.0, consola@^2.6.1, consola@^2.6.2:
+consola@^2.3.0, consola@^2.5.6, consola@^2.6.0, consola@^2.6.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/consola/-/consola-2.7.1.tgz#3f7f7c53eb44362240c3aee41b9bb2641d5ca32e"
   integrity sha512-u7JYs+HnMbZPD2cEuS1XHsLeqtazA0kd5lAk8r8DnnGdgNhOdb7DSubJ+QLdQkbtpmmxgp7gs8Ug44sCyY4FCQ==
 
+consola@^2.7.1:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-2.9.0.tgz#57760e3a65a53ec27337f4add31505802d902278"
+  integrity sha512-34Iue+LRcWbndFIfZc5boNizWlsrRjqIBJZTe591vImgbnq7nx2EzlrLtANj9TH2Fxm7puFJBJAOk5BhvZOddQ==
+
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -2903,6 +2913,22 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
+cookie-universal-nuxt@^2.0.16:
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.0.16.tgz#8d528098c973162b352199240e40da0e5429b13f"
+  integrity sha512-wRK2zw8w+a5xPehb5kLbgOic/4mbjl2exUCxWZwGuttcwsFgOymiwDrCOzmQslqrDevPDL2SsBbH6wtOm7dB9g==
+  dependencies:
+    "@types/cookie" "^0.3.1"
+    cookie-universal "^2.0.16"
+
+cookie-universal@^2.0.16:
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.0.16.tgz#ec8b55789b502a377ef02ad230923c1dfa5c1061"
+  integrity sha512-EHtQ5Tg3UoUHG7LmeV3rlV3iYthkhUuYZ0y86EseypxGcUuvzxuHExEb6mHKDhDPrIrdewAHdG/aCHuG/T4zEg==
+  dependencies:
+    "@types/cookie" "^0.3.1"
+    cookie "^0.3.1"
+
 cookie@0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
@@ -3340,6 +3366,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.1.0, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -4378,7 +4411,14 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0, follow-redirects@^1.3.0:
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
+follow-redirects@^1.0.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
   integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
@@ -5260,7 +5300,7 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-buffer@^2.0.0:
+is-buffer@^2.0.0, is-buffer@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
   integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
@@ -6114,6 +6154,11 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jwt-decode@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-2.2.0.tgz#7d86bd56679f58ce6a84704a657dd392bba81a79"
+  integrity sha1-fYa9VmefWM5qhHBKZX3TkruoGnk=
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"