nuxtjs auth a few highlights

For a small nuxt app I was looking to set up a simple JWT authentication scheme with Express and FaunaDB on the backend - makes sense to reach for nuxt/auth, the go-to solution for user management. The official docs are straightforward, an obvious starting point, however many of the articles with practical examples seemed to confuse more than clarify, so with as little redundancy as possible, I wanted to share a few quick tips for a super basic setup, one heads up on an issue, and I'll leave links to articles I found most helpful in the notes.

In a nutshell the module simply makes a call to your backend with axios and expects a token in return. Think of the auth module as a vuex store, because that's exactly what it is. Initialize vuex by including an index.js file in your Store folder (can be an empty file), then let's install nuxt and axios:

# terminal
npm install @nuxtjs/auth @nuxtjs/axios

Let's include those modules in our config file and point nuxtjs/auth to the paths that we've setup on our backend. Your backend can return any JSON object you like as long as you point nuxtjs/auth to the property holding the token, nuxtjs/auth will automatically store this token in LocalStorage and Cookies.

// nuxt.config.js
modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth'
],
auth: {
  strategies: {
    local: {
      endpoints: {
        login: { url: '/api/login', method: 'post', propertyName: 'token' },
      },
    }
  }
}

After successfully receiving the token nuxtjs/auth will automatically make a second call with the token to retrieve user data. You can validate the token and return anything you like, just point nuxtjs/auth to the property holding your user object. You can disable this feature if you want by setting the user property to false.

// nuxt.config.js
local: {
  endpoints: {
    login: { url: '/api/login', method: 'post', propertyName: 'token' },
    user: { url: '/api/user', method: 'get', propertyName: 'user' } // set to false to disable
  }
}

Now you can call the loginWith() method from your login page. Now you can access the global variables this.$auth.loggedIn and this.$auth.user. And again, since its just state in vuex, you can also use mapState.

// component.vue
computed: {
  ...mapState('auth', ['loggedIn', 'user'])
},

To protect routes nuxt/auth offers middleware that you can easily include in each layout or component. Or you can protect all routes globally and disable it for each component.

// component.vue
// authorization by route
export default {
  middleware: 'auth'
}

There are a few options for redirect, most commonly you'll want to redirect to a homepage after logging in. You should be able to setup as seen in the docs, but after trying various tweaks I'm still unable to get this working reliably - if you encounter this issue see this thread. Hopefully this issue is resolved in v5 of the module. Alternatively, you can disable this feature and redirect manually like so:

// login.vue
methods: {
  async userLogin() {
    try {
      const response = await this.$auth.loginWith('local', { data: this.user })
      if (!response.data.error) {
        this.$auth.setUserToken(response.data.token)
        this.$router.push('/dashboard')
      }
    } catch (error) {
      console.log(error)
    }
  }
}

There's more to explore in the auth module, but for a basic setup that's all there is to it. Check out the docs and articles below for more details.

← Home