From 8c57faa71e7aa072a5823613d913b741df1bfcdf Mon Sep 17 00:00:00 2001
From: Alan <alan@salsadigital.com.au>
Date: Thu, 4 Jul 2019 10:48:09 +1000
Subject: [PATCH] [SDPA-2689] Store authentication token more securely. (#406)

* [SDPA-2689] Authenticated token fixes
* Token to be store in cookies
* Token removed from Vuex Store (as this will output to HTML)
* Authenticated state (true / false) to be stored in Vuex.

* [SDPA-2689] Split preview and authenticate functions into separate libs.

* [SDPA-2689] Move vuex store management into authenticate lib.

* [SDPA-2689] Extract and set cookie name to authenticatedContent.

* [SDPA-2689] Add authenticatedContent module enabled checks.

* [SDPA-2689] Add authenticated preview tests.

* [SDPA-2689] Fixed test. Added preview role to created used.

* [SDPA-2689] Lint fixes.

* [SDPA-2689] isModuleEnabled to return false if no config available.
---
 .../ripple-nuxt-tide/lib/core/middleware.js   | 25 ++---
 packages/ripple-nuxt-tide/lib/core/tide.js    | 52 +++++-----
 .../ripple-nuxt-tide/lib/layouts/default.vue  | 43 ++++++---
 .../ripple-nuxt-tide/lib/templates/plugin.js  |  6 +-
 .../components/TideLogin.vue                  |  5 +-
 .../authenticated-content/lib/authenticate.js | 96 +++++++++++++++++++
 .../authenticated-content/lib/preview.js      | 13 ---
 .../authenticated-content/localstorage.js     | 21 ----
 .../modules/authenticated-content/module.js   |  2 -
 .../authenticated-content/pages/Login.vue     |  3 +-
 .../modules/authenticated-content/plugin.js   | 13 +--
 packages/ripple-nuxt-tide/package.json        |  1 +
 .../test/unit/authenticated-content.test.js   |  3 +-
 packages/ripple-test-tools/page-models.js     |  3 +-
 packages/ripple-test-tools/tide-admin.js      | 33 ++++---
 .../e2e/fixtures/Pages/LandingPage/draft.json | 21 ++++
 .../Preview-content/PreviewContent.feature    | 34 +++++++
 .../PreviewContent/step_definition.js         | 63 ++++++++++++
 test/e2e/integration/common/index.js          |  3 +-
 19 files changed, 328 insertions(+), 112 deletions(-)
 create mode 100644 packages/ripple-nuxt-tide/modules/authenticated-content/lib/authenticate.js
 delete mode 100644 packages/ripple-nuxt-tide/modules/authenticated-content/localstorage.js
 create mode 100644 test/e2e/fixtures/Pages/LandingPage/draft.json
 create mode 100644 test/e2e/integration/Preview-content/PreviewContent.feature
 create mode 100644 test/e2e/integration/Preview-content/PreviewContent/step_definition.js

diff --git a/packages/ripple-nuxt-tide/lib/core/middleware.js b/packages/ripple-nuxt-tide/lib/core/middleware.js
index 6b2a874bd..18fca8765 100644
--- a/packages/ripple-nuxt-tide/lib/core/middleware.js
+++ b/packages/ripple-nuxt-tide/lib/core/middleware.js
@@ -1,5 +1,6 @@
 import { metatagConverter, pathToClass } from './tide-helper'
-import { isPreviewPath, isTokenExpired } from '../../modules/authenticated-content/lib/preview'
+import { isTokenExpired, getToken, clearToken } from '../../modules/authenticated-content/lib/authenticate'
+import { isPreviewPath } from '../../modules/authenticated-content/lib/preview'
 
 // Fetch page data from Tide API by current path
 export default async function (context, results) {
@@ -13,27 +14,29 @@ export default async function (context, results) {
   const mapping = context.app.$tideMapping
   let tideParams = {}
 
-  // Pass the protected content JWT from store so it can be added as a header
-  const { token: authToken } = context.store.state.tideAuthenticatedContent
-  if (authToken) {
-    // If token expired clear the persisted state
-    if (isTokenExpired(authToken)) {
-      context.store.dispatch('tideAuthenticatedContent/clearToken')
-    } else {
-      tideParams.auth_token = authToken
+  const authContentEnabled = context.app.$tide.isModuleEnabled('authenticatedContent')
+  let authToken = null
+  if (authContentEnabled) {
+    // Pass the protected content JWT from store so it can be added as a header
+    authToken = getToken()
+    if (authToken) {
+      // If token expired clear the persisted state
+      if (isTokenExpired(authToken)) {
+        clearToken(context.store)
+      }
     }
   }
 
   try {
     let response = null
 
-    if (isPreviewPath(context.route.path)) {
+    if (authContentEnabled && isPreviewPath(context.route.path)) {
       if (!authToken) {
         return context.redirect('/login?destination=' + context.req.url)
       }
       const { 2: type, 3: id, 4: rev } = context.route.path.split('/')
       const section = context.route.query.section ? context.route.query.section : null
-      response = await context.app.$tide.getPreviewPage(type, id, rev, section, tideParams)
+      response = await context.app.$tide.getPreviewPage(type, id, rev, section, tideParams, authToken)
     } else {
       response = await context.app.$tide.getPageByPath(context.route.fullPath, tideParams)
     }
diff --git a/packages/ripple-nuxt-tide/lib/core/tide.js b/packages/ripple-nuxt-tide/lib/core/tide.js
index e30aea938..7c6947b32 100644
--- a/packages/ripple-nuxt-tide/lib/core/tide.js
+++ b/packages/ripple-nuxt-tide/lib/core/tide.js
@@ -6,12 +6,19 @@ import _ from 'lodash'
 import * as helper from './tide-helper'
 import * as pageTypes from './page-types'
 import * as middleware from './middleware-helper'
-import { isTokenExpired } from '../../modules/authenticated-content/lib/preview'
+import { isTokenExpired } from '../../modules/authenticated-content/lib/authenticate'
 
 const apiPrefix = '/api/v1/'
 
 export const tide = (axios, site, config) => ({
-  get: async function (resource, params = {}, id = '') {
+  /**
+   * GET request to tide for resources.
+   * @param {String} resource Resource type e.g. <entity type>/<bundle>
+   * @param {Object} params Object to convert to QueryString. Passed in URL.
+   * @param {String} id Resource UUID
+   * @param {String} authToken Authentication token
+   */
+  get: async function (resource, params = {}, id = '', authToken) {
     const siteParam = 'site=' + site
     const url = `${apiPrefix}${resource}${id ? `/${id}` : ''}?${siteParam}${Object.keys(params).length ? `&${qs.stringify(params, { indices: false })}` : ''}`
     let headers = {}
@@ -20,25 +27,17 @@ export const tide = (axios, site, config) => ({
       console.info(`Tide request url: ${url}`)
     }
 
-    // Set Session cookie if is available in parameters
-    if (typeof params.session_name !== 'undefined' && typeof params.session_value !== 'undefined') {
-      _.merge(headers, { Cookie: params.session_name + '=' + params.session_value })
-    }
-
-    // Set 'X-CSRF-Token if token parameters is defined
-    if (typeof params.token !== 'undefined') {
-      _.merge(headers, { 'X-CSRF-Token': params.token })
-    }
-
-    // Set 'X-Authorization' header if auth_token present
-    if (params.auth_token) {
-      if (!isTokenExpired(params.auth_token)) {
-        _.merge(headers, { 'X-Authorization': `Bearer ${params.auth_token}` })
-      } else {
+    if (this.isModuleEnabled('authenticatedContent')) {
+      // Set 'X-Authorization' header if authToken present
+      if (authToken) {
+        if (!isTokenExpired(authToken)) {
+          _.merge(headers, { 'X-Authorization': `Bearer ${authToken}` })
+        } else {
+          delete config.headers['X-Authorization']
+        }
+      } else if (config.headers && config.headers['X-Authorization']) {
         delete config.headers['X-Authorization']
       }
-    } else if (config.headers && config.headers['X-Authorization']) {
-      delete config.headers['X-Authorization']
     }
 
     // If headers is not empty add to config request
@@ -91,8 +90,13 @@ export const tide = (axios, site, config) => ({
     return sitesDomainMap
   },
 
+  /**
+   * Check if a module is enabled.
+   * @param {String} checkForModule name of module
+   * @returns {Boolean}
+   */
   isModuleEnabled: function (checkForModule) {
-    return config.modules[checkForModule] === 1
+    return config && config.modules && config.modules[checkForModule] === 1
   },
 
   getSiteData: async function (tid = null) {
@@ -233,7 +237,7 @@ export const tide = (axios, site, config) => ({
     return pageTypes.getTemplate(type)
   },
 
-  getEntityByPathData: async function (pathData, query) {
+  getEntityByPathData: async function (pathData, query, authToken) {
     const endpoint = `${pathData.entity_type}/${pathData.bundle}/${pathData.uuid}`
 
     let include
@@ -289,7 +293,7 @@ export const tide = (axios, site, config) => ({
     if (!_.isEmpty(query)) {
       params = _.merge(query, params)
     }
-    const entity = await this.get(endpoint, params)
+    const entity = await this.get(endpoint, params, '', authToken)
     return entity
   },
 
@@ -312,7 +316,7 @@ export const tide = (axios, site, config) => ({
     return pageData
   },
 
-  getPreviewPage: async function (contentType, uuid, revisionId, section, params) {
+  getPreviewPage: async function (contentType, uuid, revisionId, section, params, authToken) {
     if (revisionId === 'latest') {
       params.resourceVersion = 'rel:working-copy'
     } else {
@@ -324,7 +328,7 @@ export const tide = (axios, site, config) => ({
       bundle: contentType,
       uuid: uuid
     }
-    const entity = await this.getEntityByPathData(pathData, params)
+    const entity = await this.getEntityByPathData(pathData, params, authToken)
     const pageData = jsonapiParse.parse(entity).data
 
     // Append the site section to page data
diff --git a/packages/ripple-nuxt-tide/lib/layouts/default.vue b/packages/ripple-nuxt-tide/lib/layouts/default.vue
index 3b603a93c..069d67f87 100644
--- a/packages/ripple-nuxt-tide/lib/layouts/default.vue
+++ b/packages/ripple-nuxt-tide/lib/layouts/default.vue
@@ -49,7 +49,8 @@ import { RplBaseLayout } from '@dpc-sdp/ripple-layout'
 import RplSiteFooter from '@dpc-sdp/ripple-site-footer'
 import RplSiteHeader from '@dpc-sdp/ripple-site-header'
 import markupPlugins from '@dpc-sdp/ripple-nuxt-tide/lib/core/markup-plugins'
-import { isPreviewPath, isTokenExpired } from '@dpc-sdp/ripple-nuxt-tide/modules/authenticated-content/lib/preview'
+import { isTokenExpired, getToken, clearToken, isAuthenticated } from '@dpc-sdp/ripple-nuxt-tide/modules/authenticated-content/lib/authenticate'
+import { isPreviewPath } from '@dpc-sdp/ripple-nuxt-tide/modules/authenticated-content/lib/preview'
 
 export default {
   components: {
@@ -84,21 +85,33 @@ export default {
       return false
     },
     showLogout () {
-      return Boolean(this.$store.state.tideAuthenticatedContent.token)
+      if (this.$tide.isModuleEnabled('authenticatedContent')) {
+        return isAuthenticated(this.$store)
+      }
+      return false
     },
     preview () {
-      const token = this.$store.state.tideAuthenticatedContent.token
-      return isPreviewPath(this.$route.path) && token && !isTokenExpired(token)
+      if (this.$tide.isModuleEnabled('authenticatedContent')) {
+        if (isAuthenticated(this.$store)) {
+          const token = getToken()
+          return isPreviewPath(this.$route.path) && token && !isTokenExpired(token)
+        }
+      }
+      return false
     }
   },
   methods: {
     async logoutFunc () {
-      try {
-        await this.$tide.post(`user/logout?_format=json`)
-        this.$store.dispatch('tideAuthenticatedContent/clearToken')
-        this.$router.push({ path: '/' })
-      } catch (e) {
-        console.log(`Tide logout failed`)
+      if (this.$tide.isModuleEnabled('authenticatedContent')) {
+        try {
+          await this.$tide.post(`user/logout?_format=json`)
+          clearToken(this.$store)
+          this.$router.push({ path: '/' })
+        } catch (e) {
+          console.log(`Tide logout failed`)
+        }
+      } else {
+        console.warn(`Authentication module is disabled - unable to log out`)
       }
     },
     searchFunc (searchInput) {
@@ -134,10 +147,12 @@ export default {
     this.rplOptions.rplMarkup = {
       plugins: markupPlugins
     }
-    // If logged in and session has expired, logout the user
-    if (this.showLogout) {
-      if (isTokenExpired(this.$store.state.tideAuthenticatedContent.token)) {
-        this.logoutFunc()
+    if (this.$tide.isModuleEnabled('authenticatedContent')) {
+      // If logged in and session has expired, logout the user
+      if (this.showLogout) {
+        if (isTokenExpired(getToken())) {
+          this.logoutFunc()
+        }
       }
     }
   }
diff --git a/packages/ripple-nuxt-tide/lib/templates/plugin.js b/packages/ripple-nuxt-tide/lib/templates/plugin.js
index ad37ac894..d5916f59e 100644
--- a/packages/ripple-nuxt-tide/lib/templates/plugin.js
+++ b/packages/ripple-nuxt-tide/lib/templates/plugin.js
@@ -1,6 +1,6 @@
 import { tide, Mapping } from '@dpc-sdp/ripple-nuxt-tide/lib/core'
 import { search } from '@dpc-sdp/ripple-nuxt-tide/modules/search/index.js'
-import Cookies from "js-cookie";
+import { serverSetToken } from '@dpc-sdp/ripple-nuxt-tide/modules/authenticated-content/lib/authenticate'
 
 export default ({ env, app, req, res, store , route}, inject) => {
   // We need to serialize functions, so use `serialize` instead of `JSON.stringify`.
@@ -101,6 +101,10 @@ export default ({ env, app, req, res, store , route}, inject) => {
             if (config.modules.alert === 1) {
               await store.dispatch('tideAlerts/init')
             }
+            // Load authenticated content store.
+            if (config.modules.authenticatedContent === 1) {
+              serverSetToken(req.headers.cookie, store)
+            }
           }
         },
         setCurrentUrl ({ commit }, fullPath) {
diff --git a/packages/ripple-nuxt-tide/modules/authenticated-content/components/TideLogin.vue b/packages/ripple-nuxt-tide/modules/authenticated-content/components/TideLogin.vue
index ed3e7c792..5ba3d5e24 100644
--- a/packages/ripple-nuxt-tide/modules/authenticated-content/components/TideLogin.vue
+++ b/packages/ripple-nuxt-tide/modules/authenticated-content/components/TideLogin.vue
@@ -27,6 +27,7 @@
 <script>
 import RplButton from '@dpc-sdp/ripple-button'
 import RplForm from '@dpc-sdp/ripple-form'
+import { clientSetToken, isAuthenticated } from '../lib/authenticate'
 
 const FIELDS = {
   password: {
@@ -80,7 +81,7 @@ export default {
   },
   data () {
     return {
-      isAuthed: Boolean(this.$store.state.tideAuthenticatedContent.token),
+      isAuthed: isAuthenticated(this.$store),
       selectedForm: 'login',
       forms: {
         login: {
@@ -178,7 +179,7 @@ export default {
       try {
         const response = await this.$tide.post(endpoint, data)
         if (response.auth_token) {
-          this.$store.dispatch('tideAuthenticatedContent/setToken', response.auth_token)
+          clientSetToken(response.auth_token, this.$store)
           if (this.$route.query.destination !== undefined) {
             this.$router.push({ path: this.$route.query.destination })
           } else if (this.$props.redirect !== undefined) {
diff --git a/packages/ripple-nuxt-tide/modules/authenticated-content/lib/authenticate.js b/packages/ripple-nuxt-tide/modules/authenticated-content/lib/authenticate.js
new file mode 100644
index 000000000..a716b6706
--- /dev/null
+++ b/packages/ripple-nuxt-tide/modules/authenticated-content/lib/authenticate.js
@@ -0,0 +1,96 @@
+import cookieparser from 'cookieparser'
+import Cookie from 'js-cookie'
+
+const authCookieName = 'authenticatedContent'
+let serverToken = null
+
+/**
+ * Decode a JWT token and test exipration date.
+ * @param {String} token JWT token
+ * @return {Boolean} is expired
+ */
+function isTokenExpired (token) {
+  if (token) {
+    const jwtDecode = require('jwt-decode')
+    const { exp } = jwtDecode(token)
+    // Token expiry timestamp is in a shorter format, match them for comparison
+    const now = parseInt(Date.now().toString().slice(0, exp.toString().length))
+    return exp < now
+  } else {
+    return true
+  }
+}
+
+/**
+ * Client / Server use.
+ * Get auth token.
+ * @return {String} auth token
+ */
+function getToken () {
+  if (process.client) {
+    return Cookie.get(authCookieName)
+  } else {
+    return serverToken
+  }
+}
+
+/**
+ * Client / Server use.
+ * Clear auth token.
+ * @param {Object} store vuex store object
+ */
+function clearToken (store) {
+  if (process.client) {
+    Cookie.remove(authCookieName)
+  } else {
+    serverToken = null
+  }
+  store.dispatch('tideAuthenticatedContent/setAuthenticated', false)
+}
+
+/**
+ * Client use only.
+ * Store auth token in cookies.
+ * @param {String} token JWT token
+ * @param {Object} store vuex store object
+ */
+function clientSetToken (token, store) {
+  Cookie.set(authCookieName, token)
+  store.dispatch('tideAuthenticatedContent/setAuthenticated', true)
+}
+
+/**
+ * Server use only.
+ * Store request header auth token to memory for page rendering.
+ * @param {Object} cookies Request header cookies
+ * @param {Object} store vuex store object
+ */
+function serverSetToken (cookies, store) {
+  let isAuth = false
+  if (cookies) {
+    const parsed = cookieparser.parse(cookies)
+    if (parsed[authCookieName]) {
+      if (!isTokenExpired(parsed[authCookieName])) {
+        serverToken = parsed[authCookieName]
+        isAuth = true
+      }
+    }
+  }
+  store.dispatch('tideAuthenticatedContent/setAuthenticated', isAuth)
+}
+
+/**
+ * Check if current user is authenticated.
+ * @param {Object} store vuex store object
+ * @return {Boolean} is user authenticated
+ */
+function isAuthenticated (store) {
+  return store.state.tideAuthenticatedContent.isAuthenticated
+}
+
+export { isTokenExpired }
+export { getToken }
+export { clearToken }
+export { clientSetToken }
+export { serverSetToken }
+export { isAuthenticated }
diff --git a/packages/ripple-nuxt-tide/modules/authenticated-content/lib/preview.js b/packages/ripple-nuxt-tide/modules/authenticated-content/lib/preview.js
index bded3e351..526409b32 100644
--- a/packages/ripple-nuxt-tide/modules/authenticated-content/lib/preview.js
+++ b/packages/ripple-nuxt-tide/modules/authenticated-content/lib/preview.js
@@ -6,18 +6,5 @@ function isPreviewPath (path) {
   return (path.indexOf('/preview/') === 0)
 }
 
-/**
- * Decode a JWT token and test exipration date.
- * @param {String} token JWT token
- */
-function isTokenExpired (token) {
-  const jwtDecode = require('jwt-decode')
-  const { exp } = jwtDecode(token)
-  // Token expiry timestamp is in a shorter format, match them for comparison
-  const now = parseInt(Date.now().toString().slice(0, exp.toString().length))
-  return exp < now
-}
-
 export { isPreviewPath }
-export { isTokenExpired }
 export default isPreviewPath
diff --git a/packages/ripple-nuxt-tide/modules/authenticated-content/localstorage.js b/packages/ripple-nuxt-tide/modules/authenticated-content/localstorage.js
deleted file mode 100644
index c912e06ff..000000000
--- a/packages/ripple-nuxt-tide/modules/authenticated-content/localstorage.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import createPersistedState from 'vuex-persistedstate'
-import Cookies from 'js-cookie'
-import cookie from 'cookie'
-
-export default ({ store, req }) => {
-  const cookieExpiry = null // in days or null for session
-  const inDaysFromNow = (x) => new Date(new Date().getDate() + x)
-
-  createPersistedState({
-    key: 'authenticatedContent',
-    paths: ['tideAuthenticatedContent.token'],
-    storage: {
-      // For SSR use cookie headers as the token is needed to request the content
-      getItem: key => process.server ? cookie.parse(req.headers.cookie)[key] : Cookies.get(key),
-      setItem: (key, value) => Cookies.set(key, value, {
-        expires: cookieExpiry ? inDaysFromNow(cookieExpiry) : null
-      }),
-      removeItem: key => Cookies.remove(key)
-    }
-  })(store)
-}
diff --git a/packages/ripple-nuxt-tide/modules/authenticated-content/module.js b/packages/ripple-nuxt-tide/modules/authenticated-content/module.js
index 855f9d2b1..813bc7c6d 100644
--- a/packages/ripple-nuxt-tide/modules/authenticated-content/module.js
+++ b/packages/ripple-nuxt-tide/modules/authenticated-content/module.js
@@ -9,8 +9,6 @@ module.exports = function () {
     options: options
   })
 
-  this.addPlugin(path.resolve(__dirname, 'localstorage.js'))
-
   this.extendRoutes((routes, resolve) => {
     routes.push({
       name: 'tideauthenticated_reset',
diff --git a/packages/ripple-nuxt-tide/modules/authenticated-content/pages/Login.vue b/packages/ripple-nuxt-tide/modules/authenticated-content/pages/Login.vue
index b24b17998..d2e86bbac 100644
--- a/packages/ripple-nuxt-tide/modules/authenticated-content/pages/Login.vue
+++ b/packages/ripple-nuxt-tide/modules/authenticated-content/pages/Login.vue
@@ -13,6 +13,7 @@ import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
 import { RplPageLayout } from '@dpc-sdp/ripple-layout'
 import RplForm from '@dpc-sdp/ripple-form'
 import TideLogin from '../components/TideLogin'
+import { isAuthenticated } from '../lib/authenticate'
 
 export default {
   components: {
@@ -23,7 +24,7 @@ export default {
     TideLogin
   },
   asyncData ({ route, store, redirect }) {
-    const isAuthed = Boolean(store.state.tideAuthenticatedContent.token)
+    const isAuthed = isAuthenticated(store)
     if (isAuthed) {
       if (route.query.destination !== undefined) {
         redirect(route.query.destination)
diff --git a/packages/ripple-nuxt-tide/modules/authenticated-content/plugin.js b/packages/ripple-nuxt-tide/modules/authenticated-content/plugin.js
index 25dccd31e..423878825 100644
--- a/packages/ripple-nuxt-tide/modules/authenticated-content/plugin.js
+++ b/packages/ripple-nuxt-tide/modules/authenticated-content/plugin.js
@@ -4,19 +4,16 @@ export default ({ app, store }) => {
     const storeModule = {
       namespaced: true,
       state: () => ({
-        token: null
+        isAuthenticated: null
       }),
       mutations: {
-        setToken (state, token) {
-          state.token = token
+        setAuthenticated (state, isAuthenticated) {
+          state.isAuthenticated = isAuthenticated
         }
       },
       actions: {
-        clearToken ({ commit }) {
-          commit('setToken', null)
-        },
-        setToken ({ commit }, token) {
-          commit('setToken', token)
+        setAuthenticated ({ commit }, setAuthenticated) {
+          commit('setAuthenticated', setAuthenticated)
         }
       }
     }
diff --git a/packages/ripple-nuxt-tide/package.json b/packages/ripple-nuxt-tide/package.json
index 0c9c5080e..8735a238f 100755
--- a/packages/ripple-nuxt-tide/package.json
+++ b/packages/ripple-nuxt-tide/package.json
@@ -51,6 +51,7 @@
     "@nuxtjs/proxy": "^1.2.4",
     "@nuxtjs/axios": "^5.3.1",
     "cheerio": "^1.0.0-rc.2",
+    "cookieparser": "^0.1.0",
     "cookies": "^0.7.3",
     "elastic-builder": "^2.0.2",
     "elasticsearch": "^15.4.1",
diff --git a/packages/ripple-nuxt-tide/test/unit/authenticated-content.test.js b/packages/ripple-nuxt-tide/test/unit/authenticated-content.test.js
index dd6def1da..f2585a062 100644
--- a/packages/ripple-nuxt-tide/test/unit/authenticated-content.test.js
+++ b/packages/ripple-nuxt-tide/test/unit/authenticated-content.test.js
@@ -1,4 +1,5 @@
-import { isPreviewPath, isTokenExpired } from '../../modules/authenticated-content/lib/preview'
+import { isTokenExpired } from '../../modules/authenticated-content/lib/authenticate'
+import { isPreviewPath } from '../../modules/authenticated-content/lib/preview'
 
 describe('Authenticated content', () => {
   test('"/preview-page" route is not preview path', async () => {
diff --git a/packages/ripple-test-tools/page-models.js b/packages/ripple-test-tools/page-models.js
index d803080b7..28e710c7d 100644
--- a/packages/ripple-test-tools/page-models.js
+++ b/packages/ripple-test-tools/page-models.js
@@ -55,7 +55,8 @@ const adminPageModels = {
     statusBlocked: dataSel('edit-status-0'),
     statusConfirmed: dataSel('edit-status-1'),
     submitButton: dataSel('edit-submit'),
-    memberRole: dataSel('edit-roles-member')
+    memberRole: dataSel('edit-roles-member'),
+    previewRole: dataSel('edit-roles-previewer')
   },
   deleteUser: {
     deleteAccountAndContent: dataSel('edit-user-cancel-method-user-cancel-delete')
diff --git a/packages/ripple-test-tools/tide-admin.js b/packages/ripple-test-tools/tide-admin.js
index 522666b4c..a8b146cc3 100644
--- a/packages/ripple-test-tools/tide-admin.js
+++ b/packages/ripple-test-tools/tide-admin.js
@@ -229,8 +229,8 @@ module.exports = class TideAdmin {
 
     await addComponents()
 
-    // Set moderation state to published
-    await page.select(this.pageModels.common.moderationState, 'published')
+    // Set moderation state. Default to published.
+    await page.select(this.pageModels.common.moderationState, testData.moderationState || 'published')
 
     // Submit
     await this.submitPage()
@@ -243,11 +243,20 @@ module.exports = class TideAdmin {
         .pop()
     )
 
+    const previewLink = (testData.moderationState === 'draft') ? await page.$eval('.node-revision-preview-links a', el => {
+      const url = el.getAttribute('href')
+      return url.substr(url.indexOf('/preview/'))
+    }) : null
+
     // Cleanup
     await this.close()
 
-    // Return nodeId
-    return Promise.resolve(nodeId)
+    // Return node information.
+    if (previewLink) {
+      return Promise.resolve({ nodeId, previewLink })
+    } else {
+      return Promise.resolve(nodeId)
+    }
   }
 
   async createGrantPage (testData) {
@@ -468,6 +477,9 @@ module.exports = class TideAdmin {
       case 'Member':
         await page.click(createUserPage.memberRole)
         break
+      case 'Previewer':
+        await page.click(createUserPage.previewRole)
+        break
     }
 
     await page.waitFor(3000)
@@ -497,22 +509,19 @@ module.exports = class TideAdmin {
     if (userId) {
       const page = await this.setup()
       const deleteUserPage = this.pageModels['deleteUser']
-      await this.login()
 
+      await this.login()
       await page.goto(`${this.backendURL}/user/${userId}/cancel`)
-
-      await this.page.click(deleteUserPage.deleteAccountAndContent)
-
-      // Submit
       await page.waitForSelector(
-        utils.dataSel('edit-user-cancel-method-user-cancel-delete'),
+        deleteUserPage.deleteAccountAndContent,
         this.options.wait
       )
-
+      await page.click(deleteUserPage.deleteAccountAndContent)
+      await this.submitPage()
       await this.close()
-
       return Promise.resolve('ok')
     }
+    return Promise.reject(new Error('no id'))
   }
 
   async deleteNode (id) {
diff --git a/test/e2e/fixtures/Pages/LandingPage/draft.json b/test/e2e/fixtures/Pages/LandingPage/draft.json
new file mode 100644
index 000000000..8498cbffd
--- /dev/null
+++ b/test/e2e/fixtures/Pages/LandingPage/draft.json
@@ -0,0 +1,21 @@
+{
+  "title": "Test landing page basic",
+  "summary": "Testing a summary",
+  "topic": "\"Arts, culture and heritage (1)\"",
+  "siteNumber": 4,
+  "components": [
+    {
+      "type": "Basic Text1",
+      "content": "<p>test <img src=\"https://www.content.vic.gov.au/sites/default/files/2019-04/railway-line-construction.jpg\" alt=\"test\" /></p>"
+    },
+    {
+      "type": "Basic Text2",
+      "content": "<p>test <img src=\"https://www.content.vic.gov.au/sites/default/files/2019-04/railway-line-construction.jpg\" alt=\"test\" /></p>"
+    },
+    {
+      "type": "Basic Text3",
+      "content": "<p>test <img src=\"https://www.content.vic.gov.au/sites/default/files/2019-04/railway-line-construction.jpg\" alt=\"test\" /></p>"
+    }
+  ],
+  "moderationState": "draft"
+}
diff --git a/test/e2e/integration/Preview-content/PreviewContent.feature b/test/e2e/integration/Preview-content/PreviewContent.feature
new file mode 100644
index 000000000..a1a149554
--- /dev/null
+++ b/test/e2e/integration/Preview-content/PreviewContent.feature
@@ -0,0 +1,34 @@
+Feature: Preview content
+
+  As an authorized user I want to be able to view previews which are not visible to the general public.
+
+  Scenario: No access to a draft page when unauthenticated
+    Given I have created a landing page with the json fixture "Pages/LandingPage/draft"
+    When I have navigated to the created test page
+    Then I should see a 404 page
+    And the created page should be removed
+
+  Scenario: Accessing a preview when unauthorized redirects to login
+    Given I have created a landing page with the json fixture "Pages/LandingPage/draft"
+    And I have navigated to the created preview page
+    Then there should be a redirect to "/login"
+    And there should be a preview destination query string
+    And the created page should be removed
+
+  Scenario: Accessing a preview when authenticated shows page
+    Given there is a user in the system with the following credentials:
+      | login     | password     | active | email                    | role      |
+      | testuser1 | Password-111 | true   | testuser1@mailinator.com | Previewer |
+    And I have created a landing page with the json fixture "Pages/LandingPage/draft"
+    And I have navigated to the created preview page
+    When I enter the the following login credentials:
+      | login     | password     |
+      | testuser1 | Password-111 |
+    And I submit the login form
+    And I wait for 6 seconds
+    Then I should be redirected to the preview page
+    And there should be a draft banner
+    And there should be a header logout button
+    And the h1 should be "Test landing page basic"
+    And the created page should be removed
+    And the created user should be removed
diff --git a/test/e2e/integration/Preview-content/PreviewContent/step_definition.js b/test/e2e/integration/Preview-content/PreviewContent/step_definition.js
new file mode 100644
index 000000000..eee830597
--- /dev/null
+++ b/test/e2e/integration/Preview-content/PreviewContent/step_definition.js
@@ -0,0 +1,63 @@
+/* global cy */
+
+import { Then, When, Given } from 'cypress-cucumber-preprocessor/steps'
+
+Given(`I have navigated to the created preview page`, () => {
+  cy.get('@previewLink').then(previewLink => {
+    cy.visit(previewLink, { failOnStatusCode: false })
+  })
+})
+
+Then(`there should be a redirect to {string}`, (url) => {
+  cy.window().its('location.pathname').should('equal', url)
+})
+
+Then(`there should be a preview destination query string`, () => {
+  cy.get('@previewLink').then(previewLink => {
+    cy.window().its('location.search').should('equal', `?destination=${encodeURIComponent(previewLink)}`)
+  })
+})
+
+Then(`I should be redirected to the preview page`, () => {
+  cy.get('@previewLink').then(previewLink => {
+    cy.window().its('location.href').should('contain', previewLink)
+  })
+})
+
+Given(`there is a user in the system with the following credentials:`, (dataTable) => {
+  const user = dataTable.hashes()[0]
+  const active = Boolean(dataTable.hashes()[0].active === 'true')
+
+  cy.task('createUser', { ...user, active }).as('userId')
+})
+
+When(`I enter the the following login credentials:`, (dataTable) => {
+  const login = dataTable.hashes()[0].login
+  const password = dataTable.hashes()[0].password
+  cy.get('#username').type(login)
+  cy.get('#password').type(password)
+})
+
+When(`I submit the login form`, () => {
+  cy.get('.field-wrap > input[value="Submit"]').click()
+})
+
+When(`I wait for {int} seconds`, seconds => {
+  cy.wait(seconds * 1000)
+})
+
+Then(`there should be a draft banner`, () => {
+  cy.get('.rpl-alert-base.app-preview').should('exist')
+})
+
+Then(`there should be a header logout button`, () => {
+  cy.get('.rpl-site-header__btn--logout').should('exist')
+})
+
+Then(`the created user should be removed`, () => {
+  cy.get('@userId').then(userId => {
+    if (userId) {
+      cy.task('deleteUser', userId)
+    }
+  })
+})
diff --git a/test/e2e/integration/common/index.js b/test/e2e/integration/common/index.js
index 20ec5881f..6700611a0 100644
--- a/test/e2e/integration/common/index.js
+++ b/test/e2e/integration/common/index.js
@@ -24,8 +24,9 @@ Then(`the page title should match test data`, () => {
 Given(`I have created a landing page with the json fixture {string}`, (fixture) => {
   cy.fixture(fixture).as('pageData')
   cy.get('@pageData').then(data => {
-    cy.task('createLandingPage', data).then((nodeId) => {
+    cy.task('createLandingPage', data).then(({ nodeId, previewLink }) => {
       cy.wrap(nodeId).as('nodeId')
+      cy.wrap(previewLink).as('previewLink')
     })
   })
 })