added logging and refreshing with jwt token

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

@@ -1,4 +1,5 @@
 import os
+import datetime
 
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 
@@ -21,10 +22,12 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
 
-    'rest_framework'
+    'rest_framework',
+    'corsheaders'
 ]
 
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -118,3 +121,13 @@ REST_FRAMEWORK = {
         'rest_framework.authentication.BasicAuthentication',
     ),
 }
+
+CORS_ORIGIN_WHITELIST = (
+    'http://localhost:3000',
+)
+
+JWT_AUTH = {
+    'JWT_EXPIRATION_DELTA': datetime.timedelta(seconds=300),
+    'JWT_ALLOW_REFRESH': True,
+    'JWT_REFRESH_EXPIRATION_DELTA': datetime.timedelta(days=7),
+}

backend/src/baserow/config/urls.py

@@ -2,7 +2,7 @@ from django.urls import path, include
 from django.conf.urls import url
 
 from rest_framework import routers
-from rest_framework_jwt.views import obtain_jwt_token
+from rest_framework_jwt.views import obtain_jwt_token, refresh_jwt_token
 
 
 router = routers.DefaultRouter()
@@ -10,5 +10,6 @@ router = routers.DefaultRouter()
 
 urlpatterns = [
     url(r'^api/token-auth/', obtain_jwt_token),
+    url(r'^api/token-refresh/', refresh_jwt_token),
     path('api/', include(router.urls)),
 ]

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

@@ -25,7 +25,7 @@ export default {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [{ src: '@/plugins/Vuelidate.js' }],
+  plugins: [{ src: '@/plugins/auth.js' }, { src: '@/plugins/vuelidate.js' }],
 
   /*
    ** Nuxt.js modules
@@ -40,5 +40,14 @@ export default {
    */
   axios: {
     // See https://github.com/nuxt-community/axios-module#options
+  },
+
+  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
   }
 }

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

@@ -6,7 +6,6 @@ import base from './nuxt.config.base.js'
 const config = {
   build: {
     extend(config, ctx) {
-      // Run ESLint ad Stylelint on save
       if (ctx.isDev && ctx.isClient) {
         config.module.rules.push({
           enforce: 'pre',

web-frontend/pages/login/index.vue

@@ -3,14 +3,25 @@
     <h1 class="box-title">
       <img src="@/static/img/logo.svg" alt="" />
     </h1>
+    <div v-if="invalid" class="alert alert-error alert-has-icon">
+      <div class="alert-icon">
+        <i class="fas fa-exclamation"></i>
+      </div>
+      <div class="alert-title">Incorrect credentials</div>
+      <p class="alert-content">
+        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>
         <div class="control-elements">
           <input
+            ref="email"
             v-model="credentials.email"
             :class="{ 'input-error': $v.credentials.email.$error }"
-            type="text"
+            type="email"
             class="input input-large"
             @blur="$v.credentials.email.$touch()"
           />
@@ -23,6 +34,7 @@
         <label class="control-label">Password</label>
         <div class="control-elements">
           <input
+            ref="password"
             v-model="credentials.password"
             :class="{ 'input-error': $v.credentials.password.$error }"
             type="password"
@@ -55,6 +67,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { required, email } from 'vuelidate/lib/validators'
 
 export default {
@@ -67,12 +80,14 @@ export default {
   data() {
     return {
       loading: false,
+      invalid: false,
       credentials: {
         email: '',
         password: ''
       }
     }
   },
+  computed: { ...mapGetters({ loggedIn: 'auth/loggedIn' }) },
   validations: {
     credentials: {
       email: { required, email },
@@ -84,6 +99,23 @@ export default {
       this.$v.$touch()
       if (!this.$v.$invalid) {
         this.loading = true
+        this.$store
+          .dispatch('auth/login', {
+            email: this.credentials.email,
+            password: this.credentials.password
+          })
+          .then(() => {
+            console.log('@TODO navigate to main page')
+          })
+          .catch(() => {
+            this.invalid = true
+            this.credentials.password = ''
+            this.$v.$reset()
+            this.$refs.password.focus()
+          })
+          .then(() => {
+            this.loading = false
+          })
       }
     }
   }

web-frontend/plugins/auth.js

@@ -0,0 +1,11 @@
+export default function({ store }) {
+  if (!process.browser) {
+    return
+  }
+
+  const user = JSON.parse(localStorage.getItem('user'))
+  if (user) {
+    store.commit('auth/SET_USER_DATA', user)
+    store.dispatch('auth/refresh')
+  }
+}

web-frontend/services/authService.js

@@ -0,0 +1,15 @@
+import { client } from './client'
+
+export default {
+  login(username, password) {
+    return client.post('/api/token-auth/', {
+      username: username,
+      password: password
+    })
+  },
+  refresh(token) {
+    return client.post('/api/token-refresh/', {
+      token: token
+    })
+  }
+}

web-frontend/services/client.js

@@ -0,0 +1,10 @@
+import axios from 'axios'
+
+export const client = axios.create({
+  baseURL: process.env.baseUrl,
+  withCredentials: false,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})

web-frontend/store/auth.js

@@ -0,0 +1,56 @@
+import AuthService from '@/services/authService.js'
+import { client } from '@/services/client.js'
+
+export const state = () => ({
+  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}`
+  },
+  CLEAR_USER_DATA(state) {
+    state.user = null
+    localStorage.removeItem('user')
+    client.defaults.headers.common.pop('Authorization')
+  }
+}
+
+export const actions = {
+  login({ commit, dispatch }, { email, password }) {
+    return AuthService.login(email, password).then(({ data }) => {
+      commit('SET_USER_DATA', data)
+      dispatch('startRefreshTimeout')
+    })
+  },
+  refresh({ commit, state, dispatch }) {
+    return AuthService.refresh(state.user.token)
+      .then(({ data }) => {
+        commit('SET_USER_DATA', data)
+        dispatch('startRefreshTimeout')
+      })
+      .catch(() => {
+        // The token could not be refreshed, this means the token is no longer
+        // valid and the user not logged in anymore.
+        commit('CLEAR_USER_DATA')
+      })
+  },
+  /**
+   * Because the token expires within a configurable time, we need to keep
+   * refreshing the token before that happens.
+   */
+  startRefreshTimeout({ dispatch }) {
+    clearTimeout(this.refreshTimeout)
+    this.refreshTimeout = setTimeout(() => {
+      dispatch('refresh')
+    }, (process.env.JWTTokenExpire - 2) * 1000)
+  }
+}
+
+export const getters = {
+  loggedIn(state) {
+    return !!state.user
+  }
+}