src/app/src/App.vue

@@ -93,6 +93,11 @@ export default {
     },
     hideProgress () {
       this.progress.visible = false
+    },
+    handleLoginEvent (data) {
+      if (!data.loggedIn) {
+        this.showInfo('Logged out successfully')
+      }
     }
   },
   provide () {

src/app/src/auth/AuthService.js

@@ -7,31 +7,32 @@ import AUTH_CONFIG from './auth0-variables'
 import mutations   from '@/store/mutation-types'
 /* es-lint-enable*/
 
+// Auth0 web authentication instance to use for our calls
 const webAuth = new auth0.WebAuth({
   domain: AUTH_CONFIG.domain,
   clientID: AUTH_CONFIG.clientId,
   redirectUri: AUTH_CONFIG.appDomain + AUTH_CONFIG.callbackUrl,
+  audience: `https://${AUTH_CONFIG.domain}/userinfo`,
   responseType: 'token id_token',
   scope: 'openid profile email'
 })
 
+/**
+ * A class to handle all authentication calls and determinations
+ */
 class AuthService extends EventEmitter {
   
-  id = {
-    token: null,
-    expiry: null
-  }
-  access = {
-    token: null,
-    expiry: null
-  }
-  profile = null
+  // Local storage key for our session data
+  AUTH_SESSION = 'auth-session'
+
+  // Received and calculated values for our ssesion (initially loaded from local storage if present)
+  session = {}
+
+  constructor() {
+    super()
+    this.refreshSession()
+  }
 
-  ACCESS_TOKEN = 'access_token'
-  ID_TOKEN = 'id_token'
-  EXPIRES_AT = 'expires_at'
-  USER_PROFILE = 'user_profile'
-  
   /**
    * Starts the user log in flow
    */
@@ -56,31 +57,37 @@ class AuthService extends EventEmitter {
     })
   }
 
-  handleAuthentication (store) {
-    this.parseHash()
-      .then(authResult => {
-        if (authResult && authResult.accessToken && authResult.idToken) {
-          this.setSession(authResult)
-          store.commit(mutations.USER_LOGGED_ON, this.profile)
-        }
-      })
-      .catch(err => {
-        console.log(err)
-        alert(`Error: ${err.error}. Check the console for further details.`)
-      })
+  /**
+   * Handle authentication replies from Auth0
+   * 
+   * @param store The Vuex store
+   */
+  async handleAuthentication (store) {
+    try {
+      const authResult = await this.parseHash()
+      if (authResult && authResult.accessToken && authResult.idToken) {
+        this.setSession(authResult)
+        store.commit(mutations.USER_LOGGED_ON, this.session.profile)
+      }
+    } catch(err) {
+      console.error(err)
+      alert(`Error: ${err.error}. Check the console for further details.`)
+    }
   }
 
+  /**
+   * Set up the session and commit it to local storage
+   * 
+   * @param authResult The authorization result
+   */
   setSession (authResult) {
-    this.profile = authResult.idTokenPayload
-    this.id.token = authResult.idToken
-    this.id.expiry = new Date(this.profile.exp * 1000);
-    this.access.token = authResult.accessToken
-    this.access.expiry = new Date(Date.now() + authResult.expiresIn * 1000)
+    this.session.profile = authResult.idTokenPayload
+    this.session.id.token = authResult.idToken
+    this.session.id.expiry = this.session.profile.exp * 1000
+    this.session.access.token = authResult.accessToken
+    this.session.access.expiry = authResult.expiresIn * 1000 + Date.now()
 
-    localStorage.setItem(this.ACCESS_TOKEN, authResult.accessToken)
-    localStorage.setItem(this.ID_TOKEN, authResult.idToken)
-    localStorage.setItem(this.EXPIRES_AT, this.id.expiry)
-    localStorage.setItem(this.USER_PROFILE, JSON.stringify(this.profile))
+    localStorage.setItem(this.AUTH_SESSION, JSON.stringify(this.session))
 
     this.emit('loginEvent', {
       loggedIn: true,
@@ -89,9 +96,32 @@ class AuthService extends EventEmitter {
     })
   }
 
+  /**
+   * Refresh this instance's session from the one in local storage
+   */
+  refreshSession () {
+    this.session = 
+      localStorage.getItem(this.AUTH_SESSION)
+      ? JSON.parse(localStorage.getItem(this.AUTH_SESSION))
+      : { profile: {},
+          id: {
+            token: null,
+            expiry: null
+          },
+          access: {
+            token: null,
+            expiry: null
+          }
+        }
+  }
+
+  /**
+   * Renew authorzation tokens with Auth0
+   */
   renewTokens () {
     return new Promise((resolve, reject) => {
-      if (localStorage.getItem(this.ID_TOKEN) !== null) {
+      this.refreshSession()
+      if (this.session.id.token !== null) {
         webAuth.checkSession({}, (err, authResult) => {
           if (err) {
             reject(err)
@@ -106,45 +136,58 @@ class AuthService extends EventEmitter {
     })
   }
 
-  logout (store, router) {
+  /**
+   * Log out of myPrayerJournal
+   * 
+   * @param store The Vuex store
+   */
+  logout (store) {
     // Clear access token and ID token from local storage
-    localStorage.removeItem(this.ACCESS_TOKEN)
-    localStorage.removeItem(this.ID_TOKEN)
-    localStorage.removeItem(this.EXPIRES_AT)
-    localStorage.removeItem(this.USER_PROFILE)
-
-    this.idToken = null
-    this.idTokenExpiry = null
-    this.profile = null
+    localStorage.removeItem(this.AUTH_SESSION)
+    this.refreshSession()
 
     store.commit(mutations.USER_LOGGED_OFF)
 
     webAuth.logout({
-      // navigate to the home route
-      returnTo: '/'
+      returnTo: `${AUTH_CONFIG.appDomain}/`,
+      clientID: AUTH_CONFIG.clientId
     })
     this.emit('loginEvent', { loggedIn: false })
   }
 
+  /**
+   * Check expiration for a token (the way it's stored in the session)
+   */
+  checkExpiry = (it) => it.token && it.expiry && Date.now() < it.expiry
+  
+  /**
+   * Is there a user authenticated?
+   */
   isAuthenticated () {
-    return Date.now() < this.id.Expiry && localStorage.getItem(this.ID_TOKEN)
+    return this.checkExpiry(this.session.id)
   }
 
+  /**
+   * Is the current access token valid?
+   */
   isAccessTokenValid () {
-    return this.access.token && this.access.expiry && Date.now() < this.access.expiry
+    return this.checkExpiry(this.session.access)
   }
 
-  getAccessToken () {
-    return new Promise((resolve, reject) => {
-      if (this.isAccessTokenValid()) {
-        resolve(this.access.token)
-      } else {
-        this.renewTokens()
-          .then(authResult => {
-            resolve(authResult.accessToken)
-          }, reject)
+  /**
+   * Get the user's access token, renewing it if required
+   */
+  async getAccessToken () {
+    if (this.isAccessTokenValid()) {
+      return this.session.access.token
+    } else {
+      try {
+        const authResult = await this.renewTokens()
+        return authResult.accessToken
+      } catch (reject) {
+        throw reject
       }
-    })
+    }
   }
 }
 

src/app/src/components/common/Navigation.vue

@@ -1,30 +1,29 @@
 <template lang="pug">
 .md-toolbar-row
   md-tabs(md-sync-route).md-primary
-    md-tab(v-if='isAuthenticated'
-           md-label='Journal'
-           to='/journal')
-    md-tab(v-if='isAuthenticated'
-           md-label='Active'
-           to='/requests/active')
-    md-tab(v-if='hasSnoozed'
-           md-label='Snoozed'
-           to='/requests/snoozed')
-    md-tab(v-if='isAuthenticated'
-           md-label='Answered'
-           to='/requests/answered')
-    md-tab(v-if='isAuthenticated'
-           md-label='Log Off'
-           href='#'
-           @click.stop='logOff()')
-    md-tab(v-if='!isAuthenticated'
-           md-label='Log On'
-           href='#'
-           @click.stop='logOn()')
-    md-tab(md-label='Docs'
-           href='https://docs.prayerjournal.me'
-           target='_blank'
-           @click.stop='')
+    template(v-if='isAuthenticated')
+      md-tab(md-label='Journal'
+             to='/journal')
+      md-tab(md-label='Active'
+             to='/requests/active')
+      md-tab(v-if='hasSnoozed'
+             md-label='Snoozed'
+             to='/requests/snoozed')
+      md-tab(md-label='Answered'
+             to='/requests/answered')
+      md-tab(md-label='Log Off'
+             href='/user/log-off'
+             @click.prevent='logOff()')
+      md-tab(md-label='Docs'
+             href='https://docs.prayerjournal.me'
+             @click.prevent='showHelp()')
+    template(v-else)
+      md-tab(md-label='Log On'
+             href='/user/log-on'
+             @click.prevent='logOn()')
+      md-tab(md-label='Docs'
+             href='https://docs.prayerjournal.me'
+             @click.prevent='showHelp()')
 </template>
 
 <script>
@@ -51,6 +50,9 @@ export default {
     },
     logOff () {
       this.$auth.logout(this.$store, this.$router)
+    },
+    showHelp () {
+      window.open('https://docs.prayerjournal.me','_blank')
     }
   }
 }

src/app/src/components/user/LogOn.vue

@@ -10,9 +10,9 @@ article.mpj-main-content(role='main')
 export default {
   name: 'log-on',
   inject: ['progress'],
-  created () {
+  async created () {
     this.progress.$emit('show', 'indeterminate')
-    this.$auth.handleAuthentication(this.$store)
+    await this.$auth.handleAuthentication(this.$store)
   },
   methods: {
     handleLoginEvent (data) {

src/app/src/store/index.js

@@ -38,7 +38,7 @@ const logError = function (error) {
 const setBearer = async function () {
   try {
     await auth.getAccessToken()
-    api.setBearer(localStorage.getItem(auth.ID_TOKEN))
+    api.setBearer(auth.session.id.token)
   } catch(err) {
     if (err === 'Not logged in') {
       console.warn('API request attempted when user was not logged in')
@@ -50,7 +50,7 @@ const setBearer = async function () {
 
 export default new Vuex.Store({
   state: {
-    user: JSON.parse(localStorage.getItem(auth.USER_PROFILE) || '{}'),
+    user: auth.session.profile,
     isAuthenticated: auth.isAuthenticated(),
     journal: {},
     isLoadingJournal: false
@@ -98,7 +98,7 @@ export default new Vuex.Store({
     },
     async [actions.CHECK_AUTHENTICATION] ({ commit }) {
       try {
-        await auth.renewTokens()
+        await auth.getAccessToken()
         commit(mutations.SET_AUTHENTICATION, auth.isAuthenticated())
       } catch(_) {
         commit(mutations.SET_AUTHENTICATION, false)