add jwt login

Author: galvez

api.js

@@ -1,5 +1,9 @@
+import { sign } from 'jsonwebtoken'
 import { json } from 'body-parser'
-import { addUser } from './db'
+import { addUser, authUser } from './db'
+
+const expiresIn = '90d'
+const sessionSecret = 'some truly random value'
 
 export default [
   {
@@ -13,13 +17,28 @@ export default [
     res.json = (obj) => res.write(JSON.stringify(obj))
     next()
   },
+  {
+    path: '/api/login',
+    async handler(req, res, next) {
+      if (req.method === 'POST' && await authUser(req.body)) {
+        const payload = { email: req.body.email }
+        const token = sign(payload, sessionSecret, { expiresIn })
+        res.json({ token })
+        res.end()
+        return
+      }
+      res.writeHead(403, 'Forbidden')
+      res.end()
+    }
+  },
   {
     path: '/api/users',
     async handler(req, res, next) {
       if (req.method === 'POST') {
         await addUser(req.body)
         res.json({ success: true })
         res.end()
+        return
       }
       res.writeHead(403, 'Forbidden')
       res.end()

db.js

@@ -18,3 +18,18 @@ export async function addUser(user) {
   user.password = await hashPassword(user.password)
   db.users[user.email] = user
 }
+
+function checkPassword(password, user) {
+  return new Promise((resolve) => {
+    bcrypt.compare(password, user.password, (err, result) => {
+      resolve(err ? false : result)
+    })
+  })
+}
+
+export function authUser({ email, password }) {
+  if (email in db.users && db.users[email]) {
+    return checkPassword(password, db.users[email])
+  }
+  return false
+}

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@nuxt/http": "^0.1.1",
     "bcrypt": "^3.0.6",
-    "body-parser": "^1.19.0"
+    "body-parser": "^1.19.0",
+    "jsonwebtoken": "^8.5.1"
   }
 }

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    Hello, {{ user.name }}!
+    Hello, {{ user.email }}!
   </div>
 </template>
 

pages/login.vue

@@ -3,10 +3,10 @@
     <h2>Login</h2>
     <input
       placeholder="Email"
-      :value="form.email">
+      v-model="form.email">
     <input
       placeholder="Password"
-      :value="form.password">
+      v-model="form.password">
     <button @click="login">
       Login
     </button>
@@ -19,7 +19,17 @@ export default {
     form: {}
   }),
   methods: {
-    login() {
+    async login() {
+      const response = await
+        this.$http.$post('api/login', this.form)
+      if (response.token) {
+        this.$store.commit('authUser', {
+          name: this.form.name,
+          email: this.form.email,
+          token: response.token
+        })
+      }
+      this.$router.push('/')
     }
   }
 }

pages/register.vue

@@ -3,15 +3,15 @@
     <h2>Register</h2>
     <input
       placeholder="Name"
-      :value="form.name">
+      v-model="form.name">
     <input
       type="email"
       placeholder="Email"
-      :value="form.email">
+      v-model="form.email">
     <input
       type="password"
       placeholder="Password"
-      :value="form.password">
+      v-model="form.password">
     <button @click="register">
       Register
     </button>
@@ -25,9 +25,9 @@ export default {
   }),
   methods: {
     async register() {
-      const jsonResponse = await 
-        this.$http.$post('api/users', this.form)
-      if (jsonResponse.success) {
+      let jsonResponse = await this
+        .$http.$post('api/users', this.form)
+      if (jsonResponse && jsonResponse.success) {
         this.$router.push('/login')
       }
     }

store/index.js

@@ -1,8 +1,15 @@
 export const state = () => ({
   user: {
-    authenticated: false,
-    id: null,
     email: null,
-    name: null
+    token: null,
+    authenticated: false    
   }
 })
+
+export const mutations = {
+  authUser(state, user) {
+    state.user.email = user.email
+    state.user.token = user.token
+    state.user.authenticated = true
+  }
+}