Integration with Nuxt.js Auth

You can easily use Tokenable with Nuxt.js Auth, simply follow these instructions:

As part of this, we make a number of assumptions:

• You have a Nuxt.js app setup
• You have a Rails application setup, with Tokenable installed, running at http://localhost:3000
• You have an endpoint to return a user key, with a user object, protected with require_tokenable_user!. We will assume /api/user.

1) Setup Nuxt.js Auth

Within your Nuxt application, follow the setup instructions:

https://auth.nuxtjs.org/guide/setup

2) Add the Nuxt.js config

Next, you will need to open your nuxt.config.js file, and add the following:

{
  auth: {
    strategies: {
      local: {
        token: {
          property: 'data.token',
          required: true,
          type: 'Bearer',
        },
        user: {
          property: 'user',
          autoFetch: true,
        },
        endpoints: {
          login: { url: 'http://localhost:3000/api/auth', method: 'post' },
          user: { url: 'http://localhost:3000/api/user', method: 'get' },
        },
      },
    },
  },
}

Create a login page

At this point, Nuxt is setup to work with Tokenable, and all you need is a login form. For example, you could create pages/login:

<template>  
  <form @submit="userLogin">
    <input type="email" v-model="email" />
    <input type="password" v-model="passsword" />
    <button @click="userLogin">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    async userLogin() {
      try {
        let response = await this.$auth.loginWith('local', { data: { email: this.email, password: this.password } })
        console.log(response)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

After this point, you can just use Nuxt Auth as per their docs. For example, by protecting pages using Middleware.