vue-jwt-mongo

A simple authentication system for Vue.js

Usage no npm install needed!

<script type="module">
  import vueJwtMongo from 'https://cdn.skypack.dev/vue-jwt-mongo';
</script>

README

vue-jwt-mongo

License Dependencies Build Coverage

A package for bootstrapping a simple JSON Web Token-based authentication system using Vue.js, MongoDB and Express.js.

Installation

npm install vue-jwt-mongo --save

Server

const app = require('express')()

const vjmServer = require('vue-jwt-mongo').Server({
  mongoUrl: 'mongodb://localhost/db',
  jwtSecret: 'shhh'
})

Options

  • mongoUrl (mandatory): an address of the Mongo database.
  • jwtSecret (mandatory): a secret key for token generation.
  • userModelName: a name for the mongoose model storing encoded user credentials.
    • Defaults to 'User'.
  • jwtExpiresIn: token expiration time in seconds.

Endpoints

registerHandler

Expects { username, password } in the request body. Returns an empty response.

The password is salted and hashed via passport-local-mongoose.

app.post('/auth/register', vjmServer.registerHandler)

loginHandler

Expects { username, password } in the request body. Returns a string — the token.

app.post('/auth/login', vjmServer.loginHandler)

refreshHandler

Expects an empty request body and Authorization: Bearer {token} as one of the HTTP headers. Returns a string with a new token if the original token is valid.

app.post('/auth/refresh', vjmServer.refreshHandler)

Protector

jwtProtector ensures that the incoming request has a valid token. Expects Authorization: Bearer {token} as one of the HTTP headers.

app.get('/protected', vjmServer.jwtProtector, (request, response) => {
    console.log(request.user.username)
})

Client

Vue.use(require('vue-resource'))
Vue.use(require('vue-jwt-mongo').Client, {
  /* options, if any */
})

Options

  • registerEndpoint: the server's endpoint for registration requests.
    • Defaults to '/auth/register'.
  • loginEndpoint: the server's endpoint for authentication requests.
    • Defaults to '/auth/login'.
  • refreshEndpoint: the server's endpoint for refreshing the token.
    • Defaults to '/auth/refresh'.
  • storageKey: a localStorage key used for saving the token.
    • Defaults to 'jsonwebtoken'.
  • bearerLexem: a lexem prepending tokens in Authorization headers.
    • Defaults to 'Bearer ' (extra space intended).

Requests

Authentication

All of the following requests return vue-resource Promises, so one can get an idea of the callback structure here.

this.$auth.register('login', 'password')
this.$auth.logIn('login', 'password')
this.$auth.refresh()

Authorization

If bearer: true is passed then Authorization: Bearer {token} is added as a header.

this.$http.get('/protected', { bearer: true }).then(response => {
    console.log(response)
})

Token

isLoggedIn

Returns true if the saved token is valid and false otherwise.

let isLoggedIn = this.$auth.isLoggedIn()

getToken

Returns a string if the saved token is valid and null otherwise.

this.$auth.getToken()

logOut

Purges the saved token.

this.$auth.logOut()