DEV Community

Cover image for Vanilla JavaScript Login Status Monitor
travahnetshisaulu
travahnetshisaulu

Posted on

Vanilla JavaScript Login Status Monitor

Introduction

In this article, we'll explore how to build a simple login status monitor using Vanilla JavaScript. We'll cover the basics of user login status management, including storing user data locally and handling login and logout actions. By the end of this article, you'll have a solid understanding of how to implement a login status monitor using Vanilla JavaScript.

In the realm of web development, JavaScript remains a cornerstone technology. While frameworks and libraries can simplify development, mastering Vanilla JavaScript provides a solid foundation for understanding the language's intricacies. As a best practice, I recommend that developers, especially those new to the field, focus on honing their Vanilla JavaScript skills before exploring frameworks.

The Importance of Tracking User Login Status
Effectively managing user login status is crucial for ensuring the security, efficiency, and overall user experience of web applications. The benefits of implementing user login tracking include:

  1. FIRST PART
  2. Enhanced Security: Prevent unauthorized access to sensitive data by requiring users to log in before gaining access. Optimized Resource Utilization: Minimize unnecessary requests to the server by storing data locally and updating only when changes occur.
  • Data Integrity: Ensure data consistency by controlling modifications, additions, and deletions.
    Improved User Experience: Utilize timestamps to automatically log out inactive users, enhancing security and streamlining the user experience.

  • Seamless Server Interaction: Establish a robust communication channel between the client and server, enabling efficient data exchange and synchronization.

By implementing a well-designed user login tracking system, developers can significantly enhance the security, performance, and overall quality of their web applications.

  1. SECOND PART:

now Lets us dive into the code:

firstly, lets a variable to access device local storage:
const storage = window.localStorage;

secondnly we gonna create a variable that has the value of initial/default data.
The same data values will be updated whenever new data arrived or changed.

here is the variable:

const initialState = {
     userData: storage.getItem('exampleUserData') || null,
     timestamp: null,
     isLoggedIn: false
        };
Enter fullscreen mode Exit fullscreen mode
  1. THIRD PART:

now lets create a function to save data into a device local storage:

function cacheUserData(data) {
  storage.setItem('exampleUserData', JSON.stringify(data));
}
Enter fullscreen mode Exit fullscreen mode

now lets create our main part of the code,
which is our reducer funtion,

this function will be responsible for controlling data by insert, update, delete from our device local storage.

Here is the code:

function myReducer(state = initialState, action) {
  switch(action.type) {
    case "LOGIN":
      cacheUserData(action.payload);
      return {
        userData: action.payload,
        timestamp: Date.now(),
        isLoggedIn: true
      };

    case "LOGOUT" : 
      storage.removeItem('exampleUserData');
      return {
        userData: null,
        timestamp: null,
        isLoggedIn: false
      };  
    default:  
      return state;
  }
};

Enter fullscreen mode Exit fullscreen mode

Let's break down this code step by step:
Function Signature
JavaScript

function myReducer(state = initialState, action) {
  // ...
}
Enter fullscreen mode Exit fullscreen mode

This is a reducer function, which is a key concept in state management libraries like Redux. The reducer takes two arguments:

state: The current state of the application. If no state is provided, it defaults to initialState.
action: An object that describes the action to be performed.
Enter fullscreen mode Exit fullscreen mode

Switch Statement
JavaScript

switch (action.type) {
  // ...
}
Enter fullscreen mode Exit fullscreen mode

This switch statement checks the type property of the action object and executes the corresponding code block.
LOGIN Case

Image description
JavaScript

case "LOGIN":
  cacheUserData(action.payload);
  return {
    userData: action.payload,
    timestamp: Date.now(),
    isLoggedIn: true
  };
Enter fullscreen mode Exit fullscreen mode

When the action.type is "LOGIN", the reducer:

Calls the cacheUserData function with the action.payload (which contains the user data).
Returns a new state object with the following properties:
    userData: The user data from the action.payload.
    timestamp: The current timestamp.
    isLoggedIn: Set to true.
Enter fullscreen mode Exit fullscreen mode

LOGOUT Case
JavaScript

case "LOGOUT":
  storage.removeItem('exampleUserData');
  return {
    userData: null,
    timestamp: null,
    isLoggedIn: false
  };
Enter fullscreen mode Exit fullscreen mode

When the action.type is "LOGOUT", the reducer:

Removes/dete the user data from storage using storage.removeItem.
Returns a new state object with the following properties:
    userData: Set to null.
    timestamp: Set to null.
    isLoggedIn: Set to false.
Enter fullscreen mode Exit fullscreen mode

Default Case
JavaScript

default:
return state;

If the action.type doesn't match any of the above cases, the reducer simply returns the current state without making any changes.
In summary, this reducer function manages the user login state by responding to "LOGIN" and "LOGOUT" actions.

Finally but not least, the following is the function that will be used as an output of the correct data.
Important: We were suppoesd to add export to this function so that it can be use in other files, but because here it is in a single file, we dont have to. You can visit the github link bellow, to see a bigger project that has the same functionality.

User Data Management Functionality
In this section, we'll explore the userData.js function, which plays a crucial role in managing user data.
userData Function Code
JavaScript:

const userData = async (type) => {

    const userData = await myUserData;
    const state = myReducer(undefined, { type: type, payload: userData });

    state.timeStamp = state.timestamp;
    state.isLoggedIn = state.isLoggedIn;

    return state;
};
Enter fullscreen mode Exit fullscreen mode

Code Breakdown
Let's dissect the userData function step by step:
Function Signature
JavaScript

const userData = async (type) => {
  // ...
}
Enter fullscreen mode Exit fullscreen mode

This asynchronous function, userData, accepts two parameters:

type: A string indicating the type of action (e.g., "LOGIN" or "LOGOUT").
Enter fullscreen mode Exit fullscreen mode

Fetching User Data
JavaScript

const userData = await fetchUserData();
Enter fullscreen mode Exit fullscreen mode

This line fetches user data from the specified urlLink using the fetchUserData function. The await keyword ensures that the code waits for the promise to resolve before proceeding.
Calling the Reducer

JavaScript:

const state = myReducer(undefined, { type: type, payload: userData });
Enter fullscreen mode Exit fullscreen mode

This line calls the myReducer function, passing:

undefined as the initial state.
An object with two properties:
    type: The type argument passed to the userData function.
    payload: The fetched user data.
Enter fullscreen mode Exit fullscreen mode

The reducer returns a new state object, which is assigned to the state variable.
Updating State Properties

JavaScript:

state.timeStamp = state.timestamp;
state.isLoggedIn = state.isLoggedIn;
Enter fullscreen mode Exit fullscreen mode

These lines update two properties of the state object:

timeStamp: Set to the value of timestamp.
isLoggedIn: Set to its own value.
Enter fullscreen mode Exit fullscreen mode

Returning the State
JavaScript

return state;

Finally, the function returns the updated state object.
Example Output
When we call the userData function with different actions, we get the following output:
Login Data:
JSON

{
  "userData": {
    "name": "Trevor",
    "Surname": "Mudau",
    "contact": "076 335 8888",
    "email": "example@email.com",
    "password": "12345"
  },
  "timestamp": 1733057702748,
  "isLoggedIn": true,
  "timeStamp": 1733057702748
}
Enter fullscreen mode Exit fullscreen mode

Logout Data:
JSON

{
  "userData": null,
  "timestamp": null,
  "isLoggedIn": false,
  "timeStamp": null
}
Enter fullscreen mode Exit fullscreen mode

As you can see, our code is capable of removing data when the user logs out. We can also utilize the timeStamp to automatically log out the user after a prolonged period of inactivity or when the website tab is closed.

For a full code including dom manupulation visit the github link:

https://github.com/TrevoDng/logig-status-monitor-frontend

Top comments (1)

Collapse
 
travah1 profile image
travahnetshisaulu

My first time posting any suggestion is welcome.