#54 user accounts - use cookies, not localStorage (for SSR)

nuxt.config.js

@@ -53,7 +53,8 @@ export default {
         '@nuxtjs/axios',
         ['@nuxtjs/redirect-module', {
             rules: config.redirects,
-        }]
+        }],
+        'cookie-universal-nuxt',
     ],
     pwa: {
         manifest: {

package.json

@@ -15,6 +15,7 @@
     "@nuxtjs/redirect-module": "^0.3.1",
     "body-parser": "^1.19.0",
     "canvas": "^2.6.1",
+    "cookie-universal-nuxt": "^2.1.4",
     "dotenv": "^8.2.0",
     "jsonwebtoken": "^8.5.1",
     "mailer": "^0.6.7",

plugins/auth.js

@@ -1,10 +1,9 @@
-import { Session } from "../src/helpers";
+export default ({app, store}) => {
-
+    const token = app.$cookies.get('token');
-export default ({store}) => {
+    if (token) {
-    if (Session.isAvailable()) {
+        store.commit('setToken', token);
-        const token = Session.get('token');
+        if (!store.state.token) {
-        if (token) {
+            app.$cookies.removeAll();
-            store.commit('setToken', token);
         }
     }
 }

routes/user.vue

@@ -83,6 +83,7 @@
                 }
 
                 this.$store.commit('setToken', this.token);
+                this.$cookies.set('token', this.$store.state.token);
 
                 return jwt.verify(this.token, process.env.PUBLIC_KEY, {
                     algorithm: 'RS256',
@@ -124,6 +125,7 @@
             logout() {
                 this.token = null;
                 this.$store.commit('setToken', null);
+                this.$cookies.removeAll();
             }
         },
         head() {

src/helpers.js

@@ -72,27 +72,3 @@ export const makeId = (length, characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghi
 
     return result;
 }
-
-export class Session {
-    static isAvailable() {
-        return typeof localStorage !== 'undefined';
-    }
-
-    static set(key, value) {
-        localStorage.setItem(key, JSON.stringify(value));
-    }
-
-    static get(key) {
-        const value = localStorage.getItem(key);
-
-        return key === null ? null : JSON.parse(value);
-    }
-
-    static has(key) {
-        return localStorage.getItem(key) !== null;
-    }
-
-    static remove(key) {
-        localStorage.removeItem(key);
-    }
-}

store/index.js

@@ -1,5 +1,4 @@
 import jwt from 'jsonwebtoken';
-import { Session } from '../src/helpers';
 
 export const state = () => ({
     token: null,
@@ -11,25 +10,27 @@ export const mutations = {
         if (!token) {
             state.token = null;
             state.user = null;
-            Session.remove('token');
             return;
         }
 
-        const user = jwt.verify(token, process.env.PUBLIC_KEY, {
+        let user;
-            algorithm: 'RS256',
+        try {
-            audience: process.env.BASE_URL,
+            user = jwt.verify(token, process.env.PUBLIC_KEY, {
-            issuer: process.env.BASE_URL,
+                algorithm: 'RS256',
-        });
+                audience: process.env.BASE_URL,
+                issuer: process.env.BASE_URL,
+            });
+        } catch {
+            user = null;
+        }
 
         if (user && user.authenticated) {
             state.token = token;
             state.user = user;
-            Session.set('token', token);
             return;
         }
 
         state.token = null;
         state.user = null;
-        Session.remove('token');
     }
 }

yarn.lock

@@ -1198,6 +1198,11 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
@@ -2622,6 +2627,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.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.1.4.tgz#323f8645501f88cb2422127ad8ba2ee40187b716"
+  integrity sha512-xbn4Ozs9S0u2+0mQTZRwGlBL9MGNq8N4H6iGfprR5ufZFCS2hGef++3DBHSmHXZi30Wu3Q7RI/GkNMhz3cecmg==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie-universal "^2.1.4"
+
+cookie-universal@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.1.4.tgz#826a273da7eb9b08bfb0139bae12ea70770d564b"
+  integrity sha512-dwWXs7NGBzaBYDypu3jWH5M3NJW+zu5QdyJkFMHJvhLuyL4/eXG4105fwtTDwfIqyTunwVvQX4PHdtfPDS7URQ==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie "^0.4.0"
+
 cookie@0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
@@ -2632,6 +2653,11 @@ cookie@^0.3.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
   integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
 
+cookie@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"