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:
- FIRST PART
- 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.
- 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
};
- THIRD PART:
now lets create a function to save data into a device local storage:
function cacheUserData(data) {
storage.setItem('exampleUserData', JSON.stringify(data));
}
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;
}
};
Let's break down this code step by step:
Function Signature
JavaScript
function myReducer(state = initialState, action) {
// ...
}
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.
Switch Statement
JavaScript
switch (action.type) {
// ...
}
This switch statement checks the type property of the action object and executes the corresponding code block.
LOGIN Case
case "LOGIN":
cacheUserData(action.payload);
return {
userData: action.payload,
timestamp: Date.now(),
isLoggedIn: true
};
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.
LOGOUT Case
JavaScript
case "LOGOUT":
storage.removeItem('exampleUserData');
return {
userData: null,
timestamp: null,
isLoggedIn: false
};
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.
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;
};
Code Breakdown
Let's dissect the userData function step by step:
Function Signature
JavaScript
const userData = async (type) => {
// ...
}
This asynchronous function, userData, accepts two parameters:
type: A string indicating the type of action (e.g., "LOGIN" or "LOGOUT").
Fetching User Data
JavaScript
const userData = await fetchUserData();
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 });
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.
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;
These lines update two properties of the state object:
timeStamp: Set to the value of timestamp.
isLoggedIn: Set to its own value.
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
}
Logout Data:
JSON
{
"userData": null,
"timestamp": null,
"isLoggedIn": false,
"timeStamp": null
}
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:
Top comments (1)
My first time posting any suggestion is welcome.