🔨 Fix user login/register

User can login and register but session is not persistent.

server/routes/auth.js

@@ -2,13 +2,22 @@ const express = require('express');
 const passport = require('passport')
 const router = express.Router();
 
-router.get('/auth/login', passport.authenticate('local'),
+router.post('/auth/login',
-    (req, res) => {
+    (req, res, next) => {
-        res.redirect('/dashboard');
+        passport.authenticate('local', {}, (err, user, info) => {
+            if (err)
+                return res.status(400).json({errors: err});
+            if (!user)
+                return res.status(400).json({errors: info});
+
+            req.logIn(user, () => {
+                return res.status(200).json({success: `logged in ${user.id}`});
+            });
+        })(req, res, next);
     }
 );
 
-router.get('/auth/logout', (req, res) => {
+router.post('/auth/logout', (req, res) => {
     req.logout();
     res.redirect('/');
 });
@@ -17,8 +26,4 @@ router.get('/auth/current_user', (req, res) => {
     res.send(req.user);
 });
 
-router.get('/auth/works', (req, res) => {
-    res.send('Become powerful you have, the dark side in you I sense. Yrsssss.');
-});
-
 module.exports = router;

web/src/main.ts

@@ -2,9 +2,11 @@ import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import axios from 'axios';
 
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import '@fortawesome/fontawesome-free/js/all.js';
 
+axios.defaults.withCredentials = true;
 createApp(App).use(store).use(router).mount('#app')

web/src/store/index.ts

@@ -23,7 +23,11 @@ export default createStore({
     actions: {
         login({commit}, user: { username: string, password: string }) {
             return new Promise((resolve, reject) => {
-                axios({method: 'post', url: 'http://localhost:8000/auth/login', data: qs.stringify({user})})
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8000/auth/login',
+                    data: qs.stringify({...user})
+                })
                     .then((resp: AxiosResponse) => {
                         commit("auth_success", user);
                         resolve(resp)
@@ -43,6 +47,6 @@ export default createStore({
     },
     modules: {},
     getters: {
-        isLoggedIn: state => !!state.status,
+        isLoggedIn: state => state.status,
     }
 })

web/src/views/Login.vue

@@ -9,7 +9,7 @@
         <form @submit.prevent="login">
           <div class="field">
             <p class="control has-icons-left has-icons-right">
-              <input class="input" placeholder="Username" type="text" v-model="username">
+              <input v-model="username" class="input" placeholder="Username" type="text">
               <span class="icon is-small is-left">
       <i class="fas fa-user"></i>
     </span> <span class="icon is-small is-right">
@@ -18,14 +18,14 @@
           </div>
           <div class="field">
             <p class="control has-icons-left">
-              <input class="input" placeholder="Password" type="password" v-model="password">
+              <input v-model="password" class="input" placeholder="Password" type="password">
               <span class="icon is-small is-left">
       <i class="fas fa-lock"></i></span>
             </p>
           </div>
           <div class="field">
             <p class="control">
-              <button type="submit" class="button is-success">
+              <button class="button is-success" type="submit">
                 Login
               </button>
             </p>