Feathers-vuex: Where dispatch 'auth/authenticate' action in nuxt?

[dw72]

Where is best place to dispatch 'auth/authenticate' action in nuxt? Now i dispatch it in mounted() of each page to get things working. Is there a better place?

[daenuprobst]

Could you elaborate on this? For me authentication is currently not working at all. Log-in works, the jwt token and payload are stored in the state (as seen with vue debugger for chrome), but I only get NotAuthenticated: No auth token upon requesting protected resources...

[dw72]

I have in store actions:

import feathersVuex from 'feathers-vuex'
import feathersClient from '../services/feathers-client'
import { initAuth } from 'feathers-vuex/lib/utils'

const { service, auth } = feathersVuex(feathersClient, { idField: '_id' })

...

export const actions = {
  nuxtServerInit({ commit }, { req }) {
    return initAuth({
      commit,
      req,
      moduleName: 'auth',
      cookieName: 'feathers-jwt'
    })
  }

in feathers-client.js

import feathers from '@feathersjs/client'
import io from 'socket.io-client'
import { CookieStorage } from 'cookie-storage'
import { host, port } from '../../config/default.json'

const socket = io(`http://${host}:${port}`, { transports: ['websocket'] })

const feathersClient = feathers()
  .configure(feathers.socketio(socket))
  .configure(feathers.authentication({ storage: new CookieStorage() }))

export default feathersClient

and then in mounted() of page

...
async mounted() {
    await this.authenticate()
    this.findUsers()
},
...

If you run this.authenticate() without params then it try to load token from cookie... and it works for me, but I suppose that there must be a better place to call this function, not all pages separately. BTW findUsers is a mapped find action from service using ...mapActions('users', { findUsers: 'find' }), in component (page here) methods.

[DaviTeodoro]

A proper place to authenticate the user is at 'layouts'. You may do:

random-layout.vue

computed: {
    ...mapState('auth', ['payload']),
  },

  methods: {
    ...mapActions({
      authenticate: 'auth/authenticate',
      logout: 'auth/logout',
    }),
  },

  async created() {
    try {
      if (this.payload) await this.authenticate();
    } catch (e) {
      this.logout();
      throw e;
    }
  },

[dw72]

@DaviTeodoro i try yours example but if do things this way then authentication itself is working, but findUsers (find action mapped from store) on my page is reporting 'No auth token'... I think is called before auth done.

[samburgers]

I'm doing it in Nuxt middleware for my SPA setup:

// middleware/authenticated.js

export default function({ store }) {
  store
    .dispatch("auth/authenticate")
    .then(result => {
      console.log(result);
    })
    .catch(error => {
      console.error(error);
    });
}

// nuxt.config.js

module.exports = {
  mode: "spa",
  router: {
    middleware: ["authenticated"]
  }
}

[marshallswain]

I've done it using middleware, as shown in the previous comment, but I've also seen it dispatched after the initAuth utility:

  nuxtServerInit({ commit }, { req }) {
    return initAuth({
      commit,
      req,
      moduleName: 'auth',
      cookieName: 'feathers-jwt'
    })
      .then(() => {
        // dispatch here
      })
  }

[marshallswain]

I'll close this after this gets added to the docs.

[Alfredo-Delgado]

Unless I'm missing something, dispatching from initAuth inside of nuxtServerInit doesn't authenticate the front-end client. Any authenticated endpoints that don't get called on the server fail.

I arrived at the same conclusion as @DaviTeodoro, but it seemed unnatural and the lack of documentation calling out what I think should be a common issue led me to believe that I must be missing something.

[YuanTian1991]

Currently, I have successfully run auth in middleware in SPA mode, like @samburgers , with auth function in store/index.js. However, after changing it into universal mode, it's not working... Then I have to use @DaviTeodoro 's solution.

But I want to do it in middleware even in universal mode.

[NickBolles]

nuxtClientInit is a good solution for this. I just made an initauth store action that i dispatch in both nuxtServerInit and nuxtClientInit

Otherwise persisting the state like in #93 is the way to go. I'm not sure that works with all of nuxt's modes though

[marshallswain]

@NickBolles thank you for your PR, which I've just merged. I'd really appreciate if you could update the guide, here: https://github.com/feathers-plus/docs/blob/master/source/v1/feathers-vuex/guide.md.

Once done, I will close all issues around auth and Nuxt. Thank you so much for your contributions!

[marshallswain]

I'm closing this now that we have a full Nuxt example in the docs. Thanks!