Add an initAuth Nuxt helper

Author: marshallswain

README.md

@@ -445,6 +445,80 @@ The following actions are included in the `auth` module:
 - `authenticate`: Same as `feathersClient.authenticate()`
 - `logout`: Same as `feathersClient.logout()`
 
+## Working with Auth & Nuxt
+
+`[email protected]` ships with utilities that help with Nuxt auth related to JSON Web Tokens (JWT).  The most important utility is the `initAuth` utility.  It's for use during Nuxt's `nuxtServerInit` method, and sets up auth data automatically.  Here's an example store that uses it:
+
+```js
+import Vuex from 'vuex'
+import feathersClient from './feathers-client'
+import feathersVuex, { initAuth } from 'feathers-vuex'
+
+const { service, auth } = feathersVuex(feathersClient)
+
+const createStore = () => {
+  return new Vuex.Store({
+    state: {},
+    mutations: {
+      increment (state) {
+        state.counter++
+      }
+    },
+    actions: {
+      nuxtServerInit ({ commit, dispatch }, { req }) {
+        return initAuth({
+          commit,
+          dispatch,
+          req,
+          moduleName: 'auth',
+          cookieName: 'feathers-jwt'
+        })
+      }
+    },
+    plugins: [
+      service('courses'),
+      auth({
+        state: {
+          publicPages: [
+            'login',
+            'signup'
+          ]
+        }
+      })
+    ]
+  })
+}
+
+export default createStore
+```
+
+Notice in the above example, I've added a `publicPages` property to the auth state.  Let's now use this state to redirect the browser when it's not on a public page and there's no auth:
+
+In your Nuxt project, create the file `/middleware/auth.js`.  Then edit the `nuxt.config.js` and add after the `head` property, add a string that references this routing middleware so it looks like this:
+
+*// nuxt.config.js*
+```js
+router: {
+  middleware: ['auth']
+},
+```
+
+Now open the middleware and paste the following content.  All it does is redirect the page if there's no auth data in the store.
+
+```js
+// If it's a private page and there's no payload, redirect.
+export default function (context) {
+  const { store, redirect, route } = context
+  const { auth } = store.state
+
+  if (!auth.publicPages.includes(route.name) && !auth.payload) {
+    return redirect('login')
+  }
+}
+```
+
+For a summary, the `initAuth` function will make auth available in the state without much configuration.
+
 ### Configuration
 You can provide a `userService` in the auth plugin's options to automatically populate the user upon successful login.
 

package.json

@@ -71,6 +71,7 @@
     "feathers-commons": "^0.8.7",
     "feathers-errors": "^2.6.3",
     "feathers-query-filters": "^2.1.2",
+    "jwt-decode": "^2.2.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isobject": "^3.0.2",
     "lodash.merge": "^4.6.0",

src/utils.js

@@ -1,4 +1,5 @@
 import _trim from 'lodash.trim'
+import decode from 'jwt-decode'
 
 export function stripSlashes (location) {
   return Array.isArray(location) ? location.map(l => _trim(l, '/')) : _trim(location, '/')
@@ -26,3 +27,67 @@ export function getNameFromPath (service) {
 export const isNode = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]'
 
 export const isBrowser = !isNode
+
+const authDefaults = {
+  commit: undefined,
+  req: undefined,
+  moduleName: 'auth',
+  cookieName: 'feathers-jwt'
+}
+
+export const initAuth = function initAuth (options) {
+  const { commit, req, moduleName, cookieName } = Object.assign({}, authDefaults, options)
+
+  if (typeof commit !== 'function') {
+    throw new Error('You must pass the `commit` function in the `initAuth` function options.')
+  }
+  if (!req) {
+    throw new Error('You must pass the `req` object in the `initAuth` function options.')
+  }
+
+  const accessToken = readCookie(req.headers.cookie, cookieName)
+  const payload = getValidPayloadFromToken(accessToken)
+
+  if (payload) {
+    commit(`${moduleName}/setAccessToken`, accessToken)
+    commit(`${moduleName}/setPayload`, payload)
+  }
+  return Promise.resolve(payload)
+}
+
+export function getValidPayloadFromToken (token) {
+  if (token) {
+    try {
+      var payload = decode(token)
+      return payloadIsValid(payload) ? payload : undefined
+    } catch (error) {
+      return undefined
+    }
+  }
+  return undefined
+}
+
+// Pass a decoded payload and it will return a boolean based on if it hasn't expired.
+export function payloadIsValid (payload) {
+  return payload && payload.exp * 1000 > new Date().getTime()
+}
+
+// Reads and returns the contents of a cookie with the provided name.
+export function readCookie (cookies, name) {
+  if (!cookies) {
+    console.log('no cookies found')
+    return undefined
+  }
+  var nameEQ = name + '='
+  var ca = cookies.split(';')
+  for (var i = 0; i < ca.length; i++) {
+    var c = ca[i]
+    while (c.charAt(0) === ' ') {
+      c = c.substring(1, c.length)
+    }
+    if (c.indexOf(nameEQ) === 0) {
+      return c.substring(nameEQ.length, c.length)
+    }
+  }
+  return null
+}

test/index.test.js

@@ -5,6 +5,7 @@ import './service-module/getters.test.js'
 import './service-module/mutations.test.js'
 import './auth-module/auth-module.test.js'
 import './auth-module/actions.test.js'
+import './utils.test.js'
 
 import assert from 'chai/chai'
 import 'steal-mocha'

test/utils.test.js

@@ -0,0 +1,38 @@
+import assert from 'chai/chai'
+import { initAuth } from '../src/utils'
+import feathersNuxt from '../src/index'
+import { feathersSocketioClient as feathersClient } from './fixtures/feathers-client'
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const { service, auth } = feathersNuxt(feathersClient)
+
+describe('Utils', function () {
+  it('properly populates auth', function (done) {
+    const store = new Vuex.Store({
+      plugins: [
+        service('todos'),
+        auth()
+      ]
+    })
+    const accessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiZXhwIjoiOTk5OTk5OTk5OTkiLCJuYW1lIjoiSm9obiBEb2UiLCJhZG1pbiI6dHJ1ZX0.lUlEd3xH-TnlNRbKM3jnDVTNoIg10zgzaS6QyFZE-6g'
+    const req = {
+      headers: {
+        cookie: 'feathers-jwt=' + accessToken
+      }
+    }
+    initAuth({
+      commit: store.commit,
+      req,
+      moduleName: 'auth',
+      cookieName: 'feathers-jwt'
+    })
+    .then(payload => {
+      assert(store.state.auth.accessToken === accessToken, 'the token was in place')
+      assert(store.state.auth.payload, 'the payload was set')
+      done()
+    })
+  })
+})