Authentication

Our template uses JWT token for validating JSON data.

Login

When users enter their username and password into the login form, the system verifies these credentials against the database. If the information matches the records and a successful API request is returned, the user is granted access to the system.

We've created a loginUsers action in src/store/userStore, allowing you to enter the user data upon login.

File: src/store/userSlice

const initialState = {
    accessToken: window.localStorage.getItem("access-token") || "",
    userPermissions: window.localStorage.getItem("user-permissions") || "",
    userData: window.localStorage.getItem("user-data") || {}
};
/* ... */

Here's an example of a simple login page with user authentication:

<template>
  <EForm @submit.prevent="submit">
    <EInput type="email" v-model="email"/>
    <EInput type="password" v-model="password"
  </EForm>
</template>
<script setup>
  // ** Vars
  const email = ref("[email protected]")
  const password = ref("123456")

  // ** Functions
  const submit = async () => {
    const {data, error} = await $api("/login", {
      method: "POST",
      body: JSON.stringify({
        email: email.value,
        password: password.value
      })
    }).json()
    await userStore.loginUser(data.value.data.data)
  }
  }
</script>

We auto store the data in local storage with the below-mentioned key names to preserve your browsing history during reloads.

✅ access-token

✅ user-data

✅ user-permissions (for more info refer to Access Control page)

Logout

Upon logout, we clear all user data using the logoutUser action in src/store/userStore. This process involves deleting sensitive information, including login credentials, access tokens, and any special permissions granted during the session. This step is essential for maintaining the privacy and security of user accounts.