jsonvue.jsauthenticationcookies

I want to create a login with a cookie and check the database if I am logged in, but the cookie is not created, I don't know where I went wrong

I'm new to programming and I don't know how to complete this login with cookie and local json database, but I think I'm on the right track. Thanks in advance for your help.

This is my local json database db.js:

{
    "users": [
      {
        "username": "Trpimir",
        "email": "ttom@gmail.com",
        "password": "Password123",
        "id": 1
      },
      {
        "username": "user2",
        "email": "user1@gmail.com",
        "password": "user12345",
        "id": 2
      }
    ]
  }

This is my login component:

<script setup>
import { ref, onMounted } from 'vue'
import VueCookies from 'vue-cookies'
import axios from 'axios';

const LogInModalVisible = ref(false)

var baseURL = 'http://localhost:3000/'
var userURL = baseURL + "users";

let users = ref(null)
let username = ref(null)
let email = ref(null)
let password = ref(null)
let login = ref(true)
let signup = ref(true)

let usernameError = ref(null)
let emailError = ref(null)
let passwordError =ref(null)
let passwordValidation = ref(false)
let signupvalidation = ref(false)


onMounted(async () => {
    try {
            const res = await axios.get(baseURL + 'users');
            users = res.data;
            /* console.log(users) */

            /* loginSubmit() */
        } catch (e) {
            console.error(e)
        }
  })

async function loginSubmit()
{
    if(email.lenght == 0)
    {
        this.emailError = "Field is empty"
    }
    else
    {
        this.emailError = null
    }

    if(password.length == 0)
    {
        this.passwordError = "Field is empty!";
    }
    else if(password.length>0 && password.length<8)
    { 
        this.passwordError = "Password is too short!"
    }
    else
    {
        this.passwordError = null
    }

    /* const res = await axios.get(userURL);
    this.users = res.data; */

   for (var i = 0; i <users.length; i++)
            {
                if (this.users[i].email == this.email.value)
                {
                    if (this.users[i].password == this.password.value)
                    {
                        this.passwordValidation = true;
                        VueCookies.set('username', this.users[i].username, "120min");
                        VueCookies.set('email', this.email.value, "120min");
                        VueCookies.set('password', this.password.value, "120min");
                        VueCookies.set('id', this.users[i].id, "120min");

                        window.location.href = '/';
                        alert("Login successful");
                    }
                }
            }
             if(this.passwordValidation == false){ this.passwordError = "Incorrect password or username!"}
        }

</script>

<template>
    <div v-if="login">
        <el-dialog v-model="LogInModalVisible" title="LogIn" width="50%" height="50%" center>
            <el-form label-position='top' status-icon :label-width="80">

                <el-form-item label="Email">
                    <el-input type="email" id='email' aria-placeholder="Enter Email" v-model="email" />
                    <div class="input-message" v-if="emailError">
                        <h6>{{emailError}}</h6>
                    </div>
                </el-form-item>

                <el-form-item label="Password">
                    <el-input type="password" id='password' aria-placeholder="Enter Password" v-model="password" />

                    <div class="input-message" v-if="passwordError">
                        <h6>{{passwordError}}</h6>
                    </div>
                </el-form-item>
            </el-form>
            <div class="footer">
                <span>
                    <el-button @click="LogInModalVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="LogInModalVisible = false; loginSubmit()">
                        LogIn
                    </el-button>
                </span>
                <div class="linkDiv">
                <p>Not a member?</p>
                <el-link type="primary" @click='login =  false'>Sign-up now!</el-link>
            </div>
        </div>
        </el-dialog>
    </div>

    <div v-else>
        <el-dialog v-model="LogInModalVisible" title="SignUp" width="50%" height="50%" center>
            <el-form lebel-position='top' status-icon :label-width="80">

                <el-form-item label="Username">
                    <el-input type="text" id="username" aria-placeholder="Enter Username" v-model="username" />
                    <div class="input-message" v-if="usernameError">
                        <h6>{{ usernameError }}</h6>
                    </div>
                </el-form-item>

                <el-form-item label="Email">
                    <el-input type="email" id="email" aria-placeholder="Enter Email" v-model="email" />
                    <div class="input-message" v-if="emailError">
                        <h6>{{ emailError }}</h6>
                    </div>
                </el-form-item>

                <el-form-item label="Password">
                    <el-input type="password" id="password" aria-placeholder="Enter Password" v-model="password" />
                    <div class="input-message" v-if="passwordError">
                        <h6>{{ passwordError }}</h6>
                    </div>
                </el-form-item>
            </el-form>
            <div class="footer">
                <span class="dialog-footer">
                    <el-button @click="LogInModalVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="LogInModalVisible = false">
                        SignUp
                    </el-button>
                </span>
                <div class="linkDiv">
                <p>Already a member?</p>
                <el-link type="primary" @click='login =  true'>Log-In now!</el-link>
            </div>
        </div>
        </el-dialog>
    </div>
</template>

<style scoped>
.linkDiv{
    padding-top: 15px;
}
p {
    padding-bottom: 10px;
}
.footer{
    text-align: center;
    padding-top: 10px;
}
</style>

I think I've done most of it and I don't have any errors, just the cookie is not created

Solution

    1. You don't need to use this in vue3. to assign a value to ref or to read a value from ref use

    2. I am not sure what you are trying to do, but looping through users value in the database to match user name and password is not a good idea, and also it is not a good idea to set the password in the cookie.

    3. Nevertheless just to address your cookie issue. I commented out non-relevant sections and tried it and it works perfectly. i also removed the for loop..

    async function loginSubmit() {
      // if (email.value.length == 0) {
      //   emailError.value = "Field is empty";
      // } else {
      //   emailError.value = null;
      // }
    
      // if (password.value.length == 0) {
      //   passwordError.value = "Field is empty!";
      // } else if (password.value.length > 0 && password.value.length < 8) {
      //   passwordError.value = "Password is too short!";
      // } else {
      //   passwordError.value = null;
      // }
    
      if (users.value[0].email === email.value) {
        if (users.value[0].password == password.value) {
          console.log("Login successful");
          VueCookies.set("username", users.value[0].username, "120min");
          VueCookies.set("email", email.value, "120min");
          VueCookies.set("password", password.value, "120min");
          VueCookies.set("id", users.value[0].id, "120min");
    
          window.location.href = "/";
          alert("Login successful");
        }
      }
      if (this.passwordValidation == false) {
        this.passwordError = "Incorrect password or username!";
      }
    }

    The cookie was set without any issues.

    enter image description here

    1. Since you are beginner i would suggest to tackle issues one by one. i.e test if user is fetched...then make a user login and validate it and then set cookie and then handle for multiple users. it will be easier to track.

    2. It is also recommended that when you seek help in stackoverflow etc, you post a working example, so that people can look at the code and help. You can use sites like stackblitz etc to replicate your vue app on the cloud.