feat: add auth0-js scheme

Author: Pooya Parsa

examples/api/auth.js

@@ -34,7 +34,8 @@ app.post('/login', (req, res, next) => {
   const accessToken = jsonwebtoken.sign(
     {
       username,
-      rand: Math.random() * 1000,
+      picture: 'https://github.com/nuxt.png',
+      name: 'User ' + username,
       scope: ['test', 'user']
     },
     'dummy'

examples/demo/layouts/default.vue

@@ -12,9 +12,10 @@
         </b-navbar-nav>
         <b-navbar-nav class="ml-auto">
           <template v-if="$auth.state.loggedIn">
-            <b-nav-item-dropdown :text="$auth.state.user.username" right>
+            <b-nav-item-dropdown :text="$auth.state.user.name" right>
               <b-dropdown-item @click="$auth.logout()">Logout</b-dropdown-item>
             </b-nav-item-dropdown>
+            <b-img :src="$auth.state.user.picture" class="mt-1" rounded="circle" width="30px" height="30px" />
           </template>
           <template v-else>
             <b-dropdown-item to="/login">Login</b-dropdown-item>

examples/demo/nuxt.config.js

@@ -11,20 +11,28 @@ module.exports = {
     extractCSS: true
   },
   serverMiddleware: ['../api/auth'],
+  modules: [
+    'bootstrap-vue/nuxt',
+    '@nuxtjs/axios',
+    '@@'
+  ],
+  axios: {
+    proxy: true
+  },
+  proxy: {
+    '/api': 'http://localhost:3000'
+  },
   auth: {
     strategies: {
       local: {
         endpoints: {
           login: { propertyName: 'token.accessToken' }
         }
+      },
+      auth0: {
+        clientID: 'q8lDHfBLJ-Fsziu7bf351OcYQAIe3UJv',
+        domain: 'nuxt-auth.auth0.com'
       }
     }
-  },
-  modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios', '@@'],
-  axios: {
-    proxy: true
-  },
-  proxy: {
-    '/api': 'http://localhost:3000'
   }
 }

examples/demo/pages/login.vue

@@ -16,7 +16,10 @@
     </b-form-group>
 
     <div class="text-center">
-      <b-btn @click="login" variant="outline-primary" size="lg">Login</b-btn>
+      <b-btn-group>
+        <b-btn @click="login" variant="outline-primary" size="lg">Login</b-btn>
+        <b-btn @click="$auth.strategies.auth0.login()" variant="outline-primary" size="lg">Login with Auth0</b-btn>
+      </b-btn-group>
     </div>
   </form>
 </div>
@@ -42,7 +45,7 @@ export default {
   },
   methods: {
     async login() {
-      return this.$auth.login({
+      return this.$auth.strategies.local.login({
         data: {
           username: this.username,
           password: this.password

lib/auth/auth.js

@@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
 import { parse as parseCookie } from 'cookie'
 import getProp from 'dotprop'
 import Vue from 'vue'
-import { routeOption, isRelativeURL, isUnset, isSameURL } from './utilities'
+import { routeOption, isRelativeURL, isUnset, isSet, isSameURL } from './utilities'
 
 export default class Auth {
   constructor (ctx, options) {
@@ -24,21 +24,16 @@ export default class Auth {
     // Register vuex store
     this._registerVuexStore()
 
-    // Reset on error
-    if (this.options.resetOnError) {
-      this._resetOnError()
-    }
-
     // Watch for loggedIn changes only in client side
     if (process.browser) {
       this._autoRedirect()
     }
 
-    // Sync token
-    this.syncToken()
+    // Restore strategy
+    this.syncUniversal('strategy', this.options.defaultStrategy)
 
-    // Set defaultStrategy
-    return this.setStrategy()
+    // Call mounted for active strategy on initial load
+    return this.mounted()
   }
 
   // ---------------------------------------------------------------
@@ -65,12 +60,6 @@ export default class Auth {
     })
   }
 
-  _resetOnError () {
-    this.onError(() => {
-      this.reset()
-    })
-  }
-
   _autoRedirect () {
     this.watchState('loggedIn', loggedIn => {
       if (!routeOption(this.ctx.route, 'auth', false)) {
@@ -85,38 +74,42 @@ export default class Auth {
 
   // ...Universal
 
-  setUniversal (key, value) {
+  setUniversal (key, value, isJson) {
     // Local state
     this.setState(key, value)
 
     // Cookies
     this.setCookie(key, value)
 
     // Local Storage
-    this.setLocalStorage(key, value)
+    this.setLocalStorage(key, value, isJson)
   }
 
-  getUniversal (key) {
+  getUniversal (key, isJson) {
     // Local state
     let value = this.getState(key)
 
     // Cookies
     if (isUnset(value)) {
-      value = this.getCookie(key)
+      value = this.getCookie(key, isJson)
     }
 
     // Local Storage
     if (isUnset(value)) {
-      value = this.getLocalStorage(key)
+      value = this.getLocalStorage(key, isJson)
     }
 
     return value
   }
 
-  syncUniversal (key) {
-    const value = this.getUniversal(key)
+  syncUniversal (key, defaultValue, isJson) {
+    let value = this.getUniversal(key, isJson)
 
-    if (!isUnset(value)) {
+    if (isUnset(value) && isSet(defaultValue)) {
+      value = defaultValue
+    }
+
+    if (isSet(value)) {
       this.setUniversal(key, value)
     }
 
@@ -154,19 +147,20 @@ export default class Auth {
 
   // ...Local Storage
 
-  setLocalStorage (key, value) {
+  setLocalStorage (key, value, isJson) {
     if (typeof localStorage !== 'undefined') {
       if (isUnset(value)) {
         localStorage.removeItem(key)
       } else {
-        localStorage.setItem(key, value)
+        localStorage.setItem(key, isJson ? JSON.stringify(value) : value)
       }
     }
   }
 
-  getLocalStorage (key) {
+  getLocalStorage (key, isJson) {
     if (typeof localStorage !== 'undefined') {
-      return localStorage.getItem(key)
+      const value = localStorage.getItem(key)
+      return isJson ? JSON.parse(value) : value
     }
   }
 
@@ -186,7 +180,7 @@ export default class Auth {
     }
   }
 
-  getCookie (key) {
+  getCookie (key, isJson) {
     if (!this.options.cookie) {
       return
     }
@@ -196,8 +190,9 @@ export default class Auth {
       : this.ctx.req.headers.cookie
 
     const cookies = parseCookie(cookieStr || '') || {}
+    const value = cookies[key]
 
-    return cookies[key]
+    return isJson ? JSON.parse(value) : value
   }
 
   // ---------------------------------------------------------------
@@ -213,41 +208,74 @@ export default class Auth {
   }
 
   setStrategy (name) {
-    if (name === undefined) {
-      name = this.options.defaultStrategy
-    }
-
-    const oldName = this.getState('strategy')
-
-    if (oldName === name) {
+    if (name === this.getUniversal('strategy')) {
       return Promise.resolve()
     }
 
-    // Update state
-    this.setState('strategy', name)
+    // Call to reset
+    this.reset()
+
+    // Set strategy
+    this.setUniversal('strategy', name)
 
     // Call mounted hook on active strategy
-    return this._mounted()
+    return this.mounted()
   }
 
   // ---------------------------------------------------------------
-  // Scheme interface wrappers
+  // Scheme interface wrappers and default handlers
   // ---------------------------------------------------------------
 
-  _mounted () {
-    return this.strategy.mounted(...arguments)
+  mounted () {
+    if (this.strategy.mounted) {
+      return Promise.resolve(this.strategy.mounted(...arguments)).then(() => this.fetchUserOnce())
+    }
+
+    return this.fetchUserOnce()
   }
 
   login () {
-    return this.strategy.login(...arguments)
+    if (this.strategy.login) {
+      return Promise.resolve(this.strategy.login(...arguments))
+    }
+
+    return Promise.resolve()
   }
 
   fetchUser () {
-    return this.strategy.fetchUser(...arguments)
+    if (this.strategy.fetchUser) {
+      return Promise.resolve(this.strategy.fetchUser(...arguments))
+    }
+
+    return Promise.resolve()
   }
 
   logout () {
-    return this.strategy.logout(...arguments)
+    if (this.strategy.logout) {
+      return Promise.resolve(this.strategy.logout(...arguments)).then(() => this.reset())
+    }
+
+    this.reset()
+
+    return Promise.resolve()
+  }
+
+  fetchUserOnce () {
+    if (!this.state.user) {
+      return this.fetchUser(...arguments)
+    }
+
+    return Promise.resolve()
+  }
+
+  reset () {
+    if (this.strategy.reset) {
+      this.strategy.reset(...arguments)
+    }
+
+    this.setState('loggedIn', false)
+    this.setState('user', null)
+    this.setToken(null)
   }
 
   // ---------------------------------------------------------------
@@ -329,12 +357,6 @@ export default class Auth {
     }
   }
 
-  reset () {
-    this.setState('loggedIn', false)
-    this.setState('user', null)
-    this.setToken(null)
-  }
-
   redirect (name) {
     if (!this.options.redirect) {
       return

lib/auth/plugin.js

@@ -2,7 +2,8 @@ import Auth from './auth'
 import './middleware'
 
 // Active chemes
-<% for (let scheme of options.schemes) { %>import <%= 'scheme_' + hash(scheme) %> from '<%= scheme %>'<% } %>
+<% for (let scheme of options.schemes) { %> import <%= 'scheme_' + hash(scheme) %> from '<%= scheme %>'
+<% } %>
 
 export default function (ctx, inject) {
   // Options
@@ -15,8 +16,8 @@ export default function (ctx, inject) {
   inject('auth', $auth)
 
   // Register strategies
-  <% for (let strategyName in options.strategies) { const strategy = options.strategies[strategyName] %>
-  $auth.registerStrategy('<%= strategyName %>', new <%='scheme_' + hash(strategy._scheme)%>($auth, <%= JSON.stringify(strategy) %>))
+  <% for (let strategy of options.strategies) { %>
+  $auth.registerStrategy('<%= strategy._name %>', new <%='scheme_' + hash(strategy._scheme) %> ($auth, <%= JSON.stringify(strategy) %>))
   <% } %>
 
   // Initialize auth